请选择 进入手机版 | 继续访问电脑版
记得收藏【国际动画教程网】,赶快注册吧!
注册

合作站点账号登陆

QQ登录

只需一步,快速开始

扫一扫,访问微社区

快捷导航
查看: 25752|回复: 0
收起左侧

[UI教程] sketch教程:绘制写实风格绿茶[含5P]

[复制链接]
发表于 3 天前 | 显示全部楼层 |阅读模式
        <ul id="list-content" class="dt-content editor-style list-paddingleft-2"style="list-style-type: none;">这个绿茶以前用Photoshop绘制过一次,最近转战sketch,也尝试用sketch去绘制一些写实风格的东西,这个是第一期,后面sketch钻石党陆续有来。
源文件可以在文章下方下载哦~
用sketch有一段时间了,这个软件的容易上手程度远超我想象,创作效率也非常高,PS能画的东西(UI相关),它几乎都可以,现在设计工作基本90%以上在sketch下完成。今天我试一下用sketch画一杯绿茶,这个作品之前我在PS上画过,也发表过在UI中国,今天试试用sketch画。

源文件是sketch3.2版本的,低版本无法打开。原创作品,仅供学习使用,请勿用于其他用途,版权归本人所有,转载请保留本链接信息。

这个是提前做好的一个文件,重新做耗时较多,所以都是用原来的文件还原步骤的,图层名什么的建议大家自己随意,能区分就可以了,我这里没必要的话就不提命名了。还有就是尺寸问题,大家可以自己把握,不一定要按照教程的,看赶脚吧!下面开始吧!


第一部分:绘制碟子
1、首先建立新的空白sketch文档,拉一个art board(艺术板),尺寸随意,这个软件是矢量软件,大小不会有什么影响,唯一要注意的就是如果放缩的话设置图层样式的时候需要改参数。按R键,画一个和画布一样大的矩形,取消borders(描边),填充3层(也可以自定义),分别为:
第一层,pattern(图案填充),选择第三个白色底纹,模式normal(正常);

第二层,flat color(单色填充),颜色为897A4C,叠加模式overlay(叠加);
第三层,还是单色填充黑色(000000),模式改为soft light (柔光)。
锁定图层,图片看起来有明显分隔线,是由于放缩的原因,实际导出后不会看到。



2、首先我们需要确定光源方向,这里我定的视角是顶部正视,光源是从画面上方打下来的,所以投影应该在光源下方。现在我们需要画一个茶碟,在画布中画一个正圆(快捷键O,按住SHIFT画正圆),尺寸584x584。填充渐变色:FFFFFF 到F4F3F1 ;添加shadows(投影),参数为:0,20,30,0 ,颜色纯黑,30%透明度;添加inner shadows(内阴影),参数为:0,1,16,0,颜色纯白,50%透明度 。



3、选中形状,command+D复制一个形状,尺寸改为572x572,垂直翻转,对齐,取消小圆的投影效果,保留inner shadows ,勾选gaussian blur(高斯模糊),数值改为4,我们会得到下面这样的,碟子的高光和凹凸感初步得到呈现,接下来还需要进一步刻画。



4、再次复制572px的圆,大小改为380px,使用镜像工具垂直翻转,对齐,高斯模糊参数改为2px,这次inner shadows 也取消掉,这样我们就得到了一个有点样的碟子了。现在我们再加上一个放光效果,我们复制一个572px的圆,移动到最顶层。接下来按V键(钢笔),画一个形状,利用布尔运算和圆一起合并剪出一个月牙形的反光区域(可以是subtract减去或者是intersect相交),形状参考图片。然后我们需要删除这个图层所有效果,填充一个渐变色,参数如下:FFFFFF 100%到 FFFFFF 0%,方向范围自己调整一下,大概是右上到左下。这样,我们的碟子就绘制完成了,可以把碟子的图层都编组(CMD+G)并且锁定(CMD+SHIFT+L),以免影响后续的操作。

PS:这里要说的是,很多反光率高的东西上面的反光并非一定是光源直接影响,可能是反光板或者其他东西投射到物体表面的效果,例如手机我们经常能看到漆黑的屏幕上有一道圆弧形的反光,这个实际是反光板的投射效果。这里我没有实际的照片参考,所以就自己臆想一下,反正就是想要衬托一下质感的么。



第二部分:绘制茶杯和茶水
现在我们开始第二部分,茶杯和茶水的绘制,这里的方法还是和第一部分的碟子很相似的,下面开始。
1、在碟子上方画一个318x318的圆,填充渐变色:FFFFFF 到F4F3F1 ;添加shadows(投影),参数为:0,10,20,0,颜色纯黑,20%透明度;添加inner shadows(内阴影),参数为:0,0,6,0,颜色纯黑,20%透明度。



<p style="margin-top: 0px; margin-bottom: 15px; padding: 0px; border: 0px; outline: 0px; word-wrap: break-word;"><span style="font-family: 微软雅黑, &#39;Microsoft YaHei&#39;;">2、画一个296x296的圆,填充渐变色:569500 35%到E5FFAE 20%,勾选 gaussian blur (高斯模糊),模糊程度为2px,整体透明度改为60%(选中图层,按数字键6即可)对齐。这个是茶水的散射效果(以前学3D的时候好像就这么叫的,不过都3D都还给老师了)。效果如下。               

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?注册

x



上一篇:“筷子兄弟”交互与视觉
下一篇:交互设计工具篇
一起共享资源,共建精品资源平台。记得一定要收藏我们网站。www.gjdhjc.com ||||| 还有我们的网址导航:www.58q8.com【链接失效可以留言看到第一时间补帖,如果懒的回复我也是没办法了】
快速回复 返回顶部 返回列表