水晶＋金属的进度条

网站地址在此：

http://www.iconsound.com/

图片效果如下：

是LOADING的界面，我觉得很漂亮，而且很容易实现，用到的图层样式不复杂。
我仿照这个样子，先试着做了一个，大家一起扩展扩展吧


现在开始：
先准备素材-----两种斜线背景。
操作：新建2个文件：一个是3px*3px,一个是6px*6px.
选择铅笔工具（笔头为1PX），在两个文件中分别从左下到右上点出一条斜线（前背景色均为默认）。
效果如图后，分别保存为PATTON（edit>define patton），名字随意拉，我起的是scanline1和scanline2。OK，到此，素材准备完毕，进入下一步。

下面开始第2步
文件尺寸随意，我用的是500px*120px。大家可以用自己觉得合适的尺寸。背景色人家用的挺好看，我就挪过来拉

，颜色值#242D36。
然后就是给各部分起名字以方便区分，如图示：

最低层的那条我起名bar1,半圆形拱起的那条为bar2，半透明显示进度的那条为bar3,下方的那一整块为bar4。
下面开始第3步（妈呀，总算正式进入主题）
在背景层上新建一层，命名为bar1。
然后用“框选”工具框出一个长方形，尺寸随意，我用的是300px*55px.然后随便填个颜色（我的一个毛病，主要是怕待会找不找这个层的内容

）。然后双击图层，进入图层样式编辑：设置如下各图：



然后再新建一层，命名为scanline2。
按ctrl+"点击图层bar1“调出长方形的选区，在 scanline2这层填充patton（edit>fill>patton），选择刚才做好的素材scanline2。填充好后，效果是黑压压的好难看，于是改变图层混合模式为overlay，不透明度为10%。具体数字随意，怎么好看怎么来哈。OK，到此，BAR1图层的效果做万了，不过家务做完了都好要收拾好工具呢，咱们也得这么办：把 bar1和scanline2图层链接好，然后到图层浮动工具面板上点击小箭头，弹出菜单中选择”New set from linked“，把这两个图层放一个命名为bar1的图层组中。
此时的效果如图：


补充：sorry,我素材没建好，在scanline2这层，等填充好后，还得反色（ctrl+I），不然看到的是黑色的线不是白色的线


下面开始第4步：做bar2
bar2这层比较快，一个图层就搞定了。
操作：在bar1图层组上面再新建一层，命名为bar2。
然后框选随意大小的一个选区，我用的尺寸是240px*24px。
双击bar2图层，进入图层样式编辑，设置如下各图：




图层样式编辑完后，点选背景层，再点击bar2层前面的”链接“图标（顺序不能搞反，不然就成了以 bar2为参照，对齐这两个层了），分别在横、纵方向对齐两个图层。
这一层的效果如下图：


下面开始第5步：做半透明进度条 bar3
新建一层，命名为 bar3。
框选出随意尺寸的长方形，我用的是210px*15px。
对齐其他的图层。
双击建立图层样式如下各图：



效果如下图：

然后再新建一层，命名为bar3_color
调出bar3的选区，然后填充你喜欢的颜色，我用的是#FFA306，然后模仿原图，在这个层建一个蒙板，把右半边的颜色条用黑色涂掉。
再把这个层的图层混合模式改为multiplay。

因为我想再多些颜色风格，就打算再建个调整图层。
按住alt，鼠标点击图层浮动面板上的”creat new fill or adjustment layer“按钮,选择”hue/saturation"命令，在弹出的面板中，在“Group with previous layer"命令前打勾，因为想让它只影响前面那个颜色层。
在hue/saturaion面板中，选中colorize,然后调整出你喜欢的其他颜色。
我的这个颜色的hue/saturaion设置如下图：

现在我们看到，这个颜色条感觉很平，和它所属的那整条进度条的立体风格不太协调，于是我打算给颜色填充层bar3_color也建立图层样式。设置如下：


有了这一点点阴影，我感觉真实了点（千万表告诉我我是自我感觉良好

）
OK，然后还是老生常谈，把bar3,bar3_color，和调整图层都合到名字为bar3的图层组里。
效果如下图：


下面开始第6步：做bar4
这个bar4图层组包含4个层，从下到上依次是最下边的白色底层，斜线层，文字所在的方块层，文字层。分别命名为bar4_bg,bar4_scanline,bar4_bar,bar_text
先做bar4_bg
新建一层，框选出一个长方形，图层样式设置如下各图：



再做bar4_scanline
再新建一层，做出一个比bar4_bg稍小的选区，然后这个层的图层样式设置如下：


图层样式做完后，再对这个层的选区部分做渐变效果，从上向下做如图渐变：

再做bar4_bar
新建一层，图层样式设置如下各图：




再做bar4_text
新建一层，选你喜欢的字体（我用的arial），打黑色字，然后再复制一层，把下面那层的颜色改为白色，向下移动1px，OK拉~效果满意后，这两个文字层合为一层，名字为bar_text
bar4图层组各部分做完后，合在一个名为bar4的图层组里。然后把这个图层组放到bar2图层的下面。
全部做完后，记得要把该对齐的图层都要对齐。
最终效果如下：


all over

我强烈支持你！

hao  

支持小Y,谢谢分享

谢谢分享

谢谢小y
但为什么我看不到那些图片

图片看不能啊

是国外的空间的吧？

你发的演试站也不能打开看了。。。

打不开了，唉~~~~