开启辅助访问

QQ登录

注册 找回密码
ZBrush+SP快速掌握
查看: 697
回复: 44

应用界面 金属外框唱片图标UI设计教程

 

TA的画板

978

元素币

147

活跃度

32

贡献值

元素灵

Rank: 2Rank: 2

积分
3415
主题
41
精华
0
扩散
0
首发
0
土豪金
0
在线时间
30 小时
发表于 2016-4-15 16:45:51

马上注册成为元素者,获取海量元素资源,结识各路大神级人物

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

x
金属外框唱片图标UI设计教程

1J0506400-0.jpg

这系列做点拟物图标,但都是中规中矩,很快出效果的图标。不会画特别难,超写实的图标,超写实图标对提升个人技术很有帮助,但真的太耗费时间了。

跟着做可以锻炼到中常用的PS基本功和图层样式,熟悉之后举一反三吧~

不会每一步都有操作演示,我只说要注意的地方以及上传源文件,更多的需要靠自己去想了。

进步最快的方式是临摹,但要会正确的临摹方式~

临摹三部曲:

①先自己做,用自己的方式实现看得到的效果;

②锻炼眼睛,揣摩出隐藏的效果;(这点比较困难,但是非常锻炼水平)

③无计可施再看源文件,同时想有没有比原作者更简便的实现方法。(任何一个原作者都不是神,也会有使用比较蠢的方式的时候)

这是LZ最开始使用的进步方式最快也是最锻炼水平的方法~

画图标的大致流程:

草图勾画→PS搭型→效果光影质感添加→后期调整→完稿

一、草图勾画:

草图阶段可以大致在纸上用笔画画,勾勒出大概的造型就可以了,因为我们不是做游戏UI图标,大部分靠PS的矢量工具+图层样式就可以完成了,而且我的习惯是直接用PS搭造型,草图阶段比较适用于想法不太明确,仅有模糊印象的人。

这一阶段可以帮助你提升自己的手绘水平,建议如果手上功夫差的人在这一阶段可以仔细斟酌一下。

二、PS搭型:

这一阶段你需要用PS把造型搭建出来,摒弃一切效果阴影,仅仅用灰度等级区分造型~

1J050L06-1.jpg

你用得到的工具,同时也是做UI设计常用的工具:

做游戏UI常用的是画笔工具组,但是我们做APP或者网页的UI设计,使用最多的就是矢量工具组。

无论你是做界面,做图标,做按钮,我建议通通使用矢量图形 ,这对于后期修改很方便。

另外在这一阶段,也就是任何项目建立之初,你要学会整理图层以及打包归类

应该注意的地方:
你会发现和指针和原图位置不同,这是有原因的,
一般我们做有角度的控件的时候,包括上图倾斜的指针杆,会在造型的时候选择统一的方向,设置完所有效果之后,将其整个“转换为智能对象”进行旋转,这样可以保证图层样式中设置的角度跟随对象转变。
不明白我们下面会看到是什么意思~
造型阶段就不一一演示操作步骤了,我觉得既然基本的造型都可以做到~本阶段需要的就是对图层的整理和使用矢量工具造型的能力~
三、效果光影质感添加
所有的光影,我们在制作时就要确定角度,这里统统设置为垂直光的90度。
1J050J45-6.jpg
需要把全局光选择勾选掉,否则会影响到所有的编辑对象。
质感的实现:
推荐使用纹理贴图 ,你会发现目前大部分图标有木质纹理,金属纹理等各种材质的质感表现,如果用PS去画,虽然能画出来,但是真的很费时费力,LZ以前做3D渲染的时候喜欢用贴图,现在用PS画更喜欢用贴图。这不是偷懒,这是采用有效率的方式。
使用纹理贴图需要注意的是,我们在网上找到一张有色纹理贴图的时候,记得要对其进行“去色”处理,仅使用黑白灰模式下的贴图,图层样式为“叠加”,这样可以保证纹理,又不会掩盖到图标本身的色彩。
1J0505632-7.jpg
1J0503Z6-9.jpg
回到我们本次做的图标~
首先是渐变,我不推荐使用图层样式的渐变叠加,推荐使用矢量图形自身的渐变, 因为这样进行剪贴蒙板的时候,会掩盖掉贴图的纹理以及一些其他图层效果~
1J0504553-11.jpg
1J0502O7-12.jpg
这里实际操作步骤我不说了,来说说需要注意的地方……
1J050J11-13.jpg
边框大概就是这么个意思,基本上琢磨琢磨很容易就可以做到这一步,下面说说胶片……
胶片上面有螺纹,有反光。
螺纹的实现方式:
胶片本身的渐变使用的是“角度渐变”,这个可以做为胶片本身反光的渐变,
在此基础上,把胶片复制一层,新复制的这一层就是做完螺纹的,将其剪贴进原胶片图层,把渐变模式改为“径向渐变“,之后进入渐变编辑框
渐变类型→杂色
粗糙度→70%(这个以实际效果为准)
勾选上右侧两个选项
RGB的滑块都划到最右端
点击随机化,找到自己合适的螺纹粗细(因为是随机化,可能需要不断的点击出现合适的螺纹)
这是螺纹的实现方式之一,基本上螺纹都可以靠这种方式实现……
1J0501932-14.jpg
1J0505R3-15.jpg
1J0504508-16.jpg
1J0504Z0-17.jpg
指针杆的效果:
因为是金属,所以渐变对比会比较强烈~渐变自己调,没必要一模一样。
这里说一下,前面提到的”转换为智能对象“,因为我们的图标,光源选定的是统一角度,图层样式里面都是90度。如果不转化为智能对象
会出现下面这种情况~
1J0502364-18.jpg
1J050E91-19.jpg
1J0505327-20.jpg
图一是我们编辑完的,图二是未转换为智能对象时旋转的效果,图三是转换为智能对象选择的效果。
可以看到,如果不转换为智能对象,角度是不会跟随对象旋转的,这一点以后在做有选择角度的控件时,可以记住。

四、后期调整
一般我们做完一枚图标,还需要从各方面进行调整,包括饱和度,色彩平衡,曲线这些方面,这枚图标我提升了一下饱和度~
1J050JE-21.jpg
五、完稿
一枚图标大致就这么诞生了,其实如果想细化下去,可以一直细化下去,包括光影纹理质感,看你想做到什么程度了……
1J050OA-22.jpg
你可能发现我说的看起来很笼统,因为总监跟我说:你听别人说一千遍,也不如自己琢磨动手一遍,所以我希望你们可以和我一起琢磨,而不是我把每一步都明明白白的写出来……
授人以鱼不如授之于渔嘛~源文件已经上传了,看不懂就看看源文件吧,我已经整理好每个图层了~祝你们好运喽!
链接:http://pan.baidu.com/s/1gem0fXx 密码:puqp

资源地址: http://cg.silucg.com/ui/jichu/10973.html(分享请保留)










评分

参与人数 1元素币 +20 收起 理由
元素界王 + 20

查看全部评分

使用道具 举报

回复 论坛版权

盘 TA

瞧瞧看看

使用道具 举报

回复

盘 TA

元素帖子强,满满正能量!

使用道具 举报

回复

盘 TA

元素那么大,我想来看看!

使用道具 举报

回复

盘 TA

想要成大触,天天上元素!

使用道具 举报

回复

盘 TA

元素帖子强,满满正能量!

使用道具 举报

回复

盘 TA

666

使用道具 举报

回复

盘 TA

这世上没有什么是元素币搞不定的,如果有,那就用更多!

使用道具 举报

回复

盘 TA

资源哪里好,肯定元素找!

使用道具 举报

回复

盘 TA

首发必需微元素,荣耀加身装备酷!

使用道具 举报

回复

盘 TA

天下武功出少林,世界资源入元素!

使用道具 举报

回复

盘 TA

首发必需微元素,荣耀加身装备酷!

使用道具 举报

回复

盘 TA

元素帖子强,满满正能量!

使用道具 举报

回复

盘 TA

这世上没有什么是元素币搞不定的,如果有,那就用更多!

使用道具 举报

回复

盘 TA

这世上没有什么是元素币搞不定的,如果有,那就用更多!

使用道具 举报

回复

盘 TA

从业不识微元素,做遍项目也枉然

使用道具 举报

回复

盘 TA

不错,学习了

使用道具 举报

回复

盘 TA

强势

使用道具 举报

回复

盘 TA

从业不识微元素,做遍项目也枉然

使用道具 举报

回复

盘 TA

资源甚好,发帖艰辛,且阅且珍惜!

使用道具 举报

回复

盘 TA

从业不识微元素,做遍项目也枉然

使用道具 举报

回复

盘 TA

好资源!点赞

使用道具 举报

回复

盘 TA

从业不识微元素,做遍项目也枉然

使用道具 举报

回复

盘 TA

资源哪里好,肯定元素找!

使用道具 举报

回复

盘 TA

资源甚好,发帖艰辛,且阅且珍惜!

使用道具 举报

回复

盘 TA

带你赚币带你飞,元素里面有正妹!

使用道具 举报

回复

盘 TA

天下武功出少林,世界资源入元素!

使用道具 举报

回复

盘 TA

我们先定一个能达到的小目标,先赚它一亿元素币

使用道具 举报

回复

盘 TA

好,正是我要找的,谢

使用道具 举报

回复

盘 TA

好,正是我要找的,谢

使用道具 举报

回复

盘 TA

元素那么大,我想来看看!

使用道具 举报

回复

盘 TA

这世上没有什么是元素币搞不定的,如果有,那就用更多!

使用道具 举报

回复

盘 TA

使用道具 举报

回复

盘 TA

使用道具 举报

回复

盘 TA

为了元素币,拼了!

使用道具 举报

回复

盘 TA

这世上没有什么是元素币搞不定的,如果有,那就用更多!

使用道具 举报

回复

盘 TA

不错不错!!!~~

使用道具 举报

回复

盘 TA

元素那么大,我想来看看!

使用道具 举报

回复

盘 TA

资源甚好,发帖艰辛,且阅且珍惜

使用道具 举报

回复

盘 TA

元素那么大,我想来看看

使用道具 举报

回复
12下一页
您需要登录后才可以回帖 登录 | 注册

本版积分规则

关闭

元素推荐-友情提示上一条 /1 下一条

快速回复 返回顶部 返回列表