游戏图标设计设计思路与绘制步骤

广义:图标是指具有明确指代含义的图形。

侠义:具有指代意义的图形符号,具有高度浓缩并快捷传达信息,便于记忆的特征。

从表现上:小图标大图标

小图标:尺寸16*1624*2432*3248*48

大图标:64*64128*128256*256512*512

游戏图标的分类:

品牌图标(游戏logo)功能图标物品图标装备图标技能图标

品牌图标,游戏loge,游戏快捷方式,注重识别性和唯一性

功能图标,主要用于表示某一类功能或操作的图形标识,通常会有组有规律的在某一功能模块出现。功能图标强调识别性,概括性。相比单调的文字,图标的识别性更强更有趣。

物品图标:游戏中使用的物品的标识,通常比较具象。

装备图标:用于表现游戏的时装装,防具,饰品,武器的图形标识。

技能图标:主要是用于玩家释放技能功能性图标,他也可以分2类

主动技能,被动技能。

这里介绍的是一般流程,具体可以根据自身习惯来取舍。

寻找隐喻:也就是找到最能表达所要设计图标含义的具体事物。

比如搜索—放大镜首页—房子

绘制草图:可以用纸笔画出图标的草图,根据图标实际尺寸和使用的位置来绘制,如果是功能图标,力求简约识别性强,草图可简练些。而道具或武器这类较大的图标则可以绘制更细致些。

确定风格:根据不同的游戏整体风格确定图标的风格。

写实风格:多用于写实类3D网游。如,御龙在天,笑傲江湖。

魔幻风格:魔幻题材的游戏,图标相应的也会偏魔法感觉,如英雄无敌,魔兽世界。

单色风格:主要用在系统图标,偏重易用性。

绘制图标:这个时候不用拘泥于用什么软件,用自己熟悉的软件即可。

本人的图标绘制步骤:

导入草图》调整抠出草图》绘制明暗素描关系》上颜色》添加质感》调整效果》导出完成

基于智能对象的绘制方法

Photoshop智能对象可以不损失图像质量的情况任意缩放,同时在智能对象的双画布的绘制平台上,非常有利于图标设计师的修改和快速查看图标实际使用尺寸的效果。通常我个人喜欢在智能对象中用512x512像素的画布进行绘制。

绘制遵循从大到小,从整体局部的原则。

1.构思/草图:

我们可在纸上绘制多个方案,初步方案不用太细致,主要表达构思,和对图标的形体结构的探索。然后选择满意的方案在ps进行处理,并将满意的方案深入刻画。

2.具体绘制阶段:

1细化线稿1

将绘制好的草图粘帖到智能对象中,并处理成线稿,可以填充一稍微深点的颜色,我习惯用黑色或褐色,将线稿稍微细化下。

2.建立明暗关系:2-3

在线稿图层下一层新建图层作为明暗层,用大而湿的笔触来铺出图标的明暗关系,这一步请忽略细节。

铺好大的明暗关系就可以开始塑造大的体积感,从主要部分入手,把英雄的头部和肩部的的明暗体积表现出来。

细节的刻画:4-6

可从最重要的部分开始刻画,脸部》盔甲》肩部循序渐进。这个时候可以在线稿的上一层新建图层进行细致刻画。这时候笔触可以细一些硬一些。把英雄的各个部分都刻画一边,在绘制的时候记得多保存。以便切换母文件查看整体效果。确保每个细节都融合在整体中。

当整体都刻画一遍之后就可以对重点部分脸部进行更细致的刻画,使得这个部分最细致最精彩,其他部分可以相对弱化些,在刻画细节的时候需要不时的调细小的结构。

着色:固有色》环境色》光源色。

在素描层上方新建颜色层,以叠加的方式把基本颜色绘制出来,着色的顺序也是从大关系开始,把主要的颜色绘制出来,这一步只要把英雄的固有色绘制出来。可适当调整色彩的饱和度。

基本色完成后再叠一层光源色和一层环境色,此时要注意冷暖对比,一般来说受光面为冷色,被光面为暖色,或者受光面为暖色,背光面为冷色。

添加材质:

颜色差不多了,就可以叠加点材质,这个图标重点是金属质感的表现,找到合适的素材适当的加以处理,根据具体情况调整素材颜色和明暗度。去掉多余部分。

调整完成:

当颜色细节绘制完成以后,就可以进行整体的调整,强化重点部分,弱化次要部分。

回到母文件,可以根据情况适当的对智能对象层加上锐化效果,对智能对象的锐化是随意调整锐化百分比的。

准备:在开始绘制技能图标前,有必要讲下技能图标的设计的要点和我最经常使用的技巧和方法。

一般来说,技能图标可以分为2大类,一类是物理技能,一类是法术技能,这样的话,在表现的方式上就有区别了。物理技能在表现上比较具体实在,通常会用武器加一些特效来表现,颜色也通常是红色,绿色,黄色。而法术技能的表现上就会比较虚幻,给人的想象空间更大,有种神秘莫测的感觉,通常颜色以紫色,蓝色为主。

方法很简单,也是基于智能对象绘制完成。

由于方法和英雄绘制的方法相同,具体绘制不再赘述。

草稿阶段

明暗关系处理阶段,

着色:

长枪绘制好了后,可以在底层上绘制出放射状的线条,以便把枪的速度和伤害力表现出来。

可识别原则

图标映射关系尽量直接简单,从生活,专业,心里找到最短的概念连接,简单来说图标要能最准确的表达相应的操作。

可识别性原则:

不同类型的图标间的差异性尽量拉开。要让用户一眼能感觉图标的差异性,帮助用户快速而准确的辨认图标。

统一原则:

相同功能的图标尺寸要保持一致。

简洁原则:这个原则通常多用于功能图标。

不用过分追求图标的精细度,图标过分精细会弱化图标的识别性。

组成图标的要素也尽量简洁,最好不要超过3个、

建立图标的关系:

在一个游戏中会有大量的图标。如何把这些图标进行有序的归纳,让图标更为有序显得非常重要。这个时候很有必要设定规律建立图标的关系。

THE END
1.UI基础界面图标规范图标绘制规范,一文看...来自阿多比设计UI基础|界面图标规范图标绘制规范,一文看懂! 好的图标设计不仅仅是美化界面的元素,也是传递信息、增强交互体验的重要工具,更是一个设计师专业力的体现。 整理了6条图标设计规范,在日常设计中灵活运用,...https://weibo.com/6500079170/P1uasklgd
2.视觉设计方法大放送——3分钟了解图标设计按照图标的绘制手法,图标可分为矢量图标和手绘图标。 矢量图标/手绘图标 图标设计 图标设计的核心思想,就是尽可能地发挥图标的优点——比文字直观、比文字漂亮;减少图标的缺点——不如文字表达准确。 图标设计遵循以下三个原则,即可用性、美观性和原创性。 https://www.gameres.com/847710.html
3.一篇文章,带你看懂功能图标设计!Halo,这里是设计夹,今天分享的是「功能图标设计」。 本文将详细介绍功能图标在现代软件和应用程序界面设计中的定义、作用、种类、设计原则、设计方法和注意事项等方面的内容。 功能图标作为界面设计的基础组成部分,其设计和使用对于提高用户的效率、体验和满意度具有重要作用。 https://www.niaogebiji.com/article-666120-1.html
4.Qt绘图指南:掌握高效美观的GUI设计之道QPainter是Qt框架中用于在绘图设备(如QWidget、QPixmap、QImage等)上进行绘图的类。它提供了丰富的绘制方法,如绘制直线、矩形、椭圆、多边形等。QPainter还提供了绘制文本、图像、路径等功能。在进行绘制操作时,QPainter会考虑当前的状态,如坐标变换、裁剪区域、画笔、画刷等。 https://developer.aliyun.com/article/1463725
5.你应该知道的65个设计术语10 个基本设计术语 什么是构图? 构图,也称为布局,是创建完整图像的设计元素的视觉排列。在一个作品中,您可以使用不同的设计原则来创建视觉上令人愉悦的作品,以提供功能性布局。 什么是设计中的平衡? 放置在页面上的任何元素都具有视觉权重,可能会受到形式、大小、颜色和纹理的影响。为了使布局平衡,某些元素可能需要...https://www.szfangwei.cn/news/6524.html
1.最新图标设计趋势与特点概述新闻摘要:最新风格的图标设计趋势与特点体现在简洁、抽象、扁平化、动态和个性化等方面。设计师们追求极简主义,以简洁的线条和形状表达图标含义,同时注重抽象表现,引发观众联想。扁平化设计成为主流,色彩鲜明、对比强烈。动态图标和...http://www.czshengmei.cn/post/11756.html
2.可爱小图标设计与应用指南简介:在图形设计领域中,图标设计对用户界面(UI)至关重要,特别是对于论坛和网站。它们通过简洁的图形传达功能或信息,增强用户体验。本主题将探讨图标的设计原则、格式选择、设计工具、版权问题以及应用场景,旨在帮助设计师创建吸引人的视觉元素。 1.图标设计的原则和重要性 ...https://blog.csdn.net/weixin_36431814/article/details/144124458
3.轻松绘制Icon图标,提升新媒体视觉效果在深入探讨如何绘制Icon之前,我想先和大家聊聊Icon的基础知识。Icon,即图标,是界面中用于表示功能、文件、程序或命令等视觉元素的图形符号。它们虽小,却承载着巨大的信息量,是用户与界面交互的重要桥梁。 1、Icon的设计原则 设计Icon时,应遵循简洁明了、易于识别、色彩搭配和谐等原则。简洁的线条和形状,能让Icon在众多...https://www.batmanit.cn/blog/k/52326.html
4.「设计方法」UI工作流程指南(一)设计时原型的类别也需要关注,每个项目启动时对原型的需求不一定都相同,交流的对象也有可能会对原型的类别产生混淆,以为线框图(Wireframe)、原型(Prototype)和视觉稿(Mockup)是一个东西,设计最好先与产品经理/甲方开始就确认要绘制什么类型的原型。 三种类别虽然产出效果不同,但在本质上都是一样的,为设计开发服务,...https://maimai.cn/article/detail?fid=1432760722&efid=WECXIWo5VTVdp8MWzUWhCA
5.制图实训报告(20篇)本实训的目的在于把握AutoCAD用于工程制图的基本操作,了解工程图纸绘制的格式和要求,工程图样绘制和阅读工程图样的原理和方法,培养形象思维能力,要求我们能够用AutoCAD绘制二维的工程图纸,理论和实践紧密结合,通过《机械制图课程设计》做了一套工程图样的操作实例。 目的与任务: 1、了解工程图纸的一般要求和格式并绘制平面工...https://www.ruiwen.com/shixunbaogao/7300946.html
6.icon的设计原则有哪些在设计图标时,有一些基本原则需要遵循。首先,图标应该简洁而明确,能够清晰地传达出所代表的概念或功能。其次,图标应该具有一定的普遍性,以便于不同文化背景和语言环境的人们都能理解和使用。此外,在设计过程中还应注意细节,并确保图标与相关文字的配合协调。在选择图标元素时,建议优先考虑自然界中已有的形状和形式。这...https://wap.zol.com.cn/ask/details_20545874_2787619_3.html
7.阿里云设计语言:打造云计算设计领域的语言体系MySecretRainbow在计算设计语言引领下,阿里云图标以极简的几何形态作为识别特性。在图标设计时应避免无序、无逻辑、不稳定的随机形态,一切形态表现均应在一个无形的几何空间内完成。 所有二维图标应绘制在相应大小的基础方形网格框架上,轮廓线的笔划宽度固定。这样可以确保图标在导出时将保留其所需的比例和周围空白区域的一致性。 http://www.mysecretrainbow.com/blog/22653.html
8.人机交互2交互设计的原则与方法SpriCoder的技术博客交互设计的原则与方法 交互设计中的问题 尽量减少用户需要记忆的部分 缺乏反馈 1. 目标Goal vs. 意图Intention 单个目标可对应多个意图 举例:删除文档中的部分内容的目标 意图1:通过编辑菜单删除 意图2:通过删除按钮删除 每个意图可包含一系列活动 2. EEC模型 ...https://blog.51cto.com/u_16038001/6159133
9.个人实训总结通用15篇在绘制图形是时,仅仅绘制好的图形还不能看什么来,也不足以传达足够的设计信息。 只有把尺寸标住标在自己的图形上面,就会让看图者一目了然,CAD提供的尺寸标注功能可以表达物体的真实大小,确定相互位置关系使看图者能方便快捷地以一定格式创建符合行业或项目标准的标注。 https://www.unjs.com/fanwenwang/gerenzongjie/20230423182512_6935637.html
10.图标设计的三个小原则还有个问题要点一下大家:就是在设计图标的过程中,我全程都是用矢量工具绘制,然后做布尔运算,再用锚点去调整。如果用钢笔去勾可以是可以,但是如果水平不够高,曲线就会不协调。 差异性 设计一套图标时,要尽量放大图标之间的差异性,减弱图标之间的相似性,这是最容易被设计师忽略的一项原则,往往为了保持视觉风格的统一...https://www.jianshu.com/p/3bfc7b221a74
11.PhotoshopUI交互设计张晨起著第2章 图标设计 352.1 了解图标设计 362.1.1 什么是图标 362.1.2 图标设计的作用 362.1.3 图标设计的意义 362.2 图标设计的绘制原则 362.3 Photoshop图层的基本操作 412.3.1 新建图层 412.3.2 选择图层 422.3.3 复制、移动图层 422.3.4 重命名图层、删除图层 442.4 画笔工具 502.4.1 预设画笔工具 52...http://product.m.dangdang.com/detail1378434003-22159-1.html?main_pid=0
12.借“助农”软件产品设计,育爱党前端开发人才——《UI设计应用》课程思政典型...课前,通过任务单让学生了解疫情中外卖小哥;课中,将抗疫精神、规则意识、工匠精神、中国优秀传统文化等融入教学,通过感人外卖小哥视频导入,强调抗疫精神,引出教学任务;讲解设计原则中,体现规则意识;讲解设计方法中传导工匠精神和文化自信;图标绘制创作中传导创新精神和精益求精的工匠精神;课后,通过助农网图标的制作进一步...http://www.gxzjy.com/ztlj/kcszjxyjsfzx/cases/202208/t20220816_112426.html