ps教程论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

查看: 3838|回复: 11
收起左侧

[UI设计] 9步教你轻松设计音乐UI图标教程

[复制链接]
发表于 2014-5-21 07:03:51 | 显示全部楼层 |阅读模式

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

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

x
      导语:如今,随着时代变迁,现代设计趋向于回归极简,用简单的图形,简单的色彩,即平面化、微质感。在我们追求极简的同时,界面的视觉趋势也必然是轻巧和舒适的感觉,轻微质感、轻微立体深度和界面平面化也顺势成为当今的一大趋势。今天,我就带大家一起来体验下微质感图标的世界,领略其真正含义。
?
步骤如下:
提示:教程详细步骤在二楼,不用回复也能看到!
想下载该教程的可以回复获取下载网址:
游客,如果您要查看本帖隐藏内容请回复
教程编号:133460 作者:刘欢老师 出处:站酷
 楼主| 发表于 2014-5-21 07:03:53 | 显示全部楼层

9步教你轻松设计音乐UI图标教程


1、首先用形状工具画一个圆角矩形;


回复 支持 反对

使用道具 举报

 楼主| 发表于 2014-5-21 07:03:54 | 显示全部楼层

9步教你轻松设计音乐UI图标教程


?
2、添加斜面浮雕、描边、内阴影和渐变叠加效果;


回复 支持 反对

使用道具 举报

 楼主| 发表于 2014-5-21 07:03:55 | 显示全部楼层

9步教你轻松设计音乐UI图标教程


3、添加矢量圆角矩形(降低透明度)和矢量圆角矩形(加渐变叠加);


回复 支持 反对

使用道具 举报

 楼主| 发表于 2014-5-21 07:03:56 | 显示全部楼层

9步教你轻松设计音乐UI图标教程


4、形成基本的图标底图;


回复 支持 反对

使用道具 举报

 楼主| 发表于 2014-5-21 07:03:57 | 显示全部楼层

9步教你轻松设计音乐UI图标教程

        
5、用钢笔工具勾画音乐符的基本形状;


回复 支持 反对

使用道具 举报

 楼主| 发表于 2014-5-21 07:03:58 | 显示全部楼层

9步教你轻松设计音乐UI图标教程


6、对音乐符添加斜面浮雕、颜色叠加和投影效果;


回复 支持 反对

使用道具 举报

 楼主| 发表于 2014-5-21 07:03:59 | 显示全部楼层

9步教你轻松设计音乐UI图标教程


7、对音乐符添加一些细节(为凸显细节将音乐符调灰,灰面细节为钢笔勾画加渐变蒙版效果、图底为橙色椭圆矢量高斯模糊而成);


回复 支持 反对

使用道具 举报

 楼主| 发表于 2014-5-21 07:04:00 | 显示全部楼层

9步教你轻松设计音乐UI图标教程


8、在图标底部加一些层次丰富的圆角矩形色块,然后高斯模糊调节透明度,叠加而成;


回复 支持 反对

使用道具 举报

 楼主| 发表于 2014-5-21 07:04:01 | 显示全部楼层

9步教你轻松设计音乐UI图标教程


9、调制各方面细节形成最终效果。



  
回复 支持 反对

使用道具 举报

发表于 2014-5-21 10:00:09 | 显示全部楼层
不错,
回复 支持 反对

使用道具 举报

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

本版积分规则

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

GMT+8, 2024-11-22 14:46 , Processed in 0.034084 second(s), 12 queries , XCache On.

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

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