Photoshop设计网页音乐播放器

旗袍小姐920

旗袍小姐920

2016-03-17 22:52

有一种朋友不在生活里,却在生命力;有一种陪伴不在身边,却在心间。图老师即在大家的生活中又在身边。这么贴心的服务你感受到了吗?话不多说下面就和大家分享Photoshop设计网页音乐播放器吧。
来源:活力盒子 作者:Luycas
本教程的效果图制作的非常小巧,很适合用到一些可以播放音乐的网页中。制作方法也比较简单,播放器的每一个部件基本上都是用图层样式来表现立体及浮雕效果,只要注意好图形的层次关系,我们就可以分层来完成效果图。
最终效果


1、第一步是我们创建一个黑色径向渐变的背景。在任何颜色tulaoshi的油漆层,添加一个如下所示的渐变图层样式。

2、用圆角矩形工具(设置一个半径为20像素)创建一个该设备的主要元素,表现设备的形状图层(点击菜单上的第一选择)。

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/ps/)
3、双击该图层上的向量,颜色编辑器将打开。我们可以选择一个#E1E0E0的浅灰色的颜色,进而可以增加表面的发光程度。


4、现在我们要创建一个该设备周边的一个斜面。在此之前,我们需要用PS标尺创建一个参考标准。点击这两个统治者收敛角,通过拖动鼠标,我们在放置光标的位置放置光标,这将使我们能够创造一个外围设备周围等距离斜面。


5、我们把这个图层的不透明度调为0,因为我们只是想看到一个表面上2像素的斜面。

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

6、套用一个1像素的描边,在设备的内部位置要使用比设备前面更暗的颜色。在这一步,我们要创建一个代表行之间的形状和播放器的前联合差距的线。


7、设置2像素值以下的内发光。


8、给设备的前部添加软梯度,让设备更有凸出感。


9、现在,我们将突出这个MP3的优势。要做到这一点,需要添加一条有挤压感有三维效果的线。然后在MP3的外表面添加2像素灰度中风效果。

10、利用锥与浮雕风格,我们在这条线的上部区域添加光效果。现在物品看上去像是从上面打光,下面变得更暗的挤压效果。


11、现在在这个图层上添加柔柔的,轻轻的内阴影效果,让播放器的前面更显突出。


12、通过复制和编辑前面的斜面层,我们创造更多的代表不同的控制按钮的斜面。


13、现在通过编辑形状层来创建播放器的主播放/暂停按钮。重复第一个斜面,在边界以内画一个圆形物体。然后放大10%的水平,因为我们只需要那些斜面。

14、像下面这样在步骤13中创建的形状中应用软3像素面具。


15、为了使面具隐藏对象和它的图层样式,在图层样式窗口单击选项“图层蒙版隐藏效果”。如果我们不选择此选项,这个面具只能隐藏形状,但是会把效果显示出来,而我们就是想要把它隐藏。

123下一页
展开更多 50%)
分享

猜你喜欢

Photoshop设计网页音乐播放器

PS PS基础 ps平面设计教程 ps去水印教程
Photoshop设计网页音乐播放器

Photoshop制作简单的网页格式音乐播放器

电脑网络
Photoshop制作简单的网页格式音乐播放器

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

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

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

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

PS PS基础 ps平面设计教程 ps去水印教程
Photoshop设计简洁大气的音乐播放器教程

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

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

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

Photoshop制作简单音乐播放器

电脑网络
Photoshop制作简单音乐播放器

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

Photoshop CS5百变画笔教程3:丝绸般的漂浮轻纱

Photoshop CS5百变画笔教程3:丝绸般的漂浮轻纱

Photoshop CS5百变画笔教程2:空间感极强的彩色光柱

Photoshop CS5百变画笔教程2:空间感极强的彩色光柱
下拉加载更多内容 ↓