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

活力盒子   发布时间:2010-06-22 20:57:30   作者:Luycas   我要评论
本教程的效果图制作的非常小巧,很适合用到一些可以播放音乐的网页中。制作方法也比较简单,播放器的每一个部件基本上都是用图层样式来表现立体及浮雕效果,只要注意好图形的层次关系,我们就可以分层来完成效果图。

25、我们用其他位图字体创建计时器,指示时间的流逝。此字体也是免费的,你可以在这里得到它。

Photoshop 简单的网页格式音乐播放器
 26、使用通用的显示图标和音频或视频播放器符号的字体。你可以使用这一个。一旦它被安装用来创建播放器不同的按钮,在这种情况下,播放/暂停控制(随着播放器的发展,您将需要创建两个国家的按钮时,当按钮被按下时,播放按钮变成暂停按钮,反之亦然)。

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

27、对于这个符号,我们使用和前表面相同的颜色。用颜色选择工具,我们可以绘制文本。

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

28、现在,我们可以包括各种不同的款式,让播放器外观看起来像浅浮雕标一样。使用内阴影下的相应值。

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

29、用这些操作可以减轻底部斜面。

Photoshop 简单的网页格式音乐播放器
 30、使用柔软的宽度和坡度小的表面,让播放器看起来不是很枯燥。

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

31、现在创建音量控制按钮。画出一个小的金属表面抛光旋钮按钮。启动一个圆形图层。

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

32、使用阴影效果,制作一个大挤压效果的错觉。

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

33、凭借在视角模式和一些灰色和白色条纹梯度,我们可以模拟这个按钮的类圆形抛光。确保第一次在左侧使用的灰色颜色和最后的右侧的灰色时完全一样的。

Photoshop 简单的网页格式音乐播放器
 34、最后,添加一个渐变填充中风这将添加在斜面外围。按照图片中的步骤细心操作。

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

35、现在我们已经完成了音量控制按钮,但还想添加一个静音按钮。你可以使用层样式做到这一点。

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

36、用2个像素阴影软化圆形工具给播放器阴影处上色(见工具菜单上的价值)。

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

37、按Ctrl + H隐藏这些操作,然后使用10%的流量的涂料100像素的画笔,轻轻的给阴影上色。这将使播放器中心更鲜明。

Photoshop 简单的网页格式音乐播放器
 38、现在在播放器的显示屏边缘添加一个小发光。首先,在中心的激烈亮区画一个1个像素的矩形。然后,使用相同的刷子,但没有任何选择单击几次,以增加该中心的力度。

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

39、创建一个主键翻滚效果,当鼠标越过时使前表面弹出。我们首先在暂停后面创建一个圆形图标。

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

40、这种抑郁的效果可以通过以下方式做到:阴影变暗和软化对象的边缘,还有模拟梯度,这抑郁效果在色调上有个区域,正如按钮被按下。

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

41、我们还用面具隐藏了这个过渡,因为我们用它完成了主控按钮的斜面操作。同时还要记得隐藏图层效果选项。

Photoshop 简单的网页格式音乐播放器
 42、重复前面掩盖过渡的步骤。

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

43、我们将添加两个灯光效果,以加强过渡。通过二色(边缘用#00CCFF,中心用白色)我们创建了一个点燃的我们将屏蔽的边缘。复制图层,并反映它垂直,使它看起来好像点亮在顶部和作为鼠标经过时的底部。这一层必须设置为“屏幕”,以便更好的发光。

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

44、最后,让我们添加一个超薄线,这将给播放器增添更多的显示色彩。要做到这一点,使用钢笔工具画一个弯曲的形状层。

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

45、调整为0%不透明度,并添加与播放器表面同样的灰色调中风。

Photoshop 简单的网页格式音乐播放器
 46、从我们创建的形状分隔,因为我们需要给线添加一些阴影。用鼠标右键点击图标旁边的外汇层和选择创建层。

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

47、这一步在不破坏原来的形状的基础上在一个新层分离中风。使用一种内在的阴影,让一个圆柱浮雕的想法放到这一行。

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

最终效果:

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

相关文章

最新评论