Photoshop设计一款购物网站的购买按钮

作者:佚名 出处:飞鱼的声纳 作者:Wantfee 本教程主要使用Photoshop设计一款购物网站的购买按钮,在网页的界面设计中,按钮的设计是我们最常遇到的问题,此类的设计不是很难,只要是通过图层样式来实现质感和立体感,加上颜色的搭配,西面就让我们来学习一个购物网站的按钮制

ps cs6做简单的播放按钮

简单凹下按钮的制作,适合新手学习


作者:佚名   出处:飞鱼的声纳 作者:Wantfee 本教程主要使用Photoshop设计一款购物网站购买按钮,在网页的界面设计中,按钮的设计是我们最常遇到的问题,此类的设计不是很难,只要是通过图层样式来实现质感和立体感,加上颜色的搭配,西面就让我们来学习一个购物网站的按钮制作。

先看看效果图

Photoshop设计一款购物网站的购买按钮插图

第一步

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

Photoshop设计一款购物网站的购买按钮插图(1)

第二步

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

Photoshop设计一款购物网站的购买按钮插图(2)

Photoshop设计一款购物网站的购买按钮插图(3)

第三步

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

Photoshop设计一款购物网站的购买按钮插图(4)

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

Photoshop设计一款购物网站的购买按钮插图(5)

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

Photoshop设计一款购物网站的购买按钮插图(6)

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

Photoshop设计一款购物网站的购买按钮插图(7)


第四步

Photoshop设计一款购物网站的购买按钮插图(8)

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

Photoshop设计一款购物网站的购买按钮插图(9)

选择锁子图层,使用自由变换命令(Ctrl+T),同时按住Shift键,调整锁子大小,直到合适。调整图片位置到按钮的居中位置。在图层面板中双击锁子图层,打开图层样式对话框,应用如下图层样式:

Photoshop设计一款购物网站的购买按钮插图(10)

Photoshop设计一款购物网站的购买按钮插图(11)

使用文字工具(T),键出”Buy It”文字,字体选择”Arial”,加粗,颜色#E3F7FF,双击文字图层,添加如下投影效果:

Photoshop设计一款购物网站的购买按钮插图(12)

最终效果如下图:

Photoshop设计一款购物网站的购买按钮插图(13)

第五步

添加价格标签。新建图层,使用钢笔工具画一个标签形状。你可以同时按住shift键来确保路径横平竖直。之后使用直接选择工具(A),配合上下左右方向箭头将路径形状调整到合适。在路径上点击右键选择填充路径(Fill Path),给路径填充前景色,再选择删除路径(Delete Path)命令,将路径删除掉,这时候留在图层上的就只有一个标签形状了(如下图)。

Photoshop设计一款购物网站的购买按钮插图(14)

选择椭圆形选取工具(M),样式选择固定大小,宽度7个像素,高度7个像素,在标签上做一个圆形的选区。调整选区的位置至标签的正中间,点击删除键(Delete),将圆形部分的像素删除,这样,标签上的孔洞就打好了。

Photoshop设计一款购物网站的购买按钮插图(15)


接下来给标签图层应用如下图层样式:

Photoshop设计一款购物网站的购买按钮插图(16)

Photoshop设计一款购物网站的购买按钮插图(17)

Photoshop设计一款购物网站的购买按钮插图(18)

添加文字,颜色白色,字体”Arial”,加粗,12个像素大小,添加投影图层样式。

Photoshop设计一款购物网站的购买按钮插图(19)

至此,整个的按钮就制作完成了。

Photoshop设计一款购物网站的购买按钮插图(20)




作者:佚名   出处:飞鱼的声纳 作者:Wantfee 本教程主要使用Photoshop设计一款购物网站的购买按钮,在网页的界面设计中,按钮的设计是我们最常遇到的问题,此类的设计不是很难,只要是通过图层样式来实现质感和立体感,加上颜色的搭配,西面就让我们来学习一个购物网站的按钮制作。

先看看效果图

Photoshop设计一款购物网站的购买按钮插图

第一步

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

Photoshop设计一款购物网站的购买按钮插图(1)

第二步

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

Photoshop设计一款购物网站的购买按钮插图(2)

Photoshop设计一款购物网站的购买按钮插图(3)

第三步

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

Photoshop设计一款购物网站的购买按钮插图(4)

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

Photoshop设计一款购物网站的购买按钮插图(5)

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

Photoshop设计一款购物网站的购买按钮插图(6)

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

Photoshop设计一款购物网站的购买按钮插图(7)


第四步

Photoshop设计一款购物网站的购买按钮插图(8)

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

Photoshop设计一款购物网站的购买按钮插图(9)

选择锁子图层,使用自由变换命令(Ctrl+T),同时按住Shift键,调整锁子大小,直到合适。调整图片位置到按钮的居中位置。在图层面板中双击锁子图层,打开图层样式对话框,应用如下图层样式:

Photoshop设计一款购物网站的购买按钮插图(10)

Photoshop设计一款购物网站的购买按钮插图(11)

使用文字工具(T),键出”Buy It”文字,字体选择”Arial”,加粗,颜色#E3F7FF,双击文字图层,添加如下投影效果:

Photoshop设计一款购物网站的购买按钮插图(12)

最终效果如下图:

Photoshop设计一款购物网站的购买按钮插图(13)

第五步

添加价格标签。新建图层,使用钢笔工具画一个标签形状。你可以同时按住shift键来确保路径横平竖直。之后使用直接选择工具(A),配合上下左右方向箭头将路径形状调整到合适。在路径上点击右键选择填充路径(Fill Path),给路径填充前景色,再选择删除路径(Delete Path)命令,将路径删除掉,这时候留在图层上的就只有一个标签形状了(如下图)。

Photoshop设计一款购物网站的购买按钮插图(14)

选择椭圆形选取工具(M),样式选择固定大小,宽度7个像素,高度7个像素,在标签上做一个圆形的选区。调整选区的位置至标签的正中间,点击删除键(Delete),将圆形部分的像素删除,这样,标签上的孔洞就打好了。

Photoshop设计一款购物网站的购买按钮插图(15)


接下来给标签图层应用如下图层样式:

Photoshop设计一款购物网站的购买按钮插图(16)

Photoshop设计一款购物网站的购买按钮插图(17)

Photoshop设计一款购物网站的购买按钮插图(18)

添加文字,颜色白色,字体”Arial”,加粗,12个像素大小,添加投影图层样式。

Photoshop设计一款购物网站的购买按钮插图(19)

至此,整个的按钮就制作完成了。

Photoshop设计一款购物网站的购买按钮插图(20)



作者: 791650988

为您推荐

联系我们

联系我们

0898-88881688

在线咨询: QQ交谈

邮箱: email@wangzhan.com

工作时间:周一至周五,9:00-17:30,节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部