rgb颜色查询工具_Web前端页面重构之工具篇（Photoshop）

一、说在前面的话

1.1 职责：拒绝"图片仅供参考请以实物为准"

团队的协作流程一般分为以下几个阶段：

专业的设计师做设计
由前端工程师切图重构还原成浏览器能渲染的页面，再开发功能。

术业有专攻，每一个环节都会有很高的水准，组合成一个各方面都非常专业的网站，为客户的业务提供更好的帮助。

没错，客户需要的站点就是一碗蛋炒饭的话，前端开发人员就有必要让这碗蛋炒饭实物看起来跟食品封面上面的图片一样可口美味！

拒绝图片仅供参考请以实物为准

UI给你什么样的设计稿你做出来就是他想要的样子！

说远一点是匠人精神近一点就是对设计成果的尊重

1.2 匠心：为什么要抠那个1px

设计师有这种精益求精的工匠精神，

没理由在前端这里断送呀！！！

所以，前端开发，很有必要精确还原设计稿甚至要精确到像素级别！！！

二、如何做到还原设计稿

还原设计稿是本分，没话说。

但是如果真的细究到0px还原，那还真不是一件小事。

一个网站在设计师手中，都是图片或文字(附加对图片或文字进行相关的处理)的排版；

那么对应到前端来说就是一个个块、一个个元素(附加元素自身属性的实现)的排版；

PS:WEB前端一般把一个个组件模块称之为块(Block)，组件内部的子节点称之为元素(Element)；即BEM核心思想。

所以要做到还原设计稿，主要是要解决下面这三个问题：

块、元素的大小以及他们自身的基本属性(形状、圆角、颜色、背景、阴影等)
块与块、元素与元素之间的位置关系与距离
块、元素在页面的位置(父子模块、父子元素的相对位置)

下面对上面问题一一详细展开分析。

2.1 块、元素的大小以及他们自身的基本属性

先来说下元素大小的问题，对于图片类的来说我们就要获取图片在PS中的正确大小，这一般来说百分之八十都没什么问题，除了一些设计师进行过特殊处理加工各层叠加等效果的需要费点时间搞定；然后，块与元素他们自身的基本属性使用CSS进行还原。

而对于文字来说，就是文字字体大小(font-size)了；但是有个不能忽略的字体(font-family)问题，那就是同一个font-size使用不同的font-family可能表现出来的大小会相差十万八千里。

总结起来就是两点：保证图片跟设计稿一样大小；保证字体大小及类型与设计稿一致。

2.2 块与块、元素与元素之间的位置关系与距离

既然网站从视觉上表现出来的就是图片与文字，那么距离总体来说就是分为三种情况了：

图片与图片的距离
图片与文字的距离
文字与文字的距离

为了得到他们之间的位置距离，首先我们得有个工具来测量：

PS有切片工具来进行测量(下文会着重介绍)。
像素大厨、Markman也是极好的测量距离的工具。

2.3 块、元素在页面的位置(父子模块、父子元素的相对位置)

这个相对于前面的来说，应该是最简单的了，熟练运用各种布局技术一般就能解决百分之九十九的问题了，当然也有些特别不合理的布局需求，那就需要跟UI和UE讨论了。

总之，这个问题是可以通过技术来解决的问题，所以不是问题。

那么，为了准确的跟踪是否还原，我们还需要比对工具来查看还原效果(原理基本都是把设计稿遮盖在页面上方，设置成半透明，然后查看效果)。以下是两个检查界面还原度的工具：

Perfect Pixel
Alloy Designer

三、Photoshop的运用

(版本PhotoshopCC 以上)

3.1 常用面板

这里的面板，指的是在顶部主菜单“窗口”下可开启的窗口。最常用的几个窗口必属

“属性”面板
“信息”面板
“图层”面板

电脑屏幕够大的同学，建议把它们都展开在界面右边。

3.1.1属性面板

结合快速选择图层，属性面板可以展示不少图层信息，而这些信息在开发中非常有用：

可查看文本的字体大小和颜色等
可查看形状工具(U)画出的形状的填充色和圆角等信息
可查看智能对象的宽高

可以看出，属性面板主要展示的是PS“原生”的对象的信息。

3.1.2 信息面板

“信息面板”和“属性面板”类似，只不过前者展现的信息和后者不太一样。

比如，快速选中图层后，如果在“属性面板”不能看到图层的宽高信息，可以用快捷键mac:command+T(windows:Ctrl+T)打开变形操作，在“信息”面板一定可以看到图层的宽高信息，看完后记得按Esc键顺手退出变形工具以免不小心误操作。

3.1.3 图层面板

“图层”面板可以展示图层的混合模式、透明度与图层类型等信息。图中箭头指示从上到下解读含义依次为：

文本图层
矢量图图层
组
普通图层
智能对象图层
图层被锁定(不能执行图层的移动与编辑等操作)

另外，在“图层”面板，右键图层，有个“复制css”选项。

这个功能在PS里很早就加进来了，可能很多同学都觉得挺鸡肋的，觉得这是给设计师学习css用的。

但是其实里面的有一些信息还是挺有用的，可减少一些工作量，比如下面一段css：

.logo_png24{

background-image:-moz-linear-gradient(124deg,rgb(0,0,0)0%,rgb(255,255,255)100%);

background-image:-webkit-linear-gradient(124deg,rgb(0,0,0)0%,rgb(255,255,255)100%);

background-image:-ms-linear-gradient(124deg,rgb(0,0,0)0%,rgb(255,255,255)100%);

position:absolute;

left:-19px;

top:294px;

width:284px;

height:58px;

z-index:489;

}

.圆角矩形_1{

border-style:solid;

border-width:1px;

border-color:rgb(18,147,249);

border-radius:2px;

background-image:-moz-linear-gradient(90deg,rgb(0,0,0)0%,rgb(255,255,255)100%);

background-image:-webkit-linear-gradient(90deg,rgb(0,0,0)0%,rgb(255,255,255)100%);

background-image:-ms-linear-gradient(90deg,rgb(0,0,0)0%,rgb(255,255,255)100%);

position:absolute;

left:1605px;

top:72px;

width:118px;

height:32px;

z-index:831;

}

我们可以用到里面的圆角、背景色、透明度、阴影、宽高、渐变信息，不过，说实话代码写法真的挺丑的，比如渐变那个，要进行一些人工的干预处理。

不过，总归可以少输入一点代码减少工作量，有些信息也不用麻烦各种手段去取、去猜……

一般来说，只是形状工具(U)画出来的形状才会有比较有用的信息；

如果是图片类的图层，拷贝出来的信息一般只有宽高信息可以用；

还有就是，使用了图层样式或者是有使用图层混合模式的话，那这些信息是不会被复制出来了，只能手动取色了。

3.2 常用工具与使用技巧

3.2.1 吸管工具(I)

这个工具最基本的功能是吸取图层颜色，这里有几个使用技巧：

左键点击吸取，颜色会实时展示在“信息面板上”；
设计稿经常会看到一些不太明显的渐变色背景色的模块，怎么才能快速知道这是属于渐变色还是纯色的块？按住左键拖动吸管，颜色信息展示在“信息面板”上，通过观察即可知道到底要用background-color还是linear-gradient；
右键需要获取的颜色点，然后会出现菜单，最后一项是“拷贝颜色的十六进制代码”，这里可以快速拷贝色值供css代码用；
如果图层有不透明度，请记得先把不透明度恢复到100%才可以吸取，否则色值会不正确，右键拷贝的色值也会不对；
按住Shift键然后吸取，这样会吸取多个色值，并且依次记录在“信息面板”上，这个用于对比色值很有用，在图上相应位置也会标识出顺序，如下图：

3.2.2 移动工具(V)

--技巧1：快速选择图层

在移动工具(V)下这个操作非常常用：

mac系统下：option+右键/command+左键，Windows系统下：Ctrl+左键；就能在psd里快速选定图层，点哪选哪。不需要勾选“自动选择”图层选项也能快速选择图层。

mac系统下推荐使用option+右键而不是command+左键，因为这个快速选择图层的操作经常需要结合视图缩放(mac系统下：option+滚轮，Windows系统下:Alt+滚轮)，这样来回切换会更方便。

--技巧2：快速获取margin值

在移动工具下(V)，选中图层后，mac系统长按command(windows:长按Ctrl)键，然后移动鼠标；

此时，鼠标停留处的图层会出现与选中图层之间的一些紫色标注的一些距离信息，这个用于获取margin比较有用。

3.2.3 切片工具(C)

--传统的切图流程--

确定好了切图方案之后，对于大的PSD来说，往往是：

新建一个画布；
然后，将 PSD 里面需要切出来的图层拖动到新画布中，使用“剪裁”工具把这个图层进一步的剪切，变成最小内容，剪去多余的部分；
最后，打开“存储为 Web 所用格式”对话框，根据图片选择格式、压缩比以及是否是渐进式等等，选择路径修改文件名。

这样的缺点很明显，有时候图标或者图层有半透明的阴影，这时候对于边界的界定就不好处理，此外需要大量重复的剪裁、返回上一步、继续剪裁、保存图片等等。

人工操作过多，导致效率底下，成本增加，大量时间浪费在基础重复的操作中

--改进后的切图流程--

1、切片工具，可以精准的进行测量与区域的选择。用切片工具划分好需要切的区域之后，按Ctrl+Alt+Shift+S储存为web格式;选择“仅限图像”与“选中的切片”。

会在保存的目录下生成一个images文件夹来存放切出来的图片。同样有可能会出现半透明的阴影没有被完整切进去的问题(有办法避免)。

2、在图层面板选择对应的“组”或者“图层”，右键，“转化为智能对象”，再快捷键Ctrl+Alt+Shift+S储存为web格式。选好需要输出的格式，保存即可。这样精度非常高，半透明的阴影也完全不会被遗漏。

这一过程可以制作成PS强大的“动作”功能。以后只需一键切图了！

“动作”面板学习资料：https://helpx.adobe.com/cn/photoshop/using/actions-actions-panel.html

3.2.5 资源生成器

这个功能在最新的几个版本PS里都得到支持，用于切图非常方便。具体操作方法：

打开设置，在“增效工具”下，勾选“启用生成器”
在主菜单的“文件”-“生成”，勾选“图像资源”
在图层面板选择要导出的图层，把文件名改为如 icon.png 带图片扩展名的图层名，然后就完成了资源生成的全部步骤。

就这么简单。生成的资源在文件同目录下、以-assets结尾的文件夹里。

图层名可以怎么设置呢？下面列出了一些例子。

图层名	导出图片
logo.png	生成png-32，含透明通道
logo.png8	生成png-8
logo.png24	生成png-24，不含透明通道
img/logo.png24	资源保存在img下
logo.jpg	质量90%
logo.jpg8	质量80%
logo.jpg5、logo.jpg50%	质量50%
50% logo@1x.png	宽高为原图的50%
50% logo@1x.png + 100% logo@2x.png	用“+”或“,”分割可生成多份资源

图片格式还可以是gif、svg甚至webp等。可以看出资源生成器非常强大，甚至图层编辑后也会同步更新到导出的资源里。要注意图层名要唯一，否则资源会被覆盖。

以上只是一部分配置，有兴趣的同学可以参考资料看详细的语法。

资源生成器语法:

https://helpx.adobe.com/photoshop/using/generate-assets-layers.html#specify-quality-and-size-parameters

3.2.6 巧妙解决软件崩溃问题

有时会遇到一些设计稿特别大、而我们又不得不进行一些编辑的情况，很容易会出现下面的情况：

从现在开始你可以这样做：

选中图层(组)
“图层”面板右键图层，选择“复制图层”

在弹出的面板的文档单选框里选择“新建”，如下图

接下来就可以看到在新文件里放置了该图层，然后就可以放心的进行“裁剪、变形、合并图层”等操作了……真的一点都不卡了。

五、图片格式的选择

5.1 额外的一点小姿势

5.1.1 矢量图与位图

--矢量图--

是通过组成图形的一些基本元素，如点、线、面，边框，填充色等信息通过计算的方式来显示图形的。一般来说矢量图表示的是几何图形，文件相对较小，并且放大缩小不会失真。

这里有一点要注意的是web开发中用到的图片都不是矢量图，即使是一个三角形，只有一个边框，都是位图。

那么矢量图在哪里有用到呢？

我目前的知识池就知道一个图标字体，比如font-awesome

目前在前端的开发中常用的图片格式有三种：jpg,png,gif。这些都是位图。

--位图--

又叫像素图或栅格图，它是通过记录图像中每一个点的颜色、深度、透明度等信息来存储和显示图像。一张位图就好比一幅大的拼图，只不过每个拼块都是一个纯色的像素点。位图的优点是利于显示色彩层次丰富的写实图像。缺点则是文件大小较大，放大和缩小图像会失真。

5.1.2 有损压缩和无损压缩

--有损压缩--

是对图像数据进行处理，去掉那些图像上会被人眼忽略的细节，然后使用附近的颜色通过渐变或其他形式进行填充。这样既能大大降低图像信息的数据量，又不会影响图像的还原效果。

JPG是我们最常见的采用有损压缩对图像信息进行处理的图片格式。

我们在保存图片为jpg格式时，会有一个品质选项。如果压缩的话一般选择品质在60-80之间，60以下图片失真会很严重。

--无损压缩--

PNG是我们最常见的一种采用无损压缩的图片格式。无损压缩的压缩原理是先判断图像上哪些区域的颜色是相同的，哪些是不同的，然后把这些相同的数据信息进行压缩记录，(例如一片蓝色的天空只需要记录起点和终点的位置就可以了)，而把不同的数据另外保存(例如天空上的白云和渐变等数据)。

这里要说明的是，无损压缩只是一种相对的“无损”压缩，并不是说无论如何压缩图片都不会失真。这点在PNG8中体现的尤为明显。PNG8最多只能索引256种颜色，所以在图像上出现的颜色数量大于我们可以保存的颜色数量时，我们就不能真实的记录和还原图像了。

5.1.3 透明

--索引透明--

即布尔透明，类似于GIF，某一像素只有全透和全不透明两种效果不能对透明度进行设置

--Alpha透明--

半透明

5.2抛砖引玉

图片格式	压缩方式	透明度	动画	浏览器兼容	适应场景
JPEG	有损压缩	不支持	不支持	所有	复杂颜色及形状、尤其是照片
GIF	无损压缩	支持	支持	所有	简单颜色，动画
PNG	无损压缩	支持	不支持	所有	需要透明时
APNG	无损压缩	支持	支持	Firefox Safari iOS Safari	需要半透明效果的动画
WebP	有损压缩	支持	支持	Chrome Opera Android Chrome Android Browser	复杂颜色及形状浏览器平台可预知
SVG	无损压缩	支持	支持	所有(IE8以上)	简单图形，需要良好的放缩体验需要动态控制图片特效

图片格式选型

通常WEB前端图片选型方案：

(1)小图，颜色、大小固定不变——base64(要压缩)
(2)小图，颜色、大小变化——字体图标、svg
(3)大背景图——代码、直接切图(要压缩，且选择合适的格式jpg/png)、分段切图
(4)数量很多的小图——雪碧图(不太建议，建议直接使用base64)

写在最后

我们做到还原设计稿，那我们是否还需要追溯下设计稿本身呢？如果UI稿本来就经不起推敲的呢？

这就上升到UI规范的问题，良好的界面设计应该都要有良好的设计规范来驱动。

假如UI稿都是认真完成的，我们WEB前端可能还会面临以下问题：

UI稿的像素真的是完美的吗，出现小数点像素怎么办？
有些UI设计到底是故意为之还是出了点差错？
移动端界面设计UI只给了一个尺寸的设计稿，各种手机尺寸的适配究竟怎么搞？

所以，更好的设计规范、开发规范真的很重要。