前端学习笔记之页面制作（一）——PS切图

移动工具： 勾上自动选择，下拉列表选择图层而不是组（图层的组合）。
• 矩形选框工具(以下快捷键适合所有的选择工具)：
  添加到选区：按住shift
• 从选区减去：按住alt
• 与选区交叉： 按住Shift+Alt
• 移动选区： 按住Ctrl

容差：设置颜色取样时的范围，值越小选择颜色范围越小

缩放按钮；
• 快捷键：Ctrl +&Ctrl -
• Alt+滚轮；

对齐： 移动时边界和参考线等会有吸附力；
• 标尺（Ctrl+R）： 可以拖出参考线；
• 显示 > 参考线Ctrl+；： 需要先将显示额外内容开启。

测量和取色

测量：尺寸信息

所有数字都要测量

• 内容： width, height, padding, margin, border, position, text, line-height, background-position
• 方式： 矩形选框+信息窗口
• 字体大小：
  独立文字图层：用文字工具
• 已经合并到背景的文字： 矩形选框，测高度！高度即为字号。不同字体会有些误差，选大一点的字会准一点

独立文字图层： 属性面板里；
• 已合并到背景的文字： 矩形选框：第一行字最下到第二行字最下即为行高

取色：颜色信息

所有的颜色都要取色

• 内容： 边框色，背景色，文字色
• 方式： 拾色器+吸管工具
• 文字颜色：
  独立文字图层： 选项面板里有颜色信息
• 合并到背景后的文字或者文字有一系列效果：拾色器+吸管工具

修饰性：PNG8, PNG24（支持半透明，注意IE6不支持半透明）
• 内容性： JPG

隐藏文字
文字为独立图层，去掉眼睛图标
• 文字和背景合并，都需要先用矩形框选择一块背景
  若背景可拉伸，则使用自由变换工具（Ctrl+T）拉伸背景矩形框将文字覆盖；
• 若背景不可拉伸（纹理），则使用移动工具+Alt来移动选中的背景覆盖文字
  

  tips: 按shift可以控制移动过程中只会左右平移而不会上下移动

用移动工具选中所需图层（按Ctrl多选）
• 右键合并图层（Ctrl+E）
• 右键复制图层到新文件，或者直接拖至已有文件(新建文件Ctrl+N)

合并可见图层（Shift+Ctrl+E）
• 矩形选框选择，魔棒工具去除多余部分，按住Alt

矩形选框选取一块区域复制并粘贴到新文件中
沿X轴复制的背景要充满文件的宽，沿Y轴复制的背景要充满文件的高

拉参考线
• 选择切片工具
• 点击“基于参考线的切片”按钮
• 用切片选择工具给各部分命名
• 保存（全选切片，统一设置存储格式）：存储为web所用格式

保存

• 存储所需内容，复制，新建（背景一般透明），粘贴
• 存储为web所用格式，Ctrl+Shift+Alt+S
• 保存类型：
  图片色彩丰富且无透明要求：JPG格式并选择合适的品质（降低品质用来压缩图片，不要100，一般60-80）
• 图片色彩不太丰富时无论透明度要求：PNG8（只有256种颜色，比较小）
  

  设置：杂边： 无；颜色： 256； 无仿色；勾选 透明度

• 半透明要求（e.g. 阴影）： PNG24（不压缩文件，偏大）
• 保留PSD文件，在PSD文件上修改，使用时导出各种格式

修改与维护

• 更改画布大小： 图像->画布大小（注意定位）
• 移动图标
  独立图层： 移动工具直接拖动
• 非独立图层： 选区工具选中图标区域，移动工具拖动图标

图片间保留空隙，容错性提高
• 排列方式：横向，纵向

同属于一个模块的图片合并
• 大小相近的图片合并
• 色彩相近图片合并
• 综合以上三种
• 推荐：
  只本页用到的图片合并
• 有状态的图标合并 (e.g. 表达鼠标hover图标颜色稍微改变的效果)

IE6不支持PNG24半透明，存两份：

高级浏览器用PNG24
• ie6用PNG8
1. 切图与CSS3
   
   高级浏览器：css3
   • ie6：切图

转载于:https://www.geek-share.com/detail/2644260842.html