【前端技术文档】PS快速切图方法

整    理:贾会迎、晋哲

时    间:2016-02-05

说    明:PS处理同类型不同尺寸图标的快捷方法

问题:当同一版块中的每个图标的宽高各异时,在切图时需要为这些图标设置一个统一的宽高,方便样式统一编写。如何快速准确的确定切图尺寸,同时分成两套不同状态样式?

例如以下按钮的图标:
p-1

操作步骤
一、同时选择几个图标的图层
p-2

二、复制图层—新建—裁切(透明像素部分)。得到如下图
p-3

三、统一颜色样式(将绿色图标改为灰色)
1、提取颜色值,可保存至背景色
p-4
2、在图层空白处双击,调出“图层样式”面板,设置“颜色叠加”
p-5
3、图标颜色改变为灰色(效果)
p-6

四、将图标水平垂直居中,多个图标重叠显示,来确定图标的准确尺寸。
p-7

五、确定图标大小,逐一显示并保存
1、裁切透明像素,获得图标的准确大小
p-8
2、查看此时“图像--画布”大小,根据图标实际需要设置最大宽高值,最好设置为偶数,以方便样式设置。如下图,高度可以设42px、46px、50px等等
p-9

p-10
3、按设计图顺序逐一显示图层并保存

六、设置第二套状态样式(如图绿色)。
1、提取交互图标的颜色,可保存在前景色中
p-11
2、在图层空白处双击,调出“图层样式”面板
p-12

p-13
3、选择打开“颜色叠加”面板,设置叠加的颜色
p-14
4、在图层区域右击,选择“拷贝图层样式”
p-15
5、选中其他图层,右击选择“粘贴图层样式”,后逐一显示并保存图片。
p-16

p-17

p-18

七、保存的图标文件效果,注意按照设计图顺序和统一的规则命名
p-19

发表评论