用 PS 去切图

[YIXUNFE]

用 PS 去切图

作为前端，你可能认为用 PS 切图那是重构工程师需要负责的内容，并没有多大必要学习切图技巧。这里我本着“能多会一点就能少求人一点”的宗旨，还是给大家简要的讲解一下，如何使用 PS 去切图。

职业细分

在讲解技巧之前，我先哆嗦几句职业细分给我们带来的好处。从人类历史的发展上来看，职业细分是对我们文明的产生有着极大的作用的。人类通过职业细分，从最初的采集和狩猎，细分出种植、畜牧、工匠等等，乃至到今天各种各样类目繁多的职业。职业细分的目的在于可以让我们更好的集中注意力在更小的范围上，这样能使我们在这个范围中创造更高效的收益。

## 准备工作 - 确认安装了 Adobe Photoshop;
## 界面介绍

下文中提及的术语可以对应下图的区域。

这里为了减小篇幅，就不多做 PS 中各项工具的功能介绍了，大家可以通过 PS 教程了解应用中各菜单项、工具等的功能。

工具栏与面板位置可以改变，截图仅代表笔者的设置。

## 初始设置

如果你是第一次打开 PS 的话，我劝你先设置一下 PS 的一些功能。这会为我们后续的工作提供很大的便利。

面板

我们切图的时候并不需要太多的面板，一般保留图层面板，历史记录和信息面板便足够了。

通过 菜单栏->窗口，勾选历史记录、信息和图层，即可将三个面板调出。面板可以拖动，互相组合成一组标签页。由于历史记录面板相对另外两个用到的机会较少，可以将其和图层合成在一起，信息面板和图层面板上下放置即可。

• 信息面板：显示当前鼠标所在点的位置、颜色，当产生选区时，显示选区的起始点位置，终点位置以及选区的宽高；
• 图层面板：展示源文件中的图层信息、效果信息、蒙版等，并指示当前选中图层；
• 历史记录：记录用户对源文件的每一次修改，可以设置记录起始点。

首选项中设置单位

我们发现信息面板中的单位并非我们需要的像素，而是厘米，这是因为默认的度量单位是厘米的关系。我们可以在 菜单栏->编辑->首选项->单位与标尺 中设置。将单位中的标尺与文字都设置成像素即可。点击右边的确定按钮即完成设置。这时信息面板中的数值既以像素为单位。

## PS 中需要使用的一般功能介绍 ### 显示隐藏参考线

有时候一个源文件中保留了许多的参考线，我们不应该直接将其删除，因为参考线对于我们测量间距等信息具有有利作用。但是密密麻麻的参考线又会影响视觉，你可以使用隐藏/显示参考线功能。

在 菜单栏->视图 下有一个 显示额外内容 选项，快捷键是 Ctrl + H，可以通过这个选项显示或者隐藏参考线。

选中图层

当我们的源文件中有一堆图层，恰好你想要寻找的某图层难以从图层面板中找到，那么你可以使用 工具栏 中的 移动工具，在 菜单栏 下方的工具选项中，勾选 自动选择，这时候用 移动工具 点击图层，图层面板会视图为你找到一个可以匹配的图层并高亮该图层（即当前图层被设置为该图层）。

仅查看单一图层

有时候太多的图层会给我们带来干扰，比如分辨不清图层的边界。在图层面板中，可以通过按住 Alt 点击图层左边的 图层可见 按钮（就是选中状态是个眼睛的按钮），将其他图层隐藏，仅显示你想查看的图层。再执行一次该操作将会显示前一次隐藏的图层。

获取图层宽高

在选中一个图层后，你可以在 图层面板 中找到这个图层，按住 Ctrl 点击一下图层，信息面板将会显示该图层的宽高信息，在展示区域我们也可以看到该图层被一个选区包裹。

获取图层色彩信息

通过鼠标滑过，或者直接使用 工具栏 中的取色工具都可以获取该点色彩信息，不同的是取色工具可以保留在色值在 工具栏 的前景色中，方便下次使用。

填充不满 100% 时

需要特别注意的是，在该图层的填充度不满 100% 时，我们通过取色或者读取信息面板中的颜色色值会和
肉眼看到的不同，特别是在仅查看单一图层的情况下，所以我们需要特别注意下是否填充值不满 100。不满 100% 的情况下，还是将图层叠加在其他图层之上后取色为准。

透明度不满 100% 时

透明度不满 100% 时，我们取到色值和肉眼所见颜色也是不同的，但是基于 CSS 中有透明度可以设置，所以在 CSS 中直接使用该色值配合 opacity 即可（PS中透明度是 0-100 范围，CSS 中 opacity 属性是 0-1 范围）。

获取文字信息

如果图层中有文字图层（图层的缩略图是个 “T” 标志），那么我们可以通过 工具栏 中的文字工具选中该文字，或者直接双击该 图层面板 中的图层选中文字。选中文字之后，我们可以在 菜单栏 下的工具选项中查看到字体信息。

我们也可以在 菜单栏->窗口 中调出 字符面板 查看更加具体的信息。

切片工具

我们可以使用切片工具来快速创建一个 HTML。选中 工具栏 下的裁剪工具，右击，即可看见切片工具，然后选中切片工具。

然后我们在网页上按我们脑海中的 DOM 结构，切分源文件。切分完毕后，选中 菜单栏->文件->存储为 WEB 所用格式，在弹出的保存面板中可以选中 HTML和图像 选项，点击确定，PS 就为你生成了一个HTML文件，并且将你所切的图片都保存在同路径的 images 文件夹下。虽然很“智能”，但是代码是一堆 table 结构，除了 EDM 估计也没什么地方可以用了吧。

那么我们还能用切片工具干什么呢？

在保存对话框中可以选择 仅图像，这是 PS只会为你保存切片出的图片。我们可以利用这一点进行批量的图片保存和设置。

等等，设置？在哪里设置？

在这里！

在保存对话框前一个面板中，可以在预览图中对每一个切片框进行设置，比如图片格式、质量、是否连续等。

## 切图与 HTML，CSS

切图于我们最终的目的是产出可用的 HTML 结构和相应的 CSS，在看到一个 PSD 源文件后，我们可以先从脑海中思考这么几个问题：

• 如何用尽量少的 DOM 结构搭建页面；
• 如何尽量少使用图片；
• 哪些地方需要添加效果。

问题一：DOM 结构

理想情况下我们可以视一个图层为一个 div，几个图层的上下级关系对应 div 结构。但是这是理想情况，PS 的灵活性增加了我们思考构建 DOM 结构的时间。

我的建议是可以通过分析出基础的 DOM 结构，再一个一个结构的分解其中的子结构，比如从头到尾，先搭建头、中间、尾部，再分解头部的结构，比如有 logo、促销信息、广告位、用户信息等。

问题二：尽量少的图片

对色块、边框、渐变、阴影效果等可以使用 CSS 实现的，尽量使用 CSS 实现，对于小图标可以使用 SVG 、icon font 等实现。少使用图片可以带来降低网页损耗的带宽，减少 HTTP 请求等的好处。

问题三：哪些地方需要添加效果

由于 PS 中难以呈现动态的效果，我们需要多和设计师沟通页面的交互效果，比如小图标运转、颜色高亮等，再加以 CSS 润色。

---

THANKS