PS和AI画炫酷拟物手表UI教程

UI / UI设计教程 / UI图标教程 /      

uimaker
UI设计师 / 江苏 南京

来源:uicn   作者:UEgood

关键词

雪姐姐教你用PS和AI画一只炫酷概念表,其中涉及到材质表现,贴纹理等技术~··中级教程,最佳绘制时间在半小时~1小时之间。学UI就到UEgood,好、省、快!


Image title

(本教程附有教学视频,视频目前正在审核,看图文没看懂的亲可以点一下收藏,过几天再来看视频)

Image title


先上实物,这是一款名字叫Mercury Watch的手表,大家可以在亚马逊上购买到它


Image title

1、把这个表的照片拖进AI中,使用椭圆工具,按shift拖出一个正圆绿色的是表盘结构线,紫色和蓝色的线为时针和分针,紫蓝线要居中于图片的时针分针的环型结构。

Image title

2、在AI里,如果希望画同心圆,可以使用对象-路径-偏移路径,然后输入数值,或用黑色小箭头拖动缩放角点到合适的位置上。圆形拉十字参考线。

Image title

3、用圆角矩形工具画顶部的一个刻度,然后按快捷键"R",然后,同时按住ALT键,再鼠标左击十字参考线中心,会跳出旋转面板,填30度,点复制,然后CTRL+D复制12个刻度。

Image title

4、接下来用钢笔工具画出表带,如果要对称,那你可以先画1/4,再复制,然后再把4段用对象-对称复制,连接起来就变成对称的了。

Image title


5、把蓝色时针和红色分针的线的宽度加宽到26和60像素,然后ctrl+C,ctrl+F原地复制3对。在最顶上的那段上,用钢笔在圆环上面点2个锚点,然后用小白箭头快捷键A选择其它不需要的锚点,删除。

Image title

6、选中时针的小环和分针的大环,然后把这2个图形对象-扩展,填充的勾去掉,点确定。

Image title

7、接着,我们把另外几个被删短的线条的头改成圆的,窗口-外观面板-点橙色描边-端点选圆角的。选完后,重复第六步,把他们2条也从线扩展成面。

Image title

8、接下来,PS里开640x640像素的画布,72分辨率,把所有的路径分别统统从AI里复制黏贴到PS中,记得黏贴的时候选4个里面的最后一个“形状图层”。填个基础色区分下。

Image title

9、接下来给表盘们上色,基本就是用渐变叠加,角度渐变按照颜色分别给表盘的6个结构圆分别上色。然后复制表盘去掉图层样式,改成全灰色,再滤镜-添加杂色,然后杂色图层模式改成正片叠底,透明度改低~··

Image title

10、表盘渐变参考如上,选角度渐变,点击渐变那个黑白灰渐变条子进去可以改颜色。你如果不会调渐变,要么看雪姐姐录的这个教程的视频,百度里搜UEgood的可以找到这个视频。

Image title

11、我们把刻度层选中,给一个深灰色颜色叠加,再加一个斜面浮雕,时针和分针的环给个角度渐变,颜色如图。

Image title

12、刻度的斜面浮雕参数如图,反正自己挑着觉得好看就行,记得去掉使用全局光的勾选。

Image title


13、再接下来给那时针和分针的半个圈先改成粉红色,加一层图层蒙版,图层面板底部第3个一个方里面有个圆的图标就是了。然后点缩略图后面那个图层蒙版的缩略图,然后用黑色笔刷一顿狂P一顿透明度,好了,渐变优雅的融合在一起了。

Image title


14、接下来,我们给表壳层上方新建一个图层,右键-剪贴图层,然后用笔刷挑大一些,刷一个白色的高光,底部也稍微刷一笔高光。

Image title

15、接下来把表的纹理贴在表带上方,右键-剪切图层

Image title


16、继续选中纹理层,按CTRL+T,然后点击右上角那边勾号前的网格图标,然后调节那9宫网格的定点,使得纹理贴合表带造型。

Image title


17、接下来在表带的纹理之上,新建一个图层,然后右键-剪切图层,然后用黑色的笔刷,按光影立体感,刷一下,如果觉得刷得太硬,可以滤镜-高斯模糊一下,现在已经全部画完了,大家可以举一反三多画几个颜色~··或者用AE做一下表盘动画。


如果以上步骤看不懂,可以等我的视频教程,或者下载本案例的源文件研究下~··本文右下角下载。


再发给大家一个白色版的。其实这个表还有其他配色的,大家可以自己去找或者创造!学UI就到UEgood,好省快!第七期全日UI必修班和第三期双休UI精修班开始接受报名,有需要集中进修的,请加微信:1003003457 QQ:1106669996,或到上海陆家嘴浦电路57号3楼试听,我们提供住宿,全MAC电脑,学费优惠,送插画手绘和交互动效课程~··

Image title


 收藏