ps教程论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

查看: 11111|回复: 55
收起左侧

[UI设计] 教你如何设计iTunes图标教程

[复制链接]
发表于 2016-4-1 01:17:52 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

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

x
现在流行扁平化,很多拟物图标都消失了,今天我们来回顾一下,设计一个拟物风格的iTunes图标,主要用图层样式来设计出质感,教程大量运用了图层样式,大家可以通过教程了解一下图层样式的实际运用。在Photoshop中,图层样式是最为直观的东西,所有的效果都能量化,以数值的形式表现出来,就是各种晦涩难懂的等高线也可以用数字来表现。利用图层样式中的混合模式可以得到千变万化的效果,很多的UI和icon绚丽的效果大多数是靠图层样式来实现的。今天的iTunes图标是一个非常经典的icon,不过现在你们看不到了。现在的版本只能说是走火入魔,推崇扁平化,说它漂亮也谈不上,说难看也不至于"下面是我完成的效果图,不过我对它的外轮廓作了一些恶搞性质的变化。这个外形介于正方形和圆形之间,它跟圆角矩形不是一个概念,迎合了现在的“审美观”:

作者:P大点S 出处:优设
 楼主| 发表于 2016-4-1 01:17:52 | 显示全部楼层
下面开始制作过程,首先我百度了一张原图作为参考~

回复 支持 反对

使用道具 举报

 楼主| 发表于 2016-4-1 01:17:52 | 显示全部楼层
新建一个1000*1000的新画布"

回复 支持 反对

使用道具 举报

 楼主| 发表于 2016-4-1 01:17:52 | 显示全部楼层
粘贴刚才复制的iTunes原图,移动到角落上作为参考"

回复 支持 反对

使用道具 举报

 楼主| 发表于 2016-4-1 01:17:52 | 显示全部楼层
按ctrl+r打开标尺,右键标尺选择百分比"

回复 支持 反对

使用道具 举报

 楼主| 发表于 2016-4-1 01:17:52 | 显示全部楼层
快捷键alt+v+e(按住alt,依次按V再按E)在垂直位置输入50%"

回复 支持 反对

使用道具 举报

 楼主| 发表于 2016-4-1 01:17:52 | 显示全部楼层
继续横向位置也是50%"

回复 支持 反对

使用道具 举报

 楼主| 发表于 2016-4-1 01:17:52 | 显示全部楼层
设置好参考后点击图层栏下面的快捷按钮添加一个渐变调整层。

回复 支持 反对

使用道具 举报

 楼主| 发表于 2016-4-1 01:17:52 | 显示全部楼层
选择你认为比较合适的颜色搭配。本来我打算给出颜色的代码,后来想想还是算了,每个人都有自己的独好。我认为好看的你不一定也认同,所以这里你大可不必按照我的选择。

回复 支持 反对

使用道具 举报

 楼主| 发表于 2016-4-1 01:17:52 | 显示全部楼层
在图形工具里选择椭圆工具"

回复 支持 反对

使用道具 举报

 楼主| 发表于 2016-4-1 01:17:52 | 显示全部楼层
以参考线的交叉点为中心画一个大小差不多跟画布大小的圆形。至于它的颜色大可不必在意,任何颜色都可以,我只要的是它的形状"

回复 支持 反对

使用道具 举报

 楼主| 发表于 2016-4-1 01:17:52 | 显示全部楼层
右击“选择工具”,选择“直接选择工具”,也就是白色的箭头。如果你比较熟悉这个工具的话可以结合ctrl建快速转换"

回复 支持 反对

使用道具 举报

 楼主| 发表于 2016-4-1 01:17:52 | 显示全部楼层
框选水平方向的两个锚点"

回复 支持 反对

使用道具 举报

 楼主| 发表于 2016-4-1 01:17:52 | 显示全部楼层
右键选择“自由变换点”"

回复 支持 反对

使用道具 举报

 楼主| 发表于 2016-4-1 01:17:52 | 显示全部楼层
在”设置水平缩放”里输入80%大小。这时候你看到这个圆形变成一个椭圆。

回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

求建议和反映问题|小黑屋|免责声名|Archiver|photoshop教程论坛 ( 粤ICP备07017357号 )

GMT+8, 2024-4-26 18:26 , Processed in 0.042608 second(s), 10 queries , XCache On.

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

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