深圳门窗人 發表於 2017-11-15 15:16:16

ps怎样设计一个色彩靓丽的方形按钮图标?

<p>ps怎样设计一个色彩靓丽的方形按钮图标？运用PHOTOSHOP软件，可以很简单的制作大家想要的照片，下面和小编一起来看看具体步骤吧。</p>
<p><strong>最终效果：</strong></p>
<p style="text-align: center"><img alt="ps设计一个色彩靓丽的方形按钮图标教程" src="https://img.jbzj.com/file_images/photoshop/201711/20171115150941953.jpg" /></p>
<p><span style="color: #ff0000"><strong>具体步骤：</strong></span></p>
<p>建立画布800x600pi，填充颜色为#a846ff。</p>
<p style="text-align: center"><img alt="ps设计一个色彩靓丽的方形按钮图标教程" src="https://img.jbzj.com/file_images/photoshop/201711/20171115150941954.jpg" /></p>
<p>复制一层做一个渐变叠加</p>
<p style="text-align: center"><img alt="ps设计一个色彩靓丽的方形按钮图标教程" src="https://img.jbzj.com/file_images/photoshop/201711/20171115150941955.jpg" /></p>
<p>得到画板效果</p>
<p style="text-align: center"><img alt="ps设计一个色彩靓丽的方形按钮图标教程" src="https://img.jbzj.com/file_images/photoshop/201711/20171115150942956.jpg" /></p>
<p>接下来我们做按钮，建立一个圆角矩形308x308pi，半径为68</p>
<p style="text-align: center"><img alt="ps设计一个色彩靓丽的方形按钮图标教程" src="https://img.jbzj.com/file_images/photoshop/201711/20171115150942957.jpg" /></p>
<p>给椭圆矩形做效果，混合模式：斜面浮雕&mdash;&mdash;颜色叠加&mdash;&mdash;投影</p>
<p style="text-align: center"><img alt="ps设计一个色彩靓丽的方形按钮图标教程" src="https://img.jbzj.com/file_images/photoshop/201711/20171115150942958.jpg" /></p>
<p style="text-align: center"><img alt="ps设计一个色彩靓丽的方形按钮图标教程" src="https://img.jbzj.com/file_images/photoshop/201711/20171115150942959.jpg" /></p>
<p style="text-align: center"><img alt="ps设计一个色彩靓丽的方形按钮图标教程" src="https://img.jbzj.com/file_images/photoshop/201711/20171115150942960.jpg" /></p>
<p style="text-align: center"><img alt="ps设计一个色彩靓丽的方形按钮图标教程" src="https://img.jbzj.com/file_images/photoshop/201711/20171115150942961.jpg" /></p>
<p>看过前面课程的同学应该知道，我们做完底部后，要一步步做投影。复制一层，填充黑色，下移20，高斯模糊15，图层不透明度25%。</p>
<p style="text-align: center"><img alt="ps设计一个色彩靓丽的方形按钮图标教程" src="https://img.jbzj.com/file_images/photoshop/201711/20171115150942962.jpg" /></p>
<p>在复制一层，高斯模糊为20，不透明度15</p>
<p style="text-align: center"><img alt="ps设计一个色彩靓丽的方形按钮图标教程" src="https://img.jbzj.com/file_images/photoshop/201711/20171115150942963.jpg" /></p>
<p>建立剪切蒙版，因为图标是一个椭圆矩形，阴影也要擦出来图标轮廓。</p>
<p style="text-align: center"><img alt="ps设计一个色彩靓丽的方形按钮图标教程" src="https://img.jbzj.com/file_images/photoshop/201711/20171115150943964.jpg" /></p>
<p>建立一个225&times;225的圆形，颜色渐变为</p>
<p style="text-align: center"><img alt="ps设计一个色彩靓丽的方形按钮图标教程" src="https://img.jbzj.com/file_images/photoshop/201711/20171115150943965.jpg" /></p>
<p style="text-align: center"><img alt="ps设计一个色彩靓丽的方形按钮图标教程" src="https://img.jbzj.com/file_images/photoshop/201711/20171115150943966.jpg" /></p>
<p style="text-align: center"><img alt="ps设计一个色彩靓丽的方形按钮图标教程" src="https://img.jbzj.com/file_images/photoshop/201711/20171115150943967.jpg" /></p>
<p>在建立一个226&times;226的大圆在外面</p>
<p style="text-align: center"><img alt="ps设计一个色彩靓丽的方形按钮图标教程" src="https://img.jbzj.com/file_images/photoshop/201711/20171115150943968.jpg" /></p>
<p>我们只是做外面的轮廓，留下边缘部分</p>
<p style="text-align: center"><img alt="ps设计一个色彩靓丽的方形按钮图标教程" src="https://img.jbzj.com/file_images/photoshop/201711/20171115150943969.jpg" /></p>
<p style="text-align: center"><img alt="ps设计一个色彩靓丽的方形按钮图标教程" src="https://img.jbzj.com/file_images/photoshop/201711/20171115150943970.jpg" /></p>
<p>建立112&times;112，的中心按钮</p>
<p style="text-align: center"><img alt="ps设计一个色彩靓丽的方形按钮图标教程" src="https://img.jbzj.com/file_images/photoshop/201711/20171115150944971.jpg" /></p>
<p>混合模式做图标效果</p>
<p style="text-align: center"><img alt="ps设计一个色彩靓丽的方形按钮图标教程" src="https://img.jbzj.com/file_images/photoshop/201711/20171115150944972.jpg" /></p>
<p style="text-align: center"><img alt="ps设计一个色彩靓丽的方形按钮图标教程" src="https://img.jbzj.com/file_images/photoshop/201711/20171115150944973.jpg" /></p>
<p style="text-align: center"><img alt="ps设计一个色彩靓丽的方形按钮图标教程" src="https://img.jbzj.com/file_images/photoshop/201711/20171115150944974.jpg" /></p>
<p style="text-align: center"><img alt="ps设计一个色彩靓丽的方形按钮图标教程" src="https://img.jbzj.com/file_images/photoshop/201711/20171115150944975.jpg" /></p>
<p>给按钮在做一个阴影，复制一个置于按钮下方。高斯模糊</p>
<p style="text-align: center"><img alt="ps设计一个色彩靓丽的方形按钮图标教程" src="https://img.jbzj.com/file_images/photoshop/201711/20171115150944976.jpg" /></p>
<p>大家看到我给这个圆左右压缩一点，光源从上方打过来，为了过渡自然，我们可以根据情况改变做阴影的形状，做完后图层透明度改为75%。</p>
<p style="text-align: center"><img alt="ps设计一个色彩靓丽的方形按钮图标教程" src="https://img.jbzj.com/file_images/photoshop/201711/20171115150944977.jpg" /></p>
<p>做一个96&times;96的中心圆</p>
<p style="text-align: center"><img alt="ps设计一个色彩靓丽的方形按钮图标教程" src="https://img.jbzj.com/file_images/photoshop/201711/20171115150945978.jpg" /></p>
<p>颜色填充</p>
<p style="text-align: center"><img alt="ps设计一个色彩靓丽的方形按钮图标教程" src="https://img.jbzj.com/file_images/photoshop/201711/20171115150945979.jpg" /></p>
<p>采用叠加效果，做渐变叠加</p>
<p style="text-align: center"><img alt="ps设计一个色彩靓丽的方形按钮图标教程" src="https://img.jbzj.com/file_images/photoshop/201711/20171115150945980.jpg" /></p>
<p style="text-align: center"><img alt="ps设计一个色彩靓丽的方形按钮图标教程" src="https://img.jbzj.com/file_images/photoshop/201711/20171115150945981.jpg" /></p>
<p>最后就是两个旁边显示状态按钮，大小为15x15pi。右边颜色填充为#6fe2fb，左边为描边</p>
<p style="text-align: center"><img alt="ps设计一个色彩靓丽的方形按钮图标教程" src="https://img.jbzj.com/file_images/photoshop/201711/20171115150945982.jpg" /></p>
<p><strong>效果图：</strong></p>
<p style="text-align: center"><img alt="ps设计一个色彩靓丽的方形按钮图标教程" src="https://img.jbzj.com/file_images/photoshop/201711/20171115150941953.jpg" /></p>
<p>教程到此结束，小伙伴是不是有所启发，何不自己动手尝试一下呢。</p>
<p>以上就是ps怎样设计一个色彩靓丽的方形按钮图标介绍。相信看完之后对大家一定有所帮助。更多PS教程请继续关注琼殿技术社区！</p>
<p><strong>相关推荐：</strong></p>
<p>ps内发光效果的按钮怎么设计?</p>
<p>ps怎样快速制作一个旋转空调按钮图标?</p>
<p>ps怎么制作一款立体滑动的UI按钮?</p>
頁: [1]
查看完整版本: ps怎样设计一个色彩靓丽的方形按钮图标?