fbpx

Как сделать свои иконки еще лучше. Часть 2

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

А теперь давай перейдем к шести простым, но конкретным шагам, которые помогут сделать твой дизайн немного лучше!

1. Всегда начинай с сетки

В нашем случае мы будем использовать сетку 32*32 пикселя. Она выступает в качестве основы, которая поможет нам при дальнейшей отрисовке иконок.

kak-sdelat-svoi-ikonki-eshhe-luchshe1

Два внешних пикселя сетки – это та самая запретная зона: постарайся избегать размещения там каких-либо элементов. Цель этого пустого пространства – создание “воздуха” вокруг иконки. Если ты проведешь несколько линий по внешним краям этого пространства, у тебя получится такие себе ограничительные рамки в виде треугольника, квадрата или же окружности. Круглые иконки, как правило, затрагивают все края области, не выходя за запретную зону. Обрати внимание на то, что затрагивать последнюю можно только расположением более мелких, но обязательных элементов. Как говорится, деваться-то некуда.

kak-sdelat-svoi-ikonki-eshhe-luchshe2

Иконки квадратной формы можно расположить впритык к запретной зоне. А для того, чтобы поддерживать правильную визуальную составляющую рисунка треугольной или круглой формы, последний должен быть выровнен по центральной линии (показано на рисунке снизу).

kak-sdelat-svoi-ikonki-eshhe-luchshe3

На рисунке снизу ты можешь заметить в 32*32 сетке прямоугольную область размером 20*28 по вертикали и горизонтали соответственно. Ты свободно можешь использовать эту зону для размещения значков горизонтальной или вертикальной ориентации.

kak-sdelat-svoi-ikonki-eshhe-luchshe4

Если речь о диагонально-ориентированных иконках, то они должны быть расположены по краям округлой области содержимого, как показано ниже. Обрати внимание, что крайние точки пилы приблизительно выровнены по краям окружности.

kak-sdelat-svoi-ikonki-eshhe-luchshe5

2. Начни с простых геометрических фигур

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

Читайте также:  BBDO представил брендинг «вина, в которое вложена жизнь»

kak-sdelat-svoi-ikonki-eshhe-luchshe6

3. Края, линии, углы, кривые и ракурсы

Насколько это возможно, сделай углы и края в максимальной степени математически точными, но не перебарщивай – в этом случае твоя иконка будет слишком “механически” выглядеть. В общем, несогласованность таких мелких деталей снижает качество твоего рисунка.

Углы

В большинстве своих случаев необходимо придерживаться угла в 45 градусов. Почему? Во-первых, так легче работать, во-вторых, картинка выходит четче, ну и в-третьих, человеческий глаз очень любит это соотношение. К тому же, этот принцип помогает выработать единый стиль всей коллекции. Ну а если идея твоего дизайна все-таки диктует тебе, что нужно обойтись без 45-градусного угла, то постарайся придерживаться “половинчатых” пропорций – 22,5 и 11,25 градусов соответственно. Конечно, твоя идея индивидуальна, и решение, под каким углом рисовать элементы иконки, все равно принимать тебе.

kak-sdelat-svoi-ikonki-eshhe-luchshe7

Кривые

Это те самые элементы, которые показывают разницу между новичком и профессионалом – уж очень несоответствия бросаются в глаза. Никогда не рисуй их вручную, опять же, все давным давно придумали за тебя – например, специально существующие для этого инструменты Adobe Illustrator.

kak-sdelat-svoi-ikonki-eshhe-luchshe8

На картинке выше можно подсмотреть вручную нарисованные элементы. Не очень, правда?

kak-sdelat-svoi-ikonki-eshhe-luchshe9

Углы

Общее значение закругленного угла на картинке равняется двум пикселям. На 32-пиксельной иконке радиус в 2 пикселя достаточно велик для того, чтобы смягчить края, но не настолько, чтобы значительно влиять на дизайн иконки в целом. В общем, нужно выбирать значение, исходя из характера дизайна.

kak-sdelat-svoi-ikonki-eshhe-luchshe10

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

kak-sdelat-svoi-ikonki-eshhe-luchshe11

Соответствие в пикселях

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

Читайте также:  15 психологических принципов, которые должен знать каждый дизайнер

Ширина линий

Знаешь, в чем преимущество ширины линий в 2 и 4 пикселя? Их легко масштабировать. Избегай слишком тонких линий, особенно в flat-дизайне. Но если ты собираешься рисовать линейную иконку, то лучше придавать ей форму с помощью светотеневого рисунка, а не с помощью прямых.

kak-sdelat-svoi-ikonki-eshhe-luchshe12

4. Согласовывай элементы и выставляй правильные акценты

В нашем примере мы использовали один общий стилистический элемент, и это – нос в виде сердца. Эта деталь не только связывает все иконки в серию, но и придает им своеобразной причудливости, а еще показывает, насколько мы любим своих четвероногих друзей 🙂

kak-sdelat-svoi-ikonki-eshhe-luchshe13

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

kak-sdelat-svoi-ikonki-eshhe-luchshe14

5. Не перебарщивай с деталями

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

kak-sdelat-svoi-ikonki-eshhe-luchshe15

На верхней версии иконки уже становится видно, что мы почти у цели. Черные линии вокруг ушей превратились в мех вокруг них же, а темные 2-пиксельные линии вокруг мордочки корги все еще здесь над белым пространством, но они поменяли цвет и стали менее выделяющимися. Однако у нас все еще обыкновенный нос, но эту проблему мы будем решать на следующем этапе.

Читайте также:  4 новых лекции для дизайнеров

6. Сделай свой дизайн уникальным

Количество талантливых дизайнеров, которые готовы делиться своими крутыми иконками бесплатно, растет с каждым днем. Но к сожалению, многие из них слишком сильно полагаются на тренды или же равняются на одних и тех же икон дизайна. Важно помнить одну вещь: как профессионалы мы должны смотреть за пределы основных сфер – архитектуры, фотографии или рисунка – и находить вдохновение в чем-то другом. И чем меньше ты будешь равняться на кого-то, тем более уникальным будет твой дизайн.

kak-sdelat-svoi-ikonki-eshhe-luchshe16

А вот и нос в виде сердца.

kak-sdelat-svoi-ikonki-eshhe-luchshe17

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

Тебе понравится:

Тренды в мобильном UX дизайне на 2016 год

5 лекций с NAB Show 2016, которые должен увидеть каждый моушн-дизайнер

Как сделать свои иконки еще лучше. Часть 1

Поделиться:

Про автора

Фотограф. Улавливаю прекрасные мгновения в жизни людей :)

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: