U大侠教你怎么使用PS切图具体操作方法

编辑:chenbx123 来源:U大侠 时间:2017-04-01

  什么是PS切图呢?使用PS切图的目的其实就是将大的设计图分割成多个小图片,通过网页代码定位后台相册的照片来显示前端网页的效果,当然,在处理某X宝的图片的时候也是可以使用该方法的。下面来看看具体的操作方法吧。

  具体方法:

  1、先说下软件,PhotoShop CS5,你要用其他版本也行,反正对切图这个功能影响不大。

  2、如上图红框所示,我们要用到的切图工具有两个,一个是切片工具,另一个是切片选择工具。左边有个小按钮,你按住它这三个选项就会显示出来。

  4、在切图之前有一点需要说明的是,如果你需要辅助切图,你可以先添加参考线。在PS上方的菜单栏,你可以在视图里找到新建参考线选项。如上图,我已经添加两条参考线,因为参考线在鼠标靠近的时候有吸附功能,所以切图不容易切错位置。

  5、好了现在我们开始切图,我用切图工具先裁一个框出来,我们可以看到图片上已经有01的框,但是右边02显示为灰色。

  6、我继续用切图工具裁第二个框,记住01和02的框一定要贴合,否则会出现一个03的框。如果你这次切图位置没切对,可能给后面带来麻烦的是换图片会比较麻烦。这个时候切图的框是可以移动的,你可以把鼠标放在边框上试着移动下,看下效果。你只能移动02,不能移动01。

  7、当我发现切图的位置出现错误,开始调整,刚才我把02位置往右挪好,它从02变成了03。

分享: