1、Web美工基础教程第5章 网页按钮与图标的设计与制作目录 水晶设计风格与扁平设计风格制作水晶风格按钮 制作扁平风格按钮 网站Logo的设计与制作 像素小图标的设计与制作第5章 按钮和图标是网站中常用的组件，可以影响网站的可用性和用户体验。好的按钮和图标不仅让网站看起来生动有趣，而且会增加网站的吸引力。本章将以案例的形式讲解几种常用按钮和图标的设计和制作。5.1 水晶设计风格与扁平设计风格p 水晶设计很常用到的就是高光、阴影、渐变等效果体现出一种水晶质感。其所使用的颜色也比较鲜明艳丽，给用户的视觉冲击及吸引力很强。p 那什么是扁平化设计呢？所谓扁平化设计，就是在进行设计的过程中，去除所有具有三维
2、突出效果的风格和属性。也就是说，去除掉下落式阴影、梯度变化、表面质地差别，以及所有具有三维效果的设计效果。扁平化设计在如今更备受设计师们的青睐，是因为通过这种风格可以让设计更具有现代感，另外可以强有力的突出设计中最为重要的内容：内容和信息。其实那些具有三维效果的属性，本身都是某段时间的流行风格，所以去除掉了这些信息，就能让设计不那么容易过时。更何况还能突出内容本身。所以这种设计风格还是有很多好处的。5.1 水晶设计风格与扁平设计风格扁平化设计的特点是十分鲜明的，扁平化设计风格具有五个特点：拒绝特效 扁平化设计概念最核心的地方就是放弃一切装饰效果，诸如阴影、透视、纹理、渐变等等能做出 3D 效果
3、的元素一概不用。所有的元素的边界都干净俐落，没有任何羽化、渐变或者阴影。因为这种设计有着鲜明的视觉效果，它所使用的元素之间有清晰的层次和布局，这使得用户能直观的了解每个元素的作用以及交互方式。如今从网页到手机应用无不在使用扁平化的设计风格，尤其在手机上，因为屏幕的限制，使得这一风格在用户体验上更有优势，更少的按钮和选项使得界面干净整齐，使用起来格外简单。界面元素 扁平化设计通常采用许多简单的用户界面元素，诸如按钮或者图标之类。这些用户界面元素方便用户点击，这能极大的减少用户学习新交互方式的成本，因为用户凭经验就能大概知道每个按钮的作用。此外，扁平化除了简单的形状之外，还包括大胆的配色。但是需要
4、注5.1 水晶设计风格与扁平设计风格意的是，扁平化设计不是说简单的搞些形状和颜色搭配起来就行，它和其他设计风格一样，是由许多的概念与方法组成的。优化排版 由于扁平化设计的使用特别简单的元素，排版就成了很重要的一环，排版好坏直接影响视觉效果，甚至可能间接影响用户体验。字体是排版中很重要的一部分，和其他元素相辅相成。惯用明亮配色 扁平化设计中，配色貌似是最重要的一环，扁平化设计通常采用比其他风格更明亮、炫丽的颜色。同时，扁平化设计中的配色还意味着更多的色调。比如，其他设计最多只包含两三种主要颜色，但是扁平化设计中会平均使用六到八种。5.1 水晶设计风格与扁平设计风格 最简方案 尽量简化设计方案，避
5、免不必要的元素在设计中出现。简单的颜色和字体就足够了，如果还想添加点什么，尽量选择简单的图案。扁平化设计尤其对一些做零售的网站帮助巨大，它能很有效的把商品组织起来，以简单但合理方式排列。5.2 实例1：制作水晶风格按钮 按钮也是网站的必备元素之一，一般用于实现提交功能，例如当用户输入了关键字后会点击“搜索”按钮，网页中将出现搜索结果。它的结果应放在第一位，所以其设计以简单明了为首要条件。本案例将介绍制作水晶风格按钮的方法，其效果如图所示。水晶风格按钮效果图5.2 实例1：制作水晶风格按钮 【Step1】启动Photoshop CS6，选择【文件】/【新建】命令，在打开的“新建”对话框中输入文件
6、的名称为“实例1：制作水晶风格按钮”，宽度300像素，高度200像素，分辨率为72像素/英寸，颜色模式为RGB颜色，背景内容为默认白色。新建文件5.2 实例1：制作水晶风格按钮 【Step2】圆角矩形工具 ，在画布中单击鼠标弹出创建圆角矩形窗口，设置宽度为250像素，高度100像素，半径5像素。如图所示。创建圆角矩形 【Step3】【Ctrl+J】组合键复制”圆角矩形1”图层，选择”圆角矩形1副本”图层，【Ctrl+T】组合键自由转换缩小矩形框，W：95%，H：90%。如图所示。缩小矩形框5.2 实例1：制作水晶风格按钮 【Step4】鼠标双击”圆角矩形1副本”图层弹出图层样式窗口，或者点击图
7、层样式图标 ，勾选渐变叠加。做适当的配置如图所示，其中渐变的前景色为R：27、G：50、B：0，背景色为R：136、G：255、B：0。添加渐变叠加样式 【Step5】选择”圆角矩形1副本”图层为其添加内阴影样式，参数如图所示。添加内阴影样式5.2 实例1：制作水晶风格按钮 【Step6】选择”圆角矩形1副本”图层为其添加外发光样式，参数如图所示。其中前景色为R：20、G：87、B：10。效果图如图所示。添加外发光样式椭圆工具属性设置添加样式效果图 【Step7】选择椭圆工具 ，填充为白色，不描边，在画布中拖拽出如图形状并设置不透明度为50%，如图所示。椭圆工具拖曳出的形状5.2 实例1：制作
8、水晶风格按钮 【Step8】选中”圆角矩形1副本”图层，在路径窗口中选中“圆角矩形1副本形状路径”右键“建立选区”，如图所示。建立选区添加图层蒙版图 【Step9】新建图层，产生新的图层名为“图层1”，为该图层添加图层蒙版，然后按【Ctrl】键并鼠标点击”图层1”的蒙版图层，再次载入选区，如图所示。选区效果图添加图层蒙版效果图5.2 实例1：制作水晶风格按钮 【Step10】在菜单栏中选择【编辑】/【描边】，弹出描边窗口，设置参数如图所示。描边参数渐变效果图 【Step11】选择渐变工具 ，选择“黑、白渐变”模式，选中图层1的蒙版图层，鼠标由上到下的在选区中拖拽，效果图如图所示。5.2 实例1
9、：制作水晶风格按钮 【Step12】选中所有图层，【Ctrl+G】组合键组合图层，组名命名为水晶按钮，并【Ctrl+J】组合键复制组，命名为倒影，如图所示。【Ctrl+T】组合键自由变换调整图片垂直旋转，如图所示。图层选项卡渐变后效果图垂直旋转效果图 【Step13】给倒影图层添加蒙版 ，利用渐变工具 （黑、白渐变模式），并调整不透明度为30%。效果如图所示。5.2 实例1：制作水晶风格按钮 【Step14】选择横排文字工具 ，单击画布，出现闪动的竖线后，在选项栏中设置“字体”为Arial，“字体样式”为Bold，“字体大小”为32点、“文本颜色”为灰色（RGB:205、205、205），在画
10、布中，输入英文字符“submit”，如图所示。最终效果图5.3 实例2：制作扁平风格按钮 本案例将带领大家绘制一款与水晶风格不同的扁平风格按钮，其效果如下图所示。通过本案例的学习，读者能够掌握圆角矩形工具、文字工具、图层样式、图层蒙版、等工具的使用，了解到扁平风格与水晶风格按钮的区别。扁平风格按钮效果图5.3 实例2：制作扁平风格按钮 【Step1】启动Photoshop CS6，选择【文件】/【新建】命令，在打开的“新建”对话框中输入文件的名称为“实例2：制作扁平风格按钮”，宽度300像素，高度200像素，分辨率为72像素/英寸，颜色模式为RGB颜色，背景内容为默认白色。如图所示。新建文件5
11、.3 实例2：制作扁平风格按钮 【Step2】【Ctrl+J】组合键复制背景图层，设置前景色为灰色（RGB:238、238、238），按【Ctrl+Delete】组合键为画布填充背景色。创建圆角矩形 【Step3】设置前景色为绿色（RGB:129、229、156），选择圆角矩形工具【U】（【Shift+U】组合键可转换形状工具），在画布中点击弹出“创建圆角矩形”参数框，设置宽度230px，高度80像素，半径为40px。如图所示。5.3 实例2：制作扁平风格按钮 【Step4】在画布中点击出现一个圆角矩形形状作为按钮的基本形状，拖到画布合适的位置，如图所示。绘制圆角矩形形状设置内阴影 【Step
12、5】选中“圆角矩形1”图层，单击“添加图层样式”按钮 ，弹出图层样式选择框，选择“内阴影”，设置混合模式为正片叠底，颜色为绿色（RGB:0、176、91），不透明度为75%，角度为90度，距离2像素、阻塞0%、大小13像素。如图所示。内阴影效果图5.3 实例2：制作扁平风格按钮 【Step6】继续添加“外发光”样式，混合模式为“正常”，不透明度调整为60%，颜色为绿色（RGB：129、229、156）。如图所示。设置外发光外发光效果图5.3 实例2：制作扁平风格按钮 【Step7】为了层次感更强烈，选择“圆角矩形工具”，在画布中绘制，产生新的图层“圆角矩形2“，参数如图所示。创建圆角矩形参数
13、【Step8】同时选中“圆角矩形1”图层和“圆角矩形2”图层，对两个图层做垂直居中对齐 和水平居中对齐 操作。5.3 实例2：制作扁平风格按钮 【Step9】调整“圆角矩形2”图层的位置，将其放到“圆角矩形1”图层的下面。再选中“圆角矩形2”，单击“添加图层样式”按钮，弹出图层样式选择框，选择“渐变叠加”项，设置渐变的前景色为浅绿（RGB：222、255、255），背景色为绿色（RGB：173、232、191），缩放150%。如图所示。渐变颜色参数编辑渐变叠加设置5.3 实例2：制作扁平风格按钮 【Step10】层次感效果如图所示。层次感效果图创建圆角矩形大小设置 【Step11】选择“圆角矩
14、形工具”，新建一个圆角矩形图层，产生新的图层“圆角矩形3“，参数如图所示。调整“圆角矩形3”图层到合适的位置，如图所示。调整到合适的位置5.3 实例2：制作扁平风格按钮 【Step12】为”圆角矩形3”图层设置样式，单击“添加图层样式”按钮 ，弹出图层样式选择框，选择“渐变叠加”项，设置渐变的前景色为灰色（RGB：231、231、231），背景色为白色（RGB：255、255、255），缩放150%。如图所示。渐变编辑器前、背景色设置渐变叠加样式参数设置5.3 实例2：制作扁平风格按钮 【Step13】继续为”圆角矩形3”图层添加“投影”样式，正片叠底，颜色为绿色（RGB:103、195、18
15、2），不透明度56%，角度为90度，距离0像素，大小8像素。如图所示。投影样式参数设置投影样式效果图5.3 实例2：制作扁平风格按钮 【Step14】【Ctrl+J】组合键复制“圆角矩形3”图层，得到“圆角矩形3副本”图层。【Ctrl+T】组合键执行“自由变化”操作，接着右击，在弹出的快捷菜单中选择“缩放”命令，按【Shift+Alt】等比例缩小，如图所示。等比例缩放渐变叠加设置 【Step15】【Enter】键确认”自由变化”形状。继续为“圆角矩形3副本”图层添加“渐变叠加”样式，渐变的前景色为灰色（RBG:231、238、239），背景色为白色（RGB:255、255、255）。如图所示。
16、5.3 实例2：制作扁平风格按钮 【Step16】【Shift+Ctrl+Alt+N】组合键新建一个图层，设置前景色为白色（RGB:255、255、255），选择“椭圆工具”，按【Shift】键在画布中绘制出一个正圆。如图所示。绘制凹陷小圆5.3 实例2：制作扁平风格按钮 【Step17】为制造凹陷小圆的效果，为”椭圆1”图层设置样式，单击“添加图层样式”按钮，弹出图层样式选择框，选择“渐变叠加”项，设置渐变的前景色为白色（RGB：255、255、255），背景色为灰色（RGB：103、195、182），缩放150%。如图所示。椭圆设置渐变叠加样式渐变叠加样式效果图5.3 实例2：制作扁平风格
17、按钮 【Step18】选择“横排文字工具”，单击画布，出现闪动的竖线后，在选项栏中设置“字体”为Arial，“字体样式”为Regular，“字体大小”为24点、“文本颜色”为灰色（RGB:205、205、205），如图所示。在画布中，输入英文字符“Simple Switch”，如图所示。输入英文字符“横排文字工具”选项栏5.3 实例2：制作扁平风格按钮 【Step19】菜单栏中选择【窗口】/【字符】选项，在弹出的字符设置窗口中，调整英文字符字符的间距为50，如图所示。调整字符间距效果图字符间距设置5.4 实例3：网站Logo的设计与制作 LOGO是网站形象的重要体现，即是网站的名片。对于一个追
18、求精美的网站，Logo更是它的灵魂所在，即所谓的“点睛”之处。Logo能使受众便于选择，一个好的Logo往往会反映网站及制作者的某些信息，特别是对一个商业网站来话，我们可以从中基本了解到这个网站的类型，或者内容。在一个布满各种Logo的链接页面中，这一点会突出的表现出来。在本实例中，将以绘制健身俱乐部网站Logo为例，其最终效果如下图所示。网站logo效果图5.4 实例3：网站Logo的设计与制作 【Step1】启动Photoshop CS6，选择【文件】/【新建】命令，在打开的“新建”对话框中输入文件的名称为“实例3：网站Logo的设计与制作”。新建文件 【Step2】设置文件的“宽度”为5
19、00像素，“高度”为500像素，“分辨率”为72像素/英寸，颜色模式为RGB颜色，背景颜色默认为白色。点击“确定”按钮，新建一个空白图像文件，如图所示。5.4 实例3：网站Logo的设计与制作 【Step3】选择椭圆工具 ，在属性栏中将圆的填充色设为黑色（RGB：0,0,0），描边为黑色（RGB：0,0,0），描边粗细为3点，如图所示。椭圆工具属性设置 【Step4】按【Shift+Ctrl+Alt+N】组合键新建图层，按【Shift+Alt】组合键在画布中拖出一个正圆形状，如图所示。椭圆图层5.4 实例3：网站Logo的设计与制作 【Step5】再次选择椭圆工具，在属性栏中将圆的填充色设为黑
20、色（RGB：0,0,0），描边为白色（RGB：255,255,255），描边粗细为5点，如图所示。椭圆工具属性设置 【Step6】按【Shift+Ctrl+Alt+N】组合键新建图层，按【Shift+Alt】组合键在画布中拖出一个正圆形状，效果如图所示。效果图5.4 实例3：网站Logo的设计与制作 【Step7】选择”椭圆2”图层，按【Ctrl+J】组合键复制得到“椭圆 2 副本”图层。按【Ctrl+T】组合键进行自由变换，按【Shift+Alt】组合键以圆心为中心缩小，如图所示。自由变换效果图描边样式设置 【Step8】按【Enter】键确认图形形状，选择“椭圆 2 副本”图层为其添加图层
21、样式，选择描边，如图所示。5.4 实例3：网站Logo的设计与制作 【Step9】选择椭圆工具，在属性栏中将圆的填充色设为黑色（RGB：0,0,0），描边为白色（RGB：255,255,255），描边粗细为1.5点，如图所示。椭圆工具属性设置 【Step10】按【Shift+Ctrl+Alt+N】组合键新建图层，按【Shift+Alt】组合键在画布中适当位置拖出一个正圆形状，如图所示。正圆形状效果图5.4 实例3：网站Logo的设计与制作 【Step11】选择椭圆工具，在属性栏中将圆的填充色设为黑色（RGB：0,0,0），描边为白色（RGB：255,255,255），描边粗细为1.5点，如图所
22、示。效果图 【Step12】【Shift+Ctrl+Alt+N】组合键新建图层，选择椭圆工具，在属性栏中将圆的填充色设为黑色（RGB：0,0,0），描边为黑色（RGB：0,0,0），描边粗细为1.5点，如图所示。椭圆工具属性设置5.4 实例3：网站Logo的设计与制作 【Step13】在“椭圆2副本”图层合适的位置拖拽出小正圆，并按【Alt】键在图层中复制出一圈小圆，如图所示。小正圆 【Step14】【step14】按【Ctrl+G】组合键将小圆的所有图层合并到一个组里，并命名为“小圆”。5.4 实例3：网站Logo的设计与制作 【Step15】【Shift+Ctrl+Alt+N】组合键新建图
23、层，选择圆角矩形工具，在属性栏中将圆的填充色设为白色，描边为黑色，描边粗细为0.2点，半径为3像素，如图所示。圆角矩形工具属性设置 【Step16】利用圆角矩形工具 在画布圆的正中心绘制出哑铃形状，如图所示。哑铃形状5.4 实例3：网站Logo的设计与制作 【Step17】按【Ctrl+G】组合键将组成哑铃形状的所有图层合并到一个组里，并命名为“哑铃形状”。椭圆工具属性设置 【Step18】【Shift+Ctrl+Alt+N】组合键新建图层，选择椭圆工具，在属性栏中选择路径，如图所示。将鼠标指针置于画布中心位置，按住【Shift+Alt】组合键不放，绘制正圆路径，大小和位置如图所示。绘制路径圆
24、5.4 实例3：网站Logo的设计与制作 【Step19】选择“横排文字工具”，将鼠标指针置于左侧正圆路径上，闪烁光标时即可输入文字，建立路径文字的起点，输入文字“Powerhouse Gym”，选择“路径选择工具”将文字调整到合适位置，如图所示。文字图层1 【Step20】复制“Powerhouse Gym”图层，选择“横排文字工具”，将鼠标指针置于左侧正圆路径上，闪烁光标时在输入文字“Reach your potential”，选择“路径选择工具”将文字调整到合适位置，如图所示。文字图层25.4 实例3：网站Logo的设计与制作 【Step21】【Shift+Ctrl+Alt+N】组合键新
25、建图层，选择多边形工具 ，在属性栏中选择形状，填充为白色，描边为黑色，边设置为5，如图所示。多边形工具属性设置 【Step22】在图中绘制五角星并将其拖放到合适的位置，效果如图所示。五角星绘制5.4 实例3：网站Logo的设计与制作 【Step23】为了使该Logo能与网页上其它图像元素完美融合，则需要将图片的背景改成透明背景。选中背景图层，【Delete】键删除背景图层，效果如图所示。透明背景 【Step24】在菜单栏中选择【文件】/【存储为】，选择将图片保存为png格式的，如图所示。文件保存为png格式5.5 实例4：像素小图标的设计与制作 图标是网页中的常见元素，主要功能是表意，也包含装
26、饰及品牌传递的作用。其中存储为gif、png等位图格式的图标，称为像素图标，大小通常为16px、24px、32px等。本例将以绘制一个像素风格的人物为例，效果图如下。像素小图标效果图5.5 实例4：像素小图标的设计与制作 【Step1】启动Photoshop CS6，选择【文件】/【新建】命令，在打开的“新建”对话框中输入文件的名称为“实例4：像素小图标的设计与制作”，宽度100像素，高度100像素，分辨率为72像素/英寸，颜色模式为RGB颜色，背景内容为背景色（灰色RGB:238、238、238）。如图所示。新建文件5.5 实例4：像素小图标的设计与制作 【Step2】选【step2】菜单栏
27、中选择【编辑】/【首选项】，网格线间隔为1像素。如图所示。【Step3】选择“缩放工具”，放大画布300%。再在菜单栏中选择【视图】/【显示】中的网格。如图所示。设置网格线间隔网格线5.5 实例4：像素小图标的设计与制作 【Step4】【Shift+Ctrl+Alt+N】组合键新建图层，修改图层名为“腿部和身体躯干部分”。选择“铅笔工具”，大小1px。设置前景色为肉粉色（RGB：252、193、147），绘制宽2像素、高9像素的腿部，身体躯干部分宽5像素、高9像素。如图所示。【Step5】【Shift+Ctrl+Alt+N】新建图层，修改图层名为“脚部和肩部”，继续选择“铅笔工具”，大小1px
28、，绘制出脚部（宽3像素、高1像素）和肩膀部分（在躯干的两边分别添加1像素的宽度）。如图所示。腿部和身体躯干部分绘制脚部和肩部5.5 实例4：像素小图标的设计与制作 【Step6】【Shift+Ctrl+Alt+N】新建图层，修改图层名为“颈部和头部”。继续选择“铅笔工具”，大小1px，绘制出颈部（宽3像素、高1像素）和头部（宽5像素、高5像素）。如图所示。【Step7】【Shift+Ctrl+Alt+N】新建图层，修改图层名为“眼睛”。开始设置面部特征，选择“铅笔工具”，大小1px，设置前景色为灰色（RGB：192、153、133）绘制眼睛。如图所示。绘制颈部和头部绘制眼睛5.5 实例4：像素
29、小图标的设计与制作 【Step8】【Shift+Ctrl+Alt+N】新建图层，修改图层名为“头发”。再设置前景色为深棕色（RGB：104、71、39）绘制宽5像素、高2像素的头发形状。绘制完头发之后修改前景色为浅棕色（RGB：178、133、94）绘制出发鬓效果。如图所示。【Step9】【Shift+Ctrl+Alt+N】新建图层，修改图层名为“裤子”。设置前景色为蓝色（RGB：104、161、180）在身体上绘制出裤子的效果。如图所示。绘制头发和发鬓绘制蓝色裤子5.5 实例4：像素小图标的设计与制作 【Step10】【Shift+Ctrl+Alt+N】新建图层，修改图层名为“鞋子”。设置前
30、景色为灰色（RGB：145、145、145）绘制出鞋子的效果。如图所示。【Step11】【Shift+Ctrl+Alt+N】新建图层，修改图层名为“衬衣”。设置前景色为红色（RGB：234、46、38）绘制出红色衬衣的效果。如图所示。绘制鞋子绘制衬衣5.5 实例4：像素小图标的设计与制作 【Step12】可以在衬衫的中间增加细节，可以是领带也可以是一些图形，这里将添加加一些(低对比度)条纹。【Shift+Ctrl+Alt+N】新建图层，修改图层名为“条纹”。设置前景色为红色（RGB：255、80、57）绘制出条纹。如图所示。【Step13】【Shift+Ctrl+Alt+N】新建图层，修改图层名为“外套”。设置前景色为灰色（RGB：255、80、57）绘制出外套。如图所示。绘制条纹绘制外套5.5 实例4：像素小图标的设计与制作 【Step14】所有的像素人物和衣服的绘制完成后，将添加触摸阴影对应于不同体积的像素。【Shift+Ctrl+Alt+N】新建图层，修改图层名为“阴影”。设置前景色为黑色（RGB：0、0、0）绘制阴影。如图所示。【Step15】【调整“阴影”图层的不透明度为15%。如图所示。绘制阴影调整不透明度5.5 实例4：像素小图标的设计与制作 【Step16】菜单栏中选择【视图】/【显示】中去掉“网格”选项。如图所示。最终效果图
