![]()
screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" onclick="if(!this.resized) {return true;} else {window.open('http://www.68ps.com/jc/pic_jc/jc_1s.jpg');}" alt="" src="http://www.68ps.com/jc/pic_jc/jc_1s.jpg" onload="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" border=0>
网页设计越来越注重细节的完美，一种好的字体效果或一个比较精致的按钮会让你的网页增色不少。下面我们来探讨这种按钮的制作方法。
1：打开Photoshop新建一个200像素*200像素的文件，颜色最好是用RGB格式，前景颜色为黑色，用圆角矩形工具半径设为4个像素绘制如图1所示的图形。
![]()
screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" onclick="if(!this.resized) {return true;} else {window.open('http://www.68ps.com/jc/pic_jc/jc_1b.jpg');}" alt="" src="http://www.68ps.com/jc/pic_jc/jc_1b.jpg" onload="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" border=0>
<图1>
2：删格化图层（方法在图2所示的蓝色地方按鼠标右键，选择删格化图层。），再把这层命名为"按钮--底"
![]()
screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" onclick="if(!this.resized) {return true;} else {window.open('http://www.68ps.com/jc/pic_jc/jc_1c.jpg');}" alt="" src="http://www.68ps.com/jc/pic_jc/jc_1c.jpg" onload="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" border=0>
<图2>
3：按Ctrl + j 复制一层把这层命名为“水晶--高光”,把图3中“1”的位置的勾选上，按一下字母 D 把前，背景设为黑白，再按Ctrl + Delete 直接填充白色。把图3中“2”的位置透明度调为40%，然后向上移动到图3所示的位置。
![]()
screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" onclick="if(!this.resized) {return true;} else {window.open('http://www.68ps.com/jc/pic_jc/jc_1d.jpg');}" alt="" src="http://www.68ps.com/jc/pic_jc/jc_1d.jpg" onload="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" border=0>
<图3>
4：调出“按钮--高光”的选区(方法：只要按住 Ctrl 用鼠标点图4红色所示的位置 下同)
![]()
screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" onclick="if(!this.resized) {return true;} else {window.open('http://www.68ps.com/jc/pic_jc/jc_1e.jpg');}" alt="" src="http://www.68ps.com/jc/pic_jc/jc_1e.jpg" onload="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" border=0>
<图4>
5：添加蒙版，再应用蒙版，按 Ctrl + J 复制一个新层命名为"按钮--高光1"，把"按钮--高光1"和"按钮--高光"图层中的眼睛图标点去，把这两层隐藏。我们再回到“按钮--底”这层，把图层“锁定：”后面的框选择如图5。
![]()
screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" onclick="if(!this.resized) {return true;} else {window.open('http://www.68ps.com/jc/pic_jc/jc_1g.jpg');}" alt="" src="http://www.68ps.com/jc/pic_jc/jc_1g.jpg" onload="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" border=0>
<图5>
6：选取渐变工具：设置如图6，渐变方向从上到下渐变，效果如图7,双击图层调出图层样式，选择描边数值为1，颜色为：R:177 G:182 B:187.
![]()
screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" onclick="if(!this.resized) {return true;} else {window.open('http://www.68ps.com/jc/pic_jc/jc_1f.jpg');}" alt="" src="http://www.68ps.com/jc/pic_jc/jc_1f.jpg" onload="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" border=0>
<图6>
![]()
screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" onclick="if(!this.resized) {return true;} else {window.open('http://www.68ps.com/jc/pic_jc/jc_1h.jpg');}" alt="" src="http://www.68ps.com/jc/pic_jc/jc_1h.jpg" onload="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" border=0>
<图7>
7：回到“按钮--高光”这层，把这层的不透明度调为100%,如图8
![]()
screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" onclick="if(!this.resized) {return true;} else {window.open('http://www.68ps.com/jc/pic_jc/jc_1i.jpg');}" alt="" src="http://www.68ps.com/jc/pic_jc/jc_1i.jpg" onload="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" border=0>
<图8>
8：选择渐变工具设置如图9,方向由下到上。效果如图10
![]()
screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" onclick="if(!this.resized) {return true;} else {window.open('http://www.68ps.com/jc/pic_jc/jc_1j.jpg');}" alt="" src="http://www.68ps.com/jc/pic_jc/jc_1j.jpg" onload="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" border=0>
<图9>
![]()
screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" onclick="if(!this.resized) {return true;} else {window.open('http://www.68ps.com/jc/pic_jc/jc_1k.jpg');}" alt="" src="http://www.68ps.com/jc/pic_jc/jc_1k.jpg" onload="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" border=0>
<图10>
9：在“按钮--高光”上新建一层命名为：“按钮--底1”,调出“按钮--底”的选区，选择菜单：选择 > 修改 > 收缩 数值为3 如图11
![]()
screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" onclick="if(!this.resized) {return true;} else {window.open('http://www.68ps.com/jc/pic_jc/jc_1l.jpg');}" alt="" src="http://www.68ps.com/jc/pic_jc/jc_1l.jpg" onload="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" border=0>
<图11>
10：选择渐变工具设置如图12，由上到下绘制渐变，取消选区效果如图13。
![]()
screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" onclick="if(!this.resized) {return true;} else {window.open('http://www.68ps.com/jc/pic_jc/jc_1m.jpg');}" alt="" src="http://www.68ps.com/jc/pic_jc/jc_1m.jpg" onload="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" border=0>
<图12>
![]()
screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" onclick="if(!this.resized) {return true;} else {window.open('http://www.68ps.com/jc/pic_jc/jc_1n.jpg');}" alt="" src="http://www.68ps.com/jc/pic_jc/jc_1n.jpg" onload="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" border=0>
<图13>
11：调出"按钮--高光"的选区,并把“按钮--底1”图层锁定 如图14
![]()
screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" onclick="if(!this.resized) {return true;} else {window.open('http://www.68ps.com/jc/pic_jc/jc_1o.jpg');}" alt="" src="http://www.68ps.com/jc/pic_jc/jc_1o.jpg" onload="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" border=0>
<图14>
12：用渐变工具按垂直方向绘制渐变，设置如图15 ，取消选区效果如图16
![]()
screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" onclick="if(!this.resized) {return true;} else {window.open('http://www.68ps.com/jc/pic_jc/jc_1p.jpg');}" alt="" src="http://www.68ps.com/jc/pic_jc/jc_1p.jpg" onload="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" border=0>
<图15>
![]()
screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" onclick="if(!this.resized) {return true;} else {window.open('http://www.68ps.com/jc/pic_jc/jc_1q.jpg');}" alt="" src="http://www.68ps.com/jc/pic_jc/jc_1q.jpg" onload="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" border=0>
<图16>
13：回到“按钮--高光1”这层，把不透明度调为30，如图17
![]()
screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" onclick="if(!this.resized) {return true;} else {window.open('http://www.68ps.com/jc/pic_jc/jc_1r.jpg');}" alt="" src="http://www.68ps.com/jc/pic_jc/jc_1r.jpg" onload="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" border=0>
<图17>
14：在“按钮--高光1”上新建一层命名为：“按钮--图标”，选择一个自己需要的图标，用钢笔工具勾出来，然后复制到“按钮--图标”这层适当的调整大小。再加点投影，效果如图18
![]()
screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" onclick="if(!this.resized) {return true;} else {window.open('http://www.68ps.com/jc/pic_jc/jc_1s.jpg');}" alt="" src="http://www.68ps.com/jc/pic_jc/jc_1s.jpg" onload="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" border=0>
<图18>
作者：
中国PS联盟http://www.68ps.com
