Google
      
发新话题
打印

[网页] 用Photoshop制作Vista风格图标

本主题由 ┆死┆ 于 2007-12-23 07:43 设置高亮

用Photoshop制作Vista风格图标

最终效果图如下:

  步骤如下:

  1、新建一个图像文档(快捷键Ctrl + N),背景色为#2a2a2a,宽度和高度依自己需要而定
' M+ a$ M9 G- ^1 Q

图1:新建一个暗色的图像文档

  2、从工具栏选择圆角矩形工具(快捷键U),在选项栏设置其半径为5像素,颜色为黑色,绘制类似如下形状的图形:! [- {7 Z% i* ]

5 i* G# @: i) X% f" b+ A
  
+ P; Y1 J  u; W3 z. h1 z2 N7 B. z" u+ }/ A

图2:绘制一个圆角的矩形形状8 @1 B+ A3 L% H1 O" v7 G
3、将“形状1”图层重命名为“按钮背景”,在空白处双击,打开图层样式对话框给图层应用“外发光”、“内发光”、“渐变叠加”、“描边”等样式具体设置如图所示:

  (1) “外发光”图层样式参数设置:
3 L2 K% J: o. O' m( t' x2 @# {

图3:“外发光”图层样式参数设置

  (2)“内发光”图层样式参数设置:# `  ?: \+ x! l$ Q

图4:“内发光”图层样式参数设置

  (3)“渐变叠加”图层样式参数设置:
& ]2 l. j/ h# @5 f

图5:“渐变叠加”图层样式参数设置

  其中渐变色三处色标的颜色分别是:#148791 #000f1b #000f1b,如图所示:* s+ E+ _& {7 l# n

图6:编辑“渐变”色彩+ M9 q1 L+ f/ h* i. e
(4)“描边”图层样式参数设置:

图7:“描边”图层样式参数设置

  应用如上图层样式后,我们将得到如下效果:
  s, W* b4 d- L' i4 l+ D

图8:应用图层样式后的效果

6 o% E/ l$ y) B  \5 x
  7 E3 L7 _& V  S$ \/ Y

/ B% P2 O% w1 H

  4、新建一个图层,并命名为“光泽”从工具栏中选择“矩形选框工具”(快捷键M),绘制如下所示的选区

图9:使用矩形选框工具绘制选区

  5、现在我们要得到按钮部分的选区按住Shift + Ctrl + Alt键不放,用鼠标点击“按钮背景”图层的“图层缩览图”图标,即得到按钮部分的选区

图10:按住Shift + Ctrl + Alt键,点击图中红色圈住的图标

$ z' \9 X7 w" R7 N( f3 E8 R
  % B9 b, P- m2 v4 d6 b2 k. v
2 G7 U! f* l# i& C

图11:得到按钮部分的选区
; \' J, q4 Z. u/ N, S2 j* S$ y6、从菜单中选择“选择 -> 修改 -> 收缩”,收缩量设置为1像素,将选区缩小1像素

图12:将选区缩小1像素

  7、点击选择“光泽”图层,使用白色 #ffffff 填充选区,Ctrl + D 取消选区在图层面板上,将不透明度降低为20%这样,一款漂亮的质感按钮就制作完成了
, t. X/ @- V* W- o" U

图13:使用白色填充选区,将图层不透明度降低为20%

  8、最后在按钮上输入所需要的文字即可注意使文字图层位于“光泽”图层之下,并且根据需要,适当调整文字图层的不透明度最终效果图如下:8 r+ ?. Y0 J! l6 {+ L" k" L' S


中级会员可以在这里用文字签名,高级会员可以在这里用图片签名.

TOP

发新话题