前端1页面制作1——Photoshop切图

一、界面设置

1、新建（Ctrl+N） 2、面板 3、其它

二、基本操作

1、常用工具 2、测量、取色 3、切图 4、保存

5、修改与维护 6、图片的优化与合并 7、浏览器兼容方案

专业设计师产出设计稿（.psd文件）交给前端开发工程师；前端从设计稿切出网页素材，包括按钮、图表、logo、背景图、其它内容性图片等；按效果图编写代码实现静态页面。

使用PS进行切图，PS适合图片制作和编辑，不适合预览。03年Adobe Photoshop CS，CS6是CS系列的最后一个版本。13年Adobe Photoshop CC。

一、界面设置

1、新建（Ctrl+N）

2、面板

窗口->工具、选项、信息（F8）、字符、图层（F7）、历史记录均开启。关闭图层右侧的通道、路径，关闭属性等。

窗口->工作区->新建工作区。（如果工作区被破坏，可以重新选择工作区）

工具面板：列出了提供的所有工具。左上角有个键更高单列或两列布局。

选项面板：与当前选中工具一一对应，对当前工具的配置。

信息面板：颜色、位置、尺寸。

图层面板：当前打开文件的所有图层，添加、删除、隐藏、改变图层层级。

历史记录面板：回到任意一步历史步骤。撤销Ctrl+Z按一次撤销一步，再按一次恢复这一步；Ctrl+Alt+Z连续撤销；或者在历史面板选择。

信息->面板选项

3、其它

编辑->首选项->单位与标尺->标尺、文字改为像素。

视图->对齐：开启对齐后，图层移动过程中靠近文档边缘、参考线及其它图层时会有吸附力。

视图->标尺：Ctrl+R，从标尺可以脱出参考线。

视图->显示->参考线：Ctrl+;，需勾选显示额外内容。

视图->显示->智能参考线

二、基本操作

1、常用工具

移动：自动选择，选择图层而不是组。组是相关图层的集合，组可以嵌套。

矩形选框：信息面板中显示该框的宽度、高度，单位像素大小。

魔棒：容差越小，选择的颜色范围就越小，0指单一颜色。消除锯齿，在选取范围的时候让边缘光滑一点。连续。

裁剪、切片。矩形框选中一片区域->图像->裁剪。

缩放：默认放大，在选区面板可以换缩小。Ctrl+加号、减号，+1显示为100%。“Alt+鼠标滚轮”更常用。

取色器：吸取颜色。

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所用格式->缩放->全选切片->统一设置存储格式->保存。

（5）精准切图（CC版本）

利用Photoshop脚本进行一种更快捷精准的切图方法。计算机自动计算，省时省力，尺寸更精确。做一个会PS切图的前端开发

文件->脚本->将图层导出至文件。自动切图时会把每个图层都导出，所花时间可能比较长。

（5）自动切图（CC版本）

做一个会PS切图的前端开发

前端工程师必备的PS技能——切图篇（视频课程，比较繁琐，直接看“传统切图”和“精准切图”就好）

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处理，低级浏览器没有这种效果。