最新消息:本站所有跳转向bbs.ykit.cn的附件将全面停止,附件已转移到https://www.qingsj.com

用Photoshop设计时尚进度条

网页相关 有客 1970浏览 0评论

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

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

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


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

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

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

 

本文转载自《快乐飞扬博客》http://www.klfy.net/detail/393.shtml

转载请注明:有客帮 » 用Photoshop设计时尚进度条

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址