恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
【Medium】sketch教程,来绘制一个简单有趣的药瓶
0.0°
2016-10-08 自译外文 教程 原作者: Abhijeet Wankhade 举报 3571 19 22 1

使用sketch绘制一个简单的药瓶,一起来学习吧。

translate from Abhijeet  Wankhade

Image title


 

sketch教程:扁平化风格药瓶的绘制


接下来我会带你绘制的全过程,我希望你能从中收获一些使用技巧和心得,以帮助你更好的使用sketch。




1.创建一个画板


因为我创作这个作品是要放在dribbble上的,所以选择创建画板的尺寸也是要适应dribbble的上传要求(800x600),所以我通常使用定制画板(custom artboard)。你也可以添加你所需要的定制画板。


通过按 “A” 或者在菜单栏里找到 “插入(Insert)>画板”,右侧栏就会显示出一个有很多不同尺寸画板的列表,在列表最低侧,你会发现一个添加的按钮:


Image title

 

如图所示,你可以看见我已经为Dribbble创建了一个尺寸为800x600px的画板,当你点击添加按钮时,你就会看到一个对话框,你可以在对话框里建立一个你需要的定制尺寸的画板,并重新命名。


Image title

创建定制画板




2.在画板上添加背景


你可以给你的画板添加颜色,如果不添加颜色的话,在导出为png格式的时候,画布就会默认为透明色。

添加颜色的方法有以下两种:

  •    在右侧边控制板处改变画板的颜色,但是这种方法只限定为单色,这意味着,你不能使用渐变色。 

Image title

 添加背景色

  •    添加一个图形作为背景色,这样你既可以使用单色,也可以使用渐变色 

Image title

 

在上面的图示中,我添加了一个矩形图形用作背景(#0786FF),然后使用Cmd+Shift+L的快捷键将其锁定。




3.开始绘制基本的图形


观察下面的图片并绘制出相应的图形,你不必一分不差地临摹出来,只需要大致绘制并保证比例的协调性。 


Image title


所以你需要一个矩形来作为胶囊,一个矩形是容器的盖,还有容器本身和容器的标签,这个时候可以先不必考虑它们的位置和分布。


选择作为胶囊的矩形,滑动增加其半径,使得它的形状类似胶囊的形状,我通常会将半径的数值增加到100。


Image title

 

同样的,将容器的盖子的矩形半径增至4(这是我个人的选择,你也可以自行确定你的参数,只要别让它看起来像个胶囊就行。)


然后,给作为容器的矩形增加一些圆角,由于容器的盖子位于容器之上,所以容器的上面两个角不需要增加半径,但是我想给容器底部的两个角增加10的半径,由此我在滑动条右侧的输入框里输入了 “0/0/10/10”(左上/右上/右下/左下),这样的方式可能看上去很难理解,但是如果你是曾经有过CSS的撰写经验的话,就会很容易理解。


接下来修改标签,标签靠近容器的右边界,只露出部分内容,所以右侧的上下两个角的半径均为0,我想让左侧的上下角的半径为4,所以我在滑动条右侧的输入框里输入了 “4/0/0/4”(左上/右上/右下/左下)


来看看修改后的这些图形吧:


Image title

 

tips:同样,你可以通过双击图形来进入编辑模式,通过改变一个或者多个角的形状来达成你的目的。

完成之后,我们来给它们上个色吧。(所有的图形均为单色)  


Image title


Image title




4.组装图形


将标签的图形移动到容器图形的上方,这样就能让两个图形右对齐,如果你缓慢的拖动标签图形,它会自动对齐到容器的右边界。

还有另外一种方法也可以实现哦,同时选中两个图形,然后按右对齐键(right align),来试试看:

 

Image title


最后将其组装如下: 


Image title




5.增添更多细节


胶囊:


复制胶囊并将其宽度缩小为原来的一半,高度不变,和原来的胶囊图形右对齐,并改变其颜色(#45DC50),将其左边的两个角的半径改为0,如图示:


Image title


标签:


我们想要标签呈现出有文字和图案的样式,不同于使用线条(V),这里使用我常用的矩形来模拟这个效果。


创建一个宽60,高2的矩形,添加灰色(#E4E9F1),复制4次


好,现在创建两个或者更多矩形(60x4),然后添加颜色(#FF9AD5)


将上述的图形位置排布如下:


Image title


另外,将第三条灰色矩形的宽度减少20。 


tips:为了实现从右侧减少20的宽度,你可以在宽度的输入框里面直接输入-20L,这样就可以从右侧减少20的宽度,当然要是想要从左侧减少20的宽度,你就可以直接输入-20R,如果你想要从底部减少20的高度,就可以在高度栏里输入-20T(top),从上面减少,就输入-20B(bottom)。


Image title


实现的效果如下:


Image title




6. 添加高光和阴影


这个部分非常重要,首先要确定光源的位置,在这个例子中,光源的位置如下所示:


Image title


从这里开始有可能会变得有一些难度,但是多次练习,你就可以掌握了。


胶囊的高光&阴影:


创建一个10x10的圆,将其放置在胶囊的右上部位,然后复制胶囊的绿色部分(Cmd+D)。同时选中复制的绿色部分和你刚刚创建的圆,点击上方工具栏的 “相交(Intersection)” 选项,然后将其颜色改成白色,如下所示:


Image title


现在选中相交的部分,然后在右边侧栏中将混合模式(Blending)由 “普通(Normal)” 转变为 “柔光(Soft Light)”

 Image title


创建一个新的矩形(宽50x高4),(同样为白色,译者注)然后放置在胶囊的主体形状的居中偏上位置,同样使用 “柔光(Soft Light)”的混合模式。


现在来绘制阴影吧。创建两个胶囊主体的复制图形,选择三个胶囊主体最上面的一个图形,将其向右挪动6px(x方向增加6px),向上挪动6px(y方向减少6px)。选择这个挪动的胶囊(再次确认它是位于三个胶囊最上面的一个)和一个位于它下面的胶囊图形,然后点击 “相减(Subtract)” 按钮,改变其颜色(#D9D9D9),设置混合模式为 ‘Multiply’。


将会如下图所示:


Image title


Image title


瓶身的高光&阴影


重复刚刚给胶囊添加高光和阴影的步骤,现在我们用同样的原理来给瓶身添加光影的效果,这里我将最上层的明亮的部分向右挪动12px(x方向增加12px),向上挪动6px(y方向减少6px),这次我们不改变混合模式的设置,而是将其设置为更深的黄色(#F5B056),就会看起来像这样:


Image title


现在来加点高光吧,创建一个宽8px高180px的矩形,设置为亮黄色(#FEF792),然后创建另一个相同颜色的矩形(6x180),将它们放置在瓶身图层的上方,阴影的下方,看起来就会像这样:


Image title


创建另一个矩形(#F5B056),宽120px(与瓶身宽度相同),高12px,放置在瓶盖的正下方并紧贴,以模拟瓶盖落在瓶身上的阴影。


Image title


瓶盖的高光&阴影


使用刚刚给胶囊添加阴影的方法,来给瓶盖添加阴影,即,使用两个图形进行相减(Subtracte),然后改变其混合模式。你可以直接复制胶囊阴影的样式(Alt+Cmd+C),然后选中瓶身的阴影图层,按Alt+Cmd+V来应用相同的样式。这里我发现阴影的颜色过于强烈,因此我将其透明度调整到70%。以下将是我们设置好之后可以看到的内容:


Image title


现在创建一个宽12px,高24px的矩形,复制胶囊阴影的样式,并粘贴到刚刚创建的矩形上,然后再复制这个矩形,并将颜色设置为白色,混合模式也改为 “普通(Normal)” ,然后如下图进行放置:


Image title




7. 最终的润色


最后只剩下 “Rx” 标签了,使用任意你喜欢的sans serif字体来写出Rx,将其放置在最上方粉色矩形的中间位置,复制一个粉色矩形,然后自定义缩小两个矩形的宽度,使之能容下文本,就像图中那样:


Image title


而瓶身落在地面上的阴影,则需要创建一个180px宽,12px高的圆(Oval)。将圆放在所有图形的下方,背景色的上方,然后将阴影的颜色设置为深蓝色(#1F76C8),并将其放置在偏左侧,如图示:Image title



终于,我们完成啦!






转载须注明来源,原作者以及译者。
更新:2016-10-08

收藏

19人已收藏

Annabell

UI设计师 求职中

  • 11

    作品

  • 19

    粉丝

  • 1

    关注

  • 【LOGO设计】蜂鸟 设计过程分享
  • 【coffee】矢量插画 咖啡宣传画册 可爱
  • 【DO.It客户端】一个有关于个人任务纪录的APP
  • 【重设计】Amazon APP端重设计

    猜你喜欢

      2016-10-08 自译外文 教程 原作者: Abhijeet Wankhade 举报 3571 19 22 1

      【Medium】sketch教程,来绘制一个简单有趣的药瓶

      0.0°

      你确定要举报【Medium】sketch教程,来绘制一个简单有趣的药瓶

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2016年10月02日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      22
      19
      1

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录