准备工作
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、如何删除参考线?
切换到移动工具,鼠标指针放到参考线上,当变成上下箭头,中间夹着参考线的时候,拖动参考线到标尺上,松手后,参考线就删除了
以上笔记根据网易前端微专业课程。
记得以前有跟着课程练习一下的,前几天自己切了下图发现全忘了,于是记下这些笔记供以后查阅。