前端必备技能——切图：进阶篇

时间：2023-09-05 16:00:02 | 来源：网站运营

时间：2023-09-05 16:00:02 来源：网站运营

前端必备技能——切图：进阶篇：现代互联网对交互设计越来越重视，切图早已经不是简单的使用 Photoshop 的切片工具对 JPG、PNG 等文件进行切片操作了。UI 设计师给出的设计稿往往会是 PSD 分层文件，这种文件中包含了更加丰富的图层、通道、路径等信息，也为更优雅的前端交互奠定了基础。

（OS：这句话的 Bigger 我给满分o(￣▽￣)d~ 自我陶醉中...）



　　今天就来讲一下使用 Photoshop 对 PSD 分层设计稿进行切图的具体操作，老鸟也可以看一下，没准儿会有意外的收获哈~

准备：

1. Photoshop CC （提取码：gb8x）
2. PSD 设计稿（演示用稿：Navigation.psd）

开始：

1、打开设计稿

　　简单介绍一下主界面

　　① 为画布、② 为工具栏、③ 为图层操作面板

加载 PSD 文件时可能会遇到嵌入的配置文件不匹配、字体丢失等问题，不用理会，直接按确定键即可。
Tips：如果③图层工作区默认没有显示，点击 菜单栏>窗口>图层 即可打开

2、分析设计稿

　　分析设计稿有哪些内容是需要进行切图保留的内容，主要内容考虑主要有以下几个部分：

　　① 图标（是否可以使用伪元素 :before、:after 实现，例如各种箭头图标）

　　② 背景（是否可以使用 background 实现）

　　③ 按钮（是否可以使用 background、border-radius、:hover 等实现交互效果）

　　④ 字体（是否被高频使用，是否需要做成单独的字体文件或做成切片）

　　⑤ 装饰性元素（是否可以使用伪元素 :before、:after 实现）

现在我们来仔细分析一下这张设计稿：

⑴ 图标：② & ④——这两部分都是图标，不同的是②这种简单的几何图标可以直接使用伪元素 :before、:after 来实现，不必做成图标切片；而④这种复杂的图标显然不能使用伪元素轻易画出来，这里鉴于图标数量较少可以直接做成单独切片或做成一张 Sprite 图。

P.S.这种纯色图标如果页面中使用率较高，可以考虑使用 Font Awesome图标库

⑵ 背景：⑥ & ⑧——⑧这类纯色/简单渐变的背景可以使用 CSS 直接实现；而⑥这类背景放大看可以发现他是有一定纹理的，这样的背景就只能进行切图了。

⑶ 按钮：①——这类按钮明显能使用 CSS 设计出来，用 CSS3 设置背景色的渐变打造光感、border-radius 设置按钮的圆角、.active & :hover 状态类与伪类来实现交互效果。

⑷字体：③ & ⑦——整体观察这个设计稿，大部分文字都是使用③的字体（高频使用），可以考虑把 UI 设计师使用的③字体做成 .woff 字体文件引入样式表中，或者直接使用通用的 Arial/sans-serif 字体（还原度会有所欠缺），至于⑦的字体，页面上使用率很低，只有页脚这一处用到，所以可以直接把⑦这里做成切片。

⑸装饰性元素：⑤——这种类似②这种简单的几何图标，但是仔细看有更丰富的光影与渐变效果，所以这里采用的是做成切片。

开始切图之前的分析主要是考虑哪些部分可以使用 CSS 实现，哪些部分只能使用切片。这需要较好的 CSS 知识储备，但还好 CSS 的门槛不高，稍加学习即可掌握。

3、开始切图

　⑴ 图标

　　拉几条参考线后可以很明显发现这类图标的大小都极其接近，这类图标可以切成同一尺寸方便使用，这里以第一个统计图标为例：

Tips：参考线可以通过在主画板顶部及左侧的标尺中通过拖拽添加 / 删除，如果没有打开标尺，按快捷键 Ctrl+R 即可显示标尺。

　　通过右下角图层面板找到这个图标的所在图层，右键单击该图层非缩略图区域，选择‘转换为智能对象’；然后双击该图层的缩略图，进入该图标的智能对象画板窗口：

　　这时画布的大小正好是图标自身的大小（长宽像素不多不少）。

Tips：通常在导出前我会调整一下图标画布的大小，一般是长宽各加几个像素，这样做的目的是虽然前面看起来这些图标大小都差不多，但是其实大小一般是有所差别的（特别是高度），如果直接按照没调整之前的大小导出，很有可能会导致用 CSS 定位的时候发现各个图标垂直方向无法对齐，从而还需要额外对每个图标单独进行对齐，这显然是不合理的。

　　按快捷键 Ctrl+Alt+C 调整画布大小：

最好调整所加的像素数为偶数，这样画布在拓展的时候才能保证图标仍在画布中心位置。

　　调整好画布大小后，按快捷键 Ctrl+Alt+Shift+S（这个快捷键有点多，是时候考验一下手指的灵活性了(o´・ェ・｀o)），然后会弹出介个‘存储为 Web 所用格式’的窗口：

　　两个圈起来的地方，一个是选择导出格式：需要保留透明度的选择PNG-24（PNG-8不支持半透明，这是为了照顾 IE6 的显示效果，现在谁还管 IE6，用 IE6 的人还想要什么优雅的交互体验，页面能显示出来主要内容就不错了，嫌弃脸.jpg <_<），不需要保留透明度的选择JPEG。

选 PNG-24 记得勾选下方的‘交错’，选 JPEG 记得勾选‘连续’，这样在浏览器加载图片的时候会以模糊逐渐转为清晰的效果渐渐显示出来，浏览体验更好。

　　另一个是转换色彩空间：转换为 sRGB 可以在绝大部分浏览器中显示出你期望的颜色（涉及到图片的颜色配置管理，也是深坑，不多赘述）。


　　OK，其他选项都保持默认就好了，点击‘存储’，这样一个图标就‘切’好了！

　⑵ 背景


　　放大看我们可以看到这个背景的纹理是由有序重复的图案组成的，首先我们还是按照操作图标的步骤来：找到对应图层>转换为智能对象>进入编辑智能对象画板。然后使用裁剪工具（快捷键 C），配合 Ctrl+‘+’ 放大画板，仔细裁剪出重复的最小单元：

最后同样 Ctrl+Alt+Shift+S 保存切片，这里由于该背景没有透明部分，所以保存格式选择 JPEG（即 .JPG 文件，相对于 PNG-24，对图片质量要求不高的情况下，JPEG 能获得更小的文件体积）。

现在这个网格背景的切片就搞定了！配合 background-repeat: repeat-x; 即可实现网格的背景效果！

Tips：这里如果想在使用背景切片之前确认一下最小重复单元的背景切片是否错位，可以点击 菜单栏>定义图案 添加新图案，然后 Ctrl+N 新建一个与该背景切片高度相同，宽度较大一些的画板，然后 Shift+F5 打开填充对话框，‘内容>使用’选择‘图案’，紧挨着下边的‘自定图案’选择刚刚添加的新图案，点击确认即可得到期望的背景，如果最小重复单元的切片出现错位等问题很容易发现，仔细重新裁剪一下就好啦~

好嘞，切图的进阶篇就写到这里了，只讲了图标跟背景，其他部分大同小异哈（才不是因为懒 (¯﹃¯)，感兴趣的同学可以下载设计稿练练手哈。

有人可能会问‘怎么直接写了切图：进阶篇，入门篇哪去了？’，请看这篇回答>_>能否用通俗语言讲一下web前端讲的“切图”到底是什么意思？ - Hi我叫小明的回答，懒得整理了_(:зゝ∠)_


写在最后：　　实际现如今对PSD文件进行的操作已经不是简单的切图了，但是鉴于最初确实是把整张JPG图片使用切片工具进行切成一个个小切片，所以切图这种叫法一直沿用至今。