页面制作部分之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所有数字都要测量 工具： 矩形选框工具+信息面板 测量内容： 宽度、高度 内边距、外边距 边框 定位 文字大小 行高