|
| |
 精品推荐 |
 |
|
| |
|
|
|
|
用Photoshop制作网页常用小巧按钮(上)
|
日期：2003年7月28日 作者：清风网络学院 查看:[大字体
中字体 小字体]
|
虽然越来越多的人开始使用宽带，速度已经不象早些年那样限制着网络，但近年来的网页却没有越来越繁杂，正相反，以简约为风尚的网页设计正悄悄流行在网络世界中。这种风格不但节约了带宽，更重要的是，大多数人更喜欢在清新的环境中寻找他们所需的信息，简单精巧的设计，使获取信息变得更加方便快捷。今天，我们就来设计几款最常用的网页小巧按钮。
第一款：像素按纽
这是目前最为流行的一种按纽，在每个以像素为主题的网站上几乎都能看到它的身影。想要最大程度的减小网页大小，这种按纽可是不二法门。这种按纽简单大方，除了个性化的网站之外，用于公司网页也非常合适。
新建一个Photoshop文档，RGB模式，白色背景。
新建一层，复位色板，将前景色设为一种浅灰色，如例子中的RGB（239，239，239），用矩形选框工具选择一个小矩形，大概为40×11像素大小（可以参考信息面板，或者直接在矩形选框的工具选项中设定好矩形的固定大小，然后在画布上点击即可），填充前景色后取消选择。
下面我们来制作按纽的立体效果。这里，我们完全用添加图层样式的方法，双击图层，打开图层样式对话框，我们来依次添加：
首先选择斜面和浮雕样式，设置结构为内斜面，方法为平滑，深度为1％，方向在上，大小和软化均为2像素，阴影角度为146度，使用全局光，高度为30度，光泽保持默认，高光和暗调的混合模式与颜色都不变，不过不透明度分别设为100％和43％；
其次是内阴影模式，模式为正常，颜色为白色，不透明度为100％，角度为146度，使用全局光，距离为1像素，阻塞为100％，大小为0，品质不变；
接下来是描边，将描边大小设为1像素，位置在外部，混合模式为正常，不透明度为100％，填充类型为颜色，描边颜色设为黑色；
最后是投影样式，将阴影颜色设为黑色，不透明度为22％，角度为120度，取消全局光，距离为3像素，扩展为0，大小为0，品质保持默认不变。
好了，现在你可以选择细一些的字体，最好是专门的像素字体，在按纽上写上文字。在设置文字选项的时候，有一项需要特别注意，那就是要将文字消除锯齿的方式设为无，否则字体会出现模糊。整个制作过程如图01所示。
图01
如果觉得灰色太单调，你也可以为按纽添加各种颜色，过程和前面的大致相同，但有些地方有些细微差别。
在新建图层、设置选区后，设置你的前景色，如这里我们将前景色设为RGB（106，175，5），填充选区后取消选择。然后开始设定图层样式。在斜面和浮雕样式中，将深度设为100％，大小和软化为1像素，注意要将阴影的高光模式设为颜色减淡，不透明度为65％，暗调的不透明度也要减低一些；和刚才不同，我们取消了内阴影样式，在描边样式中，将描边颜色设为一种较深的灰色，如RGB（132，132，132），当然，你也可以用黑色描边；对于投影样式，由于按纽本身的颜色较深，相对的，我们可以将阴影的不透明度设的稍微高一些，40％即可。最后，写上文字。（图02）
图02
你还可以将这两种按纽结合起来，作为鼠标翻转动画来装饰你的网页。
第二款：渐变按纽
相对于第一款按纽来说，接下来我们要介绍的这种类型的按纽实用性更强，而且颜色也更丰富。你在许多网站上都会看到它。
首先，仍是新建RGB模式的Photoshop文档，白色背景。
这次我们用矢量工具来处理选区。选择圆角矩形工具，绘图方式为填充像素，将工具选项中的圆角半径设为3像素，复位色板，用黑色在画布上绘制一个圆角矩形。（图03）
图03
这里，我们用黑色绘制圆角矩形，是为了能看清按纽形状，但这个按纽本身是需要用白色填充的，所以，一旦你对圆角矩形的形状满意之后，按Ctrl+Shift+Delete，用白色填充图层中的不透明区域。
双击图层，进入图层样式，先选择渐变叠加样式，混合模式为正常，不透明度为56％，渐变样式为线性，渐变从黑色到白色，选择与图层对齐，角度为90度，缩放为150％，如图04所示；
图04
接下来，我们为按纽添加立体感，选择斜面和浮雕样式，在样式中选择内斜面，方法为平滑，深度为1％，方向为上，大小为1像素，软化为0像素，阴影的角度为120度，使用全局光，高度为30度，保持高光和暗调的默认混合模式及颜色不变，高光的不透明度为75％，暗调为36％；（图05）
图05
现在，我们来为按纽添加颜色，选择颜色叠加样式，将混合模式设为颜色，设置叠加颜色为RGB（91，145，191），不透明度为100％，如图06所示；
上一篇:Windows Media Player同步“秀”歌词全攻略
下一篇:教你发免费传真
|
| 用Photoshop制作网页常用小巧按钮(上) 相关文章： |
|
|
|
| 用Photoshop制作网页常用小巧按钮(上) 相关软件： |
|
| |
|
