PS设计教程网欢迎你!

Photoshop制作购物网站购买按钮

文章来源于 飞鱼的声纳,感谢作者 Wantfee 给我们带来经精彩的文章!
设计教程/PS教程/设计教程2010-11-11
本教程主要使用Photoshop设计一款购物网站的购买按钮,在网页的界面设计中,按钮的设计是我们最常遇到的问题,此类的设计不是很难,只要是通过图层样式来实现质感和立体感,加上颜色的搭配,西面就让我们来学习一个购物网站的按钮制作。

先看看效果图

Photoshop制作购物网站购买按钮

第一步

新建一个文档(Ctrl+N),命名为button,大小设置为640×480,其余选项留作默认。

Photoshop制作购物网站购买按钮

第二步

在图层面板中新建一个图层,选择圆角矩形工具(U),半径设置为80像素,画出一个矩形。

Photoshop制作购物网站购买按钮

Photoshop制作购物网站购买按钮

第三步

在图层面板中双击”layer 1″,打开图层样式对话框。勾选渐变叠加(Gradient Overlay),在渐变叠加面板上点击渐变色带,分别选择颜色#1a3a69和#2c62b2。

Photoshop制作购物网站购买按钮

勾选描边(Stroke),颜色#0b1b58,2个像素。

Photoshop制作购物网站购买按钮

接下来,添加投影(Drop Shadow),混合模式正常,不透明度14%,角度90度,距离5个像素,大小2个像素。

Photoshop制作购物网站购买按钮

最后得到的效果如下图。这样,通过添加图层样式,按钮的基本效果已经出来了。接下来我们开始添加锁型图案和文字。

Photoshop制作购物网站购买按钮

第四步

Photoshop制作购物网站购买按钮

将上图的锁型图片另存到你的电脑中,在Photoshop中打开,再拷贝粘贴到文档中,放大图片,选择橡皮工具,状态为方块(Block),将部分像素擦除,把锁上的锁变成打开的锁。

Photoshop制作购物网站购买按钮

版权所有PS设计教程网公安备案:苏公网安备 32058302001023号工信部备案:沪ICP备09005587号
aaa