Web设计基础教程-第5章----网页按钮与图标的设计与制作课件

1、Web美工基础教程第5章 网页按钮与图标的设计与制作目录1 水晶设计风格与扁平设计风格2制作水晶风格按钮3 制作扁平风格按钮4 网站Logo的设计与制作5 像素小图标的设计与制作第5章 按钮和图标是网站中常用的组件，可以影响网站的可用性和用户体验。好的按钮和图标不仅让网站看起来生动有趣，而且会增加网站的吸引力。本章将以案例的形式讲解几种常用按钮和图标的设计和制作。常用的按钮风格有哪些呢？5.1 水晶设计风格与扁平设计风格 水晶设计很常用到的就是高光、阴影、渐变等效果体现出一种水晶质感。其所使用的颜色也比较鲜明艳丽，给用户的视觉冲击及吸引力很强。 那什么是扁平化设计呢？所谓扁平化设计，就是在进行

2、设计的过程中，去除所有具有三维突出效果的风格和属性。也就是说，去除掉下落式阴影、梯度变化、表面质地差别，以及所有具有三维效果的设计效果。扁平化设计在如今更备受设计师们的青睐，是因为通过这种风格可以让设计更具有现代感，另外可以强有力的突出设计中最为重要的内容：内容和信息。其实那些具有三维效果的属性，本身都是某段时间的流行风格，所以去除掉了这些信息，就能让设计不那么容易过时。更何况还能突出内容本身。所以这种设计风格还是有很多好处的。5.1 水晶设计风格与扁平设计风格扁平化设计的特点是十分鲜明的，扁平化设计风格具有五个特点： 拒绝特效 扁平化设计概念最核心的地方就是放弃一切装饰效果，诸如阴影、透视、

3、纹理、渐变等等能做出 3D 效果的元素一概不用。所有的元素的边界都干净俐落，没有任何羽化、渐变或者阴影。因为这种设计有着鲜明的视觉效果，它所使用的元素之间有清晰的层次和布局，这使得用户能直观的了解每个元素的作用以及交互方式。如今从网页到手机应用无不在使用扁平化的设计风格，尤其在手机上，因为屏幕的限制，使得这一风格在用户体验上更有优势，更少的按钮和选项使得界面干净整齐，使用起来格外简单。 界面元素 扁平化设计通常采用许多简单的用户界面元素，诸如按钮或者图标之类。这些用户界面元素方便用户点击，这能极大的减少用户学习新交互方式的成本，因为用户凭经验就能大概知道每个按钮的作用。此外，扁平化除了简单的形

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】鼠标双击”圆角矩形

7、1副本”图层弹出图层样式窗口，或者点击图层样式图标 ，勾选渐变叠加。做适当的配置如图所示，其中渐变的前景色为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%，如图所示

8、。椭圆工具拖曳出的形状5.2 实例1：制作水晶风格按钮 【Step8】选中”圆角矩形1副本”图层，在路径窗口中选中“圆角矩形1副本形状路径”右键“建立选区”，如图所示。建立选区添加图层蒙版图 【Step9】新建图层，产生新的图层名为“图层1”，为该图层添加图层蒙版，然后按【Ctrl】键并鼠标点击”图层1”的蒙版图层，再次载入选区，如图所示。选区效果图添加图层蒙版效果图5.2 实例1：制作水晶风格按钮 【Step10】在菜单栏中选择【编辑】/【描边】，弹出描边窗口，设置参数如图所示。描边参数渐变效果图 【Step11】选择渐变工具 ，选择“黑、白渐变”模式，选中图层1的蒙版图层，鼠标由上到下的在

9、选区中拖拽，效果图如图所示。5.2 实例1：制作水晶风格按钮 【Step12】选中所有图层，【Ctrl+G】组合键组合图层，组名命名为水晶按钮，并【Ctrl+J】组合键复制组，命名为倒影，如图所示。【Ctrl+T】组合键自由变换调整图片垂直旋转，如图所示。图层选项卡渐变后效果图垂直旋转效果图 【Step13】给倒影图层添加蒙版 ，利用渐变工具 （黑、白渐变模式），并调整不透明度为30%。效果如图所示。5.2 实例1：制作水晶风格按钮 【Step14】选择横排文字工具 ，单击画布，出现闪动的竖线后，在选项栏中设置“字体”为Arial，“字体样式”为Bold，“字体大小”为32点、“文本颜色”为灰

10、色（RGB:205、205、205），在画布中，输入英文字符“submit”，如图所示。最终效果图5.3 实例2：制作扁平风格按钮 本案例将带领大家绘制一款与水晶风格不同的扁平风格按钮，其效果如下图所示。通过本案例的学习，读者能够掌握圆角矩形工具、文字工具、图层样式、图层蒙版、等工具的使用，了解到扁平风格与水晶风格按钮的区别。扁平风格按钮效果图5.3 实例2：制作扁平风格按钮 【Step1】启动Photoshop CS6，选择【文件】/【新建】命令，在打开的“新建”对话框中输入文件的名称为“实例2：制作扁平风格按钮”，宽度300像素，高度200像素，分辨率为72像素/英寸，颜色模式为RGB颜色

11、，背景内容为默认白色。如图所示。新建文件5.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】在画布中点击出现一个圆角矩形形状作为按钮的基本形状，拖到画布合适的位置，如

12、图所示。绘制圆角矩形形状设置内阴影 【Step5】选中“圆角矩形1”图层，单击“添加图层样式”按钮 ，弹出图层样式选择框，选择“内阴影”，设置混合模式为正片叠底，颜色为绿色（RGB: 0、176、91），不透明度为75%，角度为90度，距离2像素、阻塞0%、大小13像素。如图所示。内阴影效果图5.3 实例2：制作扁平风格按钮 【Step6】继续添加“外发光”样式，混合模式为“正常”，不透明度调整为60%，颜色为绿色（RGB：129 、229 、156）。如图所示。设置外发光外发光效果图5.3 实例2：制作扁平风格按钮 【Step7】为了层次感更强烈，选择“圆角矩形工具” ，在画布中绘制，产生新

13、的图层“圆角矩形2“，参数如图所示。 创建圆角矩形参数 【Step8】同时选中“圆角矩形1”图层和“圆角矩形2”图层，对两个图层做垂直居中对齐 和水平居中对齐 操作 。5.3 实例2：制作扁平风格按钮 【Step9】调整“圆角矩形2”图层的位置，将其放到“圆角矩形1”图层的下面。再选中“圆角矩形2”，单击“添加图层样式”按钮 ，弹出图层样式选择框，选择“渐变叠加”项，设置渐变的前景色为浅绿（RGB：222、255、 255），背景色为绿色（RGB：173、232 、191），缩放150%。如图所示。渐变颜色参数编辑渐变叠加设置5.3 实例2：制作扁平风格按钮 【Step10】层次感效果如图所示

14、。层次感效果图创建圆角矩形大小设置 【Step11】选择“圆角矩形工具” ，新建一个圆角矩形图层，产生新的图层“圆角矩形3“，参数如图所示。调整“圆角矩形3”图层到合适的位置，如图所示。调整到合适的位置5.3 实例2：制作扁平风格按钮 【Step12】为”圆角矩形3”图层设置样式，单击“添加图层样式”按钮 ，弹出图层样式选择框，选择“渐变叠加”项，设置渐变的前景色为灰色（RGB：231、231、 231），背景色为白色（RGB：255、255 、255），缩放150%。如图所示。渐变编辑器前、背景色设置渐变叠加样式参数设置5.3 实例2：制作扁平风格按钮 【Step13】继续为”圆角矩形3”图

15、层添加“投影”样式，正片叠底，颜色为绿色（RGB: 103 、195、182），不透明度56%，角度为90度，距离0像素，大小8像素。如图所示。投影样式参数设置投影样式效果图5.3 实例2：制作扁平风格按钮 【Step14】 【Ctrl+J】组合键复制“圆角矩形3”图层，得到“圆角矩形3副本”图层。【Ctrl+T】组合键执行“自由变化”操作，接着右击，在弹出的快捷菜单中选择“缩放”命令，按【Shift+Alt】等比例缩小，如图所示。等比例缩放渐变叠加设置 【Step15】 【Enter】键确认”自由变化”形状。继续为“圆角矩形3副本 ”图层添加“渐变叠加”样式，渐变的前景色为灰色（RBG: 2

16、31、238、 239），背景色为白色（RGB:255、255、255）。如图所示。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

17、），缩放150%。如图所示。椭圆设置渐变叠加样式渐变叠加样式效果图5.3 实例2：制作扁平风格按钮 【Step18】选择“横排文字工具” ，单击画布，出现闪动的竖线后，在选项栏中设置“字体”为Arial，“字体样式”为Regular，“字体大小”为24点、“文本颜色”为灰色（RGB:205、205、205），如图所示。在画布中，输入英文字符“Simple Switch”，如图所示。输入英文字符“横排文字工具”选项栏5.3 实例2：制作扁平风格按钮 【Step19】菜单栏中选择【窗口】/【字符】选项，在弹出的字符设置窗口中，调整英文字符字符的间距为50，如图所示。调整字符间距效果图字符间距设置5

18、.4 实例3：网站Logo的设计与制作 LOGO是网站形象的重要体现，即是网站的名片。对于一个追求精美的网站，Logo更是它的灵魂所在，即所谓的“点睛”之处。 Logo能使受众便于选择，一个好的Logo往往会反映网站及制作者的某些信息，特别是对一个商业网站来话，我们可以从中基本了解到这个网站的类型，或者内容。在一个布满各种Logo的链接页面中，这一点会突出的表现出来。在本实例中，将以绘制健身俱乐部网站Logo为例，其最终效果如下图所示。网站logo效果图5.4 实例3：网站Logo的设计与制作 【Step1】启动Photoshop CS6，选择【文件】/【新建】命令，在打开的“新建”对话框中输

19、入文件的名称为“实例3：网站Logo的设计与制作”。新建文件 【Step2】设置文件的“宽度”为500像素，“高度”为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.

20、4 实例3：网站Logo的设计与制作 【Step5】再次选择椭圆工具，在属性栏中将圆的填充色设为黑色（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】组合键以圆心为中心缩小，如图所示。自由变换效果

21、图描边样式设置 【Step8】按【Enter】键确认图形形状，选择“椭圆 2 副本”图层为其添加图层样式 ，选择描边，如图所示。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】选择椭圆工具，在属性栏中将圆的填充色设

22、为黑色（RGB：0,0,0），描边为白色（RGB：255,255,255），描边粗细为1.5点，如图所示。效果图 【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.

23、4 实例3：网站Logo的设计与制作 【Step15】 【Shift+Ctrl+Alt+N】组合键新建图层，选择圆角矩形工具 ，在属性栏中将圆的填充色设为白色，描边为黑色，描边粗细为0.2点，半径为3像素，如图所示。圆角矩形工具属性设置 【Step16】利用圆角矩形工具 在画布圆的正中心绘制出哑铃形状，如图所示。哑铃形状5.4 实例3：网站Logo的设计与制作 【Step17】按【Ctrl+G】组合键将组成哑铃形状的所有图层合并到一个组里，并命名为“哑铃形状”。椭圆工具属性设置 【Step18】 【Shift+Ctrl+Alt+N】组合键新建图层，选择椭圆工具 ，在属性栏中选择路径，如图所示。

24、将鼠标指针置于画布中心位置，按住【Shift+Alt】组合键不放，绘制正圆路径，大小和位置如图所示。绘制路径圆5.4 实例3：网站Logo的设计与制作 【Step19】 选择“横排文字工具” ，将鼠标指针置于左侧正圆路径上，闪烁光标时即可输入文字，建立路径文字的起点，输入文字“Powerhouse Gym”，选择“路径选择工具” 将文字调整到合适位置，如图所示。文字图层1 【Step20】复制“Powerhouse Gym”图层，选择“横排文字工具”，将鼠标指针置于左侧正圆路径上，闪烁光标时在输入文字“Reach your potential”，选择“路径选择工具” 将文字调整到合适位置，如图

25、所示。文字图层25.4 实例3：网站Logo的设计与制作 【Step21】 【Shift+Ctrl+Alt+N】组合键新建图层，选择多边形工具 ，在属性栏中选择形状，填充为白色，描边为黑色，边设置为5，如图所示。多边形工具属性设置 【Step22】在图中绘制五角星并将其拖放到合适的位置，效果如图所示。五角星绘制5.4 实例3：网站Logo的设计与制作 【Step23】为了使该Logo能与网页上其它图像元素完美融合，则需要将图片的背景改成透明背景。选中背景图层，【Delete】键删除背景图层，效果如图所示。透明背景 【Step24】在菜单栏中选择【文件】/【存储为】，选择将图片保存为png格式的

26、，如图所示。文件保存为png格式5.5 实例4：像素小图标的设计与制作 图标是网页中的常见元素，主要功能是表意，也包含装饰及品牌传递的作用。其中存储为gif、png等位图格式的图标，称为像素图标，大小通常为16px、24px、32px等。本例将以绘制一个像素风格的人物为例，效果图如下。像素小图标效果图5.5 实例4：像素小图标的设计与制作 【Step1】启动Photoshop CS6，选择【文件】/【新建】命令，在打开的“新建”对话框中输入文件的名称为“实例4：像素小图标的设计与制作”，宽度100像素，高度100像素，分辨率为72像素/英寸，颜色模式为RGB颜色，背景内容为背景色（灰色RGB:

27、238、238、238）。如图所示。新建文件5.5 实例4：像素小图标的设计与制作 【Step2】选【step2】菜单栏中选择【编辑】/【首选项】，网格线间隔为1像素。如图所示。 【Step3】选择“缩放工具” ，放大画布300%。再在菜单栏中选择【视图】/【显示】中的网格。如图所示。设置网格线间隔网格线5.5 实例4：像素小图标的设计与制作 【Step4】【Shift+Ctrl+Alt+N】组合键新建图层，修改图层名为“腿部和身体躯干部分”。选择“铅笔工具” ，大小1px。设置前景色为肉粉色（RGB：252、193、147），绘制宽2像素、高9像素的腿部，身体躯干部分宽5像素、高9像素。如图

28、所示。 【Step5】 【Shift+Ctrl+Alt+N】新建图层，修改图层名为“脚部和肩部”，继续选择“铅笔工具” ，大小1px，绘制出脚部（宽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、1