loading请求处理中...
手机版 新型设计开发 托付式服务平台 全国站
快来领走您的获客礼包×
当前位置: 首页 > 威客攻略 > app图标
免费发布需求,接收报价与方案

如何制作app图标

2019-05-15 14:57:48 阅读 27329次 0 标签: app图标 作者: 陈先生12121

     在开始这篇文章之前,我需要声明我还没有系统地学会如何使用Photoshop,所以我可能会在许多处理方法中表现出业余爱好者特有的冗余和大惊小怪。如果发生这种情况,也请读者指出评论区的错误。钢铁野心4中的图标主要用于国策和国家精神,其最基本的目的是以图形方式表现文本想要表现的内容,并且高品质丰富的定制图标可以大大增加模块的趣味性。如果想为想要参加的模块和参加的模块制作出色的图标的话

准备好了。 首先,制作前需要做好准备。 首先,从下面的列表开始


如何制作app图标

  1. 一个可靠的图片搜索引擎。我们需要借助它搜索各种各样的素材来为我们的图标增添独特性和趣味性。你可以用任何你想用的,但在这篇教程中我将使用谷歌图片。
  2. 一个可靠的图片处理软件。在这里我推荐使用PS,当然你也可以使用gimp或者其他软件,但由于我在教程中使用的是PS,所以在具体操作方面可能会存在很大的偏差,但这篇教程中依然有很多你可以学习的思路。
  3. 素材。巧妇难为无米之炊,一些从原版图标上扣下来的边缘框架、红星或士兵等基本元素我们完全可以直接拿来用,只需要进行一点加工就可以把这些我们之前看到吐的元素以一种新的形式展现出来了。地址在这里,这是目前为止最全的素材库:https://github.com/DillanV/Ultimate-HOI4-GFX
  4. 想象力。想象力是在制作过程中必不可少的元素,我们一定要试着打破框架,清扫掉那些原版图标在我们脑子中留下的思维局限。丰富的想象力将给你带来一些好点子,而这篇教程的 目的就是教你如何把这些好点子变成一个个美丽的图标。
  5. 自信。可能在看这篇教程时你从没接触过美工类的工作。但是放轻松!相信我,只要经过一些恰当的引导,任何人都可以做出令人满意的图标。相信你自己,你可不会被这些小小的图标给难倒。

边做边学:

制作图标在本质上只有三个步骤,构思、寻找素材和处理素材。

多说无用,实践出真知,让我们先来试着做一个图标吧。那么我现在想要做一个名为“长征”的图标,具体的意象为一名战士在红旗下奔跑

首先在PS中打开我们的素材库中的Focus background,这里密密麻麻摆着各种各样的图标背景,但我个人不太喜欢用那些五颜六色的定制背景,因为我认为它们过于花哨,而且不管怎么加工都很难符合预期的美术风格。

如何制作app图标

因此在一通翻找后,我决定使用这个较为朴素的背景。

如何制作app图标

打开背景后,我们就需要找素材了,也就是红旗奔跑的战士。打开素材库中的Focus icon,这里也密密麻麻地摆着一大堆图标元素。

如何制作app图标

在一通翻找后我们终于找到了两个符合要求的素材,而且为了以后不用再手动翻找,我们可以给这些素材起个名字,以后好直接搜索到它们:

如何制作app图标
如何制作app图标

但很显然这个“旗子”并不是一个红旗,而且它的后面还有一个碍事的背景,所以就让我们从处理这个素材开始。我们的目的是:把这个旗子的背景去掉,然后让它变成一个红旗。

首先选择多边形套索,把旗子框上一圈,在框选过程中你可以放大图像然后尽量慢慢来,对于初学者来说让鼠标保持稳定可不太容易。(按住Alt后拖动滚轮就可以放大和缩小视角了)

如何制作app图标
如何制作app图标

选取完旗子后,同时按住ctrl、shift和I,反选选区,然后按住Del后这些恼人的背景就消失了。

如何制作app图标
如何制作app图标

但是对于这个旗帜本身的处理并没有到此为止,我们会发现这个旗子依然存在着一个小瑕疵,那就是旗杆的上半部分不见了,这个问题在原版的图标是不存在的:

如何制作app图标

所以接下来让我们选取旗杆,将其复制两份然后按住ctrl用鼠标拖动附肢下来的旗杆,让这两个复制品叠加成一个更长的旗杆,然后按住ctrl+E合并这两个图层,这样一来这个大旗杆就是一个整体了。

如何制作app图标
如何制作app图标
如何制作app图标

接下来拖动旗杆,让它完美地契合到旗子上后合并图层就可以了,这样我们就得到了一个空白旗子的素材。

如何制作app图标

但在将它变成一个红旗前先不要着急,我们以PNG的格式保存这个白旗,这样一来我们就又有了一个方便的新素材,这一点在制作其他图标时也要记住,如果你做出了一个令自己颇为满意的素材,不要忘了在进行进一步加工前将它保存下来,聪明地运用你的劳动成果。

如何制作app图标

然后就进入了另一个重点,如何让这个模板白旗变成我们想要的旗子呢?这其实也很简单,首先让我们在网上找到中国工农红军的军旗,然后将其复制到素材上面,按住ctrl+T对其进行缩放。

如何制作app图标
如何制作app图标

接下来是非常重要的一步,根据下图所示将国旗的变为正片叠底的形式。

如何制作app图标
如何制作app图标

神奇的一幕发生了。国旗居然“印”了上去!但这还远远不够,我们要对国旗的大小、位置、角度和扭曲程度进行进一步调整。因此让我们按下ctrl+T,右键选择扭曲

如何制作app图标

然后将四角上的四个方块放到白旗的四角上,这样就好了很多。

如何制作app图标

但这依然不够,因为国旗本身是带有扭动的。因此让再次我们右键选择变形,再让它扭一扭。

如何制作app图标

这样就扭的差不多了,但是有一部分红旗漏了出来,因此然后我们用橡皮擦小心地擦掉这些多出来的部分,注意不要把旗帜内的部分也擦掉。擦的时候注意要放大图层。

如何制作app图标
如何制作app图标

但是,在仔细观察后,我们会看到这个旗子有些太模糊了,因此我建议在完成前对其进行一次锐化,这会让图片看起来更清晰。

如何制作app图标
如何制作app图标


完成了!这可真是一个完美的红旗。如果你能做到这里,那么你已经成功一半了!

如何制作app图标

按照惯例,合并图层后让我们把它存下来。你在将来会存下来一堆类似的东西。

如何制作app图标

接下来就比较简单了,把红旗和士兵一起复制到背景上。

如何制作app图标

但是很显然这不能算是成品,首先它没有背景,而且这几个元素的大小不协调,再加上这几个元素的边缘没有阴影,因此这显得其非常没有层次感。所以让我们一个一个解决,首先给它找一个背景,你当然可以直接使用素材库中的这个背景,然后把它放在最后面的图层里:

如何制作app图标
如何制作app图标

但是!

这并不酷。这体现不出长征爬雪山过草地时的场景。所以让我们试着通过关键词“长征 草地”来看看网上有没有什么合适的背景:

如何制作app图标

右下角那张就很不错,让我们将其复制过来,在缩小到合适的尺寸用橡皮擦去多余的部分(注意一定要把多余的部分仔细擦掉,因为图标上的瑕疵不仅更加显眼,而且会让人强迫症发作!):

如何制作app图标
如何制作app图标

看起来很不错,但这里存在一个问题,这张背景无论是在饱和度还是亮度上都不太符合钢铁雄心4这个游戏的美术风格,因此让我们来调一调它的亮度和饱和度,当然你也可以修改色相,这都看个人的喜好。

如何制作app图标
如何制作app图标

下面这些参数只供参考,不必照搬。

如何制作app图标
如何制作app图标

然后我们就得到了一个....还说的过去的背景(至少对我来说)。你可以直接隐去旗子和士兵的图层来好好欣赏下这大好河山。

如何制作app图标

处理完背景,让我们来调整下元素的大小。这和之前一样,ctrl+T然后放大或缩小,在这里的士兵很明显太大了,所以我们缩小它。

如何制作app图标

但是要注意,在对图像进行缩放后它们都会变得很模糊,因此最好在缩放后也给它们来次锐化:

如何制作app图标

但这个锐化...太过头了,这让这个元素显得很突兀,我们需要控制住锐化的程度。如何控制呢?很简单,首先撤回上次锐化的操作,然后选择智能锐化,随便拉一拉参数就完事了。

如何制作app图标

同样地,这里的参数仅供参考:

如何制作app图标

红旗看起来没什么需要调整的,所以我们基本完成了对素材尺寸的处理...

但是!

真的就这样结束了吗?

并没有。

我们要考虑到,长征是有一群人而不是一个人,因此这里因为我们只使用一个士兵很明显不太合适,因此我们要复制这个士兵,将其弄成三个。

如何制作app图标

将后面两个士兵合并为一个图层,缩小,然后降低明度(因为它们在后面)。

如何制作app图标

终于结束了!马上就要完成了,你需要再坚持一下。接下来就是给元素的边缘增加阴影了,实际上这个阴影不是必须加的,但是有了它们效果会完全不同,我先把效果演示给你看看。

如何制作app图标

怎么样?是不是感觉好了很多?

加阴影也很简单,如图所示:

如何制作app图标

同样地,参数仅供参考,你可以先自己随便拖动和点击下这些按钮来熟悉下界面,总之阴影的标准是:不能太浓(否则就是描边了),也不能太淡(那就看不出来了)。

如何制作app图标

完成这些后,这个图标差不多就完成了。将其同时保存为PSD和PNG两份,前者用来备用修改,后者用来看,但当然真正将图标放入游戏时你需要的是DDS或者TGA格式的图片。这些我们在以后会讲到

扫码,回复【创业】领取

免费送您一份创业礼包!

从0到1,解锁创业全套秘籍

帮你避开创业那些坑

设计、开发、营销需求

扫描左边二维码

免费获取咨询和方案报价

公司推荐

成为一品威客服务商,百万订单等您来有奖注册中

相关文章

留言(0 展开评论

您需要注册登录才能发表言论

服务排行榜
SERVICE LIST 更多
全案VI设计 LOGO 名片 QQ...
价格面议 成交489
新萝卜-最实惠 QQ2108760...
【设计总监】包装设计 3套...
¥6000元 /件 成交456
新萝卜-最实惠 QQ2108760...
【普通设计师】LOGO设计 2...
¥668元 /件 成交363
新萝卜-最实惠 QQ2108760...
资深设计师操刀
¥800元 /件 成交357
新萝卜-最实惠 QQ2108760...
【资深设计师】包装设计 ...
¥1500元 /件 成交325
新萝卜-最实惠 QQ2108760...
【资深设计师】高端LOGO设...
¥1500元 /件 成交325
新萝卜-最实惠 QQ2108760...
牛人设计总监 全网中标最...
¥3000元 /件 成交325
新萝卜-最实惠 QQ2108760...
logo设计
¥100元 /件 成交280
兰灵视觉
画册、企业手册、宣传手册...
¥200元 /页 成交273
新萝卜-最实惠 QQ2108760...
【久铭乐】商标、网站、企...
¥399元 /起 成交269
久铭乐广告传媒-QQ3491095...