前端开发工程师(简称前端)的上游是UI设计师,大部分的UI设计师都是用photoshop(简称PS)来设计产品效果图的,而前端会使用这个效果图来制作页面,为了能很好地与UI设计师对接以及制作页面,前端需要掌握以下6大PS技能:
一、抠图技巧
抠图是PS中的一个重要功能,它的作用是从图像素材中截取局部需要的图像素材,前端不需要掌握PS中高深的截图技巧,但是工具栏上的矩形、圆形、多边形、魔术棒等选框是需要掌握的,矩形选框可以直接框选透明背景的图像元素,还可以量元素的尺寸,对于一些没有去掉背景的图像素材,如果不想返回到UI那里进行重新修改,可以用多边形或者魔棒工具直接将素材选择出来,提高开发的效率。比如下面的图片,合并了图层,需要把“logo”选择出来,可以用魔术棒选择“logo”以外的区域,然后反选,就可以把logo选出来了。
二、修图技巧
修图,是指对图像进行一些细微的调整,比如去除掉图像上一些不需要的元素,或者切图时想隐藏图层中的元素,但是UI使用的是合并了图层的元素,可以用修图技巧将这个元素去除掉。比如下面这张图片,按钮的文字和按钮合并图层了,我们想去掉文字,可以用矩形选框,然后执行“自由变换”命令,就可以横向拖动覆盖掉文字。
三、图层操作
UI在设计效果图时,会建立很多特殊的图层,这些图层如果直接切图,往往是得不到我们需要的图片,常用的操作是