澳门新葡亰赌全部网址▎导航站

画原型做交互甚至是出视觉稿,大白很简单

来源:http://www.tackaberrytimes.com 作者:家居宠物 人气:155 发布时间:2019-10-02
摘要:这部电影特别火,很多同学都特别喜欢这个萌萌哒大白同学,今天JingDesign来一篇应景的教程,手把手教同学们用Sketch绘制大白形象。想换个头像。 先看看效果图。 (●—●) ▽ 一、分析

这部电影特别火,很多同学都特别喜欢这个萌萌哒大白同学,今天JingDesign来一篇应景的教程,手把手教同学们用Sketch绘制大白形象。想换个头像。

图片 1

先看看效果图。

(●—●)

图片 2

一、分析角色构成

说实话,作为产品经理,我完全不会用Axure,嫌软件操作麻烦,嫌画出的原型没逼格。画原型做交互甚至是出视觉稿,都强烈推荐sketch,操作简单易上手,出图迅速又好看。

大白很简单,并没有过多的光影效果,基本属于纯色。我们先将其分解,有几部分:头部,眼睛嘴巴,身体,胳膊,手指,还有一行文字。

网上有很多sketch的破解包,官网还有中文版sketch教程,分分钟可以卸载Axure了。

图片 3

至于产品的流程图、泳道图、时序图,我一般是用Omnigraffle,如果要用sketch代替,也是妥妥的。

二、头部及眼睛

最近开始尝试用sketch画画,下面是用sketch画大白(●—●)的教程,治愈系清新暖萌有木有~

大白的头部使用sketch的圆形工具即可实现,首先画一个圆形,设置图形的Fills与Borders的属性如下图所示(Fill的颜色:#FDFAEB,Border的颜色:#494949 ):

图片 4

1-画一个圆

将圆形压扁,并使用钢笔工具调整锚点,使它看起来更像头部。要使用钢笔工具,可以直接在圆形的边框上双击鼠标,即可进入钢笔编辑模式,这时鼠标会变成钢笔形状,分别点击四个节点,并分别将其滑杆适当拉宽,注意保持图形的对称。调整完成,点击属性栏的Finish Editing或者按键盘上的回车键退出钢笔模式。

图片 5

图片 6

第一步

再次选择这个椭圆,在sketch的右侧属性栏中选择Inner Shadows,点击加号,为它加上内阴影,内阴影颜色为(#E3C6BE)。请注意属性中X与Y的位置,如X值为正,则内阴影将出现在椭圆的左侧,Y值依此类推。Blur为投影的模糊程度,这里我们不需要模糊,将其设置为0。Spread为阴影的宽度,数值越大,投影越大。

左上角,点击Insert→Shape→Oval,画一个圆。设置Fills的颜色为#FFFFFF,Borders的颜色为#5A3817,Thickness初设为12。后期可以根据自己的喜好来调整颜色透明度和圆圈粗细。

图片 7

这时头部轮廓已经完成,接着是眼睛和嘴巴,还有脸上的红晕。使用圆形工具画出眼睛,不需描边,将其填充为纯黑色#000000。接下来是嘴巴,使用钢笔工具勾出线条,同样调整节点使其看起来合适。

2-调整为椭圆形

图片 8

图片 9

脸部红晕为两个椭圆,这里可以稍做的不规则一些。与头部的画法一样,使用圆形工具Oval,不需描边,填充颜色为#FF825B。然后将其压扁。双击进入钢笔编辑模式,调整四个节点的位置到合适。接着将头部,和五官组合在一起,并调整图层位置到你认为合适即可,最后使用旋转工具(Rotate)将头部适当倾斜。

第二步

图片 10

用钢笔工具将圆形调整为适合大白的椭圆头型。用鼠标左键双击圆圈边框,就会出现一条有三个点的线段,长按拖动就可以调整圆圈形状。

3-设置阴影

图片 11

第三步

在sketch右侧找到Inner Shadows,点击加号,添加圆形的内阴影,颜色为#D0D7DF,其他属性如上图右。其中,x和y代表阴影坐标,x为正,则阴影在圆圈的左侧。反之,则在右侧。

4-画眼睛嘴巴

图片 12

第四步

大白的头部轮廓完成,开始画眼睛嘴巴。还是用圆形工具画一个小圆,颜色和头部轮廓颜色一致,为#5A3817,复制黏贴成另一个眼睛。接下来是嘴巴,画一条直线,使用钢笔工具调整节点使之变成一条弧线。

5-画腮红

图片 13

第五步

大白最萌的腮红,还是画一个圆,用钢笔工具调整为椭圆,设置Borders为不勾选,设置Fills的颜色为#F9C9BE。画完一个腮红,复制黏贴另一个。移动腮红至最合适的位置。

6-勾勒身体线条

图片 14

第六步

将大白的头部轮廓旋转,设置Transform为-51°,为了使之看起来自然,我还使用了左右翻面工具(在Transform的右侧Flip),同时将内阴影Inner Shadows的x值从-15改为15。所以效果是大白头向右倾斜,且面部也向右张望。

大白的身体线条依旧是画一条直线,直线颜色#5A3817,用钢笔工具调整为合适的弧线。最后画两个大圆,重叠之,作为边框。

7-细细美化

图片 15

第七步

大白身体太空旷,所以添加一个小装饰品。还是画个圆形,调整为不规则的椭圆。画一条直线,调整为不规则的曲线。椭圆和曲线颜色为#5A3817,透明度和粗细适当调整。

加完小饰品还是觉得过于空旷,再填充个背景色,色号为#D8F0FC。用裁剪工具Slice裁剪并导出为图片格式保存。

PS:可以在Borders处设置线条头尾更加平滑,注意红线框内,设置前后,线条末端的对比。

图片 16

对比图

暖萌暖萌的大白送给你(●—●)

图片 17

暖萌暖萌的大白头像

————————————————

pmwiki,90后产品汪,曾经的北漂一族,现定居上海。坚持原创,欢迎交流~

本文由澳门新葡亰赌全部网址▎导航站发布于家居宠物,转载请注明出处:画原型做交互甚至是出视觉稿,大白很简单

关键词:

上一篇:没有了

下一篇:没有了

最火资讯