Web设计基础教程-第5章-网页按钮与图标的设计与制作课件.pptx
- 【下载声明】
1. 本站全部试题类文档,若标题没写含答案,则无答案;标题注明含答案的文档,主观题也可能无答案。请谨慎下单,一旦售出,不予退换。
2. 本站全部PPT文档均不含视频和音频,PPT中出现的音频或视频标识(或文字)仅表示流程,实际无音频或视频文件。请谨慎下单,一旦售出,不予退换。
3. 本页资料《Web设计基础教程-第5章-网页按钮与图标的设计与制作课件.pptx》由用户(三亚风情)主动上传,其收益全归该用户。163文库仅提供信息存储空间,仅对该用户上传内容的表现方式做保护处理,对上传内容本身不做任何修改或编辑。 若此文所含内容侵犯了您的版权或隐私,请立即通知163文库(点击联系客服),我们立即给予删除!
4. 请根据预览情况,自愿下载本文。本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
5. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007及以上版本和PDF阅读器,压缩文件请下载最新的WinRAR软件解压。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Web 设计 基础教程 网页 按钮 图标 制作 课件
- 资源描述:
-
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)。如图所示。
展开阅读全文