PS绘制时尚迷你的网页播放器设计教学photoshop教程

PS绘制时尚迷你的网页播放器设计教学photoshop教程

PS绘制时尚迷你的网页播放器设计教学-photoshop教程

Photosho,教程,PS教程,PS

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

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

先看看处理后效果

PS绘制时尚迷你的网页播放器设计教学photoshop教程插图我的爱 · 创-WODEAI.NET|3D打印机创意智造

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

PS绘制时尚迷你的网页播放器设计教学photoshop教程插图1我的爱 · 创-WODEAI.NET|3D打印机创意智造

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

PS绘制时尚迷你的网页播放器设计教学photoshop教程插图2我的爱 · 创-WODEAI.NET|3D打印机创意智造

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

PS绘制时尚迷你的网页播放器设计教学photoshop教程插图3我的爱 · 创-WODEAI.NET|3D打印机创意智造

PS绘制时尚迷你的网页播放器设计教学photoshop教程插图4我的爱 · 创-WODEAI.NET|3D打印机创意智造

PS绘制时尚迷你的网页播放器设计教学photoshop教程插图5我的爱 · 创-WODEAI.NET|3D打印机创意智造

PS绘制时尚迷你的网页播放器设计教学photoshop教程插图6我的爱 · 创-WODEAI.NET|3D打印机创意智造

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

PS绘制时尚迷你的网页播放器设计教学photoshop教程插图7我的爱 · 创-WODEAI.NET|3D打印机创意智造

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

PS绘制时尚迷你的网页播放器设计教学photoshop教程插图8我的爱 · 创-WODEAI.NET|3D打印机创意智造

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

PS绘制时尚迷你的网页播放器设计教学photoshop教程插图9我的爱 · 创-WODEAI.NET|3D打印机创意智造

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

PS绘制时尚迷你的网页播放器设计教学photoshop教程插图10我的爱 · 创-WODEAI.NET|3D打印机创意智造

PS绘制时尚迷你的网页播放器设计教学photoshop教程插图11我的爱 · 创-WODEAI.NET|3D打印机创意智造

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

PS绘制时尚迷你的网页播放器设计教学photoshop教程插图12我的爱 · 创-WODEAI.NET|3D打印机创意智造

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

PS绘制时尚迷你的网页播放器设计教学photoshop教程插图13我的爱 · 创-WODEAI.NET|3D打印机创意智造

PS绘制时尚迷你的网页播放器设计教学photoshop教程插图14我的爱 · 创-WODEAI.NET|3D打印机创意智造

PS绘制时尚迷你的网页播放器设计教学photoshop教程插图15我的爱 · 创-WODEAI.NET|3D打印机创意智造

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

PS绘制时尚迷你的网页播放器设计教学photoshop教程插图16我的爱 · 创-WODEAI.NET|3D打印机创意智造

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

PS绘制时尚迷你的网页播放器设计教学photoshop教程插图17我的爱 · 创-WODEAI.NET|3D打印机创意智造

PS绘制时尚迷你的网页播放器设计教学photoshop教程插图18我的爱 · 创-WODEAI.NET|3D打印机创意智造

PS绘制时尚迷你的网页播放器设计教学photoshop教程插图19我的爱 · 创-WODEAI.NET|3D打印机创意智造

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

PS绘制时尚迷你的网页播放器设计教学photoshop教程插图20我的爱 · 创-WODEAI.NET|3D打印机创意智造

PS绘制时尚迷你的网页播放器设计教学photoshop教程插图21我的爱 · 创-WODEAI.NET|3D打印机创意智造

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

PS绘制时尚迷你的网页播放器设计教学photoshop教程插图22我的爱 · 创-WODEAI.NET|3D打印机创意智造

PS绘制时尚迷你的网页播放器设计教学photoshop教程插图23我的爱 · 创-WODEAI.NET|3D打印机创意智造

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

PS绘制时尚迷你的网页播放器设计教学photoshop教程插图24我的爱 · 创-WODEAI.NET|3D打印机创意智造

PS绘制时尚迷你的网页播放器设计教学photoshop教程插图25我的爱 · 创-WODEAI.NET|3D打印机创意智造

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

PS绘制时尚迷你的网页播放器设计教学photoshop教程插图26我的爱 · 创-WODEAI.NET|3D打印机创意智造

PS绘制时尚迷你的网页播放器设计教学photoshop教程插图27我的爱 · 创-WODEAI.NET|3D打印机创意智造

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

PS绘制时尚迷你的网页播放器设计教学photoshop教程插图28我的爱 · 创-WODEAI.NET|3D打印机创意智造

PS绘制时尚迷你的网页播放器设计教学photoshop教程插图29我的爱 · 创-WODEAI.NET|3D打印机创意智造

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

PS绘制时尚迷你的网页播放器设计教学photoshop教程插图30我的爱 · 创-WODEAI.NET|3D打印机创意智造

PS绘制时尚迷你的网页播放器设计教学photoshop教程插图31我的爱 · 创-WODEAI.NET|3D打印机创意智造

PS绘制时尚迷你的网页播放器设计教学photoshop教程插图32我的爱 · 创-WODEAI.NET|3D打印机创意智造

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

PS绘制时尚迷你的网页播放器设计教学photoshop教程插图我的爱 · 创-WODEAI.NET|3D打印机创意智造

常见问题
疑难问题可以发起提问
通过导航菜单中的,创客问答-问题发布,进行提问,让更多的朋友看到并回答你的问题。
分享模型或FDM用机技术
可以通过,创客问答-技术分享,发布你的模型或技术知识,获得更多朋友的支持和点赞。
造机工坊分享机器图纸与固件
想制作同款FDM打印机的朋友,可以通过这个栏目下载机器设计图纸,BOM表单,源码固件等等,自行安装3D打印机了。
分享知识内容不收费!!!
本站始于爱好,止于收费,本站下载内容都不收费,感谢您的访问!
原文链接:https://www.wodeai.net/634879.html,转载请注明出处。如有侵权请联系邮箱:lianzhi0000#163.com (#=@) 删除,谢谢!
0
分享海报

评论0

请先
没有账号?注册  忘记密码?

社交账号快速登录

微信扫一扫关注
如已关注,请回复“登录”二字获取验证码