设计金属质感的进度条实例_网页logo教程

基督山伯爵 发表于 2015-6-9 16:56:06

设计金属质感的进度条实例

今天带同学们来绘制一个金属质感的进度条，重点依然是图层样式的练习，喜欢的跟着教程一起练习一下。做完记得交作业。

PSD参考文件：http://vdisk.weibo.com/lc/2uZbBupjANLPR5E6Ql 密码：UPJW最终效果：
http://pic.16xx8.com/allimg/150606/1J020N02-0.jpg
提示：教程详细步骤在二楼！想下载该教程的可以到这里下载:点击进入下载页教程编号:138071 作者：P大点S 出处：贴吧

基督山伯爵 发表于 2015-6-9 16:56:06

新建文档，这里我们用的依旧是800*800像素，我们为背景图层添加一个图层样式。
http://pic.16xx8.com/allimg/150606/1J0202108-1.jpg

http://pic.16xx8.com/allimg/150606/1J020G14-2.jpg
设置完图层样式，我们得到如下效果：
http://pic.16xx8.com/allimg/150606/1J0201O7-3.jpg

基督山伯爵 发表于 2015-6-9 16:56:06

下面，我们为背景图层添加一个杂色。执行“滤镜—杂色—添加杂色”，设置数量为“1%”，高斯分布，勾选单色。
http://pic.16xx8.com/allimg/150606/1J0202N7-4.jpg

基督山伯爵 发表于 2015-6-9 16:56:06

执行“滤镜—滤镜库—画笔描边—喷溅”，设置喷色半径为6，平滑度为5
http://pic.16xx8.com/allimg/150606/1J0205323-5.jpg

基督山伯爵 发表于 2015-6-9 16:56:06

现在，我们完成了背景的创建，效果如下。
http://pic.16xx8.com/allimg/150606/1J020D07-6.jpg

基督山伯爵 发表于 2015-6-9 16:56:06

下面，我们开始进度条的绘制。用圆角矩形工具，画一个620*45像素的圆角矩形。
http://pic.16xx8.com/allimg/150606/1J0202E6-7.jpg

基督山伯爵 发表于 2015-6-9 16:56:06

将其命名为“外形”，为其添加一个图层样式。
http://pic.16xx8.com/allimg/150606/1J0206045-8.jpg

http://pic.16xx8.com/allimg/150606/1J0205563-9.jpg

http://pic.16xx8.com/allimg/150606/1J0204011-10.jpg

http://pic.16xx8.com/allimg/150606/1J02012S-11.jpg

基督山伯爵 发表于 2015-6-9 16:56:06

设置完图层样式，我们将得到如下效果。
http://pic.16xx8.com/allimg/150606/1J0201635-12.jpg

基督山伯爵 发表于 2015-6-9 16:56:06

现在轮廓外形已基本呈现，但是质感略嫌不足，我们来改进一下。复制一层“外形”图层，将其更改名为“轮廓投影”，并将其置于“外形”图层下层，清除其图层样式，将填充更改为0，重新设置一个图层样式，设置如下：
http://pic.16xx8.com/allimg/150606/1J0203308-13.jpg

http://pic.16xx8.com/allimg/150606/1J0201337-14.jpg
现在我们得到如下效果。
http://pic.16xx8.com/allimg/150606/1J020Jb-15.jpg

基督山伯爵 发表于 2015-6-9 16:56:06

用圆角矩形工具画一个500*30像素的圆角矩形。
http://pic.16xx8.com/allimg/150606/1J020K96-16.jpg

基督山伯爵 发表于 2015-6-9 16:56:06

为这个白色的圆角矩形设置一个图层样式。
http://pic.16xx8.com/allimg/150606/1J0205D4-17.jpg

http://pic.16xx8.com/allimg/150606/1J0203Y3-18.jpg

http://pic.16xx8.com/allimg/150606/1J020H57-19.jpg

http://pic.16xx8.com/allimg/150606/1J0202552-20.jpg

http://pic.16xx8.com/allimg/150606/1J0205632-21.jpg
现在我们得到如下效果：
http://pic.16xx8.com/allimg/150606/1J0205444-22.jpg

基督山伯爵 发表于 2015-6-9 16:56:06

下面，我们添加一个按纽，用椭圆工具画一个60*60像素的圆。
http://pic.16xx8.com/allimg/150606/1J0204533-23.jpg

基督山伯爵 发表于 2015-6-9 16:56:06

为其添加一个图层样式。
http://pic.16xx8.com/allimg/150606/1J0203016-24.jpg

http://pic.16xx8.com/allimg/150606/1J0202241-25.jpg

http://pic.16xx8.com/allimg/150606/1J0203G5-26.jpg

http://pic.16xx8.com/allimg/150606/1J020JL-27.jpg
到这里，进度条就算搞定了。
http://pic.16xx8.com/allimg/150606/1J0205136-28.jpg

基督山伯爵 发表于 2015-6-9 16:56:06