产品设计

    今日:1| 主题:22994
收藏本版 (1)
软件产品、PC、移动、网站、平台的开发、策划等内容。

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

[复制链接]
天使的微笑 发表于 2016-10-2 22:16:24
709 12
使用sketch绘制一个简单的药瓶,一起来学习吧。
  translate from Abhijeet  Wankhade
   

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

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

  sketch教程:扁平化风格药瓶的绘制
  接下来我会带你绘制的全过程,我希望你能从中收获一些使用技巧和心得,以帮助你更好的使用sketch。
  1.创建一个画板
  因为我创作这个作品是要放在dribbble上的,所以选择创建画板的尺寸也是要适应dribbble的上传要求(800x600),所以我通常使用定制画板(custom artboard)。你也可以添加你所需要的定制画板。
  通过按 “A” 或者在菜单栏里找到 “插入(Insert)>画板”,右侧栏就会显示出一个有很多不同尺寸画板的列表,在列表最低侧,你会发现一个添加的按钮:
   

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

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

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

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

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

  创建定制画板
  2.在画板上添加背景
  你可以给你的画板添加颜色,如果不添加颜色的话,在导出为png格式的时候,画布就会默认为透明色。
  添加颜色的方法有以下两种:
  
       
  •    在右侧边控制板处改变画板的颜色,但是这种方法只限定为单色,这意味着,你不能使用渐变色。   
   

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

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

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

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

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

  在上面的图示中,我添加了一个矩形图形用作背景(#0786FF),然后使用Cmd+Shift+L的快捷键将其锁定。
  3.开始绘制基本的图形
  观察下面的图片并绘制出相应的图形,你不必一分不差地临摹出来,只需要大致绘制并保证比例的协调性。
   

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

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

  所以你需要一个矩形来作为胶囊,一个矩形是容器的盖,还有容器本身和容器的标签,这个时候可以先不必考虑它们的位置和分布。
  选择作为胶囊的矩形,滑动增加其半径,使得它的形状类似胶囊的形状,我通常会将半径的数值增加到100。
   

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

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

  同样的,将容器的盖子的矩形半径增至4(这是我个人的选择,你也可以自行确定你的参数,只要别让它看起来像个胶囊就行。)
  然后,给作为容器的矩形增加一些圆角,由于容器的盖子位于容器之上,所以容器的上面两个角不需要增加半径,但是我想给容器底部的两个角增加10的半径,由此我在滑动条右侧的输入框里输入了 “0/0/10/10”(左上/右上/右下/左下),这样的方式可能看上去很难理解,但是如果你是曾经有过CSS的撰写经验的话,就会很容易理解。
  接下来修改标签,标签靠近容器的右边界,只露出部分内容,所以右侧的上下两个角的半径均为0,我想让左侧的上下角的半径为4,所以我在滑动条右侧的输入框里输入了 “4/0/0/4”(左上/右上/右下/左下)
  来看看修改后的这些图形吧:
   

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

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

  tips:同样,你可以通过双击图形来进入编辑模式,通过改变一个或者多个角的形状来达成你的目的。
  完成之后,我们来给它们上个色吧。(所有的图形均为单色)
   

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

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

   

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

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

  4.组装图形
  将标签的图形移动到容器图形的上方,这样就能让两个图形右对齐,如果你缓慢的拖动标签图形,它会自动对齐到容器的右边界。
  还有另外一种方法也可以实现哦,同时选中两个图形,然后按右对齐键(right align),来试试看:
   

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

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

  最后将其组装如下:
   

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

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

  5.增添更多细节
  胶囊:

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

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

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

  标签:

  我们想要标签呈现出有文字和图案的样式,不同于使用线条(V),这里使用我常用的矩形来模拟这个效果。
  创建一个宽60,高2的矩形,添加灰色(#E4E9F1),复制4次
  好,现在创建两个或者更多矩形(60x4),然后添加颜色(#FF9AD5)
  将上述的图形位置排布如下:
   

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

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

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

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

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

  实现的效果如下:
   

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

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

  6. 添加高光和阴影
  这个部分非常重要,首先要确定光源的位置,在这个例子中,光源的位置如下所示:
   

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

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

  从这里开始有可能会变得有一些难度,但是多次练习,你就可以掌握了。
  胶囊的高光&阴影:

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

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

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

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

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

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

  创建一个新的矩形(宽50x高4),(同样为白色,译者注)然后放置在胶囊的主体形状的居中偏上位置,同样使用 “柔光(Soft Light)”的混合模式。
  现在来绘制阴影吧。创建两个胶囊主体的复制图形,选择三个胶囊主体最上面的一个图形,将其向右挪动6px(x方向增加6px),向上挪动6px(y方向减少6px)。选择这个挪动的胶囊(再次确认它是位于三个胶囊最上面的一个)和一个位于它下面的胶囊图形,然后点击 “相减(Subtract)” 按钮,改变其颜色(#D9D9D9),设置混合模式为 ‘Multiply’。
  将会如下图所示:
   

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

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

   

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

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

  瓶身的高光&阴影

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

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

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

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

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

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

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

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

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

  瓶盖的高光&阴影

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

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

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

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

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

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

  7. 最终的润色

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

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

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

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

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

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

  终于,我们完成啦!
  转载须注明来源,原作者以及译者。
钦洲论坛 发表于 2016-10-3 00:46:39
天使的微笑的帖必顶!
回复 支持 反对

使用道具 举报

空心印 发表于 2016-11-1 10:28:54
千金散尽还复来,莫把金樽空对月!
回复 支持 反对

使用道具 举报

丫头1987 发表于 2016-11-4 10:45:53
丫头1987的回帖高端大气上档次
回复 支持 反对

使用道具 举报

1152388900 发表于 2016-11-7 18:09:47
我只想安静地做个美男子
回复 支持 反对

使用道具 举报

林艳 发表于 2016-11-10 12:28:53
确实不错,顶先
回复 支持 反对

使用道具 举报

Max.极限兔子 发表于 2016-11-10 23:37:50
佩服佩服!
回复 支持 反对

使用道具 举报

尔代石 发表于 2016-11-13 11:34:37
不要和地球人一般见识.
回复 支持 反对

使用道具 举报

陈天桥 发表于 2016-11-16 03:02:11
发贴技术哪家强?天使的微笑
回复 支持 反对

使用道具 举报

弘文 发表于 2016-11-17 01:14:43
天使的微笑去哪儿
回复 支持 反对

使用道具 举报

我要投稿

回页顶回复上一篇下一篇回列表
手机版/c.CoLaBug.com ( 粤ICP备05003221号 | 粤公网安备 44010402000842号 )

© 2001-2017 Comsenz Inc.

返回顶部 返回列表