快速业务通道

Photoshop鼠绘教程:精致的网页音频播放器

作者 佚名技术 来源 平面设计 浏览 发布时间 2012-05-28

audio-player.jpg

在PremiumPixels上看到N多可供下载的网页设计PSD文件,都非常精美。但它只提供了现成的文件,并没有提供教程,那么我就通过源文件自己摸索,向Orman Clark学习一下如何做出如此漂亮的作品。以下是个人摸索的具体步骤:

一、新建一个735像素宽、350像素高的文档。新建一个图层,填充为#eaecee(浅灰色),在图层面板中选中此图层,点击鼠标右键,选择”转换为智能物件”(Convert to Smart Object)命令,将图层转换为智能物件的好处是你可以随时修改应用于图层之上的滤镜参数,而不用由于不满意结果而一遍一遍的重来。之后,选择滤镜>杂色>添加杂色(Filter>Noise>Add Noise)命令给此图层添加一些杂色,参数设置如下图。将此图层重命名为”bg”。

add-noise.jpg

二、新建一个图层,选择圆角矩形工具(U),在工具属性栏中填入宽度360像素、高度30像素,半径为2个像素,画一个圆角矩形。将图层命名为”base”。双击图层面板中的形状图层图层缩略图,将矩形的颜色更改为#3a3c3d。

base-width-height.jpg

base-radius.jpg

在图层面板中双击此图层,这样会打开图层样式窗口,给图层应用如下图所示的图层样式。这里需要说明的是,投影效果在网页设计中一般应用一点点就可以了,就像这里作者所应用的那样,距离和大小都只有1个像素而已,透明度只有50%,而效果太夸张的话会显得不够精致。而添加图层混合模式为”叠加”(overlay)的渐变叠加会让本来只是单一颜色的矩形有了颜色上的细微变化,增加了设计上的趣味性。

base-drop-shadow.jpg

base-gradient.jpg

最终效果如下图:

base-final.jpg

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号