前端1页面制作1——Photoshop切图
专业设计师产出设计稿(.psd文件)交给前端开发工程师;前端从设计稿切出网页素材,包括按钮、图表、logo、背景图、其它内容性图片等;按效果图编写代码实现静态页面。
使用PS进行切图,PS适合图片制作和编辑,不适合预览。03年Adobe Photoshop CS,CS6是CS系列的最后一个版本。13年Adobe Photoshop CC。
1、面板、工具、辅助视图
(1)首选项设置
编辑->首选项->单位与标尺->标尺、文字改为像素。
(2)面板
窗口->工具、选项、信息(F8)、图层(F7)、历史记录均开启。
窗口->工作区->新建工作区。(如果工作区被破坏,可以重新选择工作区。)
工具面板:列出了提供的所有工具。左上角有个键更高单列或两列布局。
选项面板:与当前选中工具一一对应,对当前工具的配置。
信息面板:颜色、位置、尺寸。
图层面板:当前打开文件的所有图层,添加、删除、隐藏、改变图层层级。
历史记录面板:回到任意一步历史步骤。撤销Ctrl+Z按一次撤销一步,再按一次恢复这一步;Ctrl+Alt+Z连续撤销;或者在历史面板选择。
(3)常用工具:
移动:自动选择,选择图层而不是组。组是相关图层的集合,组可以嵌套。
矩形选框:信息面板中显示该框的宽度、高度,单位像素大小。
魔棒:容差越小,选择的颜色范围就越小,0指单一颜色。消除锯齿,在选取范围的时候让边缘光滑一点。连续。
裁剪、切片。矩形框选中一片区域->图像->裁剪。
缩放:默认放大,在选区面板可以换缩小。Ctrl+加号、减号,+1显示为100%。“Alt+鼠标滚轮”更常用。
取色器:吸取颜色。
(4)辅助视图
对齐:开启对齐后,图层移动过程中靠近文档边缘、参考线及其它图层时会有吸附力。
标尺:Ctrl+R,从标尺可以脱出参考线。
显示->参考线:C trl+;,需勾选显示额外内容。
2、测量、取色
打开设计稿,获取信息,这些信息往往对应CSS中某些属性。
尺寸信息:width:200px; 颜色信息:color:#ffcc00
(1)测量
所有数字都需要测量:宽度、高度、内边距、外边距、边框、定位、文字大小、行高、背景图位置。尽可能还原设计稿。
矩形选框工具&信息面板作测量。尽可能画布放大,减少测量误差。画布太大时,可以在画布一侧画一个小矩形框,在另一侧画一个添加到选区,方便测量。
文字大小和行高:如果文字是单独的文字图层,选中文本工具在该图层上单击,选项面板显示文字大小,点击“切换字符和段落面板”按钮,显示行高。否则用矩形选框,量取字的高度和行高(从某一行下面到下一行下面)。
(2)取色
所有颜色都要取色:边框色、背景色、文字色。
拾色器&吸管工具用来取色。
文本颜色:选项面板“设置文本颜色”按钮;或画布放大,吸取颜色。如果文字有一些叠加的效果,不适合用文本工具,此时用吸管。
用吸管确定背景是否为纯色,用魔棒工具确定背景是否是渐变。
3、切图
网页上的图片分为两类:修饰性的,一般用在background属性,包括图标、logo、有特殊效果的按钮和文字等、非纯色背景;内容性的,一般用在img标签,包括Banner、广告图片、文章中的配图。修饰性的图片保存为png24(图片质量较高,支持全透明和半透明,IE6不支持该半透明)或png8(仅支持全透明);内容性的图片一般保存为.jpg;不用切的图片,只需要用img占位。有时需要压缩减小图片大小。
(1)隐藏文字,只留背景
因为文字是写到HTML标签里,需要隐藏文字。除非是一些特殊的文字,比如文字有一些特殊的效果,没法用代码写出来。
若文字为独立图层,去掉眼睛图标,隐藏文字图层。
若文字和背景合并,平铺背景覆盖文字。用矩形选框工具,在背景上画一个矩形框;适合拉伸的背景用*变换(ctrl+T);对于有纹理效果的背景等,不适合拉伸,用移动工具+Alt,Alt使只在X方向移动。
(2)切图
png24切图:移动工具选中所需图层(按住ctrl多选);右键合并图层(ctrl+E);右键复制图层到新文件或直接拖动至已有文件(新建Ctrl+N)。
png8切图:不支持半透明效果,要带背景切。图层->合并(可见)图层(Shift+Ctrl+E);矩形选框工具选择内容;魔棒工具去除多余部分,按住Alt从选区中减去。
(3)可平铺背景切图
主要针对CSS里background-repeat属性的切图方式。
用矩形选框工具选取一块区域,复制粘贴到新文件(Ctrl+N,背景透明)。平铺内容充满文件的X轴或Y轴。宽度或高度不够可以拉伸。
(4)切片工具
适用于可以一刀切的活动页。
拉参考线;选择切片工具;点击“基于参考线的切片”按钮;在切片工具下面,选择切片工具,双击每一个切片更改切片名称;文件->存储为Web所用格式->缩放->全选切片->统一设置存储格式->保存。
4、保存
(1)步骤
拖动内容至新文件(适用单个图层);
选中区域、复制(Ctrl+C)新建(Ctrl+N)粘贴(Ctrl+V)(适用合并后图层中的一部分)。
存储为Web所用格式(Alt+Shift+Ctrl+S)。
(2)格式
通用的三种格式:.jpg .png .gif,
当图片色彩丰富且无透明要求时,建议保存为JPG格式并选择合适的品质(60~80%),对图片适当压缩。
当图片包含少量的颜色或大面积同色区域(平面颜色),无论有无透明要求,保存为PNG8格式。有256种颜色,文件较小,适合传输。杂边:无;扩散:无仿色;可以将该设置命名保存。
当图片有半透明要求(如阴影),保存为PNG24格式,对图片不进行压缩。
GIF动画能显示几帧序列图像,创建简单的动画。
为了保证图片质量,每一张使用的图片都保留一份PSD原文件,以后在PSD上进行修改。PSD可以保留单独的图层,有利于后期维护;如果连续压缩会导致像素点丢失。
注意:不要给图片增加额外空白空间。事先修改好图像大小。
5、修改与维护
要继续放更多的图片,更改画布大小。图像->画布大小->尺寸、定位左上角。
减小画布到指定区域。选区->图像->裁剪,或裁剪工具。画布稍大于图像区。
移动图标:独立图层,用移动工具拖动;非独立图层,用选区工具选中后拖动。剪切(Ctrl+X)粘贴(Ctrl+V),可以将图层中图标分开。
修改PNG8图片时,需要首先将其颜色模式修改为RGB颜色。因为索引颜色模式会丢失颜色信息。图像->模式->RGB颜色。
6、图片的优化与合并
Sprite拼图:把设计稿上的小图标拼合到同一张图片中。减少网络请求,提升网页加载速度。
平衡大小与质量,压缩工具Minimage无损、TinyPng有损。
图片之间必须保留孔隙,小图标20像素。如果更改按钮大小,CSS里背景图位置属性不须改变;容错,如果CSS设置错误,不会导致下面图片露出来。
排列常用横向排列和纵向排列。
合并原则:同属于一个模块、大小相近、色彩相近。只本页用到的图片合并、集中使用,有状态的图标合并。
7、浏览器兼容方案
IE6不支持PNG24半透明。存两份:高级浏览器PNG24 sprite.png、IE6 PNG-8sprite_ie.png。
高级浏览器CSS3,低级浏览器 切图。或优雅降级,都用CSS3处理,低级浏览器没有这种效果。