Photoshop结合AI绘制立体风格的UI控件开关效果
本教程主要使用Photoshop结合AI绘制立体质感的UI开关效果图，前半部分主要在AI里面把主要的形状绘制出来，然后到PS里面调整质感，喜欢的朋友一起来学习吧。<p>先看看效果图</p>
<p align="center"><img alt='Photoshop结合AI绘制立体风格的UI控件开关效果'src="https://img.jbzj.com/file_images/Photoshop/201611/20161115151048256.jpg" /></p>
<p>在AI建1200px*800px画板</p>
<p align="center"><img alt='Photoshop结合AI绘制立体风格的UI控件开关效果'src="https://img.jbzj.com/file_images/Photoshop/201611/20161115151048257.jpg" /></p>
<p>绘制一个400px*70px矩形</p>
<p align="center"><img alt='Photoshop结合AI绘制立体风格的UI控件开关效果'src="https://img.jbzj.com/file_images/Photoshop/201611/20161115151048258.jpg" /></p>
<p>边角设置35px ,好像只有cc版本可以直接设置圆角</p>
<p align="center"><img alt='Photoshop结合AI绘制立体风格的UI控件开关效果'src="https://img.jbzj.com/file_images/Photoshop/201611/20161115151048259.jpg" /></p>
<p>偏移一个矩形出来，在向里偏移3px的矩形(向里设置负数)</p>
<p align="center"><img alt='Photoshop结合AI绘制立体风格的UI控件开关效果'src="https://img.jbzj.com/file_images/Photoshop/201611/20161115151048260.jpg" /></p>
<p>最后绘制出这样的图形</p>
<p align="center"><img alt='Photoshop结合AI绘制立体风格的UI控件开关效果'src="https://img.jbzj.com/file_images/Photoshop/201611/20161115151048261.jpg" /></p>
<p>然后释放图层导出psd格式(不释放会都在一个图层)</p>
<p align="center"><img alt='Photoshop结合AI绘制立体风格的UI控件开关效果'src="https://img.jbzj.com/file_images/Photoshop/201611/20161115151048262.jpg" /></p>
<p>背景拉个渐变e7e3dc到f7f5f3</p>
<p align="center"><img alt='Photoshop结合AI绘制立体风格的UI控件开关效果'src="https://img.jbzj.com/file_images/Photoshop/201611/20161115151048263.jpg" /></p>
<p>小圆拉个c2c0be到d6d6d6</p>
<p align="center"><img alt='Photoshop结合AI绘制立体风格的UI控件开关效果'src="https://img.jbzj.com/file_images/Photoshop/201611/20161115151048264.jpg" /></p>
<p align="center"></p>
<p>按钮做描边渐变叠加投影的处理</p>
<p align="center"><img alt='Photoshop结合AI绘制立体风格的UI控件开关效果'src="https://img.jbzj.com/file_images/Photoshop/201611/20161115151048265.jpg" /></p>
<p align="center"><img alt='Photoshop结合AI绘制立体风格的UI控件开关效果'src="https://img.jbzj.com/file_images/Photoshop/201611/20161115151048266.jpg" /></p>
<p>描边</p>
<p align="center"><img alt='Photoshop结合AI绘制立体风格的UI控件开关效果'src="https://img.jbzj.com/file_images/Photoshop/201611/20161115151048267.jpg" /></p>
<p>渐变叠加</p>
<p align="center"><img alt='Photoshop结合AI绘制立体风格的UI控件开关效果'src="https://img.jbzj.com/file_images/Photoshop/201611/20161115151048268.jpg" /></p>
<p>投影</p>
<p>里面的样式</p>
<p align="center"><img alt='Photoshop结合AI绘制立体风格的UI控件开关效果'src="https://img.jbzj.com/file_images/Photoshop/201611/20161115151048269.jpg" /></p>
<p align="center"><img alt='Photoshop结合AI绘制立体风格的UI控件开关效果'src="https://img.jbzj.com/file_images/Photoshop/201611/20161115151048270.jpg" /></p>
<p>渐变叠加f28b00，e75300，db7500</p>
<p align="center"><img alt='Photoshop结合AI绘制立体风格的UI控件开关效果'src="https://img.jbzj.com/file_images/Photoshop/201611/20161115151048271.jpg" /></p>
<p>内发光</p>
<p>里面的一圈a4a4a4到e8d7be</p>
<p align="center"><img alt='Photoshop结合AI绘制立体风格的UI控件开关效果'src="https://img.jbzj.com/file_images/Photoshop/201611/20161115151048272.jpg" /></p>
<p>最外层的渐变d0d0d0到ffffff</p>
<p align="center"><img alt='Photoshop结合AI绘制立体风格的UI控件开关效果'src="https://img.jbzj.com/file_images/Photoshop/201611/20161115151048273.jpg" /></p>
<p>方法都差不多 细节要处理好</p>
<p>最好完成图</p>
<p align="center"><img alt='Photoshop结合AI绘制立体风格的UI控件开关效果'src="https://img.jbzj.com/file_images/Photoshop/201611/20161115151048256.jpg" /></p>
<p align="left">教程结束，以上就是Photoshop结合AI绘制立体风格的UI控件开关效果方法，教程真的很不错，值得大家学习，推荐到琼殿技术社区，一起来学习吧！</p>
頁:
[1]