【icon设计分享】爱丽丝梦游仙境——章节入口图标

用户头像
上海/UI设计师/5年前/2622浏览
【icon设计分享】爱丽丝梦游仙境——章节入口图标

ICON设计流程的学习与梳理

今天我们讲讲图标的设计流程,在工作或者学习中,我们可能会拿到这样一个需求。比如这个


“爱丽丝梦游仙境——章节入口图标设计”


今天暴富老师围绕这个题目,对图标的设计以及绘制两个方向,进行总体的学习与梳理,使同学快速熟悉图标设计制作方法。


Part  1

设计方法分析


01    提取元素


根据我们爱丽丝梦游仙境的主题,我们头脑风暴一下,提炼出了——蘑菇  树  兔子  怀表  帽子  茶壶  领结  藤蔓  蛋糕  药水  书本  扑克等等元素。

既然章节入口图标,主体可以设计为书本,突出章节的含义,同时挑选其他设计的元素来辅助设计。

(设计元素参考)


02    构图摆放


构图上采用三角形构图,先用主设计元素书本,怀表,兔子来构成主视觉中心点。再用树枝来丰富画面和构图的饱满性。

小贴士:构图时设计的元素可先用方盒子来表示,方便确认摆放位置和摆放角度,同时防止画错透视。



03    确认线稿


根据寻找的元素绘制草图,并对草稿进行整理和丰富,交代清楚结构,确认线稿。


Part  2

制作方法分析


01  色稿环节


在线稿下面新建1层,绘制2-3个色稿草图,如果图标较简单,可以省略这个步骤,直接在矢量制作的过程中出配色方案。

新手可以寻找一些适合的色彩参考,来分析他的取色范围或是冷暖色运用等,从而来学习他们的配色技巧。但是一定不要直接吸色来绘制,吸色是进步的敌人。


02    确定配色方案


挑选最适合主题的配色方案准备正式制作。


03    矢量制作以及分层


大多数图标采用矢量的绘制方式。我们可以以物体为单位,在矢量绘制的时候对他进行分层,在底层开始勾起,绘制的时候图层尽量分开,方便后期调整修改。


04    体积塑造


确定图标的光源,这边确定为右上方打光,确定后用硬笔刷画出图标的暗部,亮部用渐变工具做出变化,画出物体间的投影,处理整体体积关系。


05   增加细节


物体增加的处理,比如书本的褶皱,兔子衣服布料的细节处理,金属材质的刻画等等,绘制细节的时候注意不要破坏大关系。整体调整到完成度较高的程度。


06    提升光感氛围


调试是否需要勾线或者装饰纹理等,视觉中心点增加光感,对图标整体进行润色, 冷暖色对比和层次细微调整,突出视觉中心点,提高完成度。

小贴士:润色图层注意不要画到图标整体外面哦,防止切图时出现问题。


当当当!最后就完成啦!



这个教程主要为新进入行业的宝贝们熟悉设计逻辑和绘制流程,希望新入行的宝贝儿们能快速适应工作节奏,工作中越来越顺利,爱你们比心~

-----------------------------------------------------------------------------------------

还没看够?上期还有一篇灯笼主题的分享,供君一览~


我们帅气的梁哥给灯笼加上了仙气飘飘的动效,这样的特效灯笼就更加贴近实际项目中的需求了~



看完这个灯笼,想学的小伙伴可以关注公众号:叶子学堂去咨询啦,最新的动效班即将开课!学会这一手,升职加薪指日可待!


51
阅读原文
|
举报
|
84
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
加载中
推荐素材
Security Camera UI kit
UI应用平面图标
我的钱包-UI界面设计-app
矢量立体简约UI蓝白图标
高级表盘系列UI源文件
新能源APP应用UIKit
【新年UI图标】游戏/娱乐icon
UI通用设计素材1
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
【新年UI图标】家具icon
高级感金属拟物 UI设计组件库
钱包ui模板
科技医疗透明柜UI界面设计
【新年UI图标】珠宝icon
【新年UI图标】美妆icon
【新年UI图标】影音icon
智能家居中心 简约 UI设计组件库
UI_3D图标炮仗<新春促销>
UI_3D图标火箭炮<新春促销>
UI界面 组件
UI 登录界面设计模板包
【新年UI图标】酒店icon
【新年UI图标】30个图标
手表表盘UI系列
你可能喜欢
相关收藏夹
UI
UI
UI
UI
大家都在看
登录注册