古代中式图标绘制过程

一,何谓古代中式图标

Jie: 具有明显古代中式传统象征纹样或装饰的图标。其一,来自民间工艺:陶瓷、刺绣、窗花、蓝印花布,蜡染、剪纸、雕刻、编织等;其二来自宗教艺术,如宗教传说和神话传说,庙宇、石窟中的壁画、藻井、龛楣、塑像服饰、基座、建筑、雕刻以及各种供器装饰。其三是来源于封建帝王、王公贵族、富豪商贾等所占用的陈设品、日用品、服饰、首饰、建筑……(设计师自身素材库的收集和整理很重要,并且需要适当的学习中式/欧式纹样发展历史知识,这样可以提高设计前期的准备工作)

二,如何构思和绘制草稿

1)根据游戏风格和产品需求,可以在纸上大致画几个方案草图,草图可以不用太细,有个大致的感觉便可,主要是找找图标透视的角度,寻找下外轮廓的大感觉,如果是系列图标,其外轮廓最好是有一定的联系性,这个阶段,可以尽量放开来画,潦草啊什么的都无所谓,追求快速表达,注意下笔的节奏感和连续性,不用在意别人是否看得懂,设计师自己明白即可。(不在草图上进行细化是为了减少时间上的消耗,而把细化的工作放到电脑上来进行)

2)把草图想法在电脑上用画笔绘制出来,这里选择用了ps自带的圆头笔且设置为不透明,用形状语言来造型,注意这5个图标是一个体系,即再怎么变化都跳脱不出大的框架,但每个单独的图标都要有所区分,保持大形的基础上营造连续的变化,这里更多的还是考虑剪影的感觉,类似概念设计,剪影的形状感找对了,往里面添加细节就相对容易多了。

三,初步细化草图

1)这个阶段是对上面的草稿进行第一阶段的细化,边细化可以边纠正之前设计或想法不到位的地方。因跟产品沟通后,由于排期和项目进度,重新对设计理念进行了调整。为了使个体图标的差异拉大,有推翻之前部分设计,这个阶段不再以圆为大轮廓大形状来设计,而是以三角形,四边形,五边形,复杂多边形到复杂圆呈阶梯式递进设计。

2)对图标的明暗关系进行细化,在图标的左上角引入一个光源,便于更好的塑造体积感,从左上角到右下角光感自然衰减,稍微添加金属材质属性。接着加入一定的变化纹样,纹样本身可以用云纹,宗教纹样,兽纹,青铜器花纹来表现,利用各种角度和位置来穿插,拉开造型的差异性,减少重复感。

3)多利用参考图,毕竟完全靠想象会不够真实准确,抽取参考图中有用的纹样和装饰物来添加古代中式风格的元素,没有这些元素的添加,这个图标就不会有明显的风格化。(有些参考图是平面化的图纹,所以在添加细节的时候要把其转化为立体的带有形体转折的结构关系,这个就比较考验设计师的基础造型能力了)

四,再次深入细化

1)抽取上图左上角图标进行更深入细化,完善形体的各种空间转折关系,凹凸关系,里外关系,注意厚度的体现(如图红框部分是体现厚度的地方),高光点,反光,材质金属感,粗糙感颗粒感,划痕破损等等,不同的材质有不同的画法,调整了中间风格倾向不够明确的图案,整个图标可以先画一半,另一半可以用对称复制的方法过去,但如果要画出更让人信服的效果,另一半对称过去后也需要根据光源的走向略微加以调整,否则素描关系就很假。最后加入两边的金属环,让构图更加饱满,重量感更加均衡,避免头重脚轻的感觉。

2)在处理完素描关系后,可以用新建一层图层,混合模式设置为【颜色】,用大的喷枪把图标的固有色调涂上去,并让色彩随着素描关系变化,在大致获得想要的色调后,合并图层,并备份一层以备后患,然后就是顺着结构一笔一笔的去过度颜色了。加入一些小光点,配合加深/减淡工具的使用,会让整个图标响亮起来,然后适当锐化,可以提高造型的硬度,注意高光要卡在关键的转折位置上。

五,调整颜色并最后输出

1)把图标放入实际界面中观察,发现目前色彩饱和度稍低,金色的质感略显不足,颜色中有带一点点的黄绿,所以把色彩稿合并,然后用饱和度&曲线工具反复的调整颜色,除了提高饱和度外,还需要单独对黄色通道的颜色适当加强,让其纯正一些,然后让颜色稍微偏一丁点红,这样会更有色泽感。最后把图标缩小到实际的尺寸放入界面中再做下检验。

2)最后根据实际尺寸再调出剩下的4种颜色,在调色过程建议找些参考图来看,在有所依据的情况下,保证调色的准确性,这样一个图标根据色彩属性就产生了的5种变化。

六,小Tips大作用

1)Photoshop智能对象可以不损失图像质量的情况下,方便的进行缩放,同时在智能对象的双画布绘制情况下,只要原始文件保存更新,智能对象也会同步更新,非常适合设计师反复修改和快速查看图标缩小后的效果。

2)在智能对象的基础上,还可以使用智能滤镜进行的锐化,而且可以随意编辑锐化的值,选择合适的锐化比例来实现设计师所要的效果。

感谢大家的阅读,希望本文对您有一些帮助,也期待与您的交流。

腾讯GDC

(0)

相关推荐

  • 像素图标绘制技巧

    图标是网页中的常见元素,主要功能是表意,也包含装饰及品牌传递的作用。存储为gif、png等位图格式的图标,称为像素图标,大小通常为16px、24px、32px等。当然像素图标也可以理解为像素风格的图标 ...

  • UI设计中扁平图标绘制的终极指南

    小编:图标设计和绘制都需要设计师的耐心和细心.作者,在这篇文章中,用对比的方式,详细的阐述了,作为设计师所需要了解的关于绘制UI图标的一些细节.希望我们在读完这篇文章后,能够更高效和高质量的完成相应的 ...

  • SAI黄昏时的云彩绘制过程

    黄昏时的云彩绘制过程,从铺色.混色再到后期调整一步步绘制

  • SAI通透的眼睛的绘制过程

    通透的眼睛的绘制过程,这次教程讲解的相当详细,建议打开SAI或者PS跟着来

  • 图标绘制深层知识(PSD免费下载)

    今天给小编给大家带来@duanjianlove同学分享的图标绘制的深层知识(dribbble图标PSD免费下载),不知道大家还记不记得学UI网之前分享的一篇UI设计中的细节及技巧.没错,那也是这位同学 ...

  • icon图标绘制心得

    一.选取icon制作工具; 最受图标设计界牛人们推崇的专业icon/ico图标制作软件--Axialis IconWorkshop. 二.确立icon制作题材; 软件图标是软件的形象代言人,想让用户一 ...

  • 可爱扁平风格图标绘制【做作业】

    今天的作业是三个偏平小icon的绘制哦,而且之中有一个大家之前是做过的哦!如果大家不会绘制可以去网站翻翻教程看看哈~~ 注意: 注意颜色的运用 色调的统一 图标造型的风格一致 不透明度的运用 建议软件 ...

  • 图标绘制基础指南,一篇就够!

    图标是界面里很重要的元素,下文主要罗列了绘制图标时的8个注意要素,一起来看看你有没有遇到以下情况吧.(译文有部分增改) 1. 使用视觉网格系统 一个界面图标通常会接近以下几种基本形状.它有可能像一个竖 ...

  • mbe风格图标绘制【做作业】

    我想很多同学在各大设计网站看到过那种卡通可爱风格的图标吧!今天我们就随大流来做一做这样的作业吧~~ 注意: 颜色的搭配 造型的制作 要求:提交的作业在背景的右下角或评论框署名,格式为:(N群-XX) ...