什么是切图？
1.从设计稿（PSD文件）中切出网页的素材，产出物（如.png、.jpg文件）
2.编写代码，在代码中引入图片，实现静态页面。
为什么要切图？
给网页提供图片素材,比如网页上一些漂亮的效果，无法用代码实现。
HTML：img
<img src = "images/avatar.jpg" alt="头像">
CSS:background
.icon{
background-image:url(../images/sprite.png)
background-position:0 0;
}
图片精灵：把网页中的小按钮小图片最终合并到一个文件里。
如何切图？
1.使用PS工具
2.使用背景图
3.图片合并方案
4.浏览器兼容
使用PS工具
PS首选项设置
编辑>首选项>单位与标尺，将单位都改成像素，因为css里面用到的最多的就是像素px；
面板
在“窗口”菜单下开启：
1.工具
2.选项
3.信息（F8）
4.图层（F7）
5.历史记录
保存工作区：窗口→工作区→新建工作区
工具
切图常用工具：
1.移动工具：选择图层及移动图层；
选项面板：自动选择勾上、选择图层
组：将相关联的图层放在一个组里方便管理。
2.矩形选框工具：选出一个矩形框，在信息面板中查看尺寸信息
3.魔棒工具：抠不规则的图形
容差：设置颜色取样时的范围，越小则取样范围越小
消除锯齿：让边缘光滑
连续：让选择的区域连续
4.裁剪工具+切片工具：裁剪画布
5.缩放工具：缩放画布
.放大：Ctrl+加号
.缩小：Ctrl+减号
Ctrl+1:100%
Alt+鼠标滚轮
6.取色器：吸取颜色
7.撤销：Ctrl+z撤销前一步，Ctrl+Alt+z连续撤销
辅助视图
在“视图”菜单下开启：
1.对齐
2.标尺Ctrl+R
3.显示>参考线Ctrl+；
（需勾选显示额外内容）
网友评论