如何用PS绘制天气图标呢?用PS绘制天气系列的扁平化图标教程

design.tutsplus.com   发布时间:2021-04-15 14:28:11   作者:佚名   我要评论
天气变化莫测,今天带同学们来撸一发天气图标,包括彩虹、太阳、阴雨天和雨伞图标,教程不难,不过绘制的时候用了很多小技巧(比如绘制太阳的Ctrl+Shift+Alt+T),全是实用又酷炫的,新手拿来临摹再好不过

2. 画一个暖春的太阳图标

第一步

这一次我们要做一个太阳的图标。 画一个 260 x 260 px黄色的圆作为太阳的主体。

如何用PS绘制天气图标呢?用PS绘制天气系列的扁平化图标教程

第二步

现在我们加一些散射的阳光。 切换到多边形工具(U),在控制面板顶部将多边形边数设置为3条 将橙色的三角形放置到太阳的顶部。 同时选择圆形和三角形,在控制面板顶部选择水平居中对其,确保两个形状完美居中对齐。

我们用参考线来标注下太阳的正中心。按住Control+R(command+R)调出标尺工具,下拉水平参考线到画板上。 同样的方法来拉垂直的参考线,让他们相交。

现在让我们来给太阳加更多的光束。

选中三角形按住Alt+Control+T(Alt+Command+T)自由变换 在三角形的中心找到它的轴心点,把轴心点拖拽到黄色太阳的中心。(参考线焦点) 你会在图层面板看到三角形图层已经被自动复制了一个(如果不是通过按Alt-Control-T来自由变换,图层是不会被自动复制的)。 按住Shift不放将三角形旋转45度后回车确定。

现在按下Shift+Control+Alt+T(Shift+Command+Alt+T)再复制6个图层环绕着太阳。

太棒了! 太阳光已经完成。

如何用PS绘制天气图标呢?用PS绘制天气系列的扁平化图标教程

第三步

我们不使用参考线了,在视图>清除参考线来关闭它们。

如何用PS绘制天气图标呢?用PS绘制天气系列的扁平化图标教程

第四步

拷贝上个图标的背景图层并填充成天蓝色。 在太阳下方加一个半透明的阴影。

如何用PS绘制天气图标呢?用PS绘制天气系列的扁平化图标教程

第五步

用橡皮擦擦掉黄色太阳周围的阴影(原文又没有说要栅格化啊,要栅格化了才能用橡皮擦擦掉啊。)。 我们可以利用椭圆形工具(M)建立选区 选择> 变换选区修改选区,使选区囊括太阳与阳光之间的空袭。

确定后,到图层面板选择阴影图层。 删除太阳周围这部分的阴影

如何用PS绘制天气图标呢?用PS绘制天气系列的扁平化图标教程

完成了! 我们的太阳图标做好了! 我们来进行下一步。

如何用PS绘制天气图标呢?用PS绘制天气系列的扁平化图标教程

3. 画一个阴雨天的图标

第一步

使用椭圆工具(U)画一个200 x 200 px蓝色正圆。 在左右两侧加些小圆,使云彩看着萌一点。

如何用PS绘制天气图标呢?用PS绘制天气系列的扁平化图标教程

第二步

选择所有的圆,然后图层菜单>合并形状。 前往图层面板,鼠标右键单击合并好的云图层,将图层栅格化以方便我们之后的处理。

现在我们用矩形选框工具,把云彩图层的下半部分删除掉,使云的底部变平坦。

如何用PS绘制天气图标呢?用PS绘制天气系列的扁平化图标教程

第三步

现在我们开始画雨滴的形状。 使用椭圆型工具(U)画一个35 x 35 px蓝色的圆,使用编辑节点工具(你可以在钢笔工具(P)的下拉菜单中找到它)选择圆顶部的锚点。 单击一下,圆角会变成尖角。 最后向上拖拽这个点,是它们看起来更像雨滴的形状。

如何用PS绘制天气图标呢?用PS绘制天气系列的扁平化图标教程

第四步

按住Control+J(Command+J )多复制一些雨滴,把他们散布在云彩底部,看起来像在下雨一样。

如何用PS绘制天气图标呢?用PS绘制天气系列的扁平化图标教程

第五步

加一个黄色的圆作为图标的背景同时添加一个长阴影。 我们的阴雨图标就这样做好了! 现在我们就剩下最后一个图标啦!

如何用PS绘制天气图标呢?用PS绘制天气系列的扁平化图标教程

4. 做一个雨伞图标

第一步

首先从画一个430 x 430 px 青绿色的圆来开始我们的雨伞绘制工作。 在图层面板栅格化此图层,利用矩形选框工具(M)删除圆的下半部分。

如何用PS绘制天气图标呢?用PS绘制天气系列的扁平化图标教程

第二步

使用椭圆工具(U)在青绿色半圆的底部画一排圆。 调整这组圆的大小,使它们和伞面更匹配。 最后选中这几个圆 ,图层>合并形状把它们变成一个图形。

如何用PS绘制天气图标呢?用PS绘制天气系列的扁平化图标教程

第三步

切换到钢笔工具(P),右键在圆(这几个小圆)上建立选区。 在图层面板选择青绿色的图层,删除选区内的部分,伞的底部部分就做好了。

现在我们不在需要橘黄色的小圆了,把它们删掉就好了。

如何用PS绘制天气图标呢?用PS绘制天气系列的扁平化图标教程

相关文章

  • 怎么用ps画扁平化插画 ps扁平化风格插画教程

    怎么用ps画扁平化插画?经常使用ps手绘一些喜欢的风景,风景里当然就是少不了山,下文中为大家带来了ps扁平化风格插画教程。感兴趣的朋友不妨阅读下文内容,参考一下吧
    2021-02-02
  • Photoshop绘制扁平化风格索尼PSP游戏机图标教程

    本教程教脚本之家的按钮制作学习者如何用Photoshop绘制扁平化风格索尼PSP游戏机图标,教程主要通过对图层样式的不同操作来达到最终效果,绘制的PSP非常逼真,感兴趣的朋友
    2018-01-11
  • ps怎么绘制扁平化风格的海盗插画图?

    ps怎么绘制扁平化风格的海盗插画图 ?说起海盗,能想到的就是舵手、海贼帽,宝藏和毒药,该怎么绘制这小图标,组成一个海盗插画图呢?下面我们就来看那看详细的教程,需要的
    2017-12-12
  • ps怎么设计扁平化风格的的镜头UI图标?

    ps怎么设计扁平化风格的的镜头UI图标?ps想要设计一个ui图标,该怎么设计一个镜头图标呢?下面我们就来看看详细的设计步骤,图文详细,需要的朋友可以参考下
    2017-06-06
  • PS绘制MBE扁平化风格图标

    这篇教程是向脚本之家的朋友分享PS绘制MBE扁平化风格图标方法,主要是向大家介绍图标绘制的技巧,教程很实用,值得大家学习,一起来学习吧
    2016-09-08
  • PS鼠绘扁平化风格的时钟图标

    这篇教程是向脚本之家的朋友分享PS鼠绘扁平化风格的时钟图标方法,教程比较基础,绘制出来的时钟图标非常漂亮,推荐过来,一起来学习吧
    2016-07-04
  • PS鼠绘一组扁平化风格的天气图标

    这篇教程是向脚本之家的朋友分享PS鼠绘一组扁平化风格的天气图标方法,教程鼠绘出来的图标非常漂亮,操作很简单的,使用了很多小技巧,推荐到脚本之家,一起来看看吧
    2016-06-08
  • PS CS6布尔运算工具绘制漂亮的扁平化风格的小火箭图标

    这篇教程是向脚本之家的朋友介绍PS CS6布尔运算工具绘制漂亮的扁平化风格的小火箭图标方法,教程绘制出来的小火箭图标非常漂亮,而且难度一般,值得学习,推荐过来,大家一
    2015-12-15
  • PS鼠绘一个扁平化风格的可爱和服妹

    这篇教程是向脚本之家的朋友介绍PS鼠绘一个扁平化风格的可爱和服妹方法,教程鼠绘出来的和服妹很可爱,而且方法不是很难,对于初学者来说很值得学习,推荐到脚本之家,喜欢
    2015-09-03
  • PS教程:手把手教你设计四种扁平化风格

    本文将传授你4种扁平化设计风格,绝对时髦的PS教程!读完本文,你将轻松掌握时下最热门的设计手法:) 四种风格包括:常规扁平化、长投影、投影式、渐变式。
    2014-04-10

最新评论