一个sketch临摹的总结

一个sketch临摹的总结
今天临摹了colorful switch这个作品,是一步一步按照教程来的,因为还是一些东西不熟悉,所有就直接照着做了。

这里是在简书中的教程地址:
color switch(上)
color switch(下)

后来发现可能站酷才是原译文的地方,所以贴出来:
zcool color switch(上)
zcool color switch(下)

Youtube上有人录的制作tutorail,点这里可以适当感受一下。

现在开始总结一下这个临摹。首先贴上对比。

左为原图,右为临摹

看到这个icon的时候,就开始揣摩它的用色,渐变还有阴影的使用。如何使用颜色的渐变得到这样明亮炫彩的感觉;如何利用阴影来渲染出立体和深度;如何让icon有质感有细节。其实我跟着做完教程上部分的时候,我就觉得这型出来了,可以完成了吧。事实上还有下部分,专注打磨细节。果然细节决定成败,有了这些细节之后,瞬间就biger了。

我们来一点一点的分析。

1.渐变

事实上在填充背景色的时候,用了三次填充。一次紫色,一次直线渐变overlay,一次径向渐变overlay。第一层是底色,第二层应该是提亮,第三层将左上的紫色带到亮紫色,右下的紫色带到深紫色,有了很完美的过渡。我想试试这种调试,看看还有没有其他可能。

这是我仿造做的一些背景。通过改变渐变方式,渐变颜色,填充颜色的透明度,渐变叠加次数,可以做出很多的效果。至于是否好看,是否合适,那就要看用在哪里。我做的这些不一定好看,也只是为了加深理解了。color03我用了高斯模糊,果然还是用在阴影的打造上比较合适,这里就不好看。color04降低了颜色填充的透明度,就整体要暗一些。color05多次叠加使用渐变,颜色层次分的更开。color06在渐变时候不单纯使用黑白透明渐变,加了红色等,然后让填充多一些透明,红色部分更亮更突出。这是对填充的理解。

顺便一提,在导入icon形状时候是从sketch自带模版里面拿的,只要解锁就可以粘贴过来,然后关掉模版,ok!另外,一个大家都推荐的插件,icon stamper。只要做一个尺寸最大的icon,它能瞬间生成其他各种尺寸的icon,很方便。

另外一处渐变的使用是在制作大圆环的漫反射效果的。这样分段式的渐变,确实有那种反光的感觉。

2. 打造立体效果

斜面浮雕效果,就加外部阴影了。一个是直接用shadows选项。另外就是自定义形状进行高斯模糊。这样的阴影一般都要加多层,才能有阴影的那种真实的感觉。比如第一次层y位移2px,第二层第三层逐次增大。模糊的数值调试一下感觉好就可以。
我觉得做icon整体阴影和圆形按钮阴影的方法很值得借鉴。特别时按钮的阴影,作者添加了两组。第一组通过shadow来添加,共三层来表现有层次感的阴影。另外一组阴影通过改变形状的范围,用叠加的混合模式,添加了蓝色的微妙又华丽的阴影。这样六层阴影把按钮烘托的更加立体自然。

增加深度,就要用到内阴影。先给整体的一个内阴影,xy都是0;然后再在y位移方向上叠加。更多改变还是要慢慢调整,这里先有个思路和概念。

另外一个重要的点就是及时命名和分组了。cmd+G是建组,com+R是重命名,之后直接用tab就是给下一组重命名,shift+tab是接着给上一组重命名。用起来很方便。当然,这里又有很多地方推荐的批量命名的插件Renameit,可以试一下。

这个教程的布尔运算就是切圆环,没什么好说的。主要还是填充渐变和阴影了,希望能活学活用。觉得拿到一个炫彩的icon的时候,在开始临摹之前想的不够多,应该再自己多分析一些再开始动手去画。


后面就是我今天看的一些tutorials的一些零碎的笔记了。

先总结一些教程里的plugin。这个教程是Youtobe上的,点这里观看。这套教程有22个,每个都很短,但是挺有用的。我已经看完了,下次再看看有什么可以总结的。

1.dynamic button

也是很多地方都推荐的。能够自动根据button里面文本的多少来modify尺寸,很方便。快捷键是cmd+j。

2.generate gif

可以很方便的把一些列的图形生成gif动画。对于一些简单的动态展示很有用处。

3.about artboard

这里有很多关于artboard的插件。

  • cover artboard:比如artboard里面有个矩形,这个插件可以很快速方便的将这个矩形填充覆盖在整个artboard上。快捷键control+f。
  • artboard zoom:将工作区放大或者缩小的插件。不要再用pan那么麻烦了。
  • artboatd arrange:可以管理和整理许多个artboard,将他们排列活着分行。
  • sketch artboard: 快速切换到下一个artboard。

4.Aeflowchart

这个插件能快速地构造流程图,能节省不少时间。


备注几个快捷键:

sketch的选色快捷键:cmd+c
sketch解锁快捷键:shift+cmd+l
mac回到桌面快捷键:F11
mac隐藏dock快捷键:cmd+alt+d

2015-04-24 14:36181