标签：
目录：
搭建Web开发环境
1.辅助工具——PS（切图、修图、测量）
2.开发、调试工具——常用开发工具和调试工具的功能介绍和使用方法
内容：
切图
设计稿(.pdf文件) ———————————— 产出物(如.png .jpg文件)
素材切出
为什么切图？
给网页提供图片素材
HTML:img <img src="images/avatar.jpg" alt="头像">
CSS:background ".icon{
background-img:url(../images/sprite.png);
background-position:0 0;
}"
// 了解sprite(图片精灵) 推荐阅读：《谈谈CSS Sprites(css精灵)》http://www.css88.com/archives/756
课程内容：使用PS工具、使用背景图、图片合并方案、浏览器兼容
Photoshop简介与基本设置
版本：03年Adobe Photeshop CS
13年Adobe Photoshop CC(CS6是CS系列最后要给版本)
CC:官网 （购买或使用版本）：http://www.adobe.com/products/photoshop.html
0—设置：
1.PS首选项设置
编辑>首选项>单位与标尺 标尺/文字：像素
面板
2.在“窗口”菜单下开启：工具、选项、信息(F8)、图层(F7)、历史纪录 >>保存：窗口>工作区>新建工作区(命名)
切图常用工具：移动工具/矩形选框工具/魔棒工具/裁剪+切片工具/缩放工具( ctrl + & _ )/取色器
移动工具：选择和移动图层
//设置：（选项区）自动选择：图层
//撤销：ctrl+z ; 连续撤销：ctrl+alt+z ; 回到以前：选择历史纪录
矩形选框工具：测量
魔棒工具：抠图（不规则小图标）>>容差/消除锯齿/连续
裁剪+切片（小三角）工具：拖动 （二者是同一组工具）
缩放工具：ctrl + & _ 100%:ctrl+1 缩放：alt+鼠标滚轮(正反)
3.辅助视图
在“视图”菜单下开启：对齐、标尺ctrl+R、显示>参考线ctrl+;(需勾选显示额外内容)
1-获取信息(设计稿)
打开设计稿，获取信息
尺寸信息>>测量：width:200px;
颜色信息>>取色：color:#ffcc00;
1.1-测量(所有数字都要测量)
//使用工具：矩形选框面板&信息面板（测量时，尽可能把画布放大一些，以减少测量的误差）
哪些需要测量呢？CSS中所有能够接受数值型的属性都需要测量，具体有：
宽度、高度/内边距、外边距/边框/定位/文字大小/行高/背景图位置
width;height;padding;margin;border;top,right等；font-size;line-height;background-position;
//文字大小：单独图层，使用文字工具T，查看选项面板；若文字已经合并在背景图中，矩形选框，文字的高度就是字号大小，不同字体有误差
//行高：单独图层，文字工具T，选项面板-属性面板，行高即line-height;若合并，矩形选框，放大，第一行的下面到第二行的下面
测量.选区
矩形选框工具(默认是新选区，即唯一一个选区) // 选区：矩形选框工具选择的区域，可多个叠加/删减/交叉
添加到选区：按住shift; 从选取减去：按住alt; 与选取交叉：按住shift+alt;
//小技巧：大图的测量宽度>>左右两边画小图（shift），宽度为小图从最左到最右的宽度；
1.2-取色(所有颜色都要取色)
使用工具：拾色器&吸管工具（取色时尽量放大）
哪些需要取色？CSS中能接受颜色值的属性都要取色，具体有：
边框色、背景色、文字色 （border-color、background-color、color）
//文字：单独图层，使用文字工具T获得；合并了，放大，吸管拾色；文字图层有叠加效果的，拾色器+吸管工具，小心锯齿，选择深的地方；
取色工具的巧用：确定背景是否为纯色>>不停的点击，观察颜色值是否变化
确定是否为线性渐变>>魔棒工具(容差较小的情况下，颜色选定区域，比如Y轴渐变或X轴渐变)
2-切图
2.1-切图之前
哪些是需要切出来的？一般分为两类：
修饰性的（一般用在background属性）：图标、logo/有特殊效果的按钮、文字等/非纯色的背景；
内容性的（一般用在img标签）：Banner、广告图片/文章中的配图（若是服务器中的数据，可以不切图，只占位）...；
切出来的图片，存为哪种类型？
内容性的：一般存为JPG（颜色比较丰富，当然会做些压缩，保证图片不要太大）；
修饰性的：PNG24(IE6不支持半透明，需要对IE6做兼容)、PNG8；（都支持全透明，但PNG24支持半透明，图片质量比较高PNG8不支持半透明）
2.2-切图.隐藏文字只留背景
//有特殊效果的除外，特殊效果的切成图片
若文字为独立图层，使用移动工具找到文字图层，去掉眼睛；
文字和背景合并，平铺背景覆盖文字：矩形选框工具 + 自由变换ctrl+T（适用于背景可拉伸平铺）
or 移动工具+Alt拖动（若沿水平方向移动，可按住shift）,不断拖动、放开（适用于背景有纹理，不适合拉伸）
切图.png24
移动工具选中所需图层（按住ctrl多选）>右键合并图层（ctrl+E）>再右键复制图层到新文件(目标：新建，命名)或直接拖至已有文件（新建：ctrl+N）
//单一图层，直接到第三步
切图.png8
带背景切>因为png8不支持半透明效果，很多小图片上面其实有一些半透明的像素点，因此需要带着背景切
合并（可见）图层（shift+ctrl+E或选择图层-合并可见图层）>矩形选框工具选择内容>魔棒工具去除多余内容（从选区中减去：按住alt）
//不可见图层不会合并
可平铺背景的切图
用矩形选框工具选取一块区域>复制粘贴到新文件中 //平铺内容充满文件的宽(X轴)或高(Y轴)
//切片工具
适用于可以一刀切的活动画面
拉参考线>选择切片工具>点击“基于参考线的切片”按钮(可编辑命名切片)>保存（全选切片，统一设置存储格式：文件-存储为Web所用格式）
2.3-保存(存储所需内容)
独立图片，使用拖动工具拖到新的文件里即可；
已经合并的图层，使用矩形选框工具+魔棒>>复制(ctrl+C)、新建(ctrl+N)、粘贴(ctrl+V) / 或拖动至新文件>>存储为Web所用格式(alt+shift+ctrl+S)(文件菜单下)
//ctrl+N:设置下宽高，背景一般选为透明；
保存为哪种格式？
A.当图片色彩丰富且无透明要求时，建议保存为JPG格式并选择合适的品质，来对图片进行压缩
// 品质越大，图片质量越高，图片也会越大
设置原则：品质不要设为100（100相当于没对图片进行任何压缩，图片会很大），根据项目需要，一般60-80比较合适
B.当图片色彩不太丰富时无论有无透明需求，请保持为png8格式
//png格式特点：只有256种颜色，文件比较小，比较适合网络传输
设置：ctrl+alt+shift+S>png8>颜色默认256；杂边：无；扩散：无仿色(右上角可存储设置，长期使用)
C.当图片有半透明需求时，请保存png24格式
//特点：对图片不进行压缩，所以文件比较大；且支持半透明效果(保存面板采用默认设置即可)
D.为保证图片质量，保留一份PSD源文件，在PSD上进行修改
//Beacuse:PSD源文件可以保留图层，便于后期维护；png8会对图片进行压缩，若在png8上修改，会再次压缩，导致像素点丢失；
//每一份使用的图片，可保留一份PSD源文件，后期可在源文件上任意修改导出
2.4-修改与维护
//Problem:新功能，加个图标；图标多余，要删除；画布太大，文件空白太多；想要改变图标的位置...
A.要继续放更多的图片？ >> 更改画布大小（图像菜单-画布大小：修改宽高，定位选在左上角）
B.移动图标 >> 若图标为独立图层，则使用移动工具拖动即可；若图标为非独立图层:用选区工具选中图标区域>用移动工具拖动图标
//非独立图层，用选区工具选中图标，ctrl+X剪切，ctrl+V粘贴，可分离图层
C.减小画布到指定区域：选定选区>裁剪(图像菜单下) 或 直接使用裁剪工具
//画布一般比图像区域大一点，可维护性
注意事项：修改png8的图片 >> 需要改颜色模式为RGB颜色(图像-模式-RGB颜色)
//png8默认的图片颜色模式是索引颜色，索引颜色更改颜色，会丢失一些颜色信息，因此维护png8格式图片时，要更改颜色模式为RGB颜色
3.图片优化与合并
3.1-//图片已切出兵保存，如何在代码中使用呢？ >> 使用背景图
使用背景图代码：
<button class="u-btn">点我</button>
.u-btn{
background:url(images/btn.png) no-repeat 0 0;
}
.u-btn{
background:url(images/sprite.png) no-repeat 0 -50px;
}
3.2-图片合并方案（为什么要拼图？）
//什么是sprite拼图？ > 把设计稿里的一个个小图标拼合到一个图片里，使用时引入这张图片；
sprite拼图好处：减少网络请求，提升网页加载速度 //多张图片的加载速度大于拼合后的图片加载速度；浏览器对？的请求是有个数限制的；网站打开太慢，访客离开，不利于提升转化率；
3.2.1-大小与质量
平衡和取舍：在做图片优化是，需要平衡和取舍图片的大小和质量（反比，平衡取舍）
压缩：无损 Minimage //对图片大小的影响不明显，压缩不了多少
& 有损 TinyPng //一个在线网站
3.2.2-合并（排列/分类）
原则：图片之间必须保留空隙（考虑到图片的容错性和可维护性，在进行图片合并时需要保留一定的空隙）
图片排列方式：横向排列 & 纵向排列
分类合并原则：把同属于一个模块的图片进行合并；把大小相近的图片进行合并；把色彩相近的图片进行合并；综合以上方式合并；
合并推荐（两种）：
只本页用到的图片合并（后面用不到的就不需要再加载了）；有状态的图标合并（有交换状态的：如点击前，图标，点击后图标，CSS设置只是X轴变化）；
图片的兼容方案：IE6不支持png24半透明 >> 存两份：高级浏览器-sprite.png 24;IE6存一份sprite_ie.png 8(带背景切的)
CSS3&切图 圆角、阴影等情况 >>高级浏览器用CSS3处理，低级浏览器用切图+haike??处理
或，优雅降级，也就是说，高级浏览器用CSS3处理，正常显示，IE6等低级浏览器没有这个效果
标签：
原文地址：http://www.cnblogs.com/eaglevision/p/5399598.html
