新疆玩石 發表於 2011-7-13 10:08:25

photoshop制作出逼真的动感雷达图标效果

先看效果图
<p></p>
<p style="TEXT-INDENT: 2em" align="center"><img style="CURSOR: pointer" onclick="ImageOpen(this)" height="430" alt="动感雷达图标 ps教程" width="430" onload="ImageZoom(this,560,700)" src="https://img.jbzj.com/file_images/photoshop/201107/201107131003152.jpg" /></p>
<p style="TEXT-INDENT: 2em">新建文档500x500像素，背景黑色，建新层，用昨天教程介绍的方法做一个圆环。</p>
<p style="TEXT-INDENT: 2em" align="center"><img style="CURSOR: pointer" onclick="ImageOpen(this)" height="326" alt="动感雷达图标 ps教程" width="330" onload="ImageZoom(this,560,700)" src="https://img.jbzj.com/file_images/photoshop/201107/201107131003153.jpg" /></p>
<p style="TEXT-INDENT: 2em">添加图层样式。</p>
<p style="TEXT-INDENT: 2em" align="center"><img style="CURSOR: pointer" onclick="ImageOpen(this)" height="269" alt="动感雷达图标 ps教程" width="259" onload="ImageZoom(this,560,700)" src="https://img.jbzj.com/file_images/photoshop/201107/201107131003154.jpg" /></p>
<p style="TEXT-INDENT: 2em" align="center"><img style="CURSOR: pointer" onclick="ImageOpen(this)" height="203" alt="动感雷达图标 ps教程" width="269" onload="ImageZoom(this,560,700)" src="https://img.jbzj.com/file_images/photoshop/201107/201107131003155.jpg" /> </p>
<p style="TEXT-INDENT: 2em">效果如下。</p>
<p style="TEXT-INDENT: 2em" align="center"><img style="CURSOR: pointer" onclick="ImageOpen(this)" height="400" alt="动感雷达图标 ps教程" width="400" onload="ImageZoom(this,560,700)" src="https://img.jbzj.com/file_images/photoshop/201107/201107131003156.jpg" /></p>
<p style="TEXT-INDENT: 2em">建新层，做如下正圆选区。</p>
<p style="TEXT-INDENT: 2em" align="center"><img style="CURSOR: pointer" onclick="ImageOpen(this)" height="342" alt="动感雷达图标 ps教程" width="350" onload="ImageZoom(this,560,700)" src="https://img.jbzj.com/file_images/photoshop/201107/201107131003157.jpg" /></p>
<p style="TEXT-INDENT: 2em">设置渐变颜色，做一径向渐变。</p>
<p style="TEXT-INDENT: 2em" align="center"><img style="CURSOR: pointer" onclick="ImageOpen(this)" height="331" alt="动感雷达图标 ps教程" width="329" onload="ImageZoom(this,560,700)" src="https://img.jbzj.com/file_images/photoshop/201107/201107131003158.jpg" /></p>
<p style="TEXT-INDENT: 2em">添加内阴影样式。</p>
<p style="TEXT-INDENT: 2em" align="center"><img style="CURSOR: pointer" onclick="ImageOpen(this)" height="422" alt="动感雷达图标 ps教程" width="266" onload="ImageZoom(this,560,700)" src="https://img.jbzj.com/file_images/photoshop/201107/201107131003159.jpg" /> </p>
<p style="TEXT-INDENT: 2em">下面我们定义图案，新建文档2x3像素，背景白色。</p>
<p style="TEXT-INDENT: 2em" align="center"><img style="CURSOR: pointer" onclick="ImageOpen(this)" height="315" alt="动感雷达图标 ps教程" width="288" onload="ImageZoom(this,560,700)" src="https://img.jbzj.com/file_images/photoshop/201107/2011071310031510.jpg" /></p>
<p style="TEXT-INDENT: 2em">建新层，做一矩形选区填充黑色，编辑定义图案命令，会弹出一个对话框，确定即可。</p>
<p style="TEXT-INDENT: 2em" align="center"><img style="CURSOR: pointer" onclick="ImageOpen(this)" height="226" alt="动感雷达图标 ps教程" width="342" onload="ImageZoom(this,560,700)" src="https://img.jbzj.com/file_images/photoshop/201107/2011071310031511.jpg" /></p>
<p style="TEXT-INDENT: 2em">回到源文档，新建图层3，调出上一步的正圆选区，编辑&gt;填充，选择刚才定义的团，图层模式柔光，不透明度20%。</p>
<p style="TEXT-INDENT: 2em" align="center"><img style="CURSOR: pointer" onclick="ImageOpen(this)" height="357" alt="动感雷达图标 ps教程" width="350" onload="ImageZoom(this,560,700)" src="https://img.jbzj.com/file_images/photoshop/201107/2011071310031512.jpg" /></p>
<p style="TEXT-INDENT: 2em">建新层，用铅笔画2条白线。</p>
<p style="TEXT-INDENT: 2em" align="center"><img style="CURSOR: pointer" onclick="ImageOpen(this)" height="344" alt="动感雷达图标 ps教程" width="340" onload="ImageZoom(this,560,700)" src="https://img.jbzj.com/file_images/photoshop/201107/2011071310031513.jpg" /> </p>
<p style="TEXT-INDENT: 2em">添加蒙版用黑色柔角笔刷涂抹，去除多余部分，并添加外发光样式。</p>
<p style="TEXT-INDENT: 2em" align="center"><img style="CURSOR: pointer" onclick="ImageOpen(this)" height="241" alt="动感雷达图标 ps教程" width="263" onload="ImageZoom(this,560,700)" src="https://img.jbzj.com/file_images/photoshop/201107/2011071310031514.jpg" /></p>
<p style="TEXT-INDENT: 2em">效果如下。</p>
<p style="TEXT-INDENT: 2em" align="center"><img style="CURSOR: pointer" onclick="ImageOpen(this)" height="400" alt="动感雷达图标 ps教程" width="400" onload="ImageZoom(this,560,700)" src="https://img.jbzj.com/file_images/photoshop/201107/2011071310031515.jpg" /></p>
<p style="TEXT-INDENT: 2em">建新层，做2个正圆选区，白色2像素描边，图层模式柔光。这是雷达的2个同心圆。</p>
<p style="TEXT-INDENT: 2em" align="center"><img style="CURSOR: pointer" onclick="ImageOpen(this)" height="350" alt="动感雷达图标 ps教程" width="364" onload="ImageZoom(this,560,700)" src="https://img.jbzj.com/file_images/photoshop/201107/2011071310031516.jpg" /></p>
<p style="TEXT-INDENT: 2em">建新层，用直线套索做如下选区，白色笔刷涂抹如下。</p>
<p style="TEXT-INDENT: 2em" align="center"><img style="CURSOR: pointer" onclick="ImageOpen(this)" height="257" alt="动感雷达图标 ps教程" width="261" onload="ImageZoom(this,560,700)" src="https://img.jbzj.com/file_images/photoshop/201107/2011071310031517.jpg" /> </p>
<p style="TEXT-INDENT: 2em" align="center">调出大的正圆选区，添加蒙版，并用黑色笔刷涂抹掉右侧多余部分，图层模式叠加。</p>
<p style="TEXT-INDENT: 2em" align="center"><img style="CURSOR: pointer" onclick="ImageOpen(this)" height="343" alt="动感雷达图标 ps教程" width="350" onload="ImageZoom(this,560,700)" src="https://img.jbzj.com/file_images/photoshop/201107/2011071310031518.jpg" /></p>
<p style="TEXT-INDENT: 2em">建新层，用白色柔角笔刷点几下，添加外发光样式。</p>
<p style="TEXT-INDENT: 2em" align="center"><img style="CURSOR: pointer" onclick="ImageOpen(this)" height="496" alt="动感雷达图标 ps教程" width="290" onload="ImageZoom(this,560,700)" src="https://img.jbzj.com/file_images/photoshop/201107/2011071310031519.jpg" /></p>
<p style="TEXT-INDENT: 2em">添加色相/饱和度调整层和曲线调整层，增加饱和度和对比度，这个步骤可以省略。</p>
<p style="TEXT-INDENT: 2em" align="center"><img style="CURSOR: pointer" onclick="ImageOpen(this)" height="283" alt="动感雷达图标 ps教程" width="223" onload="ImageZoom(this,560,700)" src="https://img.jbzj.com/file_images/photoshop/201107/2011071310031520.jpg" /></p>
<p style="TEXT-INDENT: 2em">最终效果如下。</p>
<p style="TEXT-INDENT: 2em" align="center"><img style="CURSOR: pointer" onclick="ImageOpen(this)" height="430" alt="动感雷达图标 ps教程" width="430" onload="ImageZoom(this,560,700)" src="https://img.jbzj.com/file_images/photoshop/201107/201107131003152.jpg" /></p>
頁: [1]
查看完整版本: photoshop制作出逼真的动感雷达图标效果