页面制作部分之PS切图

原文： http://www.cnblogs.com/jingwhale/p/4396235.html

网页设计在技术层面上，第一步是美工做出网页效果图，第二步就是网页前端进行网页切图。网页切图工具常用的有fireworks、PS，这里使用PS进行网页切图。
我们通过设计稿，得到我们想要的产出物（如.png,.jpg文件），给网页提供图片素材（HTML:img，CSS:background）。

一.使用PS工具
1.1 PS首选项设置
编辑-》首选项-》单位与标尺，选改为像素。

1.2 面板
在“窗口”菜单下开启：
工具（默认已开启）
选项（默认已开启）
图层（默认已开启）
信息（手动开启）
历史记录（手动开启）
关闭其他不需要的功能，将以上功能放置在合适的区域，窗口-》工作区-》保存工作区，设置后的工作区如下：

1.3 切图常用工具
▪移动工具
将自动选择勾选，将组改为图层

▪矩形选框工具
▪魔棒工具
▪裁剪工具+切片工具
▪缩放工具
-放大：Ctrl+加号
-缩小：Ctrl+减号
▪取色器

1.4 辅助视图
在“视图”菜单下开启：
▪对齐（默认开启）（遇到参考线、边界有一个吸附力）
▪标尺 Ctrl+R
▪显示->参考线 Ctrl+;（需要显示额外内容）
二.获取信息
打开设计稿，获取信息：
▪尺寸信息：测量
▪颜色信息：取色
获取信息最重要的是将画布拉的尽量大，尽量减小误差。
测量
2.1所有数字都要测量
工具：
矩形选框工具+信息面板
测量内容：
宽度、高度
内边距、外边距
边框
定位
文字大小
行高