少儿美术加盟网 > 美术知识 > UI教程:用ps绘制太阳天气预报图标

UI教程:用ps绘制太阳天气预报图标

336加盟网 美术知识 2020年03月02日

近期全国各地的气温普遍下降,前两天又是立冬相信大家都get到了吧。如今天气预报的应用很广泛,各种天气播报的应用app随处可见,所以学会制作一个天气预报的图标很重要。本篇教程就教大家如何设计一个蓝色底纹的太阳天气预报的图标,总共分几个部分完成,都是利用图层样式来做出立体感,教程难度不大,很适合刚入行的小白来学习,如果大家按着名动小编给的步骤一步步来,那你离UI设计师又近了一步啦。接下来开始动手操作吧!

 

 

1、新建画布,参数设置如下图,填充一个渐变颜色。

 

 

 

UI教程:用ps绘制太阳天气预报图标

UI教程:用ps绘制太阳天气预报图标

 

2、新建图层,命名太阳,绘制正圆填充颜色。

 

 

UI教程:用ps绘制太阳天气预报图标

 

3、使用加深、减淡工具绘制出明暗以及高光。(建议先选出需要调整的选区,羽化后调整。)

 

 

 

UI教程:用ps绘制太阳天气预报图标

 

4、新建图层,并移动到太阳图层下面, ctrl+太阳图层出现选区,羽化(30)填充颜色。

 

UI教程:用ps绘制太阳天气预报图标

 

5、新建图层,命名云朵。使用钢笔工具大体绘制出云朵的轮廓。

 

 

UI教程:用ps绘制太阳天气预报图标

 

6、和绘制太阳方法相同,新建一个图层移动至云朵图层下羽化填充。

 

 

UI教程:用ps绘制太阳天气预报图标

 

7、使用蒙版擦掉部分模糊过度的地方,加深减淡工具绘制出云朵明暗。

 

 

UI教程:用ps绘制太阳天气预报图标

 

8、使用涂抹工具让云朵的外形更加生动真实。

 

UI教程:用ps绘制太阳天气预报图标

 

9、将绘制出太阳与云朵集合。

 

 

UI教程:用ps绘制太阳天气预报图标

 

 

10、新建图层绘制黑色圆圈。

 

 

UI教程:用ps绘制太阳天气预报图标

 

11、在黑色选区内使用镜头光晕(滤镜>渲染>镜头光晕)。

 

 

 

UI教程:用ps绘制太阳天气预报图标

UI教程:用ps绘制太阳天气预报图标

 

12、将图层移动至底层,调整光晕位置大小,设置图层混合模式为滤色。添加蒙版擦去黑色部分。

 

UI教程:用ps绘制太阳天气预报图标

 

 

13、调整云朵,太阳以及光晕的位置。

 

UI教程:用ps绘制太阳天气预报图标

UI教程:用ps绘制太阳天气预报图标

 

 

 

到这里为止,一个太阳天气预报的图标就全部做好了,希望大家都能跟着教程学会,同时也要记得在这个冬天注意保暖哟。如果你说,看完这篇教程还是学不会怎么办,那你可以来名动漫报名学习专业的UI设计培训,充实自己的UI知识,提高自己的制作能力。名动漫,拥有十年的教学经验,开设有专业的UI课程,是大家学习UI设计培训的理想选择。

 

 

UI教程:用ps绘制太阳天气预报图标

标签: