矢量手绘

关注公众号 jb51net

关闭
平面设计 > photoshop教程 > 矢量手绘 >

PS鼠绘小清新风格的立体定位图标

脚本之家

这篇教程教脚本之家的PS鼠绘学习者和UI设计学习者们使用PS鼠绘清新风格定位图标,教程绘制出来的图标挺漂亮的。绘制难度一般,推荐一下和脚本之家的朋友们一起分享,一起学习了,我们先来看看最终的效果图吧:

PS鼠绘小清新风格的立体定位图标

具体的制作步骤如下:1、在640*640的画布上用多边形工具建立一个480*480的圆角矩形,填充颜色是#f1f1f1旋转45度,对齐

PS鼠绘小清新风格的立体定位图标

2、添加图层样式,参数如下

PS鼠绘小清新风格的立体定位图标

PS鼠绘小清新风格的立体定位图标

3、先把垂直参考线拉出来,用椭圆工具画一个180*180的正圆,填充颜色为#85bb03,

PS鼠绘小清新风格的立体定位图标

4、使用直接选择工具,选择住图中红圈的锚点,垂直下移一定的像素

PS鼠绘小清新风格的立体定位图标

PS鼠绘小清新风格的立体定位图标

5、还是用直接选择工具,选择住这个锚点,我们会发现,出现了调节曲线片段的杠杆节点,水平向左移动一定像素

PS鼠绘小清新风格的立体定位图标

6、OK,现在我们已经完成了左边部分的调节,如果还是按照这个方法去调节右边,不好精确控制,无法保证百分百的对称,所以,我画了一个矩形,对齐垂直居中的参考线,模式减去

PS鼠绘小清新风格的立体定位图标

7、选择住矩形的路径和圆形变形后的路径,合并形状组件

PS鼠绘小清新风格的立体定位图标

8、复制这个一半的形状,水平翻转,移动到右边,保持其切面与参考线贴合,选择住这两个一半的形状,再次合并形状组件,这样我们就彻底的得到了一个对称的形状图标了

PS鼠绘小清新风格的立体定位图标

9、复制一层定位的形状,置于这层的下层,更改颜色为#6b9506,我们来构建立体面

PS鼠绘小清新风格的立体定位图标

10、OK,现在我们开始细化图标,首先我们先为最下层的立体面添加一个投影

PS鼠绘小清新风格的立体定位图标

11、复制一层这个立体面,将图层的填充更改为0,添加一下投影样式,完善投影

PS鼠绘小清新风格的立体定位图标

12、现在回到图标形状图层,添加图层样式

PS鼠绘小清新风格的立体定位图标

PS鼠绘小清新风格的立体定位图标

13、复制一层图标主体,将图层填充更改为0,添加一个内发光

PS鼠绘小清新风格的立体定位图标

PS鼠绘小清新风格的立体定位图标

14、设置前景色为#52a5ef,画一个蓝色的椭圆,并添加一个图层样式

PS鼠绘小清新风格的立体定位图标

PS鼠绘小清新风格的立体定位图标

PS鼠绘小清新风格的立体定位图标

15、还是使用椭圆工具,画出下图中的圆环,添加一个图层样式

PS鼠绘小清新风格的立体定位图标

PS鼠绘小清新风格的立体定位图标

PS鼠绘小清新风格的立体定位图标

PS鼠绘小清新风格的立体定位图标

PS鼠绘小清新风格的立体定位图标

16、设置前景色为#dacfcf,还是画一个椭圆,创建剪贴蒙版,构建白色圆环的立体感,为避免边缘的生硬,我在属性面板中设置了1像素的羽化

PS鼠绘小清新风格的立体定位图标

最终效果如下:

PS鼠绘小清新风格的立体定位图标

17、最后画出中间的小指针。

好了,以上就是PS鼠绘小清新风格的立体定位图标过程,怎么样,大家学会了吗?希望这篇文章能对大家有所帮助哦!