页面制作学习笔记：D2.Photoshop切图

Posted 2020-09-28

一、什么是切图？

　　切图就是从网页设计稿中切出网页素材，比如一些小的按钮、小的图片、页面的LOGO、网页的背景图片等。

　　然后就是页面编码，引入图片资源

• 在html里通过 img 标签引入图片资源

<img src="images/avatar.jpg" alt="头像">

 

• 在CSS里面通过background属性引入图片资源

.icon
{
    background-image:url(../images/avtar.jpg);
    background-position:0 0 ;
}

 二、PS相关知识

1. 将单位与标尺设置为“像素”
2. 在PS中与切图相关的面板，与切图相关一般情况下打开5个面板，工具面板、选项面板、图层面板这三个面板默认打开，还需要打开信息面板、和历史记录面板，所有面板都在“窗口”菜单中打开、关闭。
3. 设置好常用的面板，可以将当前的工作区保存下来，在窗口→工作区→新建工作区
4. 工具面板：常用工具；选项面板：选择的当前工具的选项；信息面板：颜色信息、位置信息、尺寸信息；图层面板：对图层进行操作；历史记录面板：对当前文件操作的所有历史记录，可以回退到任意历史记录

三、与切图相关的几个工具

1. 移动工具：选择图层、移动图层；点击选择工具→选项面板→“自动选择”打勾→选择“图层”
2. 矩形选框工具：选出一个矩形框，在信息面板中查看尺寸信息
3. 魔棒工具：抠出不规则图形，容差：设置取样时的一个范围；
4. 裁剪工具+切片工具：裁剪工具：裁剪画布；
5. 缩放工具：Ctrl++放大；Ctrl+-缩小；Ctrl+1:100%大小；Alt+鼠标滚轮；
6. 取色器：取色
7. 撤消上一步操作：Ctrl+Z；重复执行撤消操作：Ctrl+Alt+Z；

四、辅助视图

1. 辅助视图在“视图”菜单下开启
2. 一般情况下开启三个：“对齐”、“标尺”（快捷键 Ctrl+R）、“参考线”（快捷键 Crtl+;）（要显示参考线，需同时勾选“显示额外内容”）

五、其它内容

　　Sprite的补充说明：可以通过搜索CSS sripte或者图片精灵等关键字来了解更多，推荐阅读：《谈谈CSS Sprites(css精灵)》