Photoshop制作购物网站购买按钮

2016-02-16 07:25 33 1 收藏

生活已是百般艰难,为何不努力一点。下面图老师就给大家分享Photoshop制作购物网站购买按钮,希望可以让热爱学习的朋友们体会到PS的小小的乐趣。

【 tulaoshi.com - PS 】

先看看效果图

Photoshop制作购物网站购买按钮,PS教程,图老师教程网

第一步

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

Photoshop制作购物网站购买按钮,PS教程,图老师教程网

第二步

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

Photoshop制作购物网站购买按钮,PS教程,图老师教程网

Photoshop制作购物网站购买按钮,PS教程,图老师教程网

第三步

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

Photoshop制作购物网站购买按钮,PS教程,图老师教程网

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

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/ps/)

Photoshop制作购物网站购买按钮,PS教程,图老师教程网

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

Photoshop制作购物网站购买按钮,PS教程,图老师教程网

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

Photoshop制作购物网站购买按钮,PS教程,图老师教程网

第四步

Photoshop制作购物网站购买按钮,PS教程,图老师教程网

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

Photoshop制作购物网站购买按钮,PS教程,图老师教程网

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/ps/)

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

Photoshop制作购物网站购买按钮,PS教程,图老师教程网

Photoshop制作购物网站购买按钮,PS教程,图老师教程网

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

Photoshop制作购物网站购买按钮,PS教程,图老师教程网

最终效果如下图:

Photoshop制作购物网站购买按钮,PS教程,图老师教程网

第五步

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

Photoshop制作购物网站购买按钮,PS教程,图老师教程网

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

Photoshop制作购物网站购买按钮,PS教程,图老师教程网

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

Photoshop制作购物网站购买按钮,PS教程,图老师教程网

Photoshop制作购物网站购买按钮,PS教程,图老师教程网

Photoshop制作购物网站购买按钮,PS教程,图老师教程网

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

Photoshop制作购物网站购买按钮,PS教程,图老师教程网

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

Photoshop制作购物网站购买按钮,PS教程,图老师教程网

来源:http://www.tulaoshi.com/n/20160216/1569684.html

延伸阅读
很多人访问购物网站的习惯是先看图片后看文字,这也是因为图片对眼球的吸引力远远大于文字,因此想要做个出色的购物网站,必定需要大量出色的图片,包括如何让访问者通过图片了解产品的特点与性质。 你想让你产品的图片出现在你的网站上吗?你当然想。用数码相机那将是一个便宜而简单的方法,是吗?不是。产品图片并不只是黑与白这么简单。 在...
口袋购物如何购买彩票?   口袋购物如何购买彩票?当你在玩口袋购物的时候,经常都会看到有彩票功能,进入界面看确实是可以购买彩票的,很多用户都应该喜欢购买彩票吧,可在购物网站能够买彩票还是没试过吧,今天小编就教大家口袋购物如何购买彩票,希望用户们都能够获得大奖哦。 1)首先打开口袋购物,点击,在界面选择你要购买彩...
口袋购物如何购买商品?   口袋购物如何购买商品?口袋购物根据用户的个人喜好寻找商品,每天精选潮流热卖商品,让用户们随时随地发现又好又便宜的宝贝。当你在查看口袋购物的商品时,看到自己喜欢的商品,就想要买下来,很多用户就在问小编该如何购买商品呢?今天小编就教大家口袋购物如何购买商品。 1)首先打开口袋购物,在界面...
PS游戏网站按钮制作步骤   游戏按钮制作教程: 先看下整体效果: 背景部分: 深色 暖色 纯 背景很简单,这里不做处理,直接画出一个深色的背景,纯色,未经处理。 形状部分: 矩形 橡皮红擦 耐心 感觉 形状一定要画好,这里先画出一个矩形,再用橡皮擦工具,擦出边缘破旧的效果,感觉不...
标签: PS PS基础
先看效果图。 新建文档1280x1024像素,背景白色,建新层画一个黑色正圆。 复制一层,颜色改为深灰,稍微缩小一点点。 添加图层样式。 效果如下。 复制一层,清除图层样式,颜色白色,缩小一些,位置如下。 添加图层样式。 效果如下。 建新层,画一个小的黑色正圆,中心对齐。 建新层,画一个小的白...

经验教程

870

收藏

86
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部