网页常用小按钮一
虽然越来越多的人开始使用宽带,速度已经不象早些年那样限制着网络,但近年来的网页却没有越来越繁杂,正相反,以简约为风尚的网页设计正悄悄流行在网络世界中。这种风格不但节约了带宽,更重要的是,大多数人更喜欢在清新的环境中寻找他们所需的信息,简单精巧的设计,使获取信息变得更加方便快捷。今天,我们就来设计几款最常用的网页小巧按钮。
* B6 C! U3 m% Z8 J/ u' F8 c 第一款:像素按钮
4 h! ]5 E3 S9 e( L 这是目前最为流行的一种按钮,在每个以像素为主题的网站上几乎都能看到它的身影。想要最大程度的减小网页大小,这种按钮可是不二法门。这种按钮简单大方,除了个性化的网站之外,用于公司网页也非常合适。
: n7 r9 Z, H2 P! f) ` 新建一个Photoshop文档,RGB模式,白色背景。
# x% c1 w; t0 R# F R. W
新建一层,复位色板,将前景色设为一种浅灰色,如例子中的RGB(239,239,239),用矩形选框工具选择一个小矩形,填充前景色后取消选择。
) n+ i. E3 H7 p& [4 B+ D 下面我们来制作按钮的立体效果。这里,我们完全用添加图层样式的方法,双击图层,打开图层样式对话框,我们来依次添加:
) b; M& e. A# }
首先选择斜面和浮雕样式,设置结构为内斜面,方法为平滑,深度为1%,方向在上,大小和软化均为2像素,阴影角度为146度,使用全局光,高度为30度,光泽保持默认,高光和暗调的混合模式与颜色都不变,不过不透明度分别设为100%和43%;
% D3 s* r/ a* k, z( S
其次是内阴影模式,模式为正常,颜色为白色,不透明度为100%,角度为146度,使用全局光,距离为1像素,阻塞为100%,大小为0,品质不变;
* N" ~% y4 G0 o( P m- O9 W4 E" `/ ^
接下来是描边,将描边大小设为1像素,位置在外部,混合模式为正常,不透明度为100%,填充类型为颜色,描边颜色设为黑色;
# _2 `: o$ F: G9 l7 w" R/ T
最后是投影样式,将阴影颜色设为黑色,不透明度为22%,角度为120度,取消全局光,距离为3像素,扩展为0,大小为0,品质保持默认不变。
# K" I0 @0 i! I7 h& R% ^$ W
好了,现在你可以选择细一些的字体,最好是专门的像素字体,在按钮上写上文字。在设置文字选项的时候,有一项需要特别注意,那就是要将文字消除锯齿的方式设为无,否则字体会出现模糊。整个制作过程如图1所示。
- A2 |3 F( I+ l8 [! b4 A9 i