首页美食育儿手工生活美妆美容设计电脑综合

设计创意

搜索

首页设计创意全部栏目设计创意最新信息 UI设计

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

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

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

【 tulaoshi.com - UI设计】

新建一个600*600画布

来个白到灰的径向渐变

椭圆工具画个300*300的圆

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

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

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

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

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

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

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

接着添加斜面浮雕和投影

再画一个圆

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

投影，内阴影，斜面浮雕

调整后的效果

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

滤镜添加杂色

滤镜径向模糊

剪辑蒙版

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

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

再画个圆形添加渐变叠加

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

再画一个圆形填充红色

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

拷贝拉丝图层剪辑进去

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

再画个小圆形填充白色

添加投影，内阴影

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

添加渐变叠加和斜面浮雕

（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/uisheji/）

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

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

（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/uisheji/）

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

上一篇： UI设计教程超详细的冰淇淋图标制作
下一篇：网页设计每周精选(1)

看过《UI设计教程手把手教你设计音乐播放器》的人还看了以下文章更多>>

PS绘制设计音乐播放器图标

标签： PS

PS绘制设计音乐播放器图标绘制设计音乐播放器图标，设计思路及方法，记得图老师交作业

Photoshop设计网页音乐播放器

标签： PS PS基础 ps平面设计教程 ps去水印教程

来源：活力盒子作者：Luycas 本教程的效果图制作的非常小巧，很适合用到一些可以播放音乐的网页中。制作方法也比较简单，播放器的每一个部件基本上都是用图层样式来表现立体及浮雕效果，只要注意好图形的层次关系，我们就可以分层来完成效果图。最终效果 1、第一步是我们创建一个黑色径向渐变的背景。在任何颜色tulaoshi的油漆层，添...

Photoshop设计简洁大气的音乐播放器教程

标签： PS PS基础 ps平面设计教程 ps去水印教程

通过本教程你将学习到如何使用PS图层样式添加流畅精致的质感;如何打造细腻的渐变，让组件看起来栩栩如生;如何设计交互性优秀的组件按钮。用PS中的矢量形状以及图层样式打造精致的音乐播放器组件。界面设计一定要保持简约，保证原汁原味的内容，一眼即知的操作方式。先看看效果图 01.创建一个容器图层圆角矩形，半径6px。图层样式渐...

AirPlay 播放器界面设计素材ui设计欣赏

标签：平面设计标志设计 UI设计 VI设计

新版AirPlay，不过才600KB，而绚丽的效果却让人不由得再一次被震撼和折服。新版的AirPlay虽然还没有彻底完工，我还是忍不住偷偷截出几个画面，抛开它细腻的音质不说，单从这华丽的界面来看，就足够让人期待了。启用了新的ico，据说是出自cnbeta某个美工的手笔，名字暂不泄漏。初次使用会提示配置文件的保存位置。经过一个短暂但绚丽的动...

Uoir播放器界面设计素材ui设计欣赏

标签：平面设计标志设计 UI设计 VI设计

SKYUI内部月评冠军作品——Uoir播放器界面设计，由SKYUI设计师uoir（许洋）设计。 copyright www.ztu68.com （点击图片看大图）找图网

查看更多精彩>>

木小姐

木小姐

经验教程

757

收藏

19

最新文章

UI设计

精华推荐

iLABA 播放器界面设计素材ui设计欣赏

My21J

Photoshop设计简洁大气的音乐播放器

W是辽源人

winamp播放器界面设计欣赏素材ui设计欣赏

啃西罢

热门标签

UI设计 jQuery UI教程设计雕刻设计设计软件书房设计装修设计客厅设计网站设计教学设计设计教程装饰设计插图设计装潢设计餐厅设计设计色彩衣领设计设计婚纱 VI设计标志设计