一、什么是切图？
切图就是从网页设计稿中切出网页素材，比如一些小的按钮、小的图片、页面的LOGO、网页的背景图片等。
然后就是页面编码，引入图片资源
- 在HTML里通过 img 标签引入图片资源
<img src="images/avatar.jpg" alt="头像">
- 在CSS里面通过background属性引入图片资源
.icon
{
background-image:url(../images/avtar.jpg);
background-position:0 0 ;
}
二、PS相关知识
- 将单位与标尺设置为“像素”
- 在PS中与切图相关的面板，与切图相关一般情况下打开5个面板，工具面板、选项面板、图层面板这三个面板默认打开，还需要打开信息面板、和历史记录面板，所有面板都在“窗口”菜单中打开、关闭。
- 设置好常用的面板，可以将当前的工作区保存下来，在窗口→工作区→新建工作区
- 工具面板：常用工具；选项面板：选择的当前工具的选项；信息面板：颜色信息、位置信息、尺寸信息；图层面板：对图层进行操作；历史记录面板：对当前文件操作的所有历史记录，可以回退到任意历史记录
三、与切图相关的几个工具
- 移动工具：选择图层、移动图层；点击选择工具→选项面板→“自动选择”打勾→选择“图层”
- 矩形选框工具：选出一个矩形框，在信息面板中查看尺寸信息
- 魔棒工具：抠出不规则图形，容差：设置取样时的一个范围；
- 裁剪工具+切片工具：裁剪工具：裁剪画布；
- 缩放工具：Ctrl++放大；Ctrl+-缩小；Ctrl+1:100%大小；Alt+鼠标滚轮；
- 取色器：取色
- 撤消上一步操作：Ctrl+Z；重复执行撤消操作：Ctrl+Alt+Z；
四、辅助视图
- 辅助视图在“视图”菜单下开启
- 一般情况下开启三个：“对齐”、“标尺”（快捷键 Ctrl+R）、“参考线”（快捷键 Crtl+;）（要显示参考线，需同时勾选“显示额外内容”）
五、其它内容
Sprite的补充说明：可以通过搜索CSS sripte或者图片精灵等关键字来了解更多，推荐阅读：《谈谈CSS Sprites(css精灵)》
时间： 2024-10-03 13:38:40