Photoshop制作购物网站购买按钮

天蝎狗蛋儿00

天蝎狗蛋儿00

2016-02-16 07:25

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

先看看效果图

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

第一步

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/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个像素。

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

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

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

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

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

第四步

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

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

Photoshop制作购物网站购买按钮,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://m.tulaoshi.com/ps/)
展开更多 50%)
分享

猜你喜欢

Photoshop制作购物网站购买按钮

PS PS基础
Photoshop制作购物网站购买按钮

购物网站deerz视觉设计

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
购物网站deerz视觉设计

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

购物网站的色彩如何影响用户购物

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
购物网站的色彩如何影响用户购物

购物网站的Checkout结帐设计对比

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
购物网站的Checkout结帐设计对比

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

精选国外另类的购物网站设计欣赏

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
精选国外另类的购物网站设计欣赏

如何设计一个清爽极简的购物网站

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
如何设计一个清爽极简的购物网站

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

Photoshop优化文档管理快速提升工作效率

Photoshop优化文档管理快速提升工作效率

Photoshop基础教程:工具的使用和标志的制作

Photoshop基础教程:工具的使用和标志的制作
下拉加载更多内容 ↓