游戏UI设计第6章:游戏LOGO与ICON介绍与设计课件.pptx
- 【下载声明】
1. 本站全部试题类文档,若标题没写含答案,则无答案;标题注明含答案的文档,主观题也可能无答案。请谨慎下单,一旦售出,不予退换。
2. 本站全部PPT文档均不含视频和音频,PPT中出现的音频或视频标识(或文字)仅表示流程,实际无音频或视频文件。请谨慎下单,一旦售出,不予退换。
3. 本页资料《游戏UI设计第6章:游戏LOGO与ICON介绍与设计课件.pptx》由用户(三亚风情)主动上传,其收益全归该用户。163文库仅提供信息存储空间,仅对该用户上传内容的表现方式做保护处理,对上传内容本身不做任何修改或编辑。 若此文所含内容侵犯了您的版权或隐私,请立即通知163文库(点击联系客服),我们立即给予删除!
4. 请根据预览情况,自愿下载本文。本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
5. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007及以上版本和PDF阅读器,压缩文件请下载最新的WinRAR软件解压。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 游戏 UI 设计 LOGO ICON 介绍 课件
- 资源描述:
-
1、 PPT模板: PPT课件: 欧美风格游戏欧美风格游戏LOGO设计设计6.3.1 Q版游戏版游戏LOGO设计设计6.3.3像素游戏像素游戏LOGO设计设计目录目录026.2游戏游戏ICON设计设计016.1 对对LOGO与与ICON的介绍的介绍016.1 对对LOGO与与ICON的介绍的介绍6.1.1 黄金分割黄金分割 黄金分割又称黄金律,是指事物各部分间一定的数学比例关系,即将整体一分为二,较大部分与较小部分之比等于整体与较大部分之比,其比值约为1:0.618,0.618被公认为是最具有审美意义的比例数字。上述比例是最能引起人的美感的比例,因此被称为黄金分割,如图6-1、图6-2、图6-3所
2、示。图6-1 黄金分割图6-2 黄金分割图6-3 黄金分割 摄影构图中经常采用井字形黄金分割,即当主体物能存在于井字的小黄金点的位置时,整体构图会比较协调。用黄金分割发做出的LOGO看起来更大气,如图6-4所示。LOGO最初的设计概念稿可以随意涂鸦,排列组合,寻求更多的拟物,以表达其寓意。图6-4 黄金分割1.LOGO设计需要注意的事项设计需要注意的事项(1)LOGO的用色要符合企业和品牌形象,避免使用会让人感觉不舒服的颜色。(2)LOGO的造型要有寓意,可以让人联想到产品或企业品牌本身。(3)LOGO要具有识别性,在黑、白、灰或彩色背景下能被识别。(4)LOGO在不同尺寸下都要便于识别。(5
3、)LOGO看起来要浑然一体,没有琐碎的元素。(6)LOGO如果带有中文,中文字体的风格和英文字体要成套设计。(7)LOGO的横向排版、纵向排版、正方形排版都要设计。2.英文英文LOGO创作技巧创作技巧英文LOGO创作技巧如图6-5所示。6.1.2 LOGO设计设计图6-5 英文LOGO创作技巧3.中文中文LOGO创作技法创作技法 中文LOGO的创作也可以借鉴英文LOGO的创作技法,但是中文LOGO需要先设计笔画,然后进行笔画重组,可以先下载一些字体,然后用AI打散后进行设计。其实,LOGO会随着时间的推移而演变。早期的LOGO都会比较复杂,越到后期进行优化和概括,越变得符合当代审美观,随着产品
4、的变迁,越来越符合产品本身的定位,如图6-6所示。6.1.2 LOGO设计设计图6-6 中文LOGO创作技法 我们认为的游戏LOGO是这样的:游戏LOGO=游戏符号+名字,它是一款游戏的名字更是一款游戏的视觉符号,如图6-7所示。6.1.3 对对LOGO的简单介绍的简单介绍图6-7 游戏LOGO=游戏符号+名字 有别于平面logo,游戏logo最关键反映的是游戏性,通过名字与图形的视觉化让玩家记住游戏的名字和游戏的整体风格。甚至游戏的品级,玩法,类别能够从logo中体现出来。通过游戏LOGO在网站、展会、户外广告、视频等地方的应用,让LOGO这个视觉符号不断地强化玩家大脑印象,从而提供游戏的知
5、名度影响力。所以我们今天从商业角度,可用性来和大家沟通下我们是怎样制作一个游戏logo的。1.沟通了解沟通了解需求需求 详细的需求文档尤为重要,需求文档清晰明了,设计师就不需要去揣测需求方真正要的是什么,避免走弯路,不管后续沟通如何,着手项目第一步必须先让策划把需求文档写请清楚来,如图6-8。6.1.3 对对LOGO的简单介绍的简单介绍图6-8 需求文档2.找资料辅助灵感找资料辅助灵感 需求理解明白了,方向也清楚了,接下来就是找参考了,资料参考图友很多平台可以去采集,例如花瓣,资料采集后,把资料图片放在同一个文件夹,或者一个psd里。以下是几款q版的游戏logo参考图,如图6-9所示。图6-9
6、 游戏logo参考图3.概念设计概念设计 概念草稿阶段意在头脑风暴,不要局限一种方向,希望在概念阶段能够有充分的方案差异性。让需求方有可选性。概念方案一般再4-5个左右,以黑白稿或者单色为主,参考图如6-10所示。这个阶段看的是造型形式整体感,不要过早考虑色彩,材质。6.1.3 对对LOGO的简单介绍的简单介绍图6-10 概念草图 根据多年积累,我们总结了出初稿的的几个方法:1电脑字体变形,如图6-11,2手绘手稿如图6-12,3.暴力拼图,如图6-13。图6-11 字体变形图6-12 手绘手稿图6-13 暴力拼图(1)头脑风暴6.1.3 对对LOGO的简单介绍的简单介绍(2)概念阶段刚才简单
7、说了几个方法,接下来我们详细分析下字体与背景图形的表现:字体。字体的识别性 字体设计最忌讳是的盲目的进行变形夸张,看起来很花哨,却完全不认得字名,如图6-14所示。图6-14 强识别度a.字体的排版 字体的排版根据字体的长度而定,字体长的特别是英文名字需要考虑到上下结构的排版设计,倾斜/圆形/弧线排版让logo更富个性与趣味性,参考如图6-15所示。图6-15 字体排版6.1.3 对对LOGO的简单介绍的简单介绍b.字体的辅助图形设计 有些logo 可以考虑加入辅助图形。辅助图形可以从游戏中提取,好的辅助图形启动画龙点睛的作用,让logo更出彩,参考如图6-16所示。图6-16 辅助图形背景图
8、形 背景图形设计应该注意的几点:a.背景图案与字体的搭配(大小比例,排版搭配),排版b.背景图案符合游戏主题c.背景图案不要凌乱花哨,喧宾夺主参考如图6-17所示。图6-17 字体与背景图形6.1.3 对对LOGO的简单介绍的简单介绍4.上色上色 在多个黑白草稿中挑选一个方案进行细化上色。上色阶段可以根据游戏的整体风格进行搭配,提取游戏中的主色系过程中不要过于刻画细节,更多的在颜色方案上进行尝试。颜色是一种情感表现的一种方式,多注意颜色给玩家带来的视觉感受。同样了也出4-5个方案让需求方进行选择。5.质感的刻画质感的刻画 游戏logo和平面logo最大的区别之一在于质感,把握好质感的设计就等于
9、把握好了游戏logo的设计。质感类别很多,有水晶质感/金属质感/石头质感/科技质感,根据游戏风格 游戏世界观,甚至游戏ui来搭配游戏logo的质感,参考如图6-18所示。具体项目需求具体分析。图6-18 质感6.光效,光感的补充光效,光感的补充 光效与光感可以让游戏logo更为细腻更为高大上。需要注意的是不是所有的logo都需要加一些光效特效。有些logo加上光效 反而显得多余,看是否要做加法还是减法。6.1.4对对ICON的简单介绍的简单介绍 关于ICON的色彩要明亮、元素要突出、设计要简单等等这类型的建议已经有许多人做过提醒,笔者在此就不多做说明,下文将盘点目前市场上存在的游戏ICON的类
10、型,其所采用的元素,同时分析不同类型的ICON适合怎样的游戏。1.以游戏角色为主以游戏角色为主 将游戏中的某个主角的形象制作成ICON,这是目前手游市场中最常见的ICON类型,比如全民突击、神武、奇迹暖暖、我叫MT2等游戏都是采用这种设计方式,如图6-19所示。这种ICON素材的选取比较适合RPG游戏,因为游戏中本身就存在比较鲜明的人物形象,而且可以说这个角色是玩家与游戏之间沟通互动的桥梁,最能代表游戏内容,也能引发玩家对游戏的认同感。图6-19 游戏ICON6.1.4对对ICON的简单介绍的简单介绍2.以纯文字作为游戏以纯文字作为游戏ICON 在以往的许多ICON设计的文章中都或多或少会提到
11、,要避免在图标中添加文本,因为文字在100px尺寸的框中显得很复杂,不够简练。但是笔者发现,最近的许多游戏都开始用纯文字作为自己的ICON,典型的案例就是梦幻西游、真正男子汉、不良人、天龙八部3D等,如图6-20所示。ICON即使设计成纯文字的,也与游戏有着强联系,还能显示出其特色。图6-20 游戏ICON3.以游戏中的道具或标识为主以游戏中的道具或标识为主 能以游戏中的某个细节作为ICON的游戏,需要对自身游戏中的内容的知名度有一定的信心。这类型的ICON设计适合卡牌策略类游戏,如炉石传说、自由之战等,如图6-21所示。此外出现在ICON上的标识要具有一定的“不可替代性”,在设计上加一些魔幻
12、、科技感强的效果加以突出,能增加其独特性。图6-21 游戏ICON6.1.4对对ICON的简单介绍的简单介绍4.以明星头像作为游戏以明星头像作为游戏ICON 从去年下半年开始,游戏对明星代言的依赖越来越大,其合作的深度也逐渐加深。明星效应的利用不仅体现在游戏推广上,甚至还对游戏中的角色设计、研发层面等造成了影响。将明星头像作为游戏ICON,能很好地利用粉丝经济,吸引用户进行点击下载。范冰冰代言的暗黑黎明、唐嫣代言的无双剑姬、杨幂代言的新征途都是采用这种方式,如图6-22所示。这种ICON设计与游戏本身的关联并不是很直接,但是能利用明星形象进行游戏吸量,这点很重要。图6-22 游戏ICON5.将
13、游戏的类型设计成将游戏的类型设计成ICON有些游戏在ICON的设计上更加直接简洁,如欢乐麻将的ICON是直接将“麻将”两个字放在ICON上,如图6-23所示。这种方式尽管能将游戏的精髓体现在ICON中,但从设计上看,自然不是那么精美细致。不过不可否认,它或许能依靠“醒目”的ICON将同类型的游戏玩家拉拢过来。图6-23 游戏ICON6.1.4对对ICON的简单介绍的简单介绍6.在游戏中抽象出某个图形或元素作为在游戏中抽象出某个图形或元素作为ICON 游戏ICON因为要做得清晰独特,所以设计的时候总是用最简单而又最突出的素材进行整理。而对于一些休闲益智类游戏来说,游戏中并没有特定的人物角色或出名
14、的道具,此时可以选择将游戏中的某个元素提取出来,或抽象成几个图形,如球球大作战、投影寻真、节奏大师等,如图6-24所示。不过需要注意的是,这样设计出来的ICON可能游戏感不强,更像是应用。图6-24 游戏ICON026.2游戏游戏ICON设计设计具体操作步骤如下具体操作步骤如下:1.在Photoshop 新建一个2000*2000像素,分辨率为300的文档,如图6-25所示。图6-25 新建文件2.在Photoshop 中,点击文件-打开-我的电脑-桌面-的文件-、狐狸 图6-26 打开位置具体操作步骤如下具体操作步骤如下:3.新建图层,单击【圆角矩形工具】,在画布中双击,在弹出的页面设置51
15、2*512,半径30,单击确定,如图6-27所示。图6-27 单击【圆角矩形工具】4.修改【圆角矩形工具】填充渐变色【#e8c6】和#【9b76】,缩放90%,设置参数如图6-28所示。图6-28 渐变参数具体操作步骤如下具体操作步骤如下:5.打开【圆角矩形工具】的图层样式对话框,首先添加【描边】大小为40,位置在外部,颜色为#【d68f3e】,如图6-29所示。图6-29 添加【描边】样式6.添加【投影】样式,角度为73,距离21,扩展为24,大小为131。设置参数如图6-30所示,得到效果如图6-31所示。图6-30 添加【投影】样式图6-31 效果图具体操作步骤如下具体操作步骤如下:7.
16、新建图层,修改前景色为【#363636】,如图6-32所示,利用组合键【AlT+DEL】填充图层,然后将图层移动到【圆角矩形图层】的下方,如图6-33所示。图6-32 颜色参数图6-33 移动图层8.新建图层,根据游戏的内容、玩法和角色进入草图绘制阶段,初步打稿,如图6-34所示。图6-34 草图具体操作步骤如下具体操作步骤如下:9.新建图层,在草图上进行基本铺色绘制,如图6-35所示。图6-35 进行基本铺色绘制10.根据光源画出基本的阴影关系,如图6-36所示。图6-36 进行阴影关系绘制具体操作步骤如下具体操作步骤如下:11.进一步加强体积、光影的关系绘制,如图6-37所示。图6-37
17、加强体积、光影的绘制12.进入细化绘制阶段,进行整体和部位的微调整,画出整体反光,增加体积感,效果如图6-38所示。图6-38 效果图具体操作步骤如下具体操作步骤如下:13.在Photoshop 中,点击文件-打开-我的电脑-桌面-的文件-,将骰子放到图层中来,最终效果如图6-39所示。图6-39 效果图 036.2.1像素游戏像素游戏ICON设计设计具体操作步骤如下具体操作步骤如下:1.打开Adobe illustrator CS6,选择菜单栏中的【文件】【新建】画板。宽度设置为600像素,高度设置为1000像素,取向选为竖向,颜色模式设置为RGB,栅格效果设置为72ppi,点击【确定】,进
18、入画板,如图6-40所示。图6-40 在AI CS6中新建画板2.选择工具箱中【矩形】工具,在编辑框中单击【左键】,输入数据,宽度和高度均设置为962px,点击【确定】,绘制出一个边长为962px的正方形,颜色设置为R:234 G:205 B:219,置于画板中心,如图6-41所示。图6-41 绘制正方形具体操作步骤如下具体操作步骤如下:3.选择【矩形】工具,单击【左键】,输入数据,绘制出一个边长为962px的正方形作为像素块,颜色设置为R:185 G:121 B:176。复制若干个像素块排列成icon的边框,如图6-42所示。图6-42 绘制ICON的边框4.复制像素游戏角色源文件中的图层至
19、画板中,整理角色的像素块。为了不显冗杂,将角色的发型进行修改,并且修改手臂的动态。另外制作一个像素块组成的小球,置于角色手中,过程如图6-43所示。图6-43 调整ICON的细节具体操作步骤如下具体操作步骤如下:5.完成像素游戏ICON设计,选择菜单栏中【文件】【导出】文件的PNG格式图片,效果图如图6-44所示。图6-44 ICON最终效果图046.3.2 欧美风格游戏欧美风格游戏LOGO设计设计具体操作步骤如下具体操作步骤如下:1.在Photoshop 新建一个1470*1100像素,分辨率为300的文档,如图6-46所示。图6-46 新建文档2.使用组合键【Ctrl+U】打开【色彩平衡】
20、面板,将明度设置为-50,如图6-47所示。图6-47 调整【色相/饱和度】具体操作步骤如下具体操作步骤如下:3.新建图层,利用【钢笔工具】结合【选框工具】规整绘制出LOGO纯色底板,图6-48所示。图6-48 绘制出LOGO纯色底板4.打开LOGO底板的图层样式对话框,首先添加【描边】,打开桌面/资源包/素材/1.jpg图片素材填充描边【图案】,并调整大小为2,位置居中,混合模式为点光,缩放调整为137%,具体参数设置如图6-49所示。图6-49 添加【描边】样式具体操作步骤如下具体操作步骤如下:5.添加【图案叠加】样式,打开桌面/资源包/素材/2.jpg图片素材叠加【图案】,并调整图案混合
21、模式为正常,不透明度降低为85%,缩放为98%,具体参数设置如图6-50所示。图6-50 添加【图案叠加】样式6.添加【渐变叠加】样式,调整渐变色条的颜色变化,并调整混合模式为叠加、不透明度降为20%,线性样式90度,缩放为113%,参数设置如图6-51所示,调整完成效果如图6-52所示。图6-51 添加【渐变叠加】样式图6-52 效果图具体操作步骤如下具体操作步骤如下:7.添加【斜面和浮雕】样式,勾选“等高线”、“纹理”结合整体,调整出立体效果,斜面与浮雕一栏设置样式为内斜面,方法:雕刻清晰,深度123%,大小:1像素,等高线一栏设置范围为100%,文理一栏图案为素材1,缩放104%,深度+
22、10%,具体属性如图6-53、图6-54、图6-55所示,得到效果如图6-56所示。图6-53 添加【斜面和浮雕】样式图6-54 设置“等高线”参数图6-55 设置【纹理】参数图6-56 效果图具体操作步骤如下具体操作步骤如下:8.添加【外发光】、【内阴影】、【投影】样式并加以调整,【外发光】一栏设置混合模式为线性加深,不透明度:24%,杂色:20%,方法:柔和,大小:6像素。【内阴影】一栏设置混合模式为叠加,不透明度:74%,角度:-21度,距离:2像素,大小:6像素,杂色:26%。【投影】一栏设置混合模式为正品叠底,不透明度:76%,角度:90度,距离:16像素,扩展:23%,大小:55像
23、素,杂色:20%。具体参数如图6-57、图6-58、图6-59所示,得到图6-60,突显立体感。图6-57 添加【外发光】样式图6-58 添加【内阴影】样式图6-59 添加【投影】样式图6-60 效果图具体操作步骤如下具体操作步骤如下:9.Logo底板绘制完成,接下来制作齿轮,丰富画面。首先参考金属小物件图片素材,LOGO教程-素材-素材1,新建图层,利用钢笔工具、抠选选区或画笔绘制齿轮轮廓,如图图6-61所示。素材1 金属小物件图6-61 效果图10.齿轮图层样式添加【斜面和浮雕】,设置参数如6-62所示,调整出立体效果图6-63。图6-62 添加【斜面和浮雕】样式图6-63 效果图具体操作
24、步骤如下具体操作步骤如下:11.载入一张生锈金属材质图片素材或者齿轮图片素材,LOGO教程-素材-素材2,置于齿轮图层上,创建剪贴蒙板,调整图层为叠加,如图6-64所示,利用“减淡/加深工具”绘制明暗,得到效果如图6-65所示。素材2 生锈金属材质图6-64 设置为“叠加”图6-65 效果图12.利用同样方法,新建图层,绘制第二个齿轮,加强亮部,置于logo底板图层下方,绘制小螺丝置于上方,图6-66所示。图6-66 效果图具体操作步骤如下具体操作步骤如下:13.在最上方新建图层,利用选区工具,绘制两个小螺丝纯黑轮廓,如图6-67所示。图6-67 效果图14.接下来图层样式主要制作小螺丝明暗的
25、对比,为方便接下来立体字体的制作可以直接拷贝小螺丝的图层样式,我们直接将螺丝的立体效果与材质也先一并做出来。添加【描边】样式,描边图案利用生锈金属材质图片素材,调整大小为2像素,位置为居中,混合模式为颜色减淡,填充类型为图案,缩放为106%,单击确定,制作材质,设置参数如图6-68所示。图6-68 添加【描边】样式具体操作步骤如下具体操作步骤如下:15.添加【图案叠加】样式,叠加真实金属纹理图片素材,调整各项属性,设置混合模式为正常,图案为素材1,缩放:106:%,具体参数如图6-69所示,制作材质。图6-69 添加【图案叠加】样式16.添加【渐变叠加】样式,调整渐变色条,设置混合模式为叠加,
展开阅读全文