编辑:可可西瓜    发布日期:2020-10-28 00:00:00

2015年3月,在席卷北美和日韩市场之后,《超能陆战队》在中国大陆火爆登场,其中体型胖胖的充气机器人大白因其呆萌的外表和善良的本质倍受青睐。现在,打开sketch,跟着静电学习画一个萌萌哒大白~

021205556d69520000016b62af75201

hi,静电的sketch教程好久没和大家见面了,这段时间发生了好多事情,不过印象最深刻的就数电影《超能陆战队》了,片中的Baymax让人印象尤为深刻。大白胖子在面前卖萌是不是很治愈呢? 哦对,它不是胖,只是气很足哦。那么先来个开场吧!

你好,我叫静电,教你学Sketch的哦●—●
那么从1到10,你对大白的喜欢指数有多少呢?●—●
什么?100?好吧。萌化了有木有? 那么我们用sketch来次挑战,画个白胖子吧!哦不对,只是气很足(-_-|||)如果你还是sketch初学者,建议去静电的主页看看Sketch的基础教程先,不过大白怎么看起来都很容易画对吧?来来来,跟静电一起画一个,通过这个练习,我们可以对sketch的钢笔特性有更深入的了解,首先看看静电画好的成品。

0211c6556d69550000016b62ceb53e

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

02d32c556d69570000016b6219aac8

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

02c270556d694e0000016b624cdf1e

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

027732556d69530000016b62abfa50

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

02435f556d69550000016b62057e81

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

026982556d69500000016b62f58bf1

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

0248e3556d694f0000016b622cbefe

三.绘制身体
同样使用圆形工具绘制身体。同样,身体也不是规则的椭圆形,首先绘制圆形,设定描边颜色为#534B4A,宽度为13,填充颜色#FDFAEB。接着双击图形进入钢笔编辑模式,调整节点与杠杆,保证身体上部在画布中正确呈现。

025443556d69500000016b623edfcf

四.绘制胳膊及其手指
胳膊及手指是考验我们使用钢笔工具熟练程度的时候了。在这里我们推荐初学者将手指线条分段绘制,当然如果你对钢笔工具足够熟练,也可以将线条一次绘制完成。
四个手指及手臂的线条进行分解,得到下图的元素。

02da86556d69560000016b621c0397

较复杂的钢笔操作,需要对sketch的钢笔工具做更深入的了解。当我们点击键盘上的快捷键V或者从工具栏选择钢笔工具时,即可进入路径编辑模式,这时右侧属性栏会发生变化,请看下图。
02a7cb556d695a0000016b62896b21

这四种方式代表节点的杠杆的四种使用形式,当使用钢笔工具点击曲线上的某个锚点时,调节杠杆即可出现。通过选择合适的杠杆调节方式,即可绘制出不同的曲线。
Straight:不使用贝塞尔曲线。
Mirrored:使用贝塞尔曲线的镜像模式,也就是调节时两端的把手始终在一条直线上同时运动,并且两端把手始终与锚点的距离相同。
Disconnected:与mirrored相反,选中它时,只有一个把手跟随鼠标移动,另一个把手不动。

Asymmetric:不对称。比Mirror少了一个特性,也就是说调节一个把手时,两端的把手会同时运动,但他们距离锚点的距离可以不相同。

026736556d69560000016b62d122a6

绘制完成,将所有这些元素组合成一个完整的手臂。但好像还有一点问题,由于线条是分散的,我们无法填充颜色,这时我们需要将他组合为一条路径。选中你所绘制的所有手臂线条,接着选择菜单Layer>Paths>Join即可完成组合。但貌似还是有点问题,我们发现线条结合处不够平滑,选中线条,打开Boarder选项,将Ends及Joins工具设置为如下图所示即可。请注意观察线条末端,大家应该可以看出变化来了。

020676556d69510000016b626c1cde

五.组合所有元素
将所有元素组合并进行大小,角度的调节,可爱的大白就绘制完成了。接着我们可以换上自己喜欢的背景及文字,快拿出来炫耀吧~很有成就感是不是,来个棒棒糖吧!赞!

0290a3556d69570000016b62f3e252

六.源文件下载

附件中有画好的Sketch源文件,点击下方的“下载”按钮即可下载源文件研究。

029886556d695b0000016b62f87c86

静电的sketch教程系列:
静电的设计教室-初识与改变-APP设计利器sketch教程(01)
静电的设计教室:熟悉你的新朋友-APP设计利器Sketch教程(02)
静电的设计教室:APP设计利器Sketch教程(03)-让插件助你一臂之力
静电的xcode教程系列:
搞定一像素不求人-为设计师准备的Xcode教程(01)
熟悉模板与控件-为设计师准备的Xcode教程(02)
零代码!轻松搞定交互动画-为设计师准备的Xcode教程(3)

028a12556d694c0000016b62b19ff0

 
Sketch Mac版 SketchMac版是Mac上一个创新和新的眼光看待矢量绘图软件。SketchMac版以简约的设计是基于无限的规模和层次的绘图空间,免费调色板,面板,菜单,窗口和控件。虽然使用简单,它提供了功能强大的矢量绘图和文字工具;您可以免费下载。 简体 · 53.00 MBM ·

热点资讯

更多
英特尔正与台积电接洽,虑将部分芯片生产外包给台积电 外媒报道称,英特尔正在与全球最大的芯片制造商台积电(TSMC)接洽,准备将自己的芯片制造业务外包出去。
苹果iPhone 12国行上季度热卖:拿下20%份额 销量达1800万 根据外媒报道,上季度中国大陆地区iPhone 12销量达到1800万,苹果拿下20%智能手机市场份额。
高通斥资约90亿收购芯片公司NUVIA 前苹果芯片架构大神加盟 据外媒报道,高通公司1月13日以14亿美元收购芯片初创公司Nuvia。
大公司晨读:B站计划3月港股上市;苹果斥资1亿美元力促种族平等 B站确定已在港提交上市申请;英特尔CEO 斯旺将于2月15日辞职。

相关教程

更多
Sketch一键导入AE工具–AEUX 发现了一款非常好用的插件,它的前身是Sketch2AE,花了一点时间研究了它的使用方法,好东西当然要大家一起分享!目前没找到汉化版,不过功能也不是特别复杂,分享出来是希望能提高大家平时在设计中的效率,如果有说的不对的地方还请帮我指正一下,谢谢~~   先简单看一下基本功能   一、基本功能 (一)一键复制所有图层到AE 1.装好插件后,打开sketch,选择 插件>AEUX,打开插件面板,再启
超全面的sketch基础知识汇总,带你入门 刚接触sketch这款软件的时候,针对最基础的知识点做了非常全面的笔记,方便日后查看,今天拿出来分享给大家,希望能够给刚接触这款软件的设计师朋友些许的帮助! 这是我在刚接触sketch的时候做的超全面的笔记,今天分享大家。(公众号“UI充能站”出品,搜索i-lifeway进站)   目录 · Sketch中画布的概念 · sketch中的快捷键 · view基础操作 · 形状之间的布尔运算 · 设置页面元素放大缩小
【神器推荐】教你Sketch一键转成PSD! 现在大部分的UI设计师们都是在用sketch设计页面,它的轻量、插件、组件是能够极大提升我们的设计效率。但是,有一个致命问题就是,sketch和adobe爸爸家的软件不兼容,因此,不同软件的文件如何转换就是问题了……   神器网址 这里推荐一个神奇的网站:https://www.photopea.com/ 这个网站可以帮助我们把sketch转PSD。 之前用过的朋友会发现:当我们直接使用它转换时,中文字体会直接变成口口口(
sketch秘技:如何利用symbol一秒更换配色 首先看个见者伤心闻者落泪的例子:假设这个是你们公司的产品,从0到1,历经千辛万苦!你终于把所有页面都做完了!   你很高兴:终于做完了~算一算调休假年假,休息一波走起! 就在这时……,产品/老板跟你说:我们产品不用这个红色了,太俗气!换成蓝色! 你数了数自己的83张界面……,你痛苦的摸摸自己那不再浓密的头发……,你开始一张张的改啊改啊改啊改啊...... 而隔壁公司的小明说:老板,给我1秒种,你看是不是

相关软件

更多
  • Birdfont Mac版 英文. 29.00 MBM · BirdfontMac版是Macos平台上的一款可以制作自己专有字体的软件,这款软件可以制作出自己独有风格的字体,这是一款免费的软件,你可以在这款软件上发挥出自 ...
  • Plant Mac版 英文. 22.00 MBM · PlantMac版是Mac电脑上的一款适用于Sketch的简单而强大的版本控制插件。PlantMac版可以帮助用户更简单、更智能地管理Sketch文件,它支持保 ...
  • Crash Course Mac版 英文. 3.00 MBM · CrashCourseMac版是Mac电脑上的一款AdobePhotoshop视频教学软件。CrashCourseMac版内含超过440个AdobePhotos ...
  • Screenshot Designer Mac版 英文. 17.00 MBM · ScreenshotDesignerMac版是Mac电脑上的一款设计软件。ScreenshotDesignerMac版可以为应用开发者们创建引人入胜的AppSt ...