Photoshop制作精致的媒体播放器按钮

2016-02-02 20:02 18 1 收藏

今天图老师小编要跟大家分享Photoshop制作精致的媒体播放器按钮,精心挑选的过程简单易学,喜欢的朋友一起来学习吧!

【 tulaoshi.com - PS 】

本教程介绍非常精致的播放器按钮的制作方法。制作的时候需要非常细心,播放器有很多细小的部分需要认真处理,尤其是质感部分,光线要认真去把握。
最终效果

1、首先在PS中建立一个1024*768,分辨率72像素的文档,背景色用黑色,如下所示:

2、现在用钢笔工具中的形状图层选项,作出以下形状而后设置“渐变叠加”图层样式:


3、新建立一层,用圆角矩形工具在图中建立播放器的轮廓,颜色代码用121212:

4、分别用椭圆工具和圆角矩形工具作出形状图层,在用选区相减命令建立以下形状并设置图层样式,如下所示:

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/ps/)5、用圆角矩形工具做出以下形状,并用钢笔工具拖动锚点改变下形状:

6、将改图层的混合模式改成滤色,并将图层不透明度设置为50%:

7、用自定形状工具加入以下形状并用自由变换命令改变下形状的大小,将颜色代码设置为696969,图层混合模式设置为滤色:

8、在加入小喇叭的形状,颜色代码用DFDFDF图层混合模式设置为滤色:

9、在加入下面的形状,颜色代码用DFDFDF:

10、在用直线工具加入播放器底部的高光,颜色代码用484848:

11、在用矩形工具加入下列形状并设置图层样式,图层填充度设置为0:

12、选用椭圆工具加入一个大些的“播放按钮”,颜代码484848:

13、在原来的的按钮基础上在建立一个稍小些的正圆,颜色代码用1E339C:

14、再在此层上建立新图层,并设置图层样式得到以下效果:

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/ps/)15、在用钢笔工具中的形状图层建立以下形状,并设置图层样式,将图层的填充度设置为22%(这里要注意区分图层填充度和图层不透明度):

16、作好以后把以上的蓝色按钮复制出多的一份放到以下位置,如下所示:

17、用自定形状工具在图中加入以下形状在设置下描边图层样式:

18、用矩形工具建立以下形状并设置图层样式:

19、最后在用文字工具和直线工具修饰下细节部分,完成最终效果。

来源:https://www.tulaoshi.com/n/20160202/1535076.html

延伸阅读
标签: PS PS教程
  [next]  
制作图标之前,有很多的工作要做,先找出相关的实物图参考,然后自己构思出想要的效果并画出草图。后期用PS慢慢细化,把想要的形状、颜色、质感、纹理等都表现出来即可。 最终效果 1、新建一个600*600画布。 2、来个白到灰的径向渐变。 3、椭圆工具画个300*300的圆。 4、直接选择工具选中这两个点。 5、右...
标签: PS PS基础
本教程主要使用Photoshop制作立体质感的播放器按钮,教程主要通过钢笔工具勾画形状,然后使用图层样式和渐变来完成立体效果和光感效果完成效果图,喜欢的朋友一起来学习吧,如果有什么不懂的地方可以下载PSD文件查看。 教程源文件: 立体质感的播放器按钮PSD源文件 先看看效果图 1.渐变背景 文件新建,尺寸为800X600像素,72分辨率的...
标签: PS PS基础
在PremiumPixels上看到N多可供下载的网页设计PSD文件,都非常精美。但它只提供了现成的文件,并没有提供教程,那么我就通过源文件自己摸索,向Orman Clark学习一下如何做出如此漂亮的作品。 先看看效果图 下面是教程开始 二、新建一个图层,选择圆角矩形工具(U),在工具属性栏中填入宽度360像素、高度30像素,半径为2个像素,画一个圆...
标签: PS PS教程
制作图标之前,有很多的工作要做,先找出相关的实物图参考,然后自己构思出想要的效果并画出草图。后期用PS慢慢细化,把想要的形状、颜色、质感、纹理等都表现出来即可。 最终效果 1、新建一个600*600画布。 2、来个白到灰的径向渐变。 3、椭圆工具画个300*300的圆。 4、直接选择工具选中这两个点。 5、右键,自由变换点,在箭头...

经验教程

50

收藏

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