Как создать собственный набор иконок

В наши дни иконография является неотъемлемой частью любого проекта по дизайну пользовательского интерфейса. Иконки обладают способностью передавать идеи, обладают определенными функциями и значением в визуальной части языка. Давайте посмотрим на объем работы, которую необходимо выполнить для создания набора иконок, а также рассмотрим логические фазы процесса, которым необходимо при этом следовать.

В данной статье мы будем работать с набором иконок под названием Uicons.

Шаг 1: Изучение

Участники сообщества веб-дизайна обожают отличные ресурсы, потому что они делают нашу жизнь как дизайнеров намного легче. Прежде, чем приступить к созданию своего собственного набора иконок, посмотрите, может быть, уже существует готовый набор, который будет отвечать вашим потребностям.
Таким образом, первым шагом будет проверка существующих наборов иконок; вы можете сэкономить время и энергию, не занимаясь созданием того, что уже есть.

Шаг 2: Найти нишу

Какова разница между планируемым набором иконок и одним из тысяч уже существующих наборов? Не зная, что уже есть, как узнать, есть спрос или необходимость в вашем продукте?

Выбор стилей иконок огромен, и вам придется решить, каким будет стиль иконок. Будут ли они одноцветными, многоцветными, трехмерными, карикатурными, реалистичными, в виде силуэтов, рисованными от руки или из пикселей, вам надо выбрать стиль и придерживаться его.
Всё чаще дизайнеры делают многослойные векторные иконки, которые были бы совершенны в пиксельном формате. Мы видим всё больше одноцветных иконок, которые обладают большой глубиной и детализацией, достигая этого без применения цвета.
Поэтому, как только вы нашли точку отличия и выбрали стиль, то пришло время приступить к стадии планирования.

Шаг 3: Планирование

Планирование означает принятие решения о том, какие иконки мы хотим включить в набор. На этом этапе необходимо принять во внимание на кого именно будет рассчитан ваш набор иконок, а затем создать список (лучше всего сделать в виде таблицы) на основе этих параметров.
Хорошим способом проработать данный этап будет разбить список на подкатегории, например, социальные иконки, типы файлов, транспорт, и т.д. Такой подход не только позволит держать данные в порядке, но и будет полезным на стадии дизайна, так как проверка по списку по мере выполнения работ сделает ваш перечень иконок менее сложным.
Стадия планирования также идеальное время для решения того, в каком размере (или размерах) вы будете делать ваши иконки. Принятыми размерами являются 16, 32 и 48 px, но мы видим, что все больше и больше наборов иконок предлагается в масштабируемых форматах, таких как .CSH (формат файлов Photoshop), и в виде форматов шрифтов. Подробнее о форматах вы прочитаете ниже.

На этапе планирования следует задуматься о первом этапе, в ходе которого вы провели соответствующее изучение ситуации. Есть сотни значков и иконок, которые следует учесть с целью комплектации набора, но вы не сможете запомнить их все без некоторых справочных материалов.
Будьте строги с собой на этапе планирования. Не бойтесь сказать нет идее или отбраковать часть списка — ведь он может раздуться чрезвычайно быстро. Создание качественных иконок занимает много времени и создание набора из 5000 штук (например) не только будет длиться вечно, но таким набором будет трудно пользоваться и конечному потребителю.
Например, за те 4 месяца, которые потребовались, чтобы создать Uicons, его автор Кенни Вильямс (Kenny Williams) постоянно отбраковывал часть списка и добавлял в него что-то новое вплоть до релиза набора.

Шаг 4: Дизайн

Итак, у нас уже есть список полный идей для суперских иконок. Теперь мы готовы приступить к работе по дизайну.
Во время этапов 2 и 3 вы определились со стилем иконок. Выбранный вами конкретный стиль повлияет на приложение или метод, который вы будете использовать для создания ваших иконок.
В случае с Uicons создавались масштабируемые иконки (в векторе), чтобы пользователи могли изменить размер без потери качества. Большинство дизайнеров используют Illustrator или другие приложения векторной графики, однако, векторная программа может усложнить вашу жизнь, если вы создаете рисованные пиксельные иконки. Выбирайте правильное приложение для работы.

Когда вы будете вдохновляться чем-то, не стоит увлекаться плагиатом — создавайте нечто собственное.
Иконки состоят из основных форм для того, чтобы сделать что-то узнаваемым. Может быть трудно представить себе все ваши иконки и визуализировать их с нуля. К счастью, у вас есть исследования, которые вы провели на этапе 1, и в вашем распоряжении находится список ориентиров для визуального вдохновения.
Будет хорошей идеей поиграть с альтернативными видами дизайна для иконок. Существует несколько способов для представления, например, магазина, инструментов, да чего угодно. Будьте изобретательны. Сделайте и альтернативный вид. Если бы каждый дизайнер иконок представлял одни и те же идеи одинаковыми способами, то мир пользовательских интерфейсов был бы довольно скучным.
Если вы уже создали что-то, это не означает, что это окончательный вариант. Будьте избирательны в том, что вы в конечном итоге представите общественности. В случае с Uicons, около 10% из иконок в итоге оказались «не у дел».
Стадия дизайна, очевидно, является самым трудоемким этапом всего проекта, поэтому важно быть стойким, выносливым и последовательным.

Шаг 5: Целостность

Не совсем отдельная фаза, но первостепенный подход к набору иконок. В процессе дизайна вы должны быть уверены, что ваши иконки выполнены в едином стиле. Если вы не слишком беспокоитесь о целостности проекта в процессе работы, тогда она действительно станет отдельной фазой, когда вы будете проверять стиль ваших иконок в конце.
Недостаток внимания к целостности может привести к разному весу файлов, неправильным размерам, неправильной перспективе или просто неправильному воплощению идеи в целом. После создания каждой иконки сделайте шаг назад и посмотрите, как она согласуется с тем, что вы уже создали — тогда будет легче убрать ту, которая выбивается из общей картины.

Шаг 6: Формат представления

Возможно, вы выбрали в качестве формата представления вашего набора иконок векторный, такой как .EPS, .AI или .SVG. В таком случае вы вырезаете кусок работы из всего процесса. Вы можете поступить еще умнее и выпустить ваши иконки в виде файла с комплектом шрифтов или в виде .CSH файла. Любой из этих вариантов приведет к тому, что каждый опытный дизайнер просто влюбится в ваш набор иконок. Но следование такому выбору потребует несколько больше усилий, так как вам придется конвертировать иконки из программы Illustrator в другой формат, хотя дополнительная работа дает огромные преимущества.
Так, при дизайне Uicons было затрачено несколько больше работы на данном этапе. Смуысл в том, чтобы создать многослойные векторные иконки, которые были бы идеальны в пикселях. Можно было бы сделать многослойные образы с помощью Illustrator и оставить их в таком виде, чтобы пользователи могли их скопировать и вставить в Photoshop, но по-хорошему нужно создавать идеальные с точки зрения пикселей векторные изображения в растровой программе.

Программа Photoshop просто удивительна, если только речь не идёт о создании иконок. Photoshop позволяет создавать вариации по ширине пикселей — можно указать половину пикселя или даже две трети, если хотите. Сглаживание, как это называется, отлично подходит для шрифтов и кривых Безье, но может помешать, когда речь идет о создании идеальных пиксельных иконок.
При создании набора иконок Uicons потребовалось импортировать независимо друг от друга несколько векторных фигур из программы Illustrator в программу Photoshop. Затем понадобилось выравнивание, изменение их размера и стиля, после чего была выполнена их оптимизация в плане пиксельных размеров путем сведения контуров шаг за шагом, что позволило, в конечном итоге, получить изображения с чистыми краями.

Шаг 7: Распространение

Как видите, создать собственной набор иконок — не такая простая задача. Теперь, когда вся тяжелая работа выполнена, нужно просто сделать релиз ваших иконок для общественности. К этому моменту вы уже должны были определиться, будете ли вы предлагать свою работу в качестве бесплатного набора иконок для дизайнерского сообщества или вы хотите получить небольшую компенсацию за сотни часов, которые провели за созданием вашего убийственного творения.
В любом случае, вам необходимо организовать платформу, где пользователи смогут просмотреть и скачать вашу работу. Бесплатный вариант является самым легким, так как вы можете отправить свои иконки в огромное количество графических сайтов и блогов для публикации, а потом просто сидеть, сложа руки, и ждать славы.
Однако если Вы желаете продавать свой убийственный набор иконок, то у вас впереди будет больше работы. Самый простой способ их продажи заключается в размещении набора на одном из нескольких сайтов с ресурсами для дизайна, таких как GraphicRiver. Здесь позаботятся о процессе скачивания и оплаты за вас, а вы получите преимущества от высокой посещаемости таких сайтов.

Другой вариант это создание собственного сайта для просмотра и загрузки иконок по умеренным ценам. Если дело заключается в этом, существуют прекрасные сервсисы, которые помогут вам разобраться с вопросами по загрузке и оплате.
Такие сервисы, как Fetch и Quixly, позволят очень легко и быстро продать ваш набор иконок, заботясь о порядке, загрузке и оплате. Все, что вам нужно сделать, это только заниматься дизайном и создать клёвую площадку для показа своей работы. Обо всем остальном позаботятся технологии.

Заключение

Иконография, как и любой визуальный язык, должна быть ясной и краткой. Что бы вы ни пытались представить с помощью иконок, постарайтесь выразить это просто и ясно, и у вас будет больше шансов на всеобщее понимание.

via

Читателям также нравится:

Обратите внимание!

Запущена новая версия сообщества для творческих людей — TopCreator, которое мой блог всячески поддерживает. Мы верим, что проект нужен российским дизайнерам, иллюстраторам и фотографам — мы хотимы быть вам полезны! Очень интересный проект, будьте среди первых. Заходите сюда

Комментарии

  1. 20 Апр
    Duke

    Я бы, посоветовал вам сделать регистрацию пользователей. Как то напрягает каждый раз писать имя и почту по новой. Может это и есть причина малого количества комментариев.

  2. 05 Май
    Yliv

    Как человек, рисующий уже давно иконки, могу сказать, что лучше иллюстратора для меня нет. Вектор всему голова) а зарабатывать можно на этом не только тем микростоком, который указан в статье. Их десятки. Если интересно — жду в гости на свой блог об этом виде заработка

  3. 18 Сен
    Павел

    Спасибо!
    Интересная статья, полезно и познавательно =)

Оставить комментарий:

Anti-Spam Protection by WP-SpamFree


  • Kevin Durant Shoes
  • Lebron Shoes
  • Lebron James Shoes
  • Nike Lebron James Shoes
  • Derrick Rose Shoes
  • D Rose Shoes
  • KD 7 Shoes
  • Kobe X Shoes
  • Kobe 10 Shoes
  • KD 7
  • Kevin Durant Shoes
  • KD Shoes
  • Nike KD Shoes
  • Kobe 10 Shoes
  • Discount Kobe Shoes
  • Kobe Shoes
  • Kobe Bryant Shoes
  • KD 7 Shoes
  • Kyrie Irving Shoes
  • Lebron 12
  • Lebron James Shoes
  • Lebron Shoes
  • Nike Free
  • Nike Free Run
  • Air Max Shoes
  • Cheap Air Max Shoes
  • Lebron James Jersey
  • Kobe Bryant Jersey
  • Kevin Durant Jersey
  • Air Jordan Shoes
  • Michael Jordan Jersey
  • Blake Griffin Shoes
  • Russell Westbrook Shoes
  • Rose Shoes
  • Kobe Bryant Jerseys
  • Lebron James Jerseys
  • Kobe Bryant Jersey
  • Lebron James Jersey
  • Supra Shoes
  • Kyrie 1 Shoes
  • Nike Free 5.0
  • Nike Free 5
  • kevin durant shoes
  • kd 7
  • kd new shoes
  • KD Shoes
  • Kyrie 1
  • Jeremy Scott shoes
  • Jeremy Scott Adidas
  • Tenis Adidas Springblade
  • Kevin Durant Shoes
  • Kobe Bryant Shoes
  • KD Shoes Store
  • KD Sneakers
  • Lebron Basketball Shoes
  • Adidas Porsche Design
  • kd shoes
  • Cheap Herve Leger Dress
  • Cheap Lebron Shoes
  • Adidas Porsche Design
  • Lebron James Shoes
  • Coach Retail Store
  • nba jerseys
  • louis vuitton handbags
  • Cheap Lebron 11
  • Kobe Bryant Shoes
  • Kevin Durant Shoes
  • louis vuitton belts
  • kobe shoes
  • Lebron James Shoes
  • Kevin Durant Shoes
  • Los Angeles Clippers Jerseys
  • Toronto Raptors Jerseys
  • kd 6
  • kd 7
  • kobe 9
  • Kyrie 1
  • Nike Kyrie 1
  • Kyrie 1 Shoes
  • Kyrie Irving 1
  • KD Shoes
  • Lebron James Shoes
  • KD 7
  • Westbrook Shoes
  • Lebron Shoes
  • Lebron James Shoes
  • Air Max Shoes
  • kobe bryant shoes
  • Derrick Rose Shoes
  • Rose Shoes
  • KD 7
  • Kobe X
  • Kobe 10
  • Lebron Shoes 12
  • kyrie irving shoes
  • Nike KD Shoes
  • Cheap Nike Free
  • Nike Free
  • Lebron 12 Shoes
  • Cheap Air Max
  • Cheap Lebron Jerseys
  • Kobe Bryant Jerseys
  • Kevin Durant Jersey
  • Kobe Shoes
  • Griffin Shoes
  • Michael Jordan Jerseys
  • Kobe Jerseys
  • Lebron Jerseys
  • Kobe Bryant Jerseys
  • Lebron James Jerseys
  • Cheap Supra Shoes
  • Supra Shoes
  • Nike Kyrie 1
  • Nike Free Shoes
  • Nike Free Run
  • KD shoes
  • Kyrie 1 Shoes
  • Kevin Durant Shoes
  • Jeremy Scott Wings
  • Jeremy Scott Shoes
  • Lebron James Shoes
  • Adidas Porsche Design
  • Kobe Shoes
  • Cheap Kevin Durant Shoes
  • Kevin Durant Shoes
  • Lebron 11
  • Porsche Design Adidas
  • Cheap KD Shoes
  • Lerbon James Sneakers
  • Cheap KD Shoes
  • Herve Leger Dress
  • Lebron Shoes
  • Porsche Design Shoes
  • Lebron Shoes
  • Nike Shoes
  • Cheap Coach Bags
  • louis vuitton purses
  • cheap nba jerseys
  • Lebron James Shoes
  • Cheap Kobe Shoes
  • Kobe Shoes
  • KD Shoes
  • KD Shoes
  • Sacramento Kings Jerseys
  • Washington Wizards Jerseys
  • Air Jordan Shoes
  • kd 6
  • kd 7
  • kobe 9
  • Kyrie 1
  • Nike Kyrie 1
  • Kyrie 1 Shoes
  • Kyrie Irving 1
  • Lebron James Shoes
  • Lebron 12
  • Lebron 11
  • Kobe Shoes
  • cheap kobe shoes
  • lebron 12 shoes
  • James Shoes
  • Lebron Shoes
  • Rose Shoes
  • Derrick Rose Shoes
  • Kobe 9
  • NIke KD
  • KD VII
  • KD Shoes 2015
  • kyrie shoes
  • Air Max 90
  • Air Max Shoes Sale
  • Nike Free Shoes
  • Nike Free Run 2
  • Lebron 12
  • Lebron Jerseys For Sale
  • Cheap Kobe Jerseys
  • KD Jersey
  • Jordan Jersey
  • Jordan Griffin Shoes
  • Kobe Bryant Jersey
  • Lebron James Jersey
  • Supra Footwear
  • Supra Shoes
  • KD Shoes
  • Kyrie irving Shoes
  • Nike Free Run Shoes
  • nike free run 5.0 women
  • KD Shoes
  • Kyrie Irving Shoes
  • Kevin Durant Shoes
  • KD Shoes
  • Kobe Shoes
  • Kobe Shoes
  • Adidas Wings
  • Kobe Bryant Shoes
  • Porsche Design Adidas
  • Cheap Kobe Shoes
  • KD 6
  • Cheap Westbrook Shoes
  • Kevin Durant Shoes
  • Adidas Porsche Shoes
  • Cheap Lebron James Shoes
  • Kevin Durant Shoes
  • Herve Leger Outlet
  • Lebron James Shoes
  • Adidas Porsche Design Bounce
  • Nike Lebron Shoes
  • Coach Outlet
  • nba jerseys for sale
  • louis vuitton bags
  • Air Jordan 29
  • Nike Lebron Shoes
  • Nike Kobe Shoes
  • Cheap Kobe Shoes
  • Cheap KD Shoes
  • KD 6
  • Utah Jazz Jerseys
  • Philadelphia 76ers Jerseys
  • Air Jordan Shoes
  • kd 6
  • kd 7
  • kobe 9
  • Kyrie 1
  • Nike Kyrie 1
  • Kyrie 1 Shoes
  • Kyrie Irving 1
  • Cheap Lebron Shoes
  • Lebron New Shoes
  • James Shoes
  • Cheap Lebron 11
  • Lebron James Shoes
  • KD 7
  • Adidas Rose Shoes
  • Rose 5
  • NIke KD 7
  • irving shoes
  • KD Shoes
  • Kobe 9
  • Air Max 95
  • Air Max 2014
  • Nike Free 3.0
  • Nike Free Run 3
  • lebron shoes for sale
  • kobe 2014
  • Cheap Lebron James Shoes
  • Kobe Jerseys
  • Kevin Durant Jerseys
  • Jordan Jerseys
  • Cheap Griffin Shoes
  • Jordan Westbrook Shoes
  • Kobe Jersey
  • Lebron Jersey
  • Supra Online
  • Supra Shoes
  • Kyrie 1
  • Irving Shoes
  • Kyrie Shoes
  • Nike Kyrie 1
  • KD Shoes 2015
  • Kobe Shoes 2015
  • Kobe Shoes 2015
  • Kevin Durant Shoes
  • Nike KD Shoes
  • Nike Kobe Shoes
  • Nike Kobe Shoes
  • Adidas Jeremy Scott
  • Adidas Jeremy Scott
  • KD Shoes
  • Adidas Springblade Shoes
  • Kevin Durant Shoes
  • nba jerseys 2015
  • Porsche Design Shoes
  • KD 6
  • KD Shoes Sale
  • Lebron James Shoes
  • Lebron James Shoes
  • Cheap KD Basketball Shoes
  • Herve Leger Bandage Dress
  • Adidas Porsche Bounce Shoes
  • Cheap Lebron Shoes
  • Cheap Coach Handbags
  • Louis Vuitton Bags Women
  • louis vuitton outlet
  • Kobe Shoes
  • Cheap Jordan Shoes
  • Lebron Shoes
  • Lebron Shoes Sale
  • Kobe Shoes Sale
  • Kobe Bryant Shoes
  • Lebron James Shoes
  • KD 6 Shoes
  • Boston Celtics Jerseys
  • New Orleans Pelicans Jerseys
  • kd 6
  • kd 7
  • kobe 9
  • Kyrie 1
  • Nike Kyrie 1
  • Kyrie 1 Shoes
  • Kyrie Irving 1
  • Lebron James Shoes
  • Lebron 12
  • Cheap Lebron Shoes
  • Lebron Basketball Shoes
  • Cheap Lebron Shoes
  • D Rose Shoes
  • Rose 5.0
  • KD Shoes
  • kyrie irving shoes
  • Nike Air Max Shoes
  • Nike Air Max
  • Nike Free 5.0
  • Nike Free Womens
  • nike lebron 12
  • kobe shoes 2014
  • Cheap Lebron Shoes
  • KD 7 EP
  • KD 2014
  • Kevin Durant Shoes
  • Lebron Jerseys
  • Lebron James Jerseys
  • Kobe Bryant Jersey
  • Kobe Jerseys For Sale
  • Kobe Jerseys Sale
  • KD Jerseys
  • Cheap Jordan Jerseys
  • Hyperdunk Griffin Shoes
  • Westbrook Shoes 2015
  • Nike Kobe Jersey
  • Lebron Jersey For Sale
  • Nike Supra
  • Supra Shoes
  • Kyrie 1
  • nike free run 5.0 women
  • nike free run women
  • Cheap Kyrie 1
  • Cheap Kyrie Shoes
  • Kyrie Shoes 2015
  • Adidas Shoes
  • Lebron Shoes
  • Porsche Design Shoes
  • Kobe 8
  • KD Shoes
  • Cheap Kevin Durant Shoes
  • Lebron Shoes
  • nba jerseys 2014
  • kd Shoes nba
  • Herve Leger Bandage Dress
  • Nike Lebron 11
  • louis vuitton sale
  • Kobe Bryant Shoes
  • Air Jordan Shoes
  • Cheap Lebron James Shoes
  • Kobe Shoes Sale
  • Lebron Shoes
  • Miami Heat Jerseys
  • Los Angeles Lakers Jerseys
  • kd 6
  • kd 7
  • kobe 9
  • Westbrook Shoes Sale
  • Kyrie 1
  • Nike Kyrie 1
  • Kyrie 1 Shoes
  • Kyrie Irving 1
  • Cheap Lebron Shoes
  • Lebron James Shoes
  • Lebron James Shoes Sale
  • Lebron James Jerseys
  • Cheap Rose Shoes
  • Rose 5 Shoes
  • Nike Free 6.0
  • Nike Free Sale
  • Kyrie Shoes Sale
  • KD Shoes
  • Air Max 2014
  • Air Max 90
  • cheap lebron shoes
  • lebron shoes
  • Lebron James Jersey
  • Lebron Shoes
  • Cheap KD Jerseys
  • Kevin Durant Jersey For Sale
  • Kobe Shoes
  • Jordan Jersey sale
  • Jordan Blake Griffin Shoes
  • Russell Westbrook Shoes Sale
  • official supra shoes
  • Porsche Design Shoes
  • Cheap Jeremy Scott Wings
  • Kobe Shoes sale
  • Lebron Shoes
  • Herve Leger Sale
  • nba jerseys sale
  • Coach Wallets
  • cheap louis vuitton handbags
  • Air Jordan
  • Nike Lebron Shoes Sale
  • Kobe 9
  • Kyrie 1
  • Kyrie 1
  • Kyrie 1 Shoes
  • Kyrie Irving Shoes
  • Irving Shoes
  • nike free run 5.0 men
  • nike free shoes on sale
  • Supra Shoes
  • LV Handbags Men
  • Kevin Durant Shoes
  • KD VI
  • Adidas Shoes
  • San Antonio Spurs Jerseys
  • Chicago Bulls Jerseys
  • kd 6
  • kd 7
  • kobe 9
  • Kyrie 1
  • Nike Kyrie 1
  • Kyrie 1 Shoes
  • Kyrie Irving 1
  • Kevin Durant Shoes
  • Lebron Shoes Sale
  • Lebron Shoes 2015
  • Lebron 12
  • Lebron James Shoes
  • Rose New Shoes
  • Rose Shoes 2015
  • Lebron Shoes 2015
  • Lebron 12
  • Lebron Jerseys sale
  • Nike kyrie shoes
  • Adidas Derrick Rose
  • Adidas Store
  • Adidas Shoes
  • Adidas Derrick Rose
  • lebron james shoes
  • Nike Kyrie Shoes
  • Kyrie irving Shoes For Sale
  • Lebron James Jersey
  • Kobe Bryant Jerseys
  • Kobe Jerseys For Sale
  • Kobe Jerseys Sale
  • Supra Shoes
  • Russell Westbrook Shoes
  • Kobe Jersey Sale
  • Cleveland Cavaliers Lebron Jersey
  • OKC Jersey
  • Nike Lebron Shoes
  • Lebron James Basketball Shoes
  • Kevin Durant Shoes
  • Herve Leger Bandage
  • Griffin Shoes Sale
  • nba jerseys store
  • Lebron Shoes 2014
  • cheap louis vuitton bags
  • Cheap Kobe Jersey
  • Lebron Jersey 23
  • Jordan Shoes
  • official nba jerseys
  • NBA Stars Basketball Shoes
  • KD Shoes
  • Air Max Shoes 90
  • Air Max 95
  • KD 2014 Shoes
  • KD For Sale
  • Nike Shoes
  • Nike Free
  • Kyrie 1
  • Kyrie 1
  • Kyrie 1 Shoes
  • Kyrie Irving Shoes
  • Irving Shoes
  • Phoenix Suns Jerseys
  • Customized NBA Jerseys
  • Jordan Shoes
  • kd 6
  • kd 7
  • kobe 9
  • Bulls Jordan Jersey
  • Kyrie 1
  • Nike Kyrie 1
  • Kyrie 1 Shoes
  • Kyrie Irving 1