准备工作
1、设置：
首选项－》单位与标尺－》像素
窗口－》面板－》选项、工具、信息（F8）、图层（F7）、历史记录
<strong>移动工具选项面板－》自动选择－》图层</strong>
2、辅助视图：视图－》对齐、标尺Ctrl＋R、显示－>参考线Ctrl＋;（需勾选显示额外内容）
3、保存工作区：工作区－》新建工作区
4、常用工具：移动工具 矩形选框工具 魔棒工具 裁剪工具＋切片工具 缩放工具 取色器
5、常用操作：
撤销：Ctrl+z 连续撤销：Ctrl+alt+z 回退N：历史记录
魔棒工具：容差（颜色选取范围） 消除锯齿（使边缘光滑） 连续（选择范围是否连续）
缩放：Ctrl+ Ctrl- Ctrl+1(100%) alt+滚轮（Mac option＋滚轮）
矩形选框：添加到选区（按住Shift）从选区减去（按住Alt）与选区交叉（按住Shift＋Alt）
切片工具：适用于可以一刀切的活动页
获取信息
取色获取颜色信息、测量获取尺寸信息
1、尺寸信息：
测量什么？宽高、边距、边框、定位、文字大小、行高、背景图位置
工具：矩形选框＋信息面板（活用矩形选框快捷键进行选框锁定）
示例：测量字体与行高：字体选择－选项面板－最右边图标；从选区减去获取选区；添加到选区获取超屏幕元素宽高信息
注意：画布尽可能大以减少误差
2、颜色信息：
取什么色？边框色、背景色、文字色
工具：拾色器＋吸管工具
示例：获取文本颜色(文字选项区），如果文字叠加了特殊效果需要用取色器；取色器确定是否渐变；魔棒工具确定是否线性渐变
切图
1、切什么？
修饰性：图标、logo、有特殊效果的按钮文字等、非纯色的背景 保存：PNG24（IE6不支持半透明）、PNG8
内容性：banner、广告图片、文章中的配图 保存：一般存为JPG
2、怎么切？
PNG24: 1、移动工具选中所需图层（按住Ctrl多选） 2、右键合并图层（Ctrl＋E） 3、右键复制图层到新文件或直接拖动支已有文件（新建Ctrl＋N）
PNG8(带背景切): 1、合并（可见）图层（Shift＋Ctrl＋E） 2、矩形选框工具选择内容 3、魔棒工具去除多余部分（从选区中减去：按住Alt）
可平铺背景的切图：1、用矩形选框工具选取一块区域 2、复制粘贴到新文件中
使用切片工具：1、拉参考线 2、选择切片工具 3、点击“基于参考线的切片”按钮 4、选择切片选择工具，双击切片更改名称 5、保存－文件-》存储为Web所用格式－》全选切片－》统一设置存储格式
步骤
1、隐藏文字只留背景
若文字为独立图层、隐藏文字图层
若文字和背景合并，平铺背景覆盖文字（矩形选框工具、自由变换Ctrl＋T/使用移动工具＋Alt)
2、切图
3、保存
存储所需内容：复制、新建、粘贴(Ctrl+C Ctrl+N Ctrl+V)
存储为Web所用格式(Alt+Shift+Ctrl+S)
保存类型：
图片色彩丰富并且无透明要求（JPG并选择合适品质）
图片色彩不太丰富时无论有无透明度要求（PNG8）
图片有半透明要求（PNG24）
为保证图片质量（保留一份PSD，在PSD上修改）Why？1、PSD保留了图层有利于后期维护 2、压缩后图片上基础上修改会丢失很多像素点
4、维护和修改
A、继续放更多图片－更改画布大小（图像－》画布大小－》更改尺寸、定位左上角；选区工具＋裁剪）
B、移动图标－若为独立图层，使用移动工具拖动；else 用选区工具选中图标区域，移动工具拖动；Ctrl＋X Ctrl＋V可以将同一图层元素分开
C、修改PNG8点图片。需更改颜色模式为：RGB颜色（默认为索引颜色更改过程会丢失颜色信息）图像－》模式－》RGB颜色
5、图片优化与合并
为什么要拼图？减少网络请求、提升网页加载速度（加载速度、浏览器请求数量限制、用户体验）
如何？
A、大小与质量
平衡与取舍；压缩工具：无损(minimage) 有损(TinyPng)
B、合并（排列、分类）
图片之间必须保留空隙（可维护性与容错性）
图片排列方式（横向、纵向）
分类：同属于一个模块的合并（后期维护与请求）；大小相近的合并（节省空间）；色彩相近的合并（减小大小）；综上合并
合并推荐：只本页的图片合并（减少请求）；有状态的图标合并（利于操作）
浏览器兼容方案：IE6不支持PNG24半透明（存两份spirit.png 24 spirit_ie.png 8)；CSS3&切图（高级CSS3，低级图片＋Hack；高级CSS3，低级无特效）
问题
1、如何新建参考线？
Ctrl＋R打开标尺，从标尺上下（右）拉即可生成参考线
2、如何删除参考线？
切换到移动工具，鼠标指针放到参考线上，当变成上下箭头，中间夹着参考线的时候，拖动参考线到标尺上，松手后，参考线就删除了
以上笔记根据网易前端微专业课程。
记得以前有跟着课程练习一下的，前几天自己切了下图发现全忘了，于是记下这些笔记供以后查阅。
网友评论