配置网站图标

各种各样的互联网产品，无论是网站还是app几乎都会有各种各样的图标，包括我们现在学习使用到的PS软件里都有很多比较形象的图标。

那么这节课我们将学习如何给网站header部分的搜索按钮配一个放大镜图标。

我先给大家看几个放大镜图标的样式：

大家看到这三个图标都是放大镜图标，但哪个更适合我们网站呢，这个时候我们就要学会思考问题。

我们在网站设计的初期其实已经确定了网站风格是属于比较简洁的，包括我们上节课设计的按钮也都是比较简单的风格，基本就是一个色块就完成。所以我们设计网站就要考虑到页面元素及风格要相对地统一，否则当你整体看这个网站的时候就会发现特别不协调。

因此我们现在需要制作的是一个扁平的与第三个放大镜类似的图标

看这本书的小伙伴可能大多都不是专业从事设计工作的，对图像的理解不一定都有认知。一般遇到这种情况时，我们应该利用搜索引擎去查看资料，比如看下同类网站的搜索按钮是怎样设计的，多看几个案例，还是先从模仿做起。

还有个问题，我们需要学会如何搜索，比较简单但是直接的方法是在百度搜索引擎中直接搜索“有哪些科技媒体网站”，这时一定有很多答案。

可以搜索出很多很多，我们随便点一个进去看下 。然后我们根据这些媒体的名称在去搜索引擎查看相关的网站。

以下是我找的一些相关网站页面header的参考：

图标是界面设计中最重要的元素之一，同样的图标设计也是我们必备的技能，日常工作中我们也经常会接触到含有图标设计、优化的需求。

那么到底什么样的图标才算是好的呢？图标的用途是帮助用户理解信息，所以识别性就是图标最重要、最底层的价值。如果你设计一个图标，用户看不懂，即使视觉再美观，也是无根之木，没有任何价值可言。

有一个便捷地去找到我们需要的图标的方法，我们还是用万能的搜索引擎去搜索。网上有很多比你设计的更好的图标并且都是一整套的，都包含了网页设计基本的图标和按钮。

大家可以通过这几个关键词搜索，比如：网站图标素材、icon图标等等

我们去这个阿里巴巴图标库看看，有的素材平台是收费的，就需要你自己下载试试就知道了。我们在阿里图标库搜索放大镜试下或者就用按钮名称直接进行搜索。

制作放大镜图标

搜索出的图标基本上都能满足网站上所涉及的图标了，我们在下载素材图标的时候也需要把控好每个图标的统一性。

但有的时候素材库里的图标与自己所要的有所偏差，那么这时候还是需要手动地在PS里去制作我们的图标。

我们还是以放大镜图标为例，一起来做一下： “新建→画布”或者使用快捷键【Ctrl】+【N】，使用形状工具中的椭圆工具。

接着按住【Shift】进行拖拽，这个时候我们就可以获得一个正圆，将其宽和高设置为120px ，填充色为黑色。接着我们再添加一个新的图层，然后在新图层上面画一个100px的圆，填充为红色。

将黑色圆形与红色圆形图层进行垂直和水平对齐（这一步不懂的请回顾复习上节课内容），红色圆形图层的位置需要在黑色圆形图层上面。

选择“图层→合并形状→减去顶层形状”

完成这个操作后我们就得到了一个10px粗的圆形，合并后形状的颜色与顶层图层的颜色相同，为红色，大家可以手动更改成黑色。

然后我们再给放大镜添加个手炳。我们用矩形工具添加一个宽度10px，高度70px的矩形，颜色为黑色，将矩形的顶部居中对齐于圆形底部，如图：

此时发现放大镜底部直角比较生硬，我们再添加一个10px的正圆，并将其一半放在手柄的底部。

选择“图层→合并形状→统一形状 ”

合并后我们就得到了一个完整的图标，可以进行任意的放大缩小。

可能大家看到这里还不是很清楚这几步在做什么，我再把其中合并形状中的几个操作给大家用另一方式演示下，这时你再回头看下这个图标制作就能明白了。

有人问为什么不先介绍呢，因为我希望大家带着问题去实践，这样会比直接讲操作更容易接受。

我们先画两个蓝色的的矩形重叠再一起。分别执行下面的4个操作。

两个矩形合并成一个整体

删除顶部重叠的部分

只保留重叠的部分

删除重叠的部分合并其他

这就是图标制作中经常用到的对形状的处理方法，这一块还是需要自己去动脑筋研究下，这节课我们就先讲这一个按钮的制作。其实在制作网站的过程中还有很多图标工具是一样的，就是使用的方法要正确。

到这一步的时候我们把刚刚制作的图标放置到我们设计网站的psd源文件的对应位置。

进行自由变化命令，将其逆时针旋转45度即为-45°，拖拽移动放至搜索按钮左侧与文字一样高。

我们再使用之前课程所学的对齐功能，将间距都调整下。没有绝对的要求，只要保证不影响用户理解上的问题以及按钮被点击时不会发生误点的操作，看着舒服就行，如下所示：

这个时候我们要随手保存文件，这步操作的习惯一定要养成，这次是我在书了提的最后一次了。

知识点总结：

1、利用搜索引擎认识网站图标

2、以放大镜为例制作一个网站图标

3、图层间的形状合并

结合上几节课所讲的内容，我们算完成了网站首页中的header部分。接下来的几节课就是比较关键的课程了，希望大家把之前的先消化下，操作两到三遍，这样你将会对PS的属性以及新课程有不一样的理解，加油吧！