用ps设计时尚进度条

看到一篇《css3时尚进度条的设计》的文章,很是喜欢,准备好好研究一下,不过本文我先用photoshop把它设计出来,大家一块分享,非常简单。css3时尚进度条

这个在ps里面实现比较简单,但想用css来实现,实在是非常的复杂,里面涉及到很多新样式的应用,希望在下节中可以好好和大家一块学习。

1、定义图案,设置背景

我先用铅笔画了背景和图案,大小为10px*10px,颜色值分别为:#232323和#2e2e2e。然后编辑->定义图案:

填充背景色为:#282828,选择图层面板下面的操作按钮,进行图案填充,选择你刚自定义的图案,其它为默认值。效果如下:

2、设计进度条的背景

新建图层使用圆角矩形工具,设置半径为5px,画出进度条的背景,颜色填充为#1a1a1a;并为它添加样式:

3、设计第一个蓝色进度条

新建图层,使用圆角矩形工具,设置半径为2px,画出进度条的背景,颜色填充为#52cbe7;并为它添加样式:

新建图层,画一宽8px,高度要比进度条的高度稍高,颜色值为#34c2e3,变形工具,角度旋转-45度,复制平移,依次重复。如下图:

4、橙色进度条

橙色进度条和蓝色做法相同,图层样式上加内阴影和橙色渐变。内阴影如上,橙色渐变颜色值为#fdcd26、#fd961a。

5、绿色进度条

绿色进度条颜色值为#74c12b,加上内发光,颜色值自行调节。下面是俺做的最终效果图,大家跟上面的对比一下吧。

我说:俺是最草根的设计师,设计东西时思路也是乱乱的,大家总凑合着看吧,有问题您说话。

马上分享给你的朋友吧~

用ps设计时尚进度条》上有 3 条评论

  1. 第一步的图案填充还是不懂啊。。。我填充出来就是白低的小折线
    抱歉,我ps菜鸟。。

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>