移动图标设计教程:快速打造iOS7风格图标

文章描述:我为你准备了一系列指南,能帮你通过简单的步骤打造iOS7风格的图标。

随着近年来iOS7的发布,很多网站和APP都忙于改头换面,来适配这套全新的扁平纤细的iOS设计风格。设计好图标是件棘手的事情,尤其当你要设计一整套时,而设计线条式图标本身又是另一项挑战。

下面,我为你准备了一系列指南,能帮你通过简单的步骤打造iOS7风格的图标。

目标是什么?

凡事分轻重缓急,你设计的图标或图标集是用于你的APP吗(这里的APP也指网站)?对于这部指南来说,都无所谓。因为无论如何你都应当遵循下面这些步骤。既然对这一点明确无疑,我们来关注首要任务——研究。

研究别人是怎么做的

研究是一项需要预先完成的基本任务。这很明显,也相对沉闷,你的每项工作都应该从研究开始。不过,在图标设计中,还有些特别的东西需要了解。


首先,看看别人怎么做。有助于了解当下潮流趋势,还有相关的设计守则。最重要的是,这能给你灵感!观察各种神奇的图标作品能助你发现其中的创意闪光,当你准备画手稿时,就能产生好点子。

既然这个指南是针对iOS7的,研究苹果的做法也不失为一个好主意。观察它的图标,无论是主屏图标(比如信息),还是app中的图标(比如时钟应用中的)。看看苹果的iOS7设计准则,你就知道他们建议你怎么做。


着手画点什么

既然你已经充分了解别人的做法,也深受启发,是时候将你的想法付诸于纸上了。在创作过程中,手稿也是一项基本步骤,因为它让你仔细思考各个创意,使大脑快速进行头脑风暴产生新想法。当你画了一些简单的手稿,并将它们都罗列在眼前,正确的方向立刻就显现出来。


手绘草稿最关键的一点,不求数量多,而是要多样化。你画了上百个相同的东西一点用也没有。如果你有三个不同概念,那就有用和深刻得多。只要你保持手绘稿千变万化,就会有好结果。广泛收集灵感有助于找到合适类型的图标,并确定应该朝哪个方向前进。除此之外,看看这些各式各样的草稿,能帮你更容易找出残次品。当你无法确定正确方向,却能肯定其中哪些不会再深入下去时,这个办法相当于管用。

绘制实际图标

我可以肯定,在完成了这些手绘稿之后,你或你的团队已经有所偏好了。无论你选出了其中具体某一个,还是几个不同方案来竞争,该把它们绘制出来了。首先要建立你的栅格系统。如果是创建主屏图标,那你应该遵循苹果提供的新iOS7设计准则。这类PSD模版网上随处可见。


我的建议是尽你所能把这些不同图标都应用于栅格系统,不过先用常规做法来绘制图标。以后再回来修改细节和做统一化处理,反正你收工前还得再做调整。对我而言这很有效。全部绘制完成后,回头来确保它们都吻合栅格,并具有统一的风格——比如它们采用尖角还是圆角?同时,你也希望确认这个图标是否符合整体设计的风格,图标与app搭配吗?主屏图标能体现app的设计吗?

修饰图标

对于iOS7风格图标设计,我有几句话说。我知道iOS7提倡纤细线条的图标设计。但这也不是必须的,尤其对于主屏图标来说。不采用细线条,而采用饱满图形的大有人在,但它们和iOS7的整体风格也相当吻合。我不觉得细线条是唯一准则,你不用也没问题,尤其当你的产品设计不适合甚至根本就不采用它们时。别管它就好。


结论

创作iOS7图标不是什么难事。就此而言,我设计它们时,就像做其他类型的设计和图标一样。关于iOS7最重要的一方面就是风格,循着苹果的脚步,你也能轻松做到。关于这套新设计风格,有一点值得一提:为iOS7设计比拟物化设计要容易多了。

时间: 2024-11-17 19:38:02

移动图标设计教程:快速打造iOS7风格图标的相关文章

Illustrator打造苹果风格图标立体化风格教程

给各位Illustratror软件的使用者们来详细的解析分享一下打造苹果风格图标立体化风格的教程. 教程分享: 将扳手的形状选中,执行Illustrator的"对象>路径>偏移路径"命令,弹出"偏移路径"对话框,输入数值-0.4.(注:-0.4的数值只是根据形状大小而来,偏移路径命令只能计算绝对数值,而不能计算相对数值,希望能在CS3的版本中能够有所更新,所以大家在使用该命令的时候,要尝试大小合适才行.)   单击"好"按钮,得到一个

Photoshop快速制作搭边风格图标教程分享

给各位Photoshop软件的使用者们来详细的解析分享一下快速制作搭边风格图标的教程. 教程分享: 先来个最终效果图,是不是很可爱啊!!!   1.新建一个追波尺寸的画布800*600,背景色选白色,名称为描边风格小图标,注意分辨率为72   2.画一个300*300的圆形,填充颜色为#ffdb00,描边为12像素的#000000的黑色描边.注意这里描边的风格应该选居中描边,结尾和转角选择圆角形式.   3.然后我们ctrl+j复制圆形图层,并分别命名为小太阳描边和小太阳填充.并将小太阳填充的图

Illustrator快速打造漂亮渐变图标教程

给各位Illustrator软件的使用者们来详细的解析分享一下快速打造漂亮渐变图标的教程. 教程分享:   好了,以上的信息就是小编给各位Illustrator的这一款软件的使用者们带来的详细的快速打造漂亮渐变图标的教程解析分享的全部内容了,各位使用者们现在看到这里了,小编相信大家现在是非常的清楚了绘制方法了吧,那么大家就快去按照教程去绘制下漂亮的渐变图标吧.

UC8.0诞生记 应用中心图标设计教程

应用的时代到来?毋庸置疑的回答是"Yes!".无论是PC.Web还是移动终端,都迎来自己"应用化"的春天.当然,随着UC8.0各线浏览器产品的发布,UC浏览器的粉丝们不难发现,"应用化"的道路上出现了大家挚爱的UC嘞,可喜可贺呀! 找好自己的风格!这是我们开始图标设计之前需要想好的.平面的?立体的?写实的?卡通的?等等.这个过程也许很长,也许会很短.灵感这东西很难琢磨.当我们想好大体的形状,我们就可以先动手画几个"模拟"图标,

优秀的Photoshop图标设计教程

现在大部分网站都融入了图标,图标逐渐成为网站里重要的一部分.适当地使用图标能帮助实现一个在客户看来非常专业的网站.尽管从网上可以下载到免费 的图标或者也可以购买通用的图标,但是学会了图标设计的技术无疑能够带来很多益处.这里就有国外20个优秀的Photoshop图标设计教程,希望对你有 所帮助. How To Design a Realistic Takeout Coffee Icon Tutorial Link For How To Design a Realistic Takeout Coff

PS制作经典质感拉丝钟表UI图标设计教程

UI即User Interface(用户界面)的简称.UI设计则是指对软件的人机交互.操作逻辑.界面美观的整体设计.好的UI设计不仅是让软件变得有个性有品味, 还要让软件的操作变得舒适.简单.自由,充分体现软件的定位和特点. UI设计原则 1.简易性 界面的简洁是要让用户便于使用.便于了解.并能减少用户发生错误选择的可能性. 2.用户语言 界面中要使用能反应用户本身的语言,而不是游戏设计者的语言. 3.记忆负担最小化 人脑不是电脑,在设计界面时必须要考虑人类大脑处理信息的限度.人类的短期记忆极不

PhotoShop制作立体游戏应用图标设计教程

应用的时代到来?毋庸置疑的回答是"Yes!".无论是PC.Web还是移动终端,都迎来自己"应用化"的春天.当然,随着UC8.0各线浏览器产品的发布,UC浏览器的粉丝们不难发现,"应用化"的道路上出现了大家挚爱的UC嘞,可喜可贺呀! 找好自己的风格!这是我们开始图标设计之前需要想好的.平面的?立体的?写实的?卡通的?等等.这个过程也许很长,也许会很短.灵感这东西很难琢磨.当我们想好大体的形状,我们就可以先动手画几个"模拟"图标,

应用中心图标设计教程

应用的时代到来?毋庸置疑的回答是"Yes!".无论是PC.Web还是移动终端,都迎来自己"应用化"的春天.当然,随着UC8.0各线浏览器产品的发布,UC浏览器的粉丝们不难发现,"应用化"的道路上出现了大家挚爱的UC嘞,可喜可贺呀! 找好自己的风格!这是我们开始图标设计之前需要想好的.平面的?立体的?写实的?卡通的?等等.这个过程也许很长,也许会很短.灵感这东西很难琢磨.当我们想好大体的形状,我们就可以先动手画几个"模拟"图标,

UI一碗拉面图标设计教程

  一碗拉面-图标设计UI教程,绘制一碗日系拉面,店家加醋再加个蛋,值得一试,绘绘绘,画画画 分类: PS入门教程 ps图标制作教程