游戏UI设计第6章:游戏LOGO与ICON介绍与设计课件.pptx

上传人(卖家):三亚风情 文档编号:3311368 上传时间:2022-08-18 格式:PPTX 页数:77 大小:10.58MB
下载 相关 举报
游戏UI设计第6章:游戏LOGO与ICON介绍与设计课件.pptx_第1页
第1页 / 共77页
游戏UI设计第6章:游戏LOGO与ICON介绍与设计课件.pptx_第2页
第2页 / 共77页
游戏UI设计第6章:游戏LOGO与ICON介绍与设计课件.pptx_第3页
第3页 / 共77页
游戏UI设计第6章:游戏LOGO与ICON介绍与设计课件.pptx_第4页
第4页 / 共77页
游戏UI设计第6章:游戏LOGO与ICON介绍与设计课件.pptx_第5页
第5页 / 共77页
点击查看更多>>
资源描述

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.添加【渐变叠加】样式,调整渐变色条,设置混合模式为叠加,

26、不透明度为64%,设置参数如图6-70所示,暗部使用黑蓝加深,遮挡了材质,只形成明暗对比。图6-70 添加【渐变叠加】样式具体操作步骤如下具体操作步骤如下:17.添加【斜面和浮雕】样式,调整各项属性,【斜面和浮雕】一栏样式为内斜面,方法为雕刻清晰,深度:123%,方向:上,大小:3像素,角度:138度,高度:26度;【等高线】一栏范围为100%,【纹理】图案为真实金属纹理图片素材,缩放:106%,深度:+10%。制作出立体效果为立体字体制作做准备,设置参数如图6-71、图6-72、图6-73所示。图6-71 添加【斜面和浮雕】样式图6-72 设置【等高线】参数图6-73 设置【纹理】参数具体操

27、作步骤如下具体操作步骤如下:18.添加【外发光】、【投影】样式,调整各项属性,【外发光】一栏设置混合模式为线性加深,不透明度:7%,杂色:20%,方法:柔和,大小:17像素。【投影】一栏中混合模式为正片叠底,不透明度:57%,角度:90度,距离:18像素,扩展:2%,大小:19像素,杂色20%,如图6-74、图6-75所示,增强立体感。图6-74 添加【外发光】样式图6-75 添加【投影】样式具体操作步骤如下具体操作步骤如下:19.小螺丝的明暗对比效果大致如下,边缘高光较多,如图6-76所示。图6-76 效果图20.新建图层,载入合适的小螺丝纹理材质图片素材,LOGO教程-素材-素材3,置于小

28、螺丝明暗对比图层上方,图层模式调整为“线性光”,如图6-77所示,让小螺丝有了纹理,也有了立体明暗对比,如图6-78所示。素材3 小螺丝纹理材质图6-77 图层模式调整为“线性光”图6-78 效果图具体操作步骤如下具体操作步骤如下:21.接下来制作logo中的立体金属字体,输入2层文本,填充黑色并且栅格化图层,利用【Ctrl+T】变形使其形状如图6-79所示。图6-79 效果图22.拷贝小螺丝明暗对比层的图层样式,粘贴至文字层中,并修改文字层【渐变叠加】样式的渐变色条颜色与各项属性,【渐变叠加】一栏中,调整渐变色条,设置混合模式为叠加,不透明度为64%,角度:162度。设置参数图6-80所示。

29、图6-80 添加【渐变叠加】样式具体操作步骤如下具体操作步骤如下:23.添加【光泽】样式,调整暗红颜色,设置混合模式为正片叠底,不透明度:99%,角度:19,度,距离:53像素,大小:9像素。具体属性值如图6-81所示,使文字的图案有少许红色变化。图6-81 添加【光泽】样式24.添加【内阴影】样式,调整各项属性,【内阴影】中混合模式为颜色减淡,不透明度:74%,角度:-21度,距离:5像素,阻塞:0%,大小:5像素,杂色:26%。详细参数如图6-82所示,增强文字的立体感,效果如图6-83所示。图6-82 添加【内阴影】样式图6-83 效果图具体操作步骤如下具体操作步骤如下:25.为增强立体

30、金属字的表面红色光泽,扣选文字层选区,新建一层图层,填充红色,如图6-84所示,利用特殊笔刷橡皮擦适当擦除做旧,图层叠加在文字层上,使文字效果更加生动,如图6-85所示。图6-84 填充图层为红色图6-85 效果图26.下面绘制logo金属底板的部件,丰富画面细节。新建图层,利用钢笔工具、选区或画笔,绘制出左边的圆圈把手轮廓,填充金属黄色,并且添加【渐变叠加】图层样式,选择默认黑白渐变色条,混合模式为亮光,不透明度:76%,角度:-81度、缩放:100%,使圆形把手变成具有明暗对比的金属黄色,设置参数如图6-86所示。图6-86 添加【渐变叠加】图层样式具体操作步骤如下具体操作步骤如下:27.

31、添加【斜面和浮雕】图层样式,调整各项属性,【斜面和浮雕】一栏样式为枕状浮雕,方法为平滑,深度:100%,方向:上,大小:1像素,角度:120度,高度:30度,设置参数如图6-87,使其富有立体感。图6-87 添加【斜面和浮雕】图层样式28.新建图层,载入金属把手纹理材质图片素材,置于把手层上,创建剪贴蒙版,叠加图层模式,调整各项属性,【斜面和浮雕】一栏样式为内斜面,方法为平滑,深度:100%,方向:上,大小:3像素,角度:120度,高度:30度,设置参数如图6-88所示。图6-88 添加【斜面和浮雕】图层样式具体操作步骤如下具体操作步骤如下:29.用同样方法分图层绘制多种齿轮形状,使用材质素材

32、与图层样式,展现材质与立体感,置于logo底板上方,增添画面细节,如图6-89所示。图6-89 效果图30.完成,但画面光线较为暗沉,下面使用光线图片素材,LOGO教程-素材-素材4,为logo增添色彩变化。素材4 光线具体操作步骤如下具体操作步骤如下:31.新建3个图层,载入光线图片素材,使用【Ctrl+T】变形工具调整素材方向、大小,图层模式选择“颜色减淡”,不透明度为50%,如图6-90所示,为图层添加图层蒙版,蒙版填充黑色,使用圆选区,填充黑白径向渐变,利用变形工具调整形状,如图6-91所示,得到效果如图6-92所示。图6-90 新建3个图层图6-91 效果图图6-92 效果图32.接

33、下来绘制“禁区”立体文字效果,新建2个文字层,输入禁、区,栅格化图层,利用变形工具改变形状,填充灰色,合并图层,如图6-93所示。图6-93 栅格化图层具体操作步骤如下具体操作步骤如下:33.“禁区”文字层,【图案叠加】、【渐变叠加】、【光泽】、【斜面雕效果】最为关键。【图案叠加】一栏中图案选择,缩放:300%,混合模式为正品叠底,渐变效果为金属反光,自行定义,勾选反向,样式:线性,角度:90度,具体参数如图6-94、图6-95所示。图6-94 添加【图层叠加】样式图6-95 添加【渐变叠加】样式【颜色叠加】混合模式为颜色减淡,不透明度:53%。具体参数如图6-96所示。图6-96 添加【颜色

34、叠加】样式具体操作步骤如下具体操作步骤如下:【光泽】混合模式为亮光,不透明度:34%,角度:19度,距离:250像素,大小:177像素。具体参数如图6-97所示。图6-97 添加【光泽】样式【斜面和浮雕】一栏样式为内斜面,方法为雕刻清晰,深度:195%,方向:上,大小:16像素,软化:0像素,角度:120度,高度:30度。具体参数如图6-98所示。图6-98 添加【斜面和浮雕】样式具体操作步骤如下具体操作步骤如下:【纹理】一栏图案为真实金属纹理图片素材,缩放:300%,深度:+10%。具体参数如图6-99所示。图6-99 添加【纹理】样式【内发光】一栏中混合模式为颜色减淡,不透明度:80%,杂

35、色:9%,颜色选择橄榄色到透明,自行定义,源:居中,阻塞:22%,大小:114像素。具体参数如图6-100所示。图6-100 添加【内发光】样式具体操作步骤如下具体操作步骤如下:【内阴影】中混合模式为正片叠底,不透明度:95%,角度:-90度,距离:24像素,阻塞:5%,大小:15像素,杂色:22%。具体参数如图6-101所示。图6-101 添加【内阴影】样式【投影】一栏中混合模式为正片叠底,不透明度:89%,角度:120度,距离:9像素,扩展:2%,大小:54像素,杂色0%。具体参数如图6-102所示得到效果如图6-103所示。图6-102 添加【投影】样式图6-103 效果图具体操作步骤如

36、下具体操作步骤如下:34.“禁区”文字制作完成后,发现色调偏黄,采用复制图层重叠的方式调整颜色,复制一层禁区文字层,删除图层样式,重新添加图层样式如下,【描边】样式,调整大小为2像素,位置:居中,混合模式为颜色减淡,填充类型为渐变,角度:0度,缩放:147%。参数设置如图6-104所示。图6-104 添加【描边】样式【颜色叠加】中混合模式为黑色。参数设置如图6-105所示。图6-105 添加【颜色叠加】样式具体操作步骤如下具体操作步骤如下:【光泽】中混合模式为叠加,不透明度:18%,角度-18度,距离:21像素,大小:46像素。参数设置如图6-106所示。图6-106 添加【光泽】样式【内发光

37、】一栏中混合模式为颜色减淡,不透明度:71%,杂色:0%,颜色选择米白色到透明,自行定义,方法:柔和,源:居中,阻塞:100%,大小:250像素,范围:75%,参数设置如图8-98所示。图6-107 添加【内发光】样式具体操作步骤如下具体操作步骤如下:【内阴影】中混合模式为颜色减淡,不透明度:55%,角度:120度,距离:21像素,参数设置如图6-108所示。图6-108 添加【内阴影】样式【投影】一栏中混合模式为叠加,黑色,不透明度:62%,角度:90度,距离:48像素,扩展:8%,大小:30,像素,杂色0%,较为需要注意的是颜色叠加中的颜色为黑色,混合模式为颜色,可以使下方文字图层的色彩减

38、淡,其他图层样式作为细节体现而设置,具体参数设置如图6-109所示。图6-109 添加【投影】样式具体操作步骤如下具体操作步骤如下:35.改变叠于上方的“禁区”文字层不透明度为48%,如图6-110所示,得到效果如图6-111所示。图6-110 设置不透明度图6-111 效果图36.画面整体已经完成,下面设计一些点缀素材LOGO教程-素材-素材5,可以丰富画面的细节与完整度,首先选择一张类似红色液体的图片素材,利用它来制作刀刃上的血液效果。删去黑色背景,扣取红色部分,利用截选,变形工具及涂抹,改变成十字形状,置于文字层上方。素材5 红色液体具体操作步骤如下具体操作步骤如下:37.新建图层,利用

39、画笔工具绘制子弹洞痕迹的黑白对比图,再利用图案LOGO教程-素材-素材6叠加图层样式为其增添材质纹理。素材6 子弹东痕迹38.欧美风格游戏LOGO禁区2015制作完成最终效果图如图6-112所示。图6-112 完成效果图056.3.1 Q版游戏版游戏LOGO设计设计具体操作步骤如下具体操作步骤如下:1.在Photoshop新建一个1340*640像素,分辨率300的文档,如图6-114所示。图6-114 新建文件2.使用【钢笔工具】将“ShybeeBoom”字样描绘出来,如图6-115图6-120、图6-1216-124所示。“Shybee”字样颜色为【f6c700】,设置参数如图8-120所

40、示,“Boom”字样颜色为【2594ff】,设置参数如图6-125所示。图6-115 步骤1图6-116 步骤2图6-117 步骤3具体操作步骤如下具体操作步骤如下:图6-118 步骤4图6-119 步骤5图6-120 颜色参数图6-121 步骤6图6-122 步骤7图6-123 步骤8图6-124 步骤9图6-125 颜色参数具体操作步骤如下具体操作步骤如下:3.使用【椭圆工具】用【f69000】颜色在字样上加斑点效果,设置参数如图6-126所示,效果如图6-127所示。图6-126 颜色参数图6-127 加斑点效果4.右键点击字母图层选择【栅格化图层】,即可对图层进行编辑,如图6-128所

41、示。图6-128 选择【栅格化图层】5.【Ctrl+单击图层】出现图层选区后右键单击【选择反选】,如图6-129图6-131所示。具体操作步骤如下具体操作步骤如下:5.【Ctrl+单击图层】出现图层选区后右键单击【选择反选】,如图6-129图6-131所示。图6-129 【Ctrl+单击图层】图6-130 单击【选择反向】图6-131 效果图6.单击【Delete】删去多余部分,得到斑点效果.效果如图6-132所示。图6-132 删去多余部分具体操作步骤如下具体操作步骤如下:7.使用同样的方法,完成全部斑点效果。且Boom字样使用【5df4ed】颜色做斑点效果,设置参数如图6-133所示,得到

42、效果如图6-134所示。图6-133 颜色参数图6-134 效果图8.每个字母分别添加图层样式:描边大小为10像素,位置外部,混合模式正常,不透明度100%,颜色为【6f4004】,设置参数如图6-135所示。图6-135 添加【描边】样式具体操作步骤如下具体操作步骤如下:9.将Shybee字样和Boom字样各自合并成两组,并添加图层样式:描边大小为3像素,位置外部,混合模式正常,不透明度100%,颜色为【ffffff】,设置参数如图6-136所示。图6-136 添加【描边】样式10.将Shybee组和Boom组两组成一大组,并添加图层样式:投影,混合正片叠底,颜色为【000000】,不透明度

43、为63%,角度120度,距离11像素,扩展0%,大小0像素,设置参数如图6-137所示,效果图如图6-138所示。图6-137 添加【投影】图6-138 效果图具体操作步骤如下具体操作步骤如下:11.使用【椭圆工具】并用颜色【ffffff】绘制眼白,颜色【00b7ee】绘制虹膜,颜色【000000】绘制瞳孔,颜色【ffffff】绘制高光,效果如图6-139所示。12.使用【钢笔工具】绘制文字logo的背景框,使用颜色分别为前背景颜色【9c068c】和后背景颜色42023b,设置参数如图6-140所示,得到效果如图6-141所示。图6-139 添加眼睛图6-140 颜色参数图6-141 效果图具

44、体操作步骤如下具体操作步骤如下:13.新建一个图层绘制怪物角色,将放置logo中装饰。使用【圆角矩形工具】,半径为100像素,颜色【88c63f】,绘制出小绿怪的身体,得到效果如图6-142所示。图6-142 绘制身体14.使用【矩形选区工具】框选小绿怪下半身后点击【Delete】删去多余部分,如图6-143所示。图6-143 删去多余部具体操作步骤如下具体操作步骤如下:15.使用【钢笔工具】绘制小绿怪的角,淡色为【e3e5cb】,阴影为【c1c094】。完成后复制,水平翻转即可,如图6-144所示。图6-144 绘制角16.使用【椭圆工具】和颜色【fbfbf2】、【352020】绘制眼白和眼

45、黑,如图6-145所示。图6-145 绘制眼睛具体操作步骤如下具体操作步骤如下:17.【Ctrl+单击图层】出现眼黑选区,选择【圆形选区】并选择【与选区交叉】模式,与眼黑选区交叉,得到效果如图6-146所示,填充颜色【562e2e】,设置参数如图6-147所示。图6-146 绘制眼睛图6-147 颜色参数18.使用【椭圆工具】和颜色【ffffff】描绘高光,效果如图6-148所示。图6-148 绘制眼睛高光具体操作步骤如下具体操作步骤如下:19.使用【钢笔工具】描绘小绿怪嘴部,口腔颜色为【562e2e】,牙齿颜色为【ffffff】,效果如图6-149所示。图6-149 绘制嘴巴20.使用【椭圆

46、工具】,用颜色【519402】描绘斑点,设置参数如图6-150所示,并使用【钢笔工具】描绘出脚步,效果如图6-151所示。小绿怪完成!图6-150 颜色参数具体操作步骤如下具体操作步骤如下:21.绘制小红怪,使用【椭圆工具】和颜色【cd0414】绘制出身体,如图6-152所示。图6-152 绘制身体22.使用【椭圆工具】,颜色【ffffff】绘制眼白和高光,颜色【352020】绘制眼黑。完成后栅格化图层,使用【矩形选区工具】选取多余部分后点击【Delete】删去,效果如图6-153所示。图6-153 绘制眼睛具体操作步骤如下具体操作步骤如下:23.使用【椭圆工具】和【钢笔工具】描绘出头部装饰和

47、双腿,如图6-154、图6-155所示。图6-154 绘制装饰和双腿图6-155 效果图24.使用【椭圆工具】绘制出嘴巴,颜色为【562e2e】,栅格化图层后使用【椭圆选区工具】删去多余部分,得到一个微笑的嘴巴,如图6-156所示。图6-156 绘制嘴巴具体操作步骤如下具体操作步骤如下:25.使用【圆角矩形工具】绘制出舌头,颜色为【fb9dc7】,舌头斑点颜色为【ce4e87】。完成后栅格化图层,用【椭圆选区工具】选取多余部分点击【Delete】的方法删去,如图6-157、图6-158,得到效果图如6-159。图6-157 绘制舌头图6-158 颜色参数图6-159 效果图26.使用【钢笔工具

48、】和【椭圆工具】绘制出双手,如图6-1,60所示,小红怪完成!图6-160 效果图具体操作步骤如下具体操作步骤如下:27.将绘制好的小怪物放入logo装饰并调整好图层顺序,完成logo,如图6-161、图6-162所示。处理好后,选择【文件】【另存为】命令,将文件保存为“.Jpg”格式的图片文件。图6-161 效果图图6-162 效果图066.3.3像素游戏像素游戏LOGO设计设计具体操作步骤如下具体操作步骤如下:1.打开Adobe illustrator CS6,选择菜单栏中的【文件】【新建】画板。画板宽度设置为200mm,高度设置为100mm,取向选为横向,颜色模式设置为RGB,栅格效果设

49、置为72ppi,点击【确定】,进入画板,如图6-163所示。2.在菜单栏中选择【文件】项目【置入】ICON的图片文件。点击当前【置入】选项的属性栏中【嵌入】选项嵌入图片至画板中,置于画板左方,相对画板上下居中,如图6-164所示。图6-163 在AI CS6中新建画板图6-164 【置入】ICON的图片文件于画板左方并且相对画板上下居中具体操作步骤如下具体操作步骤如下:3.选择工具箱中【文字】工具,在画板中单击【左键】出现键入框,键入“KINGDOM OF”,选择像素类字体,颜色设置为R:185 G:121 B:176,位置与ICON顶部对齐,如图6-165所示。图6-165 键入“KINGD

50、OM OF”并且位置与ICON顶部对齐4.选择【矩形】工具,单击【左键】,输入数据,绘制出一个长度为136mm高度为3.5mm的长方形作为像素块,颜色同上设置为R:185 G:121 B:176。置于“KINGDOM OF”下方,与“KINGDOM OF”左对齐,如图6-166所示。图6-166 绘制长方形置于“KINGDOM OF”下方并与“KINGDOM OF”左对齐具体操作步骤如下具体操作步骤如下:5.选择【文字】工具,单击【左键】,键入“SYLVIA”,同样选择像素类字体,颜色设置为R:127 G:19 B:128,位置与ICON底部对齐,与“KINGDOM OF”左对齐,如图6-16

展开阅读全文
相关资源
猜你喜欢
相关搜索

当前位置:首页 > 办公、行业 > 各类PPT课件(模板)
版权提示 | 免责声明

1,本文(游戏UI设计第6章:游戏LOGO与ICON介绍与设计课件.pptx)为本站会员(三亚风情)主动上传,163文库仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对上载内容本身不做任何修改或编辑。
2,用户下载本文档,所消耗的文币(积分)将全额增加到上传者的账号。
3, 若此文所含内容侵犯了您的版权或隐私,请立即通知163文库(发送邮件至3464097650@qq.com或直接QQ联系客服),我们立即给予删除!


侵权处理QQ:3464097650--上传资料QQ:3464097650

【声明】本站为“文档C2C交易模式”,即用户上传的文档直接卖给(下载)用户,本站只是网络空间服务平台,本站所有原创文档下载所得归上传人所有,如您发现上传作品侵犯了您的版权,请立刻联系我们并提供证据,我们将在3个工作日内予以改正。


163文库-Www.163Wenku.Com |网站地图|