用photoshop画出光滑而漂亮的下载按钮
2008-10-30 09:56
246 查看
![](http://p.blog.csdn.net/images/p_blog_csdn_net/rowland001/EntryImages/20081030/1.png)
在一个国外网站上看到这样的教程,委胆喜欢,就翻译下来让大家一起学习一下喽,不到之处,请多多谅解!
现在,我就教大家一步一步地来设计这个按钮:
注:我所使用的PS版本为CS3
1.文件-新建
![](http://p.blog.csdn.net/images/p_blog_csdn_net/rowland001/EntryImages/20081030/2008-10-30%2010-04-02.png)
2.新建一个400*110的新画布:
![](http://p.blog.csdn.net/images/p_blog_csdn_net/rowland001/EntryImages/20081030/2008-10-30%2010-07-00.png)
3.新建一个图层,点击图层面板中的新建图层按钮,如下图所示:
![](http://p.blog.csdn.net/images/p_blog_csdn_net/rowland001/EntryImages/20081030/2008-10-30%2010-09-44.png)
4.这时发现图层面板中多出名为图层1的图层:
![](http://p.blog.csdn.net/images/p_blog_csdn_net/rowland001/EntryImages/20081030/2008-10-30%2010-10-27.png)
5.在图层1上画一个圆角矩形,在工具面板中选择如下图所示产:
![](http://p.blog.csdn.net/images/p_blog_csdn_net/rowland001/EntryImages/20081030/2008-10-30%2010-10-48.png)
6.矩形的具体选项如下图所示:
![](http://p.blog.csdn.net/images/p_blog_csdn_net/rowland001/EntryImages/20081030/2008-10-30%2010-17-33.png)
7.画出的矩形如下图所示:
![](http://p.blog.csdn.net/images/p_blog_csdn_net/rowland001/EntryImages/20081030/2008-10-30%2010-18-25.png)
8.右击图层面板中该图层,选择混合选项,在这里要修改两个地方,分别是:
![](http://p.blog.csdn.net/images/p_blog_csdn_net/rowland001/EntryImages/20081030/2008-10-30%2010-19-31.png)
![](http://p.blog.csdn.net/images/p_blog_csdn_net/rowland001/EntryImages/20081030/2008-10-30%2010-23-08.png)
9.混合选项修改之后成为下图这样喽:
![](http://p.blog.csdn.net/images/p_blog_csdn_net/rowland001/EntryImages/20081030/2008-10-30%2010-26-19.png)
10.ctrl+左击图层选中图层,出现选区,如下图所示:
![](http://p.blog.csdn.net/images/p_blog_csdn_net/rowland001/EntryImages/20081030/2008-10-30%2010-26-47.png)
11.点击菜单栏中的选择-修改-收缩,如下图所示:
![](http://p.blog.csdn.net/images/p_blog_csdn_net/rowland001/EntryImages/20081030/2008-10-30%2010-27-06.png)
12,修改像素为5px,如下图所示:
![](http://p.blog.csdn.net/images/p_blog_csdn_net/rowland001/EntryImages/20081030/2008-10-30%2010-27-24.png)
13.选区变为这样:
![](http://p.blog.csdn.net/images/p_blog_csdn_net/rowland001/EntryImages/20081030/2008-10-30%2010-27-37.png)
14.新添加一个图层,图层2:
![](http://p.blog.csdn.net/images/p_blog_csdn_net/rowland001/EntryImages/20081030/2008-10-30%2010-27-51.png)
15.为图层2选中区域填充白色如下图所示:
![](http://p.blog.csdn.net/images/p_blog_csdn_net/rowland001/EntryImages/20081030/2008-10-30%2010-28-21.png)
16.,透明度和填充都改为40%:
![](http://p.blog.csdn.net/images/p_blog_csdn_net/rowland001/EntryImages/20081030/2008-10-30%2010-28-51.png)
17.现在成为这样喽,用钢笔工具画出一个不规则的平滑的形状:
![](http://p.blog.csdn.net/images/p_blog_csdn_net/rowland001/EntryImages/20081030/2008-10-30%2010-30-26.png)
18.将路径载入街区,delete掉选中的部分,现在是这样的:
![](http://p.blog.csdn.net/images/p_blog_csdn_net/rowland001/EntryImages/20081030/2008-10-30%2010-30-47.png)
19,好了,现在可以加入文字了:
![](http://p.blog.csdn.net/images/p_blog_csdn_net/rowland001/EntryImages/20081030/2008-10-30%2010-40-40.png)
20.对文字图层要进行一些处理哦:
![](http://p.blog.csdn.net/images/p_blog_csdn_net/rowland001/EntryImages/20081030/2008-10-30%2010-41-03.png)
21.为了更好看一点,我们为按钮做个倒影。复制图层1,垂直翻转,用矩形选框选中不要倒影的部分,然后点菜单-选择-羽化:5px,然后按delete删除.大家可以尝试一下。
21.下面再新建一个图层,图层3,在左下角落加入一个齿轮形的工具,透明度为填充也设得淡一点,这样整个图就做好了,是不是很漂亮呢?
当然,你也可以更改图标的颜色,红的,绿的,紫的,想怎么换就怎么换,是不是很爽?
如果大家有什么不明白的,可以留言给我,或在评论里写出来,我一定会回复给大家的。
齿轮工具下载
相关文章推荐
- 利用css3实现漂亮下载按钮
- Photoshop制作漂亮的蓝色透明玻璃按钮教程
- Photoshop 打造一张漂亮的郁金香壁纸
- HTML5 video控件去掉右边下载按钮
- 纯Div+Css制作的漂亮点击按钮和关闭按钮
- FancyButtons一个漂亮的按钮库
- 50个超酷photoshop动作演示及下载
- Photoshop独立安装包下载页面
- 在photoshop中如何制作一个简洁干净的按钮
- 推荐12个漂亮的CSS3按钮实现方案
- 怎样学好MFC中各个控件编程或者GDI编程,举例说明和源码下载:比如怎样自绘菜单,按钮,工具条或Tab控件
- 纯CSS制作各种各样的网页图标(三角形、暂停按钮、下载箭头、加号等)
- FancyButtons一个漂亮按钮的库
- Photoshop 一块光滑的褐色鹅卵石
- PS CS6教程(photoshop视频教程) 免费下载
- photoshop 漂亮的绿色春韵图
- photoshop下载教程
- 基于jquery自定义的漂亮单选按钮RadioButton
- photoshop最新版百度云下载地址