恭喜你成为UI中国推荐设计师 (详情)

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

sketch钻石党原创教程:绘制写实风格的一杯绿茶

原创文章 分类: 教程 版权: 原作者: 原作者 举报
36563 185 153 7
2014-12-07
0.0
首页推荐

这个绿茶以前用Photoshop绘制过一次,最近转战sketch,也尝试用sketch去绘制一些写实风格的东西,这个是第一期,后面sketch钻石党陆续有来。

用sketch有一段时间了,这个软件的容易上手程度远超我想象,创作效率也非常高,PS能画的东西(UI相关),它几乎都可以,现在设计工作基本90%以上在sketch下完成。今天我试一下用sketch画一杯绿茶,这个作品之前我在PS上画过,也发表过在UI中国,今天试试用sketch画。PS版本地址:http://www.ui.cn/project.php?id=13207

源文件是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%透明度。


2、画一个296x296的圆,填充渐变色:569500 35%到E5FFAE 20%,勾选 gaussian blur (高斯模糊),模糊程度为2px,整体透明度改为60%(选中图层,按数字键6即可)对齐。这个是茶水的散射效果(以前学3D的时候好像就这么叫的,不过都3D都还给老师了)。效果如下。


3、画一个220x220的圆,填充渐变色:FFFFFF  0%到F2F2F2  100%;添加inner shadows (内阴影),参数:0,-1,1,0;勾选gaussian blur(高斯模糊),模糊程度1px,这个是杯底,得到下图的效果。


4、复制刚才第2步做的茶水散射图层,移动到最顶层,并且将尺寸改为260x260;填充渐变色为:B0CE58  100% 到 C3F25E  40%。这样,茶水部分也绘制完毕,下过如下。将上面这几个图层成组,命名为杯子,并且锁定。


第三部分:茶叶

好了,进入最后一部分茶叶的绘制,茶叶看起来比较难绘制,但是实际上茶叶是很容易绘制的,只要掌握了方法,就能轻松绘制出栩栩如生的茶叶,这里的茶叶我并未深入刻画纹理(例如叶子的叶脉),如果深入刻画也是可以的,但是考虑到这里茶叶并不需要画得非常精细,所以我们画出大概的样子就行了,有兴趣的回头大家可以自己尝试去进一步刻画。


1、在杯子上方,使用钢笔工具,画出一张合适大小的叶子形状。填充渐变色,CEF042  100%  到  4D941B  100%,方向参考图中。增加inner shadows,参数为:0,0,4,0,颜色  253504 40%;再增加一层inner shadows ,参数为:0,1,2,0,颜色:D3FF95 100%。这样我们得到了一个叶子的雏形。然后我们继续下一步。这里我们可以选中这个图层,点右键,选择 copy style,复制这个图层的样式,后续我们继续画茶叶可以直接选中画好的形状,点右键选择paste style即可粘贴图层样式。


2、CMD+D原位复制刚才的叶子,按return键,进入路径编辑状态,这时候光标会自动转为钢笔工具,用钢笔工具选中叶子的一边的一个节点,往叶子中间移动,最后得到半张叶子的形状,叠在原来的完整叶子上面,就出来了一个比较精致的叶子了。


3、继续用相同的方法绘制茶叶的叶芽和叶瓣,最后得到如下的单个茶叶效果。最后把每个茶叶成组,对组添加shadows(投影),参数为:0,15,8,0,颜色:2C6206  15%。




最终完成效果图:

顺便改了个红茶的


为了方便大家交流,特意建了个群,叫做SKETCH钻石党,欢迎各路英雄好汉加入!sketch是个好软件,希望大家支持正版!

推荐人:

UI中国

Sketch钻石党

【Q群:105403797 】SketchKit (http://sketchkit.cn)

2721粉丝/24关注

人气明星助人为乐首页达人小有见解话唠
老生常谈:关于合格 UI 设计师需要知道的那些事儿音乐播放器 UI 设计

Sketch钻石党

Sketch钻石党

【Q群:105403797 】SketchKit (http://sketchkit.cn)

人气明星助人为乐首页达人小有见解话唠

你确定要举报sketch钻石党原创教程:绘制写实风格的一杯绿茶

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

0/200

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

点击上传附件

对谁可见:

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

您确认要推荐?

该作品发布时间:2014年12月07日

评分

完整度

启发性

勤奋性

排版布局

推荐心得

建议20-200字以内

0/200

扫描二维码
去手机端查看海报

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票

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

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

登录

账号或密码错误

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

登录
//

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2020 UI.CN