用photoshop将打造出一个黑色风格系网站按钮效果
<p style="TEXT-INDENT: 2em" align="left">本教程学习如何用photoshop的圆角矩形工具和图层样式打造一款黑色风格的网站按钮，先看效果图。</p><p style="TEXT-INDENT: 2em" align="center"><img style="CURSOR: pointer" onclick="ImageOpen(this)" height="355" alt="用photoshop将打造出一个黑色风格系网站按钮效果 " width="500" onload="ImageZoom(this,560,700)" src="https://img.jbzj.com/file_images/photoshop/201105/2011051909454838.jpg" /></p>
<p style="TEXT-INDENT: 2em">新建文档1200x800像素，背景白色，建新层，图层黑色，添加图层样式。</p>
<p style="TEXT-INDENT: 2em" align="center"><img style="CURSOR: pointer" onclick="ImageOpen(this)" height="202" alt="用photoshop将打造出一个黑色风格系网站按钮效果 " width="270" onload="ImageZoom(this,560,700)" src="https://img.jbzj.com/file_images/photoshop/201105/2011051909454839.jpg" /></p>
<p style="TEXT-INDENT: 2em">效果如下。</p>
<p style="TEXT-INDENT: 2em" align="center"><img style="CURSOR: pointer" onclick="ImageOpen(this)" height="265" alt="用photoshop将打造出一个黑色风格系网站按钮效果 " width="393" onload="ImageZoom(this,560,700)" src="https://img.jbzj.com/file_images/photoshop/201105/2011051909454840.jpg" /></p>
<p style="TEXT-INDENT: 2em">建新层，画一黑色圆角矩形。</p>
<p style="TEXT-INDENT: 2em" align="center"><img style="CURSOR: pointer" onclick="ImageOpen(this)" height="262" alt="用photoshop将打造出一个黑色风格系网站按钮效果 " width="383" onload="ImageZoom(this,560,700)" src="https://img.jbzj.com/file_images/photoshop/201105/2011051909454841.jpg" /> </p>
<p style="TEXT-INDENT: 2em">建新层，画一个小点的白色圆角矩形。</p>
<p style="TEXT-INDENT: 2em" align="center"><img style="CURSOR: pointer" onclick="ImageOpen(this)" height="290" alt="用photoshop将打造出一个黑色风格系网站按钮效果 " width="450" onload="ImageZoom(this,560,700)" src="https://img.jbzj.com/file_images/photoshop/201105/2011051909454842.jpg" /></p>
<p style="TEXT-INDENT: 2em">添加蒙版黑白直线渐变，效果如下。</p>
<p style="TEXT-INDENT: 2em" align="center"><img style="CURSOR: pointer" onclick="ImageOpen(this)" height="330" alt="用photoshop将打造出一个黑色风格系网站按钮效果 " width="437" onload="ImageZoom(this,560,700)" src="https://img.jbzj.com/file_images/photoshop/201105/2011051909454843.jpg" /></p>
<p style="TEXT-INDENT: 2em">建新层，画出下图所示白色形状。</p>
<p style="TEXT-INDENT: 2em" align="center"><img style="CURSOR: pointer" onclick="ImageOpen(this)" height="295" alt="用photoshop将打造出一个黑色风格系网站按钮效果 " width="431" onload="ImageZoom(this,560,700)" src="https://img.jbzj.com/file_images/photoshop/201105/2011051909454844.jpg" /></p>
<p style="TEXT-INDENT: 2em">添加图层样式，效果如下。</p>
<p style="TEXT-INDENT: 2em" align="center"><img style="CURSOR: pointer" onclick="ImageOpen(this)" height="359" alt="用photoshop将打造出一个黑色风格系网站按钮效果 " width="277" onload="ImageZoom(this,560,700)" src="https://img.jbzj.com/file_images/photoshop/201105/2011051909454845.jpg" /> </p>
<p style="TEXT-INDENT: 2em">同样的方法。</p>
<p style="TEXT-INDENT: 2em" align="center"><img style="CURSOR: pointer" onclick="ImageOpen(this)" height="435" alt="用photoshop将打造出一个黑色风格系网站按钮效果 " width="269" onload="ImageZoom(this,560,700)" src="https://img.jbzj.com/file_images/photoshop/201105/2011051909454846.jpg" /></p>
<p style="TEXT-INDENT: 2em">建新层，画出用钢笔左上角形状，填充白色，输入白色文字，添加渐变叠加样式，具体设置不截图了，很容易，相信大家的智慧。</p>
<p style="TEXT-INDENT: 2em" align="center"><img style="CURSOR: pointer" onclick="ImageOpen(this)" height="268" alt="用photoshop将打造出一个黑色风格系网站按钮效果 " width="443" onload="ImageZoom(this,560,700)" src="https://img.jbzj.com/file_images/photoshop/201105/2011051909454847.jpg" /></p>
<p style="TEXT-INDENT: 2em">添加一个倒影，具体步骤参考本站按钮类教程，最终效果如下。</p>
<p style="TEXT-INDENT: 2em" align="center"><img style="CURSOR: pointer" onclick="ImageOpen(this)" height="355" alt="用photoshop将打造出一个黑色风格系网站按钮效果 " width="500" onload="ImageZoom(this,560,700)" src="https://img.jbzj.com/file_images/photoshop/201105/2011051909454838.jpg" /></p>
頁:
[1]