网易微专业 前端工程师 学习笔记

1.1

1.1.1.1 工具、画板、视图

1. 鉴于前端人员多数情况下使用的图片的参数多位像素，所以首先我们通过 “编辑 → 首选项 → 单位与标尺” 中的单位选择像素
2. 常用面板有：
   
   • 工具
     
     • 移动工具
     • 矩形选框工具
     • 魔棒工具
     • 剪裁工具 + 切片工具
     • 缩放工具
       
       • 可以使用： Alt + 滚轮前后
       • 缩放到100%：Ctrl + 1
       • 放大：Ctrl + 加号
       • 缩小：Ctrl + 减号
     • 取色器
   • 选项
   • 信息（F8）
   • 图层（F7）
   • 历史记录
     
     • 撤销 Ctrl + Z
     • 连续撤销 Ctrl + Alt + Z

设置完常用面板后我们可以通过 “窗口 → 工作区 → 新建工作区” 来保存

1. 辅助试图
   在视图下开启：
   
   • 对齐
   • 标尺 Ctrl + R
   • 显示 > 参考线 Ctrl + ;（需要勾选显示额外内容）

1.1.2.1 测量、取色

获取信息

• 尺寸信息 —- 测量 —→ width: 200px;

  • 测量：
    所有数字都需要测量包括：
    
    • 宽度、高度
    • 内外边距
    • 边框
    • 定位
    • 文字大小
    • 行高
    • 背景图位置（background-position）

  我们可以通过矩形选框工具 & 信息面板来测量

  • 选区：
    
    • 添加到选区：按住Shift
    • 从选区减去：按住Alt
    • 与选区交叉：同时按住Shift和Alt

• 颜色信息 —-取色—→ color: #ffcc00;

  • 取色：
    
    • 边框色
    • 背景色
    • 文字色

  我们可以通过拾色器&吸管工具来取色

  • 取色工具巧用：
    
    • 确定背景是否为纯色：吸管工具
    • 确定是否是线性渐变：魔棒工具

1.1.3.1 切图

1. 切图之前
   哪些是需要切出来的？

   • 修饰性的（一般用在background属性）
     
     • 图标、Logo
     • 有特殊效果的按钮、文字等
     • 非纯色的背景
   • 内容性的（一般用在img标签）
     
     • Banner、广告图片
     • 文章中的配图…
   • 有些从后台直接拉取的不需要切图，留一个img标签占位就好

   切出来的图片 存为那种类型？

   • 修饰性的：
     
     • PNG24 图片质量较高
     • PNG8
       它俩都支持全透明，不同的是PNG24支持半透明（IE6不支持）而PNG8不支持半透明。
   • 内容性的：
     
     • JPG
       为了最大限度的保持图的色彩，有时也会进行压缩来保证图片大小不会太大。

2. 切图

   • 若文字为独立图层，隐藏文字图层
   • 若文字和背景合并，平铺背景覆盖文字
     
     • 矩形选框工具
     • 自由变换（Ctrl + T）
       使用移动工具 + Alt
   • PNG24
     
     • 移动工具选中所需图层（按住Ctrl多选）
     • 右键合并图层（Ctrl + E）
     • 再右键复制图层到新文件
       或直接拖至已有文件（新建：Ctrl + N）

   • PNG8

     • 合并（可见）图层（shift + Ctrl + E）
     • 矩形选框工具选择内容
     • 魔棒工具去除多余部分
       
       • 从选区中减去：按住Alt

   • 可平铺背景的图

     • 用矩形选框工具选取一块区域
     • 复制粘贴到新文件中
       平铺内容充满文件的宽（x轴）或高（y轴）
   • 切片工具
     适用于可以一刀切的活动页
     
     • 拉参考线
     • 选择切片工具
     • 点击“基于参考线的切片”按钮
     • 保存（全选切片，同意设置存储格式）

1.1.4.1 保存

存储所需内容

• 　复制、　新建、　粘贴
  （Ctrl + C Ctrl + N Ctrl + V ）
• 存储为web所用格式
  （Alt + Shift + Ctrl + S）

1.1.5.1 修改、维护

• 更改画布大小
• 移动图标
  
  • 若建立为独立图层，则用移动工具拖动即可
  • 若图标为非独立图层
    
    • 用选区工具选中图标区域
    • 用移动工具拖动图标
• 减小画布到指定区域
  
  • 选定选区
  • 剪裁

注意事项：修改PNG8的图片 需要更改颜色模式为：RGB颜色
PNG8格式的图片默认是“索引颜色”不是“RGB颜色模式”

JPG、PNG8、PNG24这些格式分别适合保存什么特点的图片？

• JPG：适合图片色彩丰富，无透明效果要求，但需要对品质进行修改达到压缩目的，最佳是60-80。如：网页配图，banner等
• PNG8：适合图片色彩不太丰富，无论透明效果要求，且不需要压缩，图片较小，适合web传输。如：logo，按钮，小图标等
• PNG24： 适合有半透明效果要求，图片相对于PNG8的格式较大，不支持压缩。如：阴影效果的按钮等

1.1.6.1 图片优化与合并

使用背景图代码

Sprite的使用：  
HTML：
<button class="u-btn">点我</button>
CSS：
.u-btn{background:url(images/btn.png) no-repeat 0 -50px
!!! 最后的0表示图片顺着横坐标移动的多少，-50px表示图片顺着y轴移动的多少（向下） !!!

Sprite拼图的好处：
减少网络请求，提升网页加载速度

压缩工具：

• 无损 Minimage
• 有损 TinyPng

图片合并：图片之间必须保留空隙
图片排列：横向与纵向

合并分类：

• 把同属于一个模块的图片进行合并
• 把大小相近的图片进行合并
• 把色彩相近的图片进行合并
• 综合以上方式合并
• 有状态的图标合并

由于IE6不支持PNG24半透明
一般处理方法为存两份图，一份PNG24的sprite.png，一份PNG8的sprite_ie.png