当前位置: 首页 > 图文教程 > 平面设计 > Photoshop > Photoshop制作网页水晶按钮教程

Photoshop
Photoshop绘制优秀的专业的网站首页布局
Photoshop轻松给雕塑创建炫光效果
Photoshop绘制俏皮可爱的Twitter图标
Photoshop简便快捷的方式绘制逼真的月亮
Photoshop文字特效:打造溶液字母
Photoshop简单绘制蓝色水晶网页按钮
Pototshop绘制逼真的漂亮的苹果 Ipad
Photoshop制作web2.0商业网站首页模板
Photoshop绘制简洁优雅的WordPress主题
Photoshop绘制整洁简约风格的WordPress网页模板
Photoshop调色教程:金黄色调的风景照片
PS签名教程:淡淡的水墨画背景古典人物
Photoshop绘制金属质感的卡通钥匙
Photoshop文字特效:反光镀铬塑料文字
Photoshop文字特效:快速制作果冻文字
Photoshop教程:柯达磨皮滤镜润色磨皮
Photoshop教程:唯美冷色调婚纱照片
Photoshop鼠绘教程:《枪兵》草图绘画
Photoshop教程:超炫的另类激光电流
Photoshop风景照片调色:色彩斑斓的花朵

Photoshop制作网页水晶按钮教程


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-16   浏览: 236 ::
收藏到网摘: n/a

相关Photoshop网页按钮教程文章:Photoshop教程:简单制作光感网页按钮
本Photoshop教程介绍网页常用水晶按钮的制作方法,思路:制作方法跟平时做的水晶按钮一样,需要注意光感及细节的调节,颜色及背景可以按照自己的喜好选用。
最终效果

1.新建一个500 * 300像素的文件,背景填充颜色:#827E22。
2.选择圆角矩形工具,半径设置为25,前景颜色设置为白色,绘制图1所示的圆角矩形,然后删格化图层。

<图1>


3.把圆角矩形复制一份,回到原圆角矩形这层,双击图层调出图层样式,选择描边数值为6,颜色为白色如图2,确定后新建一个空白图层,把描边后的图层与空白图层合并,再双击图层调出图层样式,参数设置如图3,效果如图4。

<图2>

<图3>

<图4>


4.回到圆角矩形副本层,双击图层调出图层样式,参数设置如图5,6。确定后选择椭圆选框工具在圆角矩形的左边绘制一个正圆,然后按Delete删除,效果如图7。

<图5>

<图6>

<图7>


5.如图8所示锁定图层。

<图8>
6.选择矩形选框工具把圆角矩形的下半部分框选,再选择渐变工具颜色设置如图9,然后在绘制图10所示的线性渐变。拉好渐变后不要取消选区,按Ctrl   Shift   I反选,

<图9>

<图10>


7.选择渐变工具颜色设置如图11,然后在绘制图12所示的线性渐变。总体效果如图13。

<图11>

<图12>

<图13>
8.调出圆角矩形的选区,新建一个图层填充颜色:#C5B564,选择橡皮工具,只保留由边一小部分,其它的地方都擦锄,效果如图14。

<图14>


9.调出圆角矩形的选区,新建一个图层填充白色,然后把选区向下移动3个像素,如图15,然后按按Delete删除,适当的调整透明度.最后打上文字完成最终效果。

<图15>

<图16>