用Photoshop设计时尚进度条

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

这个在ps里面实现比较简单,但想用css来实现,实在是非常的复杂,里面涉及到很多新样式的应用,希望在下节中可以好好和大家一块学习。
1、定义图案,设置背景
我先用铅笔画了背景和图案,大小为10px*10px,颜色值分别为:#232323和#2e2e2e。然后编辑->定义图案:
填充背景色为:#282828,选择图层面板下面的操作按钮,进行图案填充,选择你刚自定义的图案,其它为默认值。效果如下:

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


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

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

4、橙色进度条
橙色进度条和蓝色做法相同,图层样式上加内阴影和橙色渐变。内阴影如上,橙色渐变颜色值为#fdcd26、#fd961a。
5、绿色进度条
绿色进度条颜色值为#74c12b,加上内发光,颜色值自行调节。下面是俺做的最终效果图,大家跟上面的对比一下吧。
文章附属文件

文件名称: 20180105115232522392.png

文件大小:5.7 KB

文件签名:EE5B295D7ADC61A86F375A0D56494DC3B3277A63

文件名称: 20180105115233415367.gif

文件大小:67 B

文件签名:41E1266EC4F4A6C81C0E04D4E57E1B7182F815A3

文件名称: 20180105115233037845.png

文件大小:648 B

文件签名:6AA59693A5D6FC48ABB2854AD48AA57721E289BB

文件名称: 20180105115233902755.jpg

文件大小:47.59 KB

文件签名:D7DE2C160CFAFD276C70EF8EAA6C00543905D398

文件名称: 20180105115233692325.jpg

文件大小:35.29 KB

文件签名:9380D418B7BA6527A139EBDECDC28953A45BDA04

文件名称: 20180105115233403559.jpg

文件大小:28.59 KB

文件签名:2C48945424E044FEA7098C990A5665090D1C047A

文件名称: 20180105115233957159.jpg

文件大小:10.44 KB

文件签名:A2D1E96DFD8E847ABF0FBB2B51A2310E1FC2826D

文件名称: 20180105115234318458.jpg

文件大小:7.46 KB

文件签名:6C09F3344D701BF44FCEF0FA5CC7BEDC96C37EC4

评论列表

此文章还没有评论。