Photoshop绘制时尚迷你的网页播放器教程

2016-02-15 20:39 11 1 收藏

今天图老师小编给大家精心推荐个Photoshop绘制时尚迷你的网页播放器教程教程,一起来看看过程究竟如何进行吧!喜欢还请点个赞哦~

【 tulaoshi.com - PS 】

本教程主要使用Photoshop绘制时尚迷你的网页播放器教程,一个很简单的播放界面。主要是图层样式的应用,操作绝对简单。做完之后,修改颜色神马的相当的快,当然直接用色相之类的来修改颜色,我并不赞同,原因嘛,自己想!其实做完一个颜色后,直接在源文件里更改图层样式,换个色也花不了多长时间的。

今天,我所提供的PSD里,我们做了四个颜色,绿色,蓝色,灰色,红色,有兴趣的朋友可以试试别的颜色。

教程源文件下载:时尚的网页迷你播放器PS教程源文件

先看看效果图

Photoshop绘制时尚迷你的网页播放器教程,PS教程,图老师教程网

首先,新建个文档,我用的是400X300像素。创建一个渐变调整层,做个径向渐变,颜色参数如下图。

Photoshop绘制时尚迷你的网页播放器教程,PS教程,图老师教程网

用圆角矩形工具画一个320X125的圆角矩形,颜色无所谓,我们一会会更改。

Photoshop绘制时尚迷你的网页播放器教程,PS教程,图老师教程网

为这个圆角矩形添加一个图层样式。

Photoshop绘制时尚迷你的网页播放器教程,PS教程,图老师教程网

Photoshop绘制时尚迷你的网页播放器教程,PS教程,图老师教程网

Photoshop绘制时尚迷你的网页播放器教程,PS教程,图老师教程网

Photoshop绘制时尚迷你的网页播放器教程,PS教程,图老师教程网

OK,接下来,我们复制一层圆角矩形这个图层,右键清除掉图层样式,按住SHIFT画一个矩形,SHIFT这里是增加的意思,保证我们新画的矩形和圆角矩形是一个形状图层。 然后,将形状的路径操作更改为与形状区域相交,这样我们就得到了我们想要的下半部分的形状了。将形状颜色设置为#68ce6b。

Photoshop绘制时尚迷你的网页播放器教程,PS教程,图老师教程网

下面,我们为这个下半部分的形状添加一个图层样式。

Photoshop绘制时尚迷你的网页播放器教程,PS教程,图老师教程网

接下来,我们用直线工具,画一条直线,放到我们刚才的那个下半部分图层的顶部位置,设置颜色为#119915,现在,我们得到如下效果。

Photoshop绘制时尚迷你的网页播放器教程,PS教程,图老师教程网

下面,我们用矩形工具,画一个正方形,放置在左上角,充当专辑图片的图片框,并设置一个图层样式。

Photoshop绘制时尚迷你的网页播放器教程,PS教程,图老师教程网

Photoshop绘制时尚迷你的网页播放器教程,PS教程,图老师教程网

加上我们的LOGO,没什么好说的,当然,你也可以直接用图片,创建个剪贴蒙版,因为刚才我们设置了描边和投影,直接剪贴蒙版的话,图层样式是会保留的。

Photoshop绘制时尚迷你的网页播放器教程,PS教程,图老师教程网

接下来,我们开始做播放的进度条,首先用圆角矩形工具画一个长条的圆角矩形,设置颜色为#d0d0d0,并添加一个图层样式。

Photoshop绘制时尚迷你的网页播放器教程,PS教程,图老师教程网

Photoshop绘制时尚迷你的网页播放器教程,PS教程,图老师教程网

Photoshop绘制时尚迷你的网页播放器教程,PS教程,图老师教程网

用矩形工具,画一个矩形,设置颜色为#53ba56,并创建剪贴蒙版,赋予已播放的部分绿色显示。

Photoshop绘制时尚迷你的网页播放器教程,PS教程,图老师教程网

设置前景色为#ebebeb,画一个正圆形,并添加一个图层样式。

Photoshop绘制时尚迷你的网页播放器教程,PS教程,图老师教程网

Photoshop绘制时尚迷你的网页播放器教程,PS教程,图老师教程网

Photoshop绘制时尚迷你的网页播放器教程,PS教程,图老师教程网

接下来,我们画一个小一点的圆,颜色设置为# 53ba56,并添加一个图层样式。

Photoshop绘制时尚迷你的网页播放器教程,PS教程,图老师教程网

Photoshop绘制时尚迷你的网页播放器教程,PS教程,图老师教程网

接下来,添加时间进度和标题信息,这里文字用的颜色为#51c054,并添加了一个投影。

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

Photoshop绘制时尚迷你的网页播放器教程,PS教程,图老师教程网

Photoshop绘制时尚迷你的网页播放器教程,PS教程,图老师教程网

接下来,添加一个频谱,用矩形工具画就行了,也没什么可讲的,颜色为#119915,同样添加一个投影。

Photoshop绘制时尚迷你的网页播放器教程,PS教程,图老师教程网

Photoshop绘制时尚迷你的网页播放器教程,PS教程,图老师教程网

用矩形工具画一个#68ce6b颜色的正方形,并添加一个渐变叠加。

Photoshop绘制时尚迷你的网页播放器教程,PS教程,图老师教程网

Photoshop绘制时尚迷你的网页播放器教程,PS教程,图老师教程网

复制一层这个方形按纽图层,放置到按纽的下层,我们来做阴影,更改颜色为#2b872e,在属性栏里设置羽化4像素,并添加一个蒙版,把顶部和底部的位置擦一下。

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

Photoshop绘制时尚迷你的网页播放器教程,PS教程,图老师教程网

Photoshop绘制时尚迷你的网页播放器教程,PS教程,图老师教程网

接下来,我们来添加播放,上一曲,一下曲的图标,这个也是超级简单,没什么好说的,形状不知道怎么折腾的话,请看我们这个布尔运算的教程贴,将图标的颜色设置为#119915,并添加一个图层样式。

Photoshop绘制时尚迷你的网页播放器教程,PS教程,图老师教程网

Photoshop绘制时尚迷你的网页播放器教程,PS教程,图老师教程网

Photoshop绘制时尚迷你的网页播放器教程,PS教程,图老师教程网

搞定,如果想换颜色,就很快了,我们的PSD里提供了四个颜色,期待看看大家不同的颜色。

Photoshop绘制时尚迷你的网页播放器教程,PS教程,图老师教程网

来源:http://www.tulaoshi.com/n/20160215/1563695.html

延伸阅读
标签: PS PS基础
当我们看到一个教程的时候,大家会想到些什么呢?马上开练?做完之后呢?本狼建议:在做之前,先看看效果图,想想自己能不能在没有教程的前提下把这个案例做出来?眼前的这个图形由几部分组成,在软件里该怎么实现?步骤是怎么样的?好好思考一番后,再动手做,有目的的去看教程。 看教程的目的是什么?无非就是熟悉软件+绘制技巧(或方法)这两个了吧?...
标签: flash教程
  在电脑上听音乐,除了用现成的播放器软件,大家也可以自己动手用FLASH MX 2004来制作一款有特色的音乐播放器。 制作要领: 中影片剪辑的控制、音量大小的调节,声音平衡的调节,动态文本显示数据。  完成效果: 制作步骤: 一、创建背景图像 1 .启动 Flash MX 2004 软件,在向导中选...
本教程的效果图制作的非常小巧,很适合用到一些可以播放音乐的网页中。制作方法也比较简单,播放器的每一个部件基本上都是用图层样式来表现立体及浮雕效果,只要注意好图形的层次关系,我们就可以分层来完成效果图。 最终效果 1、第一步是我们创建一个黑色径向渐变的背景。在任何颜色的油漆层,添加一个如下所示的渐变图层样式。 ...
标签: PS PS教程
播放图标很常见,不过要做好还是要下一定功夫的。首先要在造型上有一定的特色,最好多找一些实物图参考;然后画出线稿图,并作出分层图;再给图标上色,用图层样式等加上质感等即可。 最终效果 1、在做这个图标之前,我首先翻箱倒柜去找了一个古董级MP3来参考一下。 2、考了一下,我决定把一体的按键变成五个,科技感会强一些。...
标签: PS PS教程
播放图标很常见,不过要做好还是要下一定功夫的。首先要在造型上有一定的特色,最好多找一些实物图参考;然后画出线稿图,并作出分层图;再给图标上色,用图层样式等加上质感等即可。 最终效果 1、在做这个图标之前,我首先翻箱倒柜去找了一个古董级MP3来参考一下。 2、考了一下,我决定把一体的按键变成五个,科技感会强一些。在这里我...

经验教程

281

收藏

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