游戏UI设计 第3章 按钮设计.pptxVIP

游 戏 UI 设 计PPT模板：/moban/ PPT素材：/sucai/PPT背景：/beijing/ PPT图表：/tubiao/PPT下载：/xiazai/ PPT教程： /powerpoint/资料下载：/ziliao/范文下载：/fanwen/试卷下载：/shiti/教案下载：/jiaoan/PPT论坛： PPT课件：/kejian/ 语文课件：/kejian/yuwen/数学课件：/kejian/shuxue/ 英语课件：/kejian/yingyu/美术课件：/kejian/meishu/ 科学课件：/kejian/kexue/物理课件：/kejian/wuli/ 化学课件：/kejian/huaxue/ 生物课件：/kejian/shengwu/ 地理课件：/kejian/dili/历史课件：/kejian/lishi/013.1 游戏按钮类型介绍023.2扁平化按钮设计目录033.3 Q版风格按钮设计043.4 欧美风格按钮设计013.1 游戏按钮类型介绍3.1 游戏按钮类型介绍经常有同学会问一些关于按钮设计的问题，怎么样做些漂亮又特别的按钮，画按钮的技法在网上能找到很多，但是很少有人讲按钮设计的方法论。一个漂亮的按钮，我们要看他的表现方式、形态、质感是否符合整个界面所要传达的整体风格是值得每一个设计师去重视的。随着网络媒体的发展。各行各业都在网络媒体上来展示自己，也相继出现了许多行业界面，那么这些界面的设计风格肯定不会千篇一律，那么涉及到的按钮设计也是各有风格的。“艺术来源于模仿”，“设计来源于生活”，在画按钮的时候主要从生活中发现自己需要的元素。下面就举例来谈谈设计方法。首先，我们知道按钮在效果表现上很大一部分我们是从质感的表现上来识别的，比如我们最常见Vista风格的按钮就是从玻璃质感上表现。如图3-1所示，很明显就能看出玻璃瓶的高光、反光和投影。我们在变现按钮质感的时候也多是从这三方面出发。这里做一个实例分析。图3-1玻璃杯素材3.1 游戏按钮类型介绍这里做一个实例分析。如图3-2所示，A按钮是完全按照玻璃瓶质感的方式来画的。如图3-3所示，B按钮是经过对光规律的观察而总结出的自己想要表现方式的一种艺术处理。主要是为了说明我们在进行参照质感进行按钮设计的时候要考虑自己需要的艺术效果进行适当的艺术处理。这样也便于界面制作人员的制作。下面一种是我们经常所见的苹果风格的按钮设计，这种风格的按钮也是我们在生活中经常能见到的，键盘手机就经常采用这种设计方式，但是随着触摸屏手持设备的普遍，绝大数的键盘界面都采用模仿原来手机实物键盘的设计方式，这样是为了让用户对界面产生亲切感，同时这样的设计也看起来更加简洁美观，如图3-4所示。图3-2 A按钮图3-2 A按钮3.1 游戏按钮类型介绍如图3-5所示，C按钮是参照键盘的质感做的样稿。D按钮是选择了同一色相不同明度和纯度所做的按钮，之所以列举这个列子，是为了说明我们在做这种风格的按钮设计的时候，一定要把握住一个很重要的问题，那就是一定是在同一种色相中拉渐变，这样的按钮效果才自然，当然除了设计师追求一些不一样的效果，如图3-6所示。如图3-7所示的这张色谱，大家可以看出色相的微妙关系。有利于我们做渐变类型的按钮。图3-5 C按钮图3-6 D按钮图3-7 色谱3.1 游戏按钮类型介绍如图3-8所示的E按钮就是采用的45度角径向渐变的按钮，是为了说明渐变方式不同最后按钮的最后出现的效果也会不同，就这一点我们设计师可以设计出很多不同形式的按钮。还有一些生活中的按钮设计，如图所示这个按钮设计是参考常见的复印机上面的按钮来设计的，这种按钮的设计方法也很简单，但是效果很好。同时也加强了用户对界面的亲切感，更加有利于用户的使用。如下图3-9所示。如图3-10所示的按钮是我们常见的调节上下的按钮，按照实物的样式，粗糙的画了一个实例，为的就是说明其实在做按钮设计的时候我们参考的实物是很多的，多观察周围的实物往往会得到一些意想不到的收获，并且我们还可以通过简单的艺术效果处理得到不同的按钮效果。图3-8 E按钮图3-9 开关按钮图3-10 上下调节按钮023.2扁平化按钮设计3.2扁平化按钮设计具体操作步骤如下：1.打开Photoshop CS6软件，单击【文件】→【新建】或按【ctrl+N】组合键，【新建】一个【空白文档】，宽度和高度分别设置为2680像素、1280像素，分辨率为300像素/英寸，颜色模式为RGB模式8位图像，背景为白色，如图3-11所示。2. 按【Ctrl+O】组合键【打开】一张在网络上