超全的图标设计教程和资源

现代化图标已经成为数字界面时代必不可少的一部分。它可以帮助组织内容,甚至连iPod也使用图标因为他们是传达信息的快速可视化方法。在我有记忆之前,网页设计领域就已经一直在使用图标了。这些图案符号已经通过可以让人们普遍接受的图形发展成为自己的语言,例如:文件夹,打印机,鼠标,箭头等等。

在这篇文章中,我想分享关于网络上的现代图标设计的一些想法。这其中也包含了我收集的一些代表高品质的图标设计资源的免费教程。

设计风格

“图标设计”这个词囊括了一个广泛的概念。一方面来说,这些小而简单的图标,通常作为平面设计的方式被人们所知道。而颜色的另一端是凭借像PS或Illustrator这类的数字软件实现完全的现实主义。每个项目都有一个通常落在光谱上的不同的图形化需求和图标风格。

流行的简约设计风格产生了一大批世界各地的设计师的追随。iOS7和iOS8使用的线图标也已经成为其他智能手机操作系统跟风的主要方式。图标风格的选择没有正确或者错误之分,只是存在各种不同的选择。

01-flat-vs-realism-website-layout

我认为Flat vs Realism网站把两种颜色进行对比就是很聪明的行为。图标设计包含了艺术的很多原则,像深度,比例,灯光等等。当你想向一个更现实的风格更靠近时,你需要学习如何创建看起来像是真的纹理和阴影。这需要下很多功夫,但同时也会有高回报。

公司品牌

品牌设计看起来似乎不必要,但值得一提的是,一些最优秀的网站往往具有难以置信的品牌。图标设计是同用户的一种沟通思想的方式。当一个公司的品牌吉祥物或符号或图形让人流连忘返,这样每个访问者就会在他们心中有了联结。

你也可以做一系列不同的图标用于一个单一的品牌效应。自从图标设计有了如此广泛的风格,你可以考虑一大套图标都运用同一风格。只要每个图标是比较独特的风格,必将帮助网站从其他类似的布局中脱颖而出。

02-mail-bakery-website-homepage-icons

MailBakery是在主页上运用大图形来宣扬它们的服务的典型例子。当你点击每个图标下方的滑动框,新内容将会通过动画的形式展示在你眼前。每个图标和图形的设计,都同样保持在一定程度上的一致性。

其含义是,所有这些图形都是专门为这个网站定制的。当然用一套免费的现成图标也没有错–但那些免费图标也可以用在各种其他网站。这样品牌的独特性和潜在的机会就消失了。

因此,我总是建议有抱负的图标设计师学习如何为用户界面制作看起来相似的图标。这样不管是对你自己,还是对客户而言都是一条长远之路。

导航链接

在过去,图标大多用于导航上下文。也就是说,图标帮助定义网站或图形用户界面的链接或按钮。有名的脸书导航就是遵循了这个同样的原则,这样浏览一系列相似的链接时就很方便了。

03-facebook-menu-icons-list

尽管你可能不能一直使用这个技术,但了解它的益处还是无妨的。下拉菜单链接通常表现的好是因为用户通常会看每个下拉菜单。但当你有一个在一起的大的水平或垂直显示的链接,图标就能帮助你划定每个个人链接。

定义直观的内容

在网站设计中使用页面中的图标的最大原因就是来帮助定义现有内容。图标是通过合理组织后传达一个非常明确的信息的视觉线索。他们可以给另外的文字布局以平衡。学习图标设计的最重要的一课就是如何基于一个单一的图形来传达清晰的信息。

04-github-education-icons-web-design

我特别喜欢的这种效果的例子可以在GitHub Education page上找到。页眉部分使用GitHub的octocat吉祥物来创建黑板背景下的科学或教育的感觉。当你向下滚动页面,每个主要内容块都使用一系列的图标来帮助说明一点。

注意所有的图标都有一个手绘的效果并且都看上去很匹配。每个图标都连接到更大的整体,并提供了这些图标是一套的感觉。更重要的是,这些图标帮忙定义了直观的内容。文本是足以得到的讯息-图标只是帮助阐明消息。

05-glazed-and-confused-icons-web-design

你可以在Glazed & Infused主页上看见类似的影响。文本块小描述性解释了他们的餐饮 ,咖啡馆,礼品卡以及一些漂亮的图形。这些奇妙的图标却是不是必要的,但它们很快就抓住了我的注意力,并给内容提供了一个更深的意义。

矢量背景

从重复平铺背景到矢量对象,有很多你都可以做一些简单的矢量图形。相较于简单的纹理,网站背景变得更加宽大。现在仅通过向量插图就可以在背景中创建整个场景。

载体经常是很容易缩放但要创建逼真的效果却很难。矢量并不总是支持复杂的图层样式,你需要玩弄一段时间以得到挂在建筑的顶部的形状。但是一旦你学习了这个教程,它就会很有趣充实。

06-bota-iusti-background-vector-icons

Bota Iusti组合布局的特点是一个办公室组织了矢量图形的创建。页面本身就是自然响应,背景大小则是随着页面变化。创建矢量艺术的好处是,你一直可以升级它来适应各种不同的分辨率。在PS中创建矢量对象是可以的,但层的影响和过滤器并不是一直可以调整大小的。

设计教程

提升你的图标设计技能的最好办法就是通过在线教程,并没有任何捷径。所有你能做的就是从那些优秀的人和作品中学习并尽力继续勤奋练习研究。

虽然图标设计是一个广义的概念,但我已经把一小部分的教程整理起来,让你开始操作起来。看看这些例子,看看他们是否能融入你的日常。就算我们一直需要控制时间-敏感的紧急事项-但提高自己也一样紧急,即使感觉我们拥有了全世界的时间。我说最好就从这一周开始,这样下周我们就已经有进步啦。

16×16 px Icons

tutorials-01-folder-pixels-icons

Weather Line Icons

tutorials-02-vector-line-icons-minimal

Flat Social Icon

tutorials-03-flat-social-icons-howto

Tab Bar Icons

tutorials-04-flat-icons-ios7-howto-tutorials

Bat Icon

tutorials-05-bat-symbol-icon-tutorial

Gem Icons

tutorials-06-flat-precious-gems-icons

Water Pistol

tutorials-07-water-pistol-icon-design

Mail Alert

tutorials-08-mailbox-alert-icon-design

Notebook

tutorials-09-notepad-yellow-paper

Almost Flat

tutorials-10-almost-flat-icons-set-howto

免费图标

根据网上的教程,你可以免费学习到很多。设计师花时间去发布他们的在线工作是因为它不仅促进他们的工作,还帮助了设计界。学习如何使用诸如PS之类的软件通常是第一步。这样一旦你掌握了基本方法,就可以剖析文件学习他们是如何设置的,并可能找到适合自己的方法。

以下是我整理的15个用于网页设计的免费图标。每个免费的里面最少包括了一个PSD或者AI格式文件,以及相近的文件类型,像EPS或PNG。欢迎你下载这些免费资源。我相信这些图标作为方便的学习工具将证明对不同水准的设计师有用。

40 Flat Icons

freebies-01-flat-icons-psd-download

Mini Icons

freebies-02-flat-pixel-iconset-download

Colorful Iconset

freebies-03-design-iconset-download-dribbble

Simple Flat

freebies-04-simple-flat-iconset-dribbble

Sport & Fitness

freebies-05-100-free-sports-icons-pack

Chat & Email

freebies-06-chat-email-white-icons-freebie

Atitel Icons

freebies-07-atitel-icons-line-minimal-set

Tab Bar Icons

freebies-08-free-tabbar-ios-icons

Simple Lines

freebies-09-simple-line-icons-download-freebie

Flatified

freebies-10-flatline-iconset-psd-download

Web Design Iconset

freebies-11-web-designer-icons-ui

iOS Settings Icon

freebies-12-ios-settings-icon-sketch

Colorful Switch

freebies-13-colorful-switch-ui-psd

Synthesizer

freebies-14-synthesizer-icon-psd-download

Book App Icon

freebies-15-book-osx-mac-app-icon-psd

1 条评论 “超全的图标设计教程和资源”

  1. 好酷好棒的图标设计啊

发表评论

您的电子邮箱地址不会被公开。