切图

切图

一、 设置默认选项(保存工作区)

1.编辑菜单-首选项-单位与标尺-标尺&文字的单位:像素(px)
2.窗口菜单-打开面板(其它关掉):图层、信息、历史记录、选项、工具
3.视图菜单-打开功能:对齐(吸附效果)、标尺、显示额外内容、显示-参考线(从标尺拖出)

二、 工具(选项)面板

1.移动:勾选“自动选择”,下拉列表选择“图层”
2.魔棒:容差-越小越精确

三、 设计稿信息

1.尺寸信息:文字大小、行高:

单独文字图层:选择文字工具(工具面板)-选择文字-查看选项面板(行高需点出右侧小文件夹按钮)
合并背景图层:矩形框工具手测(不同字体有误差,尽量选择稍大的字),行高-第一行字下~第二行字下

2.颜色信息:字体取色与字体尺寸获取相似(单独&合并),有叠加效果的不可看字体信息,应用取色器

四、 快捷键

1.撤销多步:ctrl+alt+z
2.缩放:ctrl+1(100%) / alt+滚轮 / ctrl+”-“”+”
3.添加到选区:shift / 从选区减去:alt / 与选区交叉:shift+alt(两边各选一点选区相加,可测量两点之间距离(含))
4.新建:ctrl+n
5.存储为WEB格式:alt+shift+ctrl+s(背景内容要选透明)

五、 切图

1.带文字的,隐藏文字只留背景(除非文字有特效)

单独文字图层:隐藏文字图层
合并背景图层:
-可拉伸:矩形选框选一部分背景,按crtl+t自由变换,往右拉隐藏文字,后双击。
-不可拉伸(有纹理):矩形选框选一部分背景,按alt往右逐步盖住文字。(按shift可保持水平稳定移动)

2.单个图层:移动工具选择 / 多个图层:图层面板中ctrl选择,ctrl+e合并
3.切片:拉参考线-切片工具(裁剪下)-选项栏“基于参考线切片”

六、 图片类型

1.JPG:色彩丰富,无透明效果(品质60~80即可)
2.PNG8:色彩不太丰富,无论有无透明效果?(256色,扩散改为无仿色,无杂边,可存储预设)
3.PNG24:半透明效果(阴影),IE6不支持PNG24半透明
4.PSD:为保证图片质量、图层,保留一份PSD,要修图的在PSD修改后导出

七、 修改与维护

1.修改PNG8图片时,须设图像菜单-模式-索引颜色改为RGB颜色(否则颜色值不正确)
2.更改画布大小:图像菜单-画布大小-定位改为左上角(CSS定位属性可不用更改)

八、 图片合并

CSS-sprite

原文地址:https://www.cnblogs.com/qiuchen/p/4732596.html