PS派教程网 - PS教程 | Photoshop教程 | 数码暗房

PS制作经典网页按钮

时间:2013-01-14 01:18来源:未知 作者:PS314 点击: 关键词:网页按钮,圆角矩形,图层样式
这篇PS教程,将利用Photoshop的圆角矩形工具和图层样式功能,制作一个经典的网页按钮。可以用来装饰您的网站博客或者淘宝页面等。

 

效果图

 
PS经典网页按钮_效果图
 

第 1 步 - 新建文档

运行 Photoshop ,新建一个文档:
名称:经典网页按钮;
宽度:240像素;
高度:80像素;
分辨率:72像素/英寸;
颜色模式:RGB颜色,8位;
背景内容:透明。
 
PS经典网页按钮_新建文档
 

第 2 步 - 建立参考线

为了让制作的图片更加准确,我们需要在文件的周围建立4条参考线。
通过 视图 -> 新建参考线 命令,分别在
垂直 0px,240px;
水平 0px,80px;
建立4条参考线。
 
PS经典网页按钮_建立参考线
 

第 3 步 - 绘制按钮

在Photoshop左侧的工具箱中右键单击矩形工具,然后在弹出的菜单列表中选择 圆角矩形工具。
然后到Photoshop顶部的工具选项栏中设置圆角矩形工具的选项:
 
形状图层;
半径 20px;
颜色是 R:255 G:51 B:102;
 
PS经典网页按钮_圆角矩形
 
然后在画布上由左上角到右下角绘制一个圆角矩形,由于之前添加了参考线,会自动对齐。
注:如果没有对齐,请选中 视图 -> 对齐到 -> 参考线
 
得到 “形状 1”图层。
 
PS经典网页按钮_圆角矩形
 

第 4 步 - 添加图层样式

在图层面板上右击“形状 1”图层,在弹出的菜单列表中选择 混合选项,此时Photoshop会自动弹出图层样式对话框。
 
PS经典网页按钮_混合选项
 
在左侧选中“内阴影”,设置他的属性:
混合模式 -> 正片叠底
* 颜色为 R:102 G:0 B:0
不透明度 -> 75%
* 角度 -> 90度 
* 不选中 使用全局光
* 距离 -> 6像素
* 阻塞 -> 15%
* 大小 -> 16像素
 
等高线 -> 线性
不选中 消除锯齿
杂色 -> 0%
 
PS经典网页按钮_图层样式_内阴影
 
在左侧选中“斜面和浮雕”,设置他的属性:
样式 -> 内斜面
方法 -> 平滑
* 深度 -> 81%
方向 -> 上
* 大小 -> 9像素
* 软化 -> 4像素
 
角度 -> 90度
√使用全局光
高度 -> 74度
光泽等高线 -> 线性
不选中 消除锯齿
高光模式 -> 滤色 白色(#FFFFFF)
不透明度 -> 75%
阴影模式 -> 正片叠底 黑色 (#000000)
不透明度 -> 75%
 
PS经典网页按钮_图层样式_斜面和浮雕
 
单击确定,保存图层样式。
 
PS经典网页按钮_图层样式
 

第 5 步 - 保存

执行 文件 -> 存储为 Web 和设备所用格式,选择合适的存储格式。
由于背景是透明的,需要选择GIF或者PNG格式,单击存储,保存。
 
PS经典网页按钮_保存
 
注:如果想改变颜色,可以在图层面板上双击“形状 1”图层,修改颜色。
再打开图层样式按钮,修改“内阴影”的颜色。
 
PS经典网页按钮_效果图
 
 

责任编辑:PS314

顶一下
(7)
100%
踩一下
(0)
0%
------分隔线----------------------------
1.59K

搜索

高级