UI设计教程 手把手教你设计音乐播放器

2015-05-04 14:12 583 1 收藏

今天图老师小编要给大家介绍音乐播放器的UI设计教程,有无PS基础都可进来看看,说不定你一看就学会了。

【 tulaoshi.com - UI设计 】

新建一个600*600画布

来个白到灰的径向渐变

椭圆工具画个300*300的圆

直接选择工具选中这两个点

右键,自由变换点,在箭头标注的W位置输入80

重复上一步骤,选中上面两个点,在H位置输入80

居中下,调整下大小自己感觉合适即可

给调整好的圆角矩形添加图层样式

调整图层样式后的圆角矩形变的更有立体感

画一个圆大小自定,用渐变叠加调处金属质感

接着添加斜面浮雕和投影

再画一个圆

添加图层样式,先来个渐变叠加

投影,内阴影,斜面浮雕

调整后的效果

做光碟上的拉丝效果,新建图层,拉个圆形套索填充白色

滤镜添加杂色

滤镜径向模糊

剪辑蒙版

模式改为叠加,调整不透明度

这样拉丝效果就出现了,也更加逼真点

再画个圆形添加渐变叠加

把拉丝图层拷贝出来,剪进去,透明度调低点

再画一个圆形填充红色

添加图层样式,投影,内阴影

拷贝拉丝图层剪辑进去

再画一个圆形,填充淡红色,添加拉丝效果

再画个小圆形填充白色

添加投影,内阴影

画个白色小圆放在这个位置,来做支架

添加渐变叠加和斜面浮雕

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/uisheji/)

画个白色小圆,添加一像素描边

支架部分很简单,全都是用形状工具做的

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/uisheji/)

来源:https://www.tulaoshi.com/n/20150504/174596.html

延伸阅读
标签: PS PS教程
编者按:今天这篇教程适合新手练习,重点是帮同学们深入理解图层样式的运用,作者@凉星在 特别说明,数值不是标准,自己折腾才有进步,来感受下 第一步: 新建画布,大小自定,填充一个淡色。 第二步: 画一个圆形,大小自定,填充如下。 接上边的数值。 第三步: 复制底圆,...
来源:活力盒子 作者:Luycas 本教程的效果图制作的非常小巧,很适合用到一些可以播放音乐的网页中。制作方法也比较简单,播放器的每一个部件基本上都是用图层样式来表现立体及浮雕效果,只要注意好图形的层次关系,我们就可以分层来完成效果图。 最终效果 1、第一步是我们创建一个黑色径向渐变的背景。在任何颜色tulaoshi的油漆层,添...
SKYUI内部月评冠军作品——Uoir播放器界面设计,由SKYUI设计师uoir(许洋)设计。 copyright www.ztu68.com (点击图片看大图) 找图网
九天音乐网的小喇叭iLABA播放器界面设计。
通过本教程你将学习到如何使用PS图层样式添加流畅精致的质感;如何打造细腻的渐变,让组件看起来栩栩如生;如何设计交互性优秀的组件按钮。用PS中的矢量形状以及图层样式打造精致的音乐播放器组件。界面设计一定要保持简约,保证原汁原味的内容,一眼即知的操作方式。 先看看效果图 01.创建一个容器图层 圆角矩形,半径6px。图层样式 渐...

经验教程

998

收藏

23
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部