UI手绘图标设计详解!

【我的工具】

1、pdtools图标标准辅助线笔记本

2、施德楼铅笔

3、不知名橡皮​

【示例最终效果图】50分钟简单刻画

UI手绘图标设计详解!_第1张图片

【干货&步骤图】:

画线稿:

想要直接一笔勾出完美形状是不现实的

手绘过程一般是简单线稿——精确勾线——铺色

首先将所画物体用最简单的几何形体概括出来,此时千万不要去找里面的细节(用4H之类的硬铅起形)

当务之急是将大的形状和比例找对

透视一定不能出现不舒服的情况,把轮廓线拉长,确保他们符合“近大远小”的透视原理

UI手绘图标设计详解!_第2张图片

​左、右、下都有透视现象,下面的最容易忘记,不要出错

注意只保证俩边的透视线正确是不够的,中间的边也要和俩边保持一致

UI手绘图标设计详解!_第3张图片

​线稿画到这个程度就可以了,只是一个简单轮廓形,内部的细节性东西在这个阶段不要去做

UI手绘图标设计详解!_第4张图片

​然后开始勾线,今天的勾线上色方法不同,不适合新手,是一种推画法

UI手绘图标设计详解!_第5张图片

线稿勾好之后就可以开始上色,上色一定先从最重的颜色开始,压住画面

最重的颜色要大胆地重下去,这样才能建立强烈的空间关系

UI手绘图标设计详解!_第6张图片

提手可以在铺色之后用擦笔简单处理一下质感

UI手绘图标设计详解!_第7张图片

然后继续往下,开始上暗面的颜色

UI手绘图标设计详解!_第8张图片

整体上完之后可以用橡皮大面积擦一下暗面

快速做一些变化丰富的反光出来

UI手绘图标设计详解!_第9张图片

中间那俩个小东西,要注意分面,分开亮、灰、暗三种面,这样才能建立良好的体感

UI手绘图标设计详解!_第10张图片

提手也是有投影的,不要忘记

UI手绘图标设计详解!_第11张图片

然后将篮子的镂空也画出来,这里可以借助一下尺子,用手画的话很费精力

暴风截图2017211145015269.jpg

UI手绘图标设计详解!_第12张图片

前面的镂空勾的重一点,后边的轻一点,建立一个整体上的前后空间关系

UI手绘图标设计详解!_第13张图片

暗面同理

UI手绘图标设计详解!_第14张图片

最后把面包上的纹路画出来,并调整一下画面

UI手绘图标设计详解!_第15张图片

这样就完成了

UI手绘图标设计详解!_第16张图片

很感谢大家看了那么久,也给正在设计路上的朋友一个基础福利,希望对大家有用

UI手绘图标设计详解!_第17张图片

                                                                                                             ​2017版本软件大集合


UI手绘图标设计详解!_第18张图片


                                                                                          200本电子版设计书籍


UI手绘图标设计详解!_第19张图片


                                                                                 2018版本软件大集合,回复即可领取


UI手绘图标设计详解!_第20张图片

​​以上分享,关注后,想要书籍的,直接回复(UI书籍)。

想要软件帮助的,回复(PS)​​​​​​​​

你可能感兴趣的:(UI手绘图标设计详解!)