开始之前



1. 这篇文章并不是教你如何美化图片的，它针对前端开发的图片操作；

2. 这篇文章注重细节，像是工具类文章，所以需要耐心读下去，耐心练习；

3. 这算是一篇课程笔记，来自网易前端开发微专业；

4. 这篇文章涉及多个概念，比如单独图层，说这个的目的是我在文中并没有解释，需要自己查阅学习；



一般在互联网公司里面，都会有专业的设计师产出设计稿，交给前端开发工程师，那么，前端工程师拿到设计稿之后，会对这个设计稿进行切图工作，之后才开始进行下一步的编码。下面就是我们要进行的切图学习……



文章目录



• 基础 ：使用PS工具

• 进阶： 测量、取色

• 核心： 切图

• 收获： 保存

• 后期： 修改、维护

• 后期： 图片优化与合并



什么是切图？（What?）



切图是指将设计稿切成便于制作成页面的图片，并完成HTML+CSS布局的静态页面。通俗来讲，就是把一张设计图利用切片工具，把自己所需要的效果切成一张张小图，然后用DIV+CSS完成静态页面书写，完成CSS布局。



为什么需要切图？（Why?）



给网页提供图片素材。有时候要实现网页上的特殊效果，但是依靠HTML+CSS很难实现那种效果，就算实现也很难做到兼容。所以这个时候可以引用图片资源的方式来实现这些效果。接下来，我们就开始进行学习吧……



基础：使用PS工具



• PS工具首选项设置

编辑 > 首选项 > 单位与标尺 > 把文字和标尺设置成像素单位 > 确定



• 面板

在“窗口”菜单开启：工具、选项、信息（F8）、图层（F7）、历史记录 。





这些开启之后，就要保存下来。窗口 > 工作区 > 新建工作区 > 保存

下次进来，就可以在这个工作区进行操作。



• 工具

切图常用工具：

移动工具、矩形选框工具、魔棒工具、裁剪工具+切片工具、缩放工具 、取色器。



• 辅助视图

在“视图”菜单下开启：

对齐、标尺（Ctrl+R）、显示 > 参考线（Ctrl + ；）

注意一点是需要勾选显示额外内容，才会显示参考线。



进阶：测量 、取色



打开设计稿，获取信息，这些信息都能对应到CSS 。



• 尺寸信息

测量获得：width:200px;



• 颜色信息

取色获得 ： color:#fff;



哪些要测量？

标签的宽度、高度、内边距、边框、定位、文字大小、行高、背景图位置等等，凡是需要数值型，都要进行测量。



测量需要用到？



矩形选框工具&信息面板。需要注意的是要把画布尽量放大，来减少我们测量的误差。





下面我们专门讲讲如何测量文字大小，有两种情况：



1：第一种是单独图层，我们直接用文字工具





2：第二种情况是，你的文字被合并在背景图中。

这里我们还要用到的是矩形选框工具，进行测量。首先用矩形选框工具把要测量的字进行框住，然后在信息面板上，我们就会看到“H”高度后边的数字，那就是字体大小了。





其它操作也是要用到矩形选框工具……



取色



哪些要取色？凡是颜色都要取色。具体有边框色、背景色、文字色。

工具：拾色器&吸管工具。





如果我们想知道文字的颜色，和上面的测量文字一样，如果是独立图层，我们直接在选区上，就能看到文字颜色了。同样的，如果你的文字被合并在背景图当中，首先我们要把画布放大，然后用吸管工具，点击要取色的文字，我们就看到文字颜色了。



这里会有另外一种情况，比如我们选中的文字是一个独立的图层，当我们选中时，我们就会在选区面板看到文字的颜色，可是却和我们实际看到的颜色大相径庭，比如我们看到的是黄色，但是选区面板却给我们呈现的是鲜艳的红色。这是怎么回事呢？因为这个文字图层下面有一些叠加的效果。对于这种情况，用文字工具获取颜色就不适用了。我们还是选择用取色器进行取色，记得要把画布放大哦。



取色工具巧用



用取色工具确定背景是否为纯色。





我们凭肉眼看过去，它就是一种红色，但是当我们用取色器点击这个红色区域时，颜色是不停变化的。



核心：切图



在切图之前，我们需要明确哪些是需要切出来的？



网页中的图片可以分为两类，一类是修饰性图片，一般用于CSS当中的background属性上面，主要有一些图标、网站的Logo,还有一些特殊效果的按钮、文字等以及非纯色的背景。另外一类是内容性的图片，内容性的图片一般我们应用在HTML标签 img 上,比如网站上的广告图片以及一些网站文章中的配图……



下面，我们以设计稿为例，哪些东西是需要切出来的？





我们看到这张设计稿当中，用红线框中的，有网站的Logo、有小图标，以及我们看到的纯色的背景，这些都是需要我们切出来的。这张设计稿当中还有很多内容性的图片，就是用黑线框中的。在这个项目里面，这些内容性的图片是从服务器端加载过来数据，所以是不需要切图操作的。



在我们了解了哪些内容需要切图操作之后，我们进行下一步骤：切出来的图片，存为哪种类型？



请记住下面几条切图原则：



1. 内容性的图片颜色比较丰富，那我们存为JPG格式情况比较多，必要的话要做一下压缩，保证图片不要太大。



1. 对于修饰性的图片我们一般保存为PNG24格式或者是PNG8格式，两种格式都支持全透明，但是PNG24格式支持半透明的 ，PNG8不支持 。



切图主要步骤：



1. 隐藏文字只留背景





那么，我们为什么要把文字隐藏掉呢？因为文字是作为网页内容需要写到HTML标签里面的。除非是一些特殊情况的文字，比如文字上面有一些特殊的效果，我们是没有办法用代码来实现，这个时候，我们才需要把文字切成图片。如何隐藏文字，分为两种情况。



第一种是情况是若文字为独立图层，解决方案是隐藏文字图层。

首先找到文字图层，然后去掉眼睛图标。这样就会把文字给隐藏掉了。



第二种情况是文字和背景合并。这里又分为两种情况，如果你的背景是可以平铺的 ，解决方案是平铺背景覆盖文字。

首先用到矩形选框工具在这个背景上画一个矩形框，然后在编辑下面选择自由变换（Ctrl+T）,进行拉伸，在操作完成后，双击拉伸后的区域，就可以了。



如果你的背景图不适合拉伸，判断是否适合拉伸要看图片的特性。比如一张纹理特性的图片，我们进行以上操作后，图片不像使我们要的，那么这个时候就不适用了。和上面步骤有些不一样，也是先选用矩形选框工具，然后画一个矩形框，使用移动工具+Alt，进行间歇式拉伸，有纹理的图片才是我们想要的效果，





隐藏文本结束后，我们要把自己进行修改后的文件重新放到新的文件里。在图层面板找到图层右击复制图层，然后在文档框选择新建，填好名称后。我们就会看到一个新的文件了。



以上操作是单独图层情况下，假如我们所需要的效果分布在多个图层上，这个时候要进行第二部操作，就是把需要的图层进行一个合并。我们以回到顶部图层为例：





我们看到一个回到顶部的图层，当我们动态的点击箭头时，它是一个独立的图层，点击蓝色条时，它也是一个单独的图层。实际项目开发中，我们需要的是看到的整个图层。我们在图层面板看到，这是一列列图层列表。我们要找到这个层级的父节点，然后右击合并图层，最后进行同样的复制操作。以上是保存为png24格式的具体操作。



切图png8格式



这里主要是带背景切，因为png8格式不支持半透明效果。像有些小图标有很多半透明的像素点，这个时候我们需要带着背景切。



• 首先把文件进行合并（合并可见图层）

• 矩形选框工具选择内容

• 然后用魔棒工具去除多余部分（从选区减去：按住Alt）



可平铺背景的切图



这种切图方式主要针对CSS里面 background-repeat 这个属性的切图方式，步骤分为两步：



• 用矩形选框工具选取需要区域

• 复制粘贴到新文件中

操作当中需要注意的是，如果你平铺内容是沿x轴平铺的，那么你需要把平铺的内容充满你的文件的宽，如果是沿着 y 轴平铺的，那么就充满文件的高，什么意思呢？看具体演示。





切片工具



适用于一刀切的应用场景，比如我们将要讲到的活动页。具体步骤如下：

• 根据需要的区域，分别拉参考线；

• 选择切片工具

• 点击“基于参考线的切片”按钮

• 保存 （全选切片，统一设置存储格式）





还是不会？没事，下面我们重点用文字描述一下具体步骤。我们看到了PS当中有一张活动页；

• 首先拉参考线到我们需要独立成图的区域，像上面演示一样，我们总共拉了3条参考线；

• 接着我们在工具面板选择切片工具，然后点击选项面板的“基于参考线的切片”；

• 接着点击切片工具层级下面的选择切片的工具，然后分别双击要独立成图的活动页，设置名称；

• 最后就是点击文件，选择存储为Web所用格式。这里要注意的是选择JPEG格式进行保存。因为这张活动页色彩比较鲜艳。



收获：保存



我们从设计稿里面切出我们需要的图片后，如何保存呢？前面我们已经零零散散的进行了保存操作，下面专门说说保存。保存分为两个步骤：



• 第一步：如果是独立图层，采用复制（Ctrl+C）、新建（Ctrl +N）、粘贴（Ctrl+V）或者直接将内容拖至新文件。如果是背景合并在一起的图层，我们采用三个快捷键连用的方式进行保存。

• 第二步：存储为Web所用格式（Alt+Shift+Ctrl+S)



保存为哪种格式？



我们切出来的图片是不是要保存为统一的类型呢，比如都保存为JPG格式，答案是否定的，因为我们需要根据图片本身的一些特点以及项目实际情况，对图片进行一个保存。



• 保存类型一



当图片色彩丰富无透明要求时，建议保存为JPG格式并选择合适的品质。有一点需要提及的是图片品质的选择，如果品质值越大，相当于这个图片的质量就越高。相应的，图片文件也就越大。我们设置图片的原则是不要设置为100。因为设置为100，就相当于图片没有任何压缩。我们切出来的图片，最终是要用到网络中的，所以必须要考虑网络传输问题。一般80的品质已经是相当高的质量了。





• 保存类型二



当图片色彩不太丰富时无论有无透明要求，建议保存为PNG8格式。PNG8格式一个特点是只有256种颜色，所以它的文件都会比较小，是比较适合网络传输的。另外保存为PNG8格式时，要进行一些设置。主要设置杂边（选择无），无仿色两项就可以了。





• 保存类型三



当图片有半透明要求，建议保存为PNG24格式。特点是对图片不进行压缩，所以文件比较大。采用默认设置就可以。





• 保存类型四



为了保证图片质量，在实际项目中，都会对我们使用的这份文件保留一份PSD，后面任意的修改都是在PSD上进行修改的。这样做的好处是PSD源文件是可以保留图层的，也就是可以保存一个个单独的图层，这对于后期的维护，是相当方便的。





后期：修改、维护



当我们需要新的功能时，需要加一些图标，改一些图片效果，这个时候我们又该如何操作呢？通常有以下几种情况：



• 放更多图片？更改画布大小



在选项面板选择图像下面的画布大小，会弹出一个窗口。





有一个需要注意的地方，就是要把定位选在左上角。这样做的好处是使得已经存在的图片，在CSS里面保持位置不变。



• 移动图标



若图标为独立图层，则用移动工具拖动即可。若图标为非独立图层，首先用选区工具选中图标区域，然后用移动工具拖动图标。



• 减小画布到指定区域



一开始，我们可能会把画布设置的特别大，后面有了明确的需求后，就不需要这么大的画布，这个时候我们就要进行画布的裁剪操作了。首先用矩形选框工具选定选区，在图像菜单下，找到裁剪按钮，然后制作你想要的大小。



后期：图片优化与合并



在前面的操作中，我们已经把需要的内容进行切图操作，保存成了一份文件。那么，到底如何在我们的代码中使用我们切出来的图片呢？



使用背景图

<button class="u-btn">点我</button>



/*按钮背景是单独图片情况下，直接引用图片*/
.u-btn{background:url(images/btn.png)no-repeat 0 0;}
/*按钮图标和别的图标合并在一起，需要设置图标定位*/
.u-btn{background:url(images/sprite.png)no-repeat 0 -50px;}

图片合并方案



一个页面上往往有很多张图片，实际项目开发中并不会把每个图片切出来保存为单独的一份文件。而是把这些图片合并在同一份文件里面来使用。



什么是拼图？为什么要拼图？

简单说就是把设计稿里面的每一个小图标拼合到同一张图片上，然后使用的时候引用这张图片。本来我们可以把这些小图标单独保存为一份文件，单独引用图片。但是实际我们并不会这么做，而是把它们拼合在一起，然后在代码中使用。因为这样会减少网络请求，提升网页加载速度。多张图片的加载速度是会大于我们拼合之后的图片加载速度的。另外浏览器对并行的请求是有个数限制的。所以实际项目中都是对图片进行合并的。进行图片的合并中，有一些我们要遵循的原则。



一 ：大小质量



在进行图片优化的时候，需要平衡取舍图片的大小与质量，如果想要很高的图片质量，势必会导致图片文件会比较大，不利于网络传输。同样，如果过分对图片进行压缩，就会导致我们的图片失真。最终需要根据你的项目实际需求来做合适的调整。我推荐使用两款压缩工具，一种是无损Minimage，对图片的大小压缩是比较不明显的。另外一种是有损[TinyPng](https://tinypng.com/)，它对图片的影响是很大的，也就是说，通过有损压缩，会把图片压缩的比较小。开发中，可以使用这两种工具来辅助开发。



二 ： 合并



图片合并需要遵循的一个原则是图片之间必须保留空隙，主要是考虑到图片的容错性和可维护性。



（1）排列

排列从方向上有横向排列和*纵向排列两种*



（2）分类



图片分类合并遵循的原则：



• 把同属于一个模块的图片进行合并





• 把大小相近的图片进行合并





• 把色彩相近的图片进行合并





• 综合以上方式合并





• 合并推荐



（1）只本页用到的图片合并

（2）有状态的图标合并（有很多小图标是有交互状态的，比如鼠标Hover上去，图标颜色会变化）



最后



到了这里，前端开发之PhotoShop 切图就讲完了，我们需要做的就是熟悉切图的几种操作即可。这些技术可以更好的辅助我们前端开发。