UI教程中图标的设计

这是部落窝原创UI教程，作者候子将陆续为大家分享自己在UI学习、设计中的经验和教训，鲜花和失意。希望这些点点滴滴能帮助广大的UI初学者顺利进入UI设计行业。

写在前面的话

 

这不是教程，只是毫无保留地分享

 

　　大家也看到了我的题目，是的我不希望将我写的这一篇文章称之为“教程”，因为我对我自己的定位是我依旧是一个还需要不断学习的人，所以我更愿意把这篇文章叫做“笔记”，我希望大家可以通过我的笔记学到一些东西，或者我能得到大家的建议，一起共同进步。

 

　　首先我要告诉大家的是，不要把UI想得太难，如果决定要去做，首先就去行动、练习，当然也不要想得太简单，因为UI是一个涉及知识面很广的一个行业，并且它是在不断进化的，这就需要我们不断地提升自己，不断地去学习。

 

　　在我开始学习UI之前我对于UI这个行业几乎是屏蔽的，并不知道什么是UI。当有人告诉我UI这个东西之后，我最先产生的是好奇心（不错，我就是一个好奇心重的人，外号好奇宝宝），那时我就开始去找UI相关的介绍或者资料，相信大部分人和我都是一样，当脑海里慢慢出现UI的初级概念之后，就开始想要怎么样才可以成为UI设计师，UI设计师又要具备什么样的素质，等等一系列的问题，以至于我后来走上了UI学习的不归路，不过不可否认这的确是一个有趣的过程。那么从现在开始大家一起来见证我的学习历程，以后我会在每篇文章中附上我的个人设计感想，以及习作的步骤分解。

 

什么是UI

 

　　UI这词儿在大部分人的思维中，是一个高端大气的词汇。事实上我并不是这样认为的，我认为UI是一个值得人尊敬和不断探索的行业，它意味着创新。

 

 

　　UI一词来源于英文User Interface的首字母缩写，含义为用户界面，我想这个只要查过UI的相关知识的人都是知道的。从广义上去讲UI可以泛指我们生活中任何通过设计师设计，将功能信息传达给人们的界面，包括古代的指南针、地震仪，这些都能称之为UI，那么我们需要去精通这广义上的UI么？

 

　　我认为是不需要的，当下是一个分工细致的时代，广义上的UI已经被分为不同的多个行业。现在的UI，主要指的是与屏幕、互联网有关的界面设计，大到对某个电视或电脑屏幕的整个视觉效果设计，小到某个功能小图标的设计。设计师更多的是需要去揣摩怎样的界面设计，用户使用起来会更加顺手，更加有使用的欲望。

 

 

 

 

UI设计师需要具备什么？

 

　　相信很多人都有过这样的疑问，我也不例外，也问过很多在做UI的朋友，但是得到的答案总是大同小异的，你要会PS、会AI、会CorelDraw、会Skech、会Axure等等，不可否认软件技能作为UI设计师的确是要掌握很多，那么思想上呢？还有，软件真有想象中的那么难？

 

 

　　软件，只是我们用来设计的一种工具，它并不是什么洪水猛兽，学习一个软件最简单的方法就是打开这个软件，把里面的每一个功能翻个遍，每一个功能不断地尝试，只要你有想要设计的东西，在脑海里有一个模型，用什么样的工具做出来并不是那么重要。

 

　　作为一个设计师我觉得首先需要具备的是创意以及独立思考的能力，那么创新来源于何处？很简单，就是临摹，人类最厉害的技能并不是创新，而是模仿。通过不断地模仿我们的思维就可以在这个过程中不断地升华，最后形成自己的风格，另外多看，多思考，只要你能够坚持下去，成为UI设计师并不是什么难事。

 

 

 

　　总结一下，UI设计师需要具备的技能：

 

　　1．首先是有一定的审美能力，这个只需要多注意生活中的美丽事物就可以啦。

 

　　2．创新的思维，独立思考，必须要有很强的执行力。这个世界永远不缺点子，重要的是执行力，当你有了创新，并去实施了你才算真正的成功，才算抢得先机。永远不要在等到别人已经做出创新的事物时才开始哀叹说“我多少年前也这样想过”，那么你做了么？另外，请热爱生活。

 

　　3．具备一定的软件技能，并且能不断地学习。PS、AI这是必不可少的，另外也可以学一些其他的软件，例如Axure（可以做高保真效果，很好用的）、Firework（可以用它来做一些小的动效）。总之大家可以多多地挖掘，不要害怕软件的难度。

 

　　4．最好有一些手绘的功底，绘画其实是一门哲学，在一笔一笔的绘画过程中，我们可以让自己的心灵静下来，并且在这个过程中会收获许多意想不到的灵感。

 

UI设计师

 

　　在你成为一个UI设计师之前，你必定会经历一段时间的自我修炼，或是自学或是去培训机构，但是学到的知识却是又多又杂。你会PS、AI、CorelDraw、ID、Firework、Axure、DW，更有甚者还会HTML、JavaScript、CSS，问题是，这些知识里面有多少是你专精的？有几成你可以毫无畏惧的说出你精通？又有没有想过你要用这些软件来做什么样的工作？

 

　　事实上我们一开始学UI教程的时候，我们所知道的永远都是皮毛，这就是人们常说的师傅领进门，修行靠个人。这就像我们学会了各种零件的制作方法，最后怎么组装零件就需要我们自己去摸索。

 

 

 

　　并不是所有的公司都管我们叫UI设计师，也有一些公司管我们叫美工，到了这样的公司以后，你什么都得做，做banner、做公司宣传手册、做易拉宝、做网页改版、修图等等这都是你的事儿，我有一个朋友就是如此，整个公司只有她一个UI，然后整个公司只要和设计搭边的工作都归她了。一般情况来说，这样的公司是没有什么专业性的，他们只认为你是做设计的，那么这些事儿就应该你做，并不会在给你安排工作之前想起来你是UI设计师。

 

 

 

　　如果幸运，当你进入一些比较专业的设计公司，那么祝贺你，你将会有一个非常棒的成长环境，你的工作内容也会趋于专业化，你的职能也会在这里得到最大的发挥，你只需要去思考什么样的界面设计更加易于用户操作，按钮怎样放置才可以避免误操作，还有如何与团队的其他成员沟通，怎样可以让客户满意。

 

 

 

 

　　最后我想说一下个人学UI的一点感想：

 

　　我觉得我们这一代都是年轻一代的UI设计师，我们拥有很多便利的捷径可以走，前人总结的经验总能帮助我们，所以必须要感谢UI这一行中的所有前辈，不然如今的我们学习UI必然会经历一个相当辛苦的历程，这感觉有点像第二次工业革命后，如春笋般崛起的国家，我们都是借着前人的经验不断进步，所以在此必须要向UI行业中的前辈们致敬。

　这个图标的设计来源于我父亲，我记得小时候我父亲的职业是木匠和油漆工。那个时候我就觉得我的父亲就是神，一双手可以做出很多我想不到的东西，例如板车、衣柜门上的绣球花等等，那时候我是极崇拜他的，同时他也是我画画的启蒙老师。

　    所以在画这个图标的时候我希望可以用木刻的方式表现，主要想表达一种精致、细腻、古朴的感觉，设计过程中也参考了不少大神的作品。

制作背景

 

　　（1）打开Photoshop，然后按快捷键Ctrl＋N，打开“新建”对话框，接着在对话框中设置文档“名称”为“木质图标”，画布“宽度”为800像素，“高度”为550像素，“分辨率”为72像素/英寸，如图1所示，最后单击“确定”按钮即可完成画布的新建，如图2所示。

 

　　（2）在上图中可以看到背景的颜色为白色，我们可以通过一个简单的方法来改变背景的纹理，执行“文件/打开”菜单命令，如图3所示，然后在弹出的窗口中选择事先准备好的“布纹”素材，如图4所示，接着单击“打开”按钮，即可使素材图片打开到Photoshop教程中，如图5所示。

 

　　（3）执行，如图6所示，打开“图案名称”对话框，然后输入“名称”为“木纹”，接着单击“确定”按钮即可将图片保存为填充图案，如图7所示。

 

 

 

　　（4）关闭“布纹”文档，选中“”文档，然后执行“编辑/填充”菜单命令，如图8所示，打开“填充”对话框，接着设置“使用”为“图案”，并单击“自定图案”右侧的按钮在弹出的图案选项中选择最后一个图案，如图9所示，设置完成后单击“确定”按钮即可使图案平铺到画布中，如图10所示。

 

 

 

 

绘制图标底纹

 

　　（1）移动鼠标至工具箱中“矩形工具”处，然后按下鼠标左键，在打开的菜单选项中选择“圆角矩形工具”，如图11所示。

 

 

 

　　（2）移动鼠标至画布中，然后单击鼠标左键，打开“创建圆角矩形”对话框，接着在对话框中设置“宽度”和“高度”均为200像素，“半径”为30像素，如图12所示，再单击“确定”按钮即可在舞台中创建一个圆角矩形，如图13所示。

 

 

 

　　（3）打开素材文件夹，将文件夹中的木纹材质拖曳到Photoshop中，然后按住Shift键等比缩小图片至合适大小，接着在“图层”面板中选择木纹图层，再按住Alt键，在木纹图层和圆角矩形之间单击鼠标左键，即可将木纹剪切到圆角矩形中，如图14所示。

 

 

 

　　（4）双击圆角矩形所在图层，打开，勾选“内阴影”样式，然后双击该样式，可以对内阴影进行设置，本例中设置内阴影 的“混合模式”为“正片叠底”，“颜色”为深棕色（R:48,G:29,B:2）,“距离”为6像素，如图15所示。

 

 

 

 

　　（5）添加“内阴影”样式的目的主要是为了制作出木板的厚度感，接下来为圆角矩形添加轮廓高光。勾选“内发光”，然后双击该样式，接着设置“混合模式”为“滤色”，“不透明度”为37%，“大小”为“7像素”，“范围”为50%，如图16所示。

 

 

 

　　（6）轮廓光制作完成，接下来开始制作木板的投影。勾选“投影”样式，然后双击该样式，接着设置“混合模式”为“正常”，“颜色”为棕色，“不透明度”为16%，“距离”为31像素，“大小”为59像素，如图17所示，设置完成后单击“确定”按钮。

 

 

　　提示： 我们最终做两层投影。一层投影位置离木板较近，通常这个位置的投影会受到木板颜色的影响，因此在选择这个位置的颜色时应选择与木板接近的颜色，另一层投影为距离木板较远的部分，颜色通常为深色的背景色。下面步骤七就是制作距离更远部分的投影。

　　（7）选中圆角矩形所在的图层，按快捷键Ctrl+J复制图层，然后选中处于下层的图层，并删除图层样式“内阴影”和“内发光”，接着双击图层，打开“图层样式”对话框，设置投影的“样式”为“正片叠底”，颜色为深棕色，“不透明度”为70%，“距离”为36像素，“扩展”为7%，“大小”为68像素，如图18所示。

 

 

　　提示：如果采用将图层拖至图层面板创建新图层图标上的方法复制图层，则会出现木纹剪切效果失效的情况，遇到这种情况时只需要重新剪切一次即可。

　　（8）设置完成后，单击“确定”按钮保存设置，至此，如图19所示。

绘制电话图标

（1）选择“椭圆工具”，然后按住Shift键在画布中拖曳鼠标，绘制出一个圆，接着使用“路径选择工具”选中圆，再按住Alt键拖曳鼠标，即可复制出一个圆，如图20所示。

 

 

 

 

　　（2）在顶部工具属性栏中设置“路径操作”为“合并形状”，如图21所示，然后使用“椭圆工具”在画布中绘制一个椭圆，如图22所示。

 

 

 

 

 

　　（3）使用“路径选择工具”选中椭圆，并按住Alt键拖曳鼠标复制出一个椭圆，接着在工具属性栏中设置“路径操作”为“减去顶层形状”，如图23~24所示。

 

 

　　（4）使用“路径选择工具”选中两个椭圆，然后按快捷键Ctrl+T调用“自由变换路径”命令，接着将两个椭圆移动至合适位置，并向右旋转45°，如图25所示。再在顶部工具属性栏中设置“路径排列方式”为“将形状置为最底层”，如图26所示。

 

 

 

 编辑注：

 

　　设置路径排列时，每次只能选择单条路径进行设置。就当前案例来说，先选择复制的椭圆置为底层，然后选择另一个椭圆置为底层。

　　（5）至此电话的图标的雏形已经具备了，接下来开始制作电话的听筒。使用“路径选择工具”选中圆，然后按住Alt键拖曳鼠标，复制出一个圆，接着按快捷键Ctrl+T，将圆调整为如图27所示的椭圆。

 

 

　　（6）保持对椭圆的选中，然后在顶部菜单栏中设置“路径操作”为“减去顶层形状”，即可减去圆的部分图像，如图28所示，接着使用“椭圆工具”绘制出一个椭圆，并将其移动至话筒位置，如图29所示。

 

 

　　（7）选中椭圆，然后按住Alt键拖曳鼠标复制一个椭圆，如图30所示，接着按快捷键Ctrl+T，将椭圆等比缩小至合适大小，如图31所示。

 

 

　　（8）将缩小后的椭圆放置到听筒的对应位置，并设置“路径操作”为“减去顶层形状”，然后按住Alt键拖曳鼠标复制出6个椭圆，并分别对其大小和位置进行调整，调整完成后的效果如图32所示，接着使用同样的方式绘制出听筒，如图33所示。

 

制作木刻效果

　　在上个小节中电话图标已经绘制完成了，现在我们来给电话图标制作木刻效果。

　　（1）首先设置椭圆图层的模式为“正片叠底”，电话不见了。不用担心，我们并不需要白色。双击椭圆图层，打开“图层样式”对话框，然后在对话框中勾选“斜面和浮雕”样式，并设置“样式”为“内斜面”，“方法”为“平滑”，“大小”为3像素，“角度”为90度，“高度”为30度，高光和阴影的不透明度分别为0%和30%，如图34所示，设置完成后，电话会呈现浮雕的效果，如图35所示。

 

 

 

 

 

 

　　

　　（2）勾选“内阴影”样式，并设置“”，颜色为黑色，“不透明度”为70%，“距离”和“大小”均为为2像素，“角度”为70°如图36所示。通过这些设置可以制作出电话，内部的阴影，给人感觉电话是有厚度的，如图37所示。

 

 

 

 

　　（3）勾选“颜色叠加”样式，并设置“混合模式”为变暗，颜色为棕黑色，“不透明度”为60%，如图38所示，通过这个样式可以变更电话的颜色，使它与木板的颜色明度有所区分，如图39所示。

 

 

 

　　（4）勾选“外发光”样式，然后设置“混合模式”为“滤色”，“不透明度”为45%，“大小”为2像素，如图40所示，通过这种方式可以制作出木刻边缘的高光，如图41所示。

 

 

（5）选中电话图标所在图层和底纹所在图层，按快捷键Ctrl+G将其转换为组，然后选择“横排文字工具”，在画布中打击鼠标左键，插入文字输入框，接着输入文字，如图42所示，字体均为“兰亭超细黑简体”，“颜色”为白色，“字间距”为400，如图43所示。

 

 

 

 

　　（6）选中两个文字图层，并按快捷键Ctrl+G，将两个图层转换为组，然后双击组，打开“图层样式”对话框，为其添加“斜面和浮雕”和“投影”两种样式，如图44所示。

 

 

　　（7）两种样式的参数设置分别如图45和图46所示，设置完成后单击“确定”按钮，则木质图标绘制完成，如图47所示，最后按Ctrl+S保存文件即可。