ps教程论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

用新浪微博连接

一步搞定

查看: 2351|回复: 39
收起左侧

[按钮图标] 设计天气图标教程

[复制链接]
发表于 2016-6-16 01:37:54 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?注册

x
这套天气图标包括彩虹、太阳、雨天和雨伞几个图标,而且篇平化的图标设计起来没什么难度,教程运用了很多实用小技巧来制作,大家一起来学习。这篇翻译教程用的是CC2015版本的软件,其他版本一样制作即可。最终效果:

                               
登录/注册后可看大图

让我们开始学习吧!
作者:不详 出处:tutsplus
 楼主| 发表于 2016-6-16 01:37:54 | 显示全部楼层
1. 做一个彩虹图标第一步我们开始画彩虹的最外层红色条纹。用椭圆工具(
[url=http://www.16xx8.com/tags/28218/][/url]
U)画一个450 x 450 px的圆,打开属性面板(窗口>属性)在属性面板中,我们可以改变圆的大小、位置、颜色等等一些其他的设置。把圆的描边设置为3 pt,不填充颜色,然后我们调整下描边的颜色。 单击描边颜色图标,开打颜色样本选择窗口,你可以在样本中选择一个颜色也可以点击右上角的那个拾色器按钮,打开纯色面板,这样你可以更精确的选择颜色。

                               
登录/注册后可看大图

使用道具 支持 反对

举报 引用

 楼主| 发表于 2016-6-16 01:37:54 | 显示全部楼层
第二步添加另一个彩虹内环。 在图层面板中选择红色圆形图层,按住Control+J (command+J)复制本图层。 按住Control+T(command+T)把圆变的小一些,使它可以嵌套在红色圆形的内部,在属性面板中把描边的颜色变为橘黄。

                               
登录/注册后可看大图

使用道具 支持 反对

举报 引用

 楼主| 发表于 2016-6-16 01:37:54 | 显示全部楼层
第三步再一次拷贝图层(Control+J or conmand+J)添加第三个更小一些的圆,把描边的颜色改成黄色。

                               
登录/注册后可看大图

正式会员可以给帖子评分送花! 高级会员可以发表隐藏回复帖!
使用道具 支持 反对

举报 引用

 楼主| 发表于 2016-6-16 01:37:54 | 显示全部楼层
第四步继续添加其他的圆,赋予他们彩虹的其他几个颜色。 你可以加7种颜色或者更少,因为我们不需要做的非常拟物化也不需要太多了的细节,因为我的要画的图标是很小的。 即使你只画了三四个不同颜色的圆环,它看上去还是像彩虹。当你调整到满意的程度后,用移动工具(V)选择所有的圆环把他们编为一组(Control+G) 前往图层面板,按住Control+J复制这一组或者拖拽组到到版面地步的创建新图层按钮上,这样做也会对本组进行复制。 这样我们就做好的一个备份,万一我们在绘制过程中再想给彩虹添加点细节就可以用它啦。在图层面板选择第一组,右键合并组,这样所有圆环都合并到一个栅格化的图层中。

                               
登录/注册后可看大图

教你如何快速获得零用钱!!! 【转发帖子可以免费下载帖子里的资源.】
使用道具 支持 反对

举报 引用

 楼主| 发表于 2016-6-16 01:37:54 | 显示全部楼层
第五步现在我们用矩形选框工具(M),框选彩虹圆环的下面一半后删除。

                               
登录/注册后可看大图

教你如何快速获得零用钱!!! 【转发帖子可以免费下载帖子里的资源.】
使用道具 支持 反对

举报 引用

 楼主| 发表于 2016-6-16 01:37:54 | 显示全部楼层
第六步让我们在彩虹的两端弄两朵云。 使用椭圆工具(U)在彩虹的左下角画一个蓝色的小圆。 再添加几个的不同尺寸小圆。 按住(Control+G)把组成云彩的各个元素放到一组,并(Control+J)复制一组云。 放复制后的云朵放在彩虹的另一侧。

                               
登录/注册后可看大图

使用道具 支持 反对

举报 引用

 楼主| 发表于 2016-6-16 01:37:54 | 显示全部楼层
第七步如果你还想加点什么点缀,可以用之前的备份图层随便调整到你自己喜欢为止。 我自己也决定减少彩虹的颜色,每条色带弄厚一点。

                               
登录/注册后可看大图

教你如何快速获得零用钱!!! 【转发帖子可以免费下载帖子里的资源.】
使用道具 支持 反对

举报 引用

 楼主| 发表于 2016-6-16 01:37:54 | 显示全部楼层
第八步现在我们创建图标的基础图层。 我们用椭圆工具(U)画一个545 x 545 px 的圆。 在属性面板上设置填充色为草绿色,不加描边。

                               
登录/注册后可看大图

正式会员可以给帖子评分送花! 高级会员可以发表隐藏回复帖!
使用道具 支持 反对

举报 引用

 楼主| 发表于 2016-6-16 01:37:54 | 显示全部楼层
第九步给我们的图标添加一个长阴影效果。 用矩形(U)工具画一个 350 x 350 px的绿色正方形,使用移动工具(V)将它选择45度。 前往图层面板,在混合模式中选择正片叠底,让正方形颜色更深一些。 如果看起来颜色太深,我们就降低点它的透明度

                               
登录/注册后可看大图

教你如何快速获得零用钱!!! 【转发帖子可以免费下载帖子里的资源.】
使用道具 支持 反对

举报 引用

 楼主| 发表于 2016-6-16 01:37:54 | 显示全部楼层
第十步调整矩形大小和位置,使它像下面的截图一样放在彩虹两端。 在图层面板拖拽正方形图层到彩虹图层的下方,也可以多按几次快捷键Control+[

                               
登录/注册后可看大图

正式会员可以给帖子评分送花! 高级会员可以发表隐藏回复帖!
使用道具 支持 反对

举报 引用

 楼主| 发表于 2016-6-16 01:37:54 | 显示全部楼层
第十一步现在我们需要把露在圆外面的正方形剪掉。 用移动工具选中圆形图层后切换到钢笔工具(P),在圆上单击鼠标右键,选择建立选区。 关闭建立选区的窗口,保持默认的设置就好。在选择菜单中选择反向。(选择>反向)现在我们回到图层面板找到阴影图层,删除键删除圆外那些我们不需要的部分。(应该把阴影图层栅格化,原文没有写,包括下文用橡皮擦出也是栅格化之后才可以的)

                               
登录/注册后可看大图

教你如何快速获得零用钱!!! 【转发帖子可以免费下载帖子里的资源.】
使用道具 支持 反对

举报 引用

 楼主| 发表于 2016-6-16 01:37:54 | 显示全部楼层
第十二步现在我们用橡皮工具(E)擦掉图标上没有用的阴影。把图标的底色和阴影的颜色都调的浅一点。 我们的扁平化彩虹图标这就做好了! 下面我们移步下一个图标。

                               
登录/注册后可看大图

使用道具 支持 反对

举报 引用

 楼主| 发表于 2016-6-16 01:37:54 | 显示全部楼层

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

                               
登录/注册后可看大图

教你如何快速获得零用钱!!! 【转发帖子可以免费下载帖子里的资源.】
使用道具 支持 反对

举报 引用

 楼主| 发表于 2016-6-16 01:37:54 | 显示全部楼层
第二步现在我们加一些散射的阳光。 切换到多边形工具(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个图层环绕着太阳。太棒了! 太阳光已经完成。

                               
登录/注册后可看大图

使用道具 支持 反对

举报 引用

您需要登录后才可以回帖 登录 | 注册

本版积分规则

求建议和反映问题|不能登录?|Archiver|photoshop教程论坛 ( 粤ICP备07017357号

GMT+8, 2018-12-11 20:20 , Processed in 0.082971 second(s), 13 queries , Gzip On, Xcache On.

Powered by Discuz! X3.1

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表