页面制作1—Photoshop切图

---

1.三问切图

• 什么是切图？

  • 从设计稿（如.psd文件）中切出图片素材（如.png、.jpg文件）
  • DIV+CSS切图
    1.第一步：从设计稿里面切出按钮、图标、logo、背景 图、其他内容性图片...
    2.第二步：按照效果图，编写代码，引入切出来的图片，实现一个静态页面。

• 为什么要切图？

  • 网页上的有些效果无法通过编写代码来实现，或者用代码实现的效果的兼容性不够好，此时，可以通过引入图片资源的方式来实现这些效果。
  • 在网页中添加图片素材的两种方法：

   1.HTML:img标签
   <img src="images/avater.jpg" alt="头像">
  2.CSS:background属性
  .icon{background-image:url(../images/sprite.png);background-position: 0 0;}
  

  • 图片精灵（sprite.png）：把多个小图标、小按钮合并成一个文件，使用时进行定位。Demo、原理、优缺点…

• 怎么样切图？

  • 使用PS工具
    PS适合制作、编辑图片，但因为PS体积大，所以不适合图片的预览，若要预览图片，可以使用系统自带的图片工具。
  • 使用背景图
  • 图片合并方案
  • 浏览器兼容

---

2.工具、面板、视图

• 工具

  • 移动工具
    • 作用：选择、移动图层
    • 设置：选项区——自动选择、图层
  • 矩形选框工具
    • 截取一个矩形，在信息面板中查看该矩形的尺寸...
    • 添加到选区：按住Shift
    • 从选区减去：按住Alt
    • 与选区交叉：按住Shift + Alt
  • 魔棒工具
    • 抠图神器！适合扣取不规则小图标
    • 容差：表示选取的颜色范围
    • 消除锯齿：让边缘光滑
    • 连续
  • 裁剪工具+切片工具
    • 裁剪画布
  • 缩放工具
    • 鼠标点击放大、缩小
    • 快捷键：放大(Ctrl+加号)、缩小(Ctrl+减号)、100%(Ctrl+1)
    • 秘诀：Alt+鼠标滚轮
  • 拾色器（取色器）
    • 点击目标吸取颜色
    • 前景色、背景色
    • 切换按钮
    • 点击拾色器工具后，会出现拾色器面板，并可看到画布中的鼠标箭头已变为一个吸管，然后在画布上任意位置点击一下，即可在拾色器面板中看到该位置的颜色信息—— #ffffff、RGB

• 面板

  • 首选项设置

    • 设置步骤：编辑菜单-->首选项-->单位与标尺-->标尺、文字：像素
    • 设置原因：CSS中使用得最多的单位是像素，因此使用PS测量、读取设计稿的数据时，皆以px为单位。

  • 切图常用面板
    1.在“窗口”菜单下开启前端经常使用的面板

    • 工具：默认开启。点击工具面板左上角的小按钮，进行单双列布局的切换。
    • 选项：默认开启。选项面板与当前工具面板所选工具一一对应。
    • 信息(F8)：颜色、位置、尺寸信息。信息面板与矩形选框工具一起使用可进行数据的测量。
    • 图层(F7)：默认开启。列出当前打开的所有图层。+、-、眼睛小图标分别用于添加、删除、隐藏/显示图层。
    • 历史纪录：点击历史操作，可回退到任意一步历史步骤。

    2.新建工作区
    窗口菜单-->工作区-->新建工具区。完成后，可在主界面右上角点击小按钮进行工作区的选择与复位。

• 视图

  辅助视图—在视图菜单下勾选以下内容：

  • 显示额外内容
  • 显示-->参考线：Ctrl+;
  • 标尺：Ctrl+R
  • 对齐：默认开启。开启后，移动图层时，自动吸附边缘、参考线

• 其他

  • 组：“组”类似于文件夹。设计师在设计时，会将相关联的图层归类到同一个组内，方便后续管理。“组”可嵌套。
  • 撤销
    • 撤销单步：Ctrl+Z
    • 连续撤销：Ctrl+Alt+Z
    • 回退多步：在历史面板中点击回退

---

3.测量、取色

• 概述

  打开设计稿，获取信息，这些信息往往对应CSS属性

  • 尺寸信息——测量 width: 200px
  • 颜色信息——取色 color: #ffcc00

• 测量

  • 哪些数据需要测量？所有数字都需要测量——CSS中所有能够接受数字型的属性

    • 宽度、高度width、height
    • 内边距、外边距padding、margin
    • 边框border
    • 定位top、left、right、bottom
    • 文字大小font-size
      1. 单独文字图层：点击文字工具，再点击文字图层，即可在选项面板中看到文字大小
      2. 已经合并到背景图中的文字：矩形选框工具&信息面板---测量时，尽可能选择大一点的字，从上至下量取，相对精确
    • 行高line-height
      1. 单独文字图层：文字工具-->选中文字图层-->点击选项面板倒数第4个图标-->可在跳出的字符属性面板找到行高
      2. 已经合并到背景图中的文字：用矩形选框工具量取，任意两行底部（顶部）之间的高度即为行高

  • 背景图位置background-position
    e.g 小按钮上下左右的边距

  • 做到尽可能100%还原设计稿，测量时，尽可能将画布放大，减小误差
    e.g 刚开始量取时，用矩形选框工具选择相对大一点的区域，再按住Alt 键，将多余的区 域删除，若不小心去掉有用的区域，可按住 Shift 添加区域

  • 巧用：一般网页设计稿比较大，而我们测量时又将画布放大，若要选择一个较大的区域时，会带来不便---在左侧边缘画一个小的矩形框，然后把滚动条滚动到右侧，此时，按住 Shift 键，在右侧边缘再画一个小的矩形框，完成后，信息面板显示的宽度即为左右边缘之间的距离

• 取色

  • 哪些需要取色？所有颜色都要取色——CSS中，能接受颜色值的所有属性

  • 边框色border-color

  • 背景色background-color

  • 文字色color

  • 如何获取文本颜色？

  • 单独文字图层：选取文字工具-->点击文字图层-->点击选项面板的倒数第六个图标，即可看到文本颜色信息

  • 已经合并到背景图中的文字：放大画布-->拾色器&吸管工具
    边框取色：放大-->拾色器&吸管工具

  • 特殊情况：单独文字图层在拾色器面板中显示的文本颜色信息与我们实际看到的颜色不符

  • 原因：该文字图层下面有一些颜色叠加的效果

  • 解决方法：此时，不再使用文字工具选项面板提供的文本颜色信息，而是使用拾色器&吸管工具进行取色。放大画布后，尽可能避开文字边缘的锯齿进行取色，减小误差

  • 取色工具的巧用——确定背景是否为纯色
    使用吸管在某区域不断到随机点击，若颜色信息有变动，则该区域的颜色不是纯色

  • 魔棒工具的巧用——确定是否是线性渐变
    先用移动工具点击选择某个图层，再选择魔棒工具，点击该图层，在容差较低的情况下，选中的区域为该图层中的一个横向区域，即该横向区域中的颜色一样，继续往下点，若发现选中的区域皆为横向区域，则说明该图层是从上往下的沿Y轴的颜色线性渐变，即X轴颜色都一样，Y轴有颜色变化。同理，存在沿X轴的颜色线性渐变。

---

4.切图

• 切图及切图的各种操作
  • 隐藏文字（独立图层和非独立图层的不同操作方法）
  • png8和png24格式的切图方式
  • 可平铺背景的切图方式及活动页的切图方式
    背景平铺：对于可平铺背景的切图，可以先了解一下CSS的 background-repeat属性，对理解切图会有帮助
• 切图之前

  • 哪些是需要切出来的？

    • 修饰性的（一般用在background属性——CSS）
      1. 图标、logo
      2. 有特殊效果的按钮、文字等
      3. 非纯色的背景
    • 内容性的（一般用在img标签---HTML）
      1. Banner、广告图片
      2. 文章中的配图…
    • 从服务器端获取的内容性图片不需要切图，只需要用img标签占个位置即可（不用切，只占位）

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

    • 内容性的图片的颜色相对丰富，一般存为JPG格式，还需要进行压缩，以保证图片大小合适
    • 修饰性图片一般保存为PNG24格式（IE6不支持半透明）或者PNG8格式，两者皆支持全透明，PNG24还支持半透明，PNG24图片质量较高

• 切图·隐藏文字只留背景
  • 隐藏文字的原因：文字作为网页内容，需要写到HTML标签之中，只有当文字具有某些用代码无法实现的效果时，才需要对文字进行切图
  • 隐藏文字的两种方式
    • 若文字为独立图层，隐藏文字图层
      1.用移动工具找到文字图层
      2.在图层面板中去掉眼睛图标
    • 若文字和背景合并，平铺背景覆盖文字
      1.矩形选框工具：在不包含文字的背景中，画一个高度略大于文字高度的矩形框
      2.自由变换（Ctrl+T）：背景可拉伸。按住Ctrl+T，选择矩形框靠近文字的一条边，将其拉向文字区域，即可平铺背景，覆盖文字，双击完成。
      3.使用移动工具+Alt+Shift：背景不可拉伸，比如背景具有纹理时。用矩形选框工具在不包含文字的地方选择一个大于文字行高的区域，再用移动工具选择该区域，按住Alt键可进行移动，若同时按住Shift键，可固定在水平方向移动，然后，连续进行多次拖动，直至将文字全部覆盖。

• 切图·png24

  • 移动工具选中所需图层（按住Ctrl多选）
  • 右键合并图层（Ctrl+E）
  • 再右键复制图层到新文件或直接拖至已有文件（新建：Ctrl+N）
  • 所需内容为：
    • 单独图层：只需执行第一、三步
    • 多个图层：Ctrl+E，若这些图层在同一组，则直接合并组
  • 裁剪画布：用矩形选框工具选择区域--->在图像菜单下选择裁剪

• 切图·png8

  • 带背景切：png8格式不支持半透明效果，很多小图标上面有半透明的像素点，此时需要带背景切
  • 合并（可见）图层（Shift+Ctrl+E）：图层菜单-->合并可见图层
  • 矩形选框工具选择内容
  • 魔棒工具去除多余部分: 从选区中减去,按住Alt

• 可平铺背景的切图

  • 针对CSS中background-repeat属性
    • 用矩形选框工具选取一块区域
    • 复制粘贴到新文件中：新文件背景内容为透明
  • 平铺内容充满文件的宽（X轴）或高（Y轴）：若是沿X轴平铺，则平铺内容充满文件的宽，完全覆盖文件的背景内容。若无法充满文件的宽，可对平铺内容进行水平拉伸直至充满。

• 切片工具

  • 适用于可以一刀切的活动页
    • 拉参考线：从标尺栏拉线
    • 选择切片工具
    • 点击“基于参考线的切片”按钮
    • 保存（全选切片，统一设置存储格式）
    • 文件菜单-->存储为Web所用格式-->选择所有切片-->JPG格式-->品质较低：60

---

5.保存

• 存储所需内容

  • 移动：
  • 所需内容为独立图层：新建Ctrl+N --->拖动内容至新文件
  • 所需内容已经合并到背景中：用矩形选框工具选中目标区域--->魔棒工具+Alt 选择所需内容--->复制 Ctrl+C--->新建Ctrl+N（宽、高、背景内容：透明）--->粘贴Ctrl+V
  • 存储：文件菜单--->存储为Web所用格式（Alt + Shift + Ctrl + S）：跳出保存方框后，点左上角的“双联”，可看到对比效果。

• 保存为哪种格式？

  • JPEG（JPG）：当图片色彩丰富且无透明要求时，建议保存为JPG格式，并选择合适的品质（60-80），从而对图片进行压缩（压缩原因：因为我们切出来的图片都是需要运用到网络中的，所以需要考虑网络传输的问题）
  • PNG8 : 当图片色彩不太丰富时，无论有无透明要求，请保存为PNG8格式。特点：只有256种颜色，文件比较小，适合网络传输。设置：杂边-无、扩散-无仿色、右上角小箭头：存储设置。
  • PNG24 ：当图片有半透明要求时，请保存为PNG24格式。特点：不对图片进行压缩，文件较大，支持半透明效果。
  • PSD：为了保证图片质量，保留一份PSD，在PSD上进行修改，再导出所需图片。
    • 原因
      1.PSD文件可保留单个图层，对后期维护相当方便。
      2.PNG8会对图片进行压缩，在PNG8格式的文件上进行修改的话，修改之后再保存，相当于再一次进行压缩，导致很多像素点的丢失。

---

6.修改、维护

• 问题

  1.想要改变图标的位置
  2.画布太大，文件空白太多
  3.新功能，加个图标
  4.图标多余，要删除

• 修改与维护一

  • 要继续放更多的图片？
    更改画布大小：图像菜单-->画布大小-->宽高、定位--左上角（向右、向下扩展画布大小），使得已经在使用的图片，在CSS里面的背景图位置属性不需要修改。

• 修改与维护二

  • 移动图标
    • 若图标为独立图层，则用移动工具拖动即可
    • 若图标为非独立图层
      1.用矩形选框工具选中图标区域
      2.用移动工具拖动图标
      e.g 两个图标位于同一个图层，若想移动其中一个图标，先用移动工具选中该图层，再用矩形选框工具选中该图标，然后用移动工具移动图标。此外，选中该图标后，还可按住Ctrl + X ，再按Ctrl + V ，即可将该图标从原来的图层中分离出来，方便后期维护。

• 修改与维护三

  • 要减小画布到指定区域
    • 方法一
      1.选定选区：矩形选框工具
      裁剪：图像菜单--->裁剪
    • 方法二
      选中工具栏的裁剪工具后，画布周围出现虚线，点击边缘线中间部分，再朝指定方向进行拉伸

• 注：考虑到可维护性，画布一般稍微大于图像区域

• 注意事项

  png8格式默认的模式为索引颜色。该模式下，修改颜色容易丢失颜色信息，所以修改png8的图片颜色之前，需先更改颜色模式为：RGB颜色。具体操作为：图像菜单--->模式--->RGB颜色

---

7.图片优化与合并

• 使用背景的图代码

HTML：
<button class="u-btn">点我</button>
CSS：
.u-btn{background:url(images/btn.png) no-repeat 0 0;} 
.u-btn{background:url(images/sprite.png) no-repeat 0 -50px;} 

图片详情见课件

• 为什么要拼图？

  • 什么是Sprite拼图：小图标…
  • Sprite拼图的好处：减少网络请求，提升网页加载速度

• 图片优化与合并

  • 大小与质量
    • 平衡与取舍
    • 压缩工具
      1. 无损 Minimage 托管于Github上--NetEaseWD/minimage
      2. 有损 TinyPng 在线网站tinypng
  • 合并
    • 排列
      • 图片之间必须保留空隙
        e.g 若有空隙，当想把图标、按钮变高一点时，只需更改图片的高度，而不需要更改CSS里面背景图位置这个属性
      • 图片排列方式
        1. 横向排列
        2. 纵向排列
  • 分类
    1. 把同属于一个模块的图片进行合并
    2. 把大小相近的图片进行合并
    3. 把色彩相近的图片进行合并
    4. 综合以上方式合并
  • 合并推荐
    1. 只本页用到的图片合并
    2. 有状态的图标合并：hover前后
  • 浏览器兼容方案
  • IE6不支持PNG24半透明
    存两份： sprite.png(24)、sprite_ie.png(8-带背景切)
  • CSS3&切图
    新技术：阴影、圆角
    高级浏览器：CSS3
    低级浏览器：切图
  • 优雅降级原则：都用CSS3来处理，让IE这种低级浏览器没有这种效果，如圆角变为直角
  • 图片合并时保留空隙：
    对于具体要保留多大的空隙呢…详情见可见视频笔记