Создание сайта под ключ + поддержка + мощное продвижение. Да, это для вас!

Проектируем веб сайты. Говорим на языке клиента. Просто и понятно о сложном.


Интернет агентство Intelweb » Блог » Веб разработка » Как создать собственный набор иконок



Александр Сенюк
Арт директор

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

Всего голосов: 3

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

В данной статье мы будем работать с набором иконок под названием 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, позволят очень легко и быстро продать ваш набор иконок, заботясь о порядке, загрузке и оплате. Все, что вам нужно сделать, это только заниматься дизайном и создать клёвую площадку для показа своей работы. Обо всем остальном позаботятся технологии.



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

Рубрика: Блог » Веб разработкаПросмотров: 951 • Тэги: иконки, вебдизайн

Отправить статью друзьм в социалку:

Если вам понравилась статья, вы можете подписаться на RSS или E-mail рассылку.
Для получения обновлений по электронной почте, введите ваш e-mail адрес в эту форму (Доставка от FeedBurner):

 

Оформить заявку
У вас уже есть сайт, но что-то в нем вас не устраивает?

Мы можем провести анализ качества разработки и посещаемости, после чего подготовить коммерческое предложение по улучшению вашего сайта.

Техническая реализация и CMS

  • Наш основной язык — PHP
    Любимая CMS — Opencart
  • разработка сайтов яваскрипт
  • разработка сайтов на HTML5, стандарт верстки
  • разработка сайтов на php
  • разработка интернет магазина на базе opencart
  • Laravel Development
  • разработка сайтов на 1с битрикс
x
Оформление заявки на разработку:
Ваше имя:
Телефон:
E-mail:
Сообщение:

С Вами в течении дня свяжется менеджер по проекту. Он сформирует для Вас конкретное коммерческое предложение по Вашему проекту.