制作网站分割线

借鉴颜色值

完成header部分的图标后，接下来我们需要画一条矩形作为区分header的底部分割线

选择矩形工具，创建矩形：长1920像素x宽2像素，线条颜色为#f2f2f2，使用移动工具或快捷键 【V】 将其移动至header底部。

此时我们发现参考线遮挡住线条了，这时需要关闭参考线显示。快捷键【Ctrl】+【H】，显示如下图：

看到这里聪明的同学会产生疑问：为什么线条颜色要设置成#f2f2f2而不是其他颜色？

这里我要解释下：

一是根据自己的设计经验去判断用什么色值的线条能起到区分的效果。

二是在初学阶段要去同了解同类样式的网站都用的是什么颜色，多看就自然就能知道这个地方的颜色值。

借鉴是我们在做设计的时候一个重要的方法，刚学设计时毕竟个人的经验有限，而多去参考优秀的作品，培养自己的审美，那么就可以逐渐形成自己的设计经验。

那么我们如何去获取想要的颜色呢？下面介绍两种实用的方法：

第一种：利用截图放大镜查看页面色值

我们可以用微信截图，去查看36kr的线条色值。

首先打开微信-点击截图功能。

将电脑鼠标移动到线条位置上，通过截图中的放大镜找到相对应的RGB的值为#f2f2f2，然后回到设计文件中将矩形的色值改为我们需要的颜色值。另外，因为电脑版本的不同，用微信截图后RGB的显示值可能出现的是RGB：（242,242,242），道理其实一样，我们只需要在色板中输入对应的R：242，G：242，B：242，即可

第二种：利用截图粘贴到PS，用拾色器吸取想要的颜色

这一种方法也是我们需要重点介绍的方法：我们可以用微信截图，截取你想要的那一部分（如果怕页面太小不方便吸取颜色，可以放大页面后截取），然后粘贴至PS设计稿中。接着修改矩形的填充色时用拾色器吸取你想要的那一部分的颜色，这样拾色器便会自动为你填写颜色值。

刚刚我们上面提到了颜色取样器，它是PS里获取颜色信息的重要工具。当我们执行“窗口→信息”命令时，点击颜色取样器工具，然后将它在想要取样的位置单击时，这时候“信息”面板便会显示取样位置的颜色值。

我们在今后的设计中可能还会碰到这样的情况，当你碰见一个喜欢的颜色，但是却不知道它的具体色值。那么将其放置到PS里然后用颜色吸取器吸取颜色，查找准确颜色值将是一个简便又实用的方法。这样吸取出来的颜色值不但准确没有偏差，而且快速又方便。

其实上面所讲的这两种方法的原理是相似的，都是获取想要部分准确颜色值的方法，大家可以动手都试一试，然后选取自己觉得最方便的一种。

当然，我们还可以通浏览器中审查页面元素，通过线条代码找出具体颜色设置。这种方法比较准确，但初学者不建议使用，毕竟不懂代码也不容易找出来。我不做具体的讲解，大概如下图所示：

从错误中恢复

在我们的设计过程中，如果操作出现了失误或对创建的效果不满意，可以撤销操作，或者将图像恢复为最近保存过的状态。在PS里提供了很多帮助用户恢复操作的功能，我们可以根据自己的实际需要进行相关的设置。

在PS里，点击“编辑→还原移动”，或者使用快捷键【Ctrl】+【Z】可以撤销对所作的最后一步的效果。当然这一步的操作知识还原一步，当我们想要连续还原时，可执行“编辑”→“后退一步”，或者连续点击快捷键【Ctrl】+【Alt】+【Z】，逐步进行撤销操作。

在PS默认设置中可以返回的步数是20步，如果需要将返回步数提高，那么对你电脑的配置要求也相对高一些。一般我设置的返回步数为30步。

PS -首先项-性能

将历史记录状态调整到30，点击确定。如果你觉得20步可以解决问题，当然可以不用修改设置。

我们若是想将文件还原到最后一次保存时的状态，可以执行“文件”→“恢复”命令。

在PS里面还有一个历史记录面板可以还原操作，初学者建议使用这个方法。

在PS里编辑图像时，每一步的操作都会被记录到“历史记录”的面板里。

打开窗口-历史记录，会弹出一个历史记录面板，这里会记录每一条所操作的步骤，可以直接选中你需要返回的那一步即可还原到当时的步骤，这样操作是最快而又有效果的。

如果你在历史记录中选择某个步骤时点击鼠标右键选择删除，那么将会把当前以及该步骤后面的的操作都删除掉。

大家可以跟着我的介绍自己操作使用下这个功能。

知识点总结：

1、学会借鉴其他网站的颜色设置

2、利用颜色取样器及信息面板获取想要的颜色值

本节课我们利用分割线的制作向大家讲解了借鉴以及便捷使用颜色吸取器的重要性。在我们的工作与学习中也往往如此，有的时候你苦苦思索，在自己仅有的经验里去发挥创造出来的结果却不尽如人意。但是如果我们去借鉴别人的做法，吸取别人成功的经验，然后应用到自己的实践中，不仅省时省力，而且可以逐步积累，慢慢形成自己的一套做事和学习的模式和体系。