Как правильно рисовать иконки маленького размера

Недавно мы опубликовали подборку дизайна значков от Оллина Боэра Боана, а теперь публикуем перевод его статьи, присланный нашим читателем CrossFire.

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

Речь о значках вроде этих:

Чаще всего в таком стиле создают пиктограммы размером 32px (которые и рассматриваются с статье ), однако в некоторых случаях иконки в 16px, 24px, 48px, или даже 128px рисуются схожим образом.

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

Стиль

Такой стиль повсеместно используется при создании иконок рассматриваемого размера, то есть почти везде, где место ограничено, а потому четкость является ключевым моментом.

Давайте рассмотрим несколько примеров:

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

Вот их краткий список:

• Освещение: Источник света располагается в той же позиции, что и на пиктограммах больших размеров (выше камеры), однако свет значительно «мягче», что достигается линейными градиентами сверху-вниз, слабовыраженными тенями. Одноцветная заливка не используется, даже плоские поверхности изображаются с применением градиента. Исключением могут быть мелкие детали.
• Заполнение: Следует использовать чистые, несмешанные цвета, чтобы увеличить четкость. Такой подход позволяет изобразить практически любой материал, потому использование текстур крайне нежелательно, и допускается лишь в том случае, когда это совершенно необходимо для выражения значения пиктограммы.
• Цвета границ: Контрастность иконки создается с помощью границ в 1px, добавлением блика на верхней грани. Границы рисуются где-то на 40% темнее внутреннего цвета и имеют максимальную насыщенность. Следует добавить небольшую тень вокруг границ — место сильно ограничено, потому стоит использовать любую возможность придать объем.
• Прозрачность границ: Границы изображаются полупрозрачными( 50-90%) для улучшения контрастности при наложении на различные фоновые цвета. Из-за того, что граница всегда должна быть темнее внутреннего цвета, иконки с темным заполнением должны иметь непрозрачность, близкую к 100%. Напротив, светлые значки должны иметь темную, полупрозрачную границу, чтобы прилично выглядеть на темном фоне. Ниже приведено сравнение, наглядно демонстрирующее преимущества такого подхода: сверху представлена иконка с черной полупрозрачной границей(50%), снизу — с полностью непрозрачной серой. Заметно, что темная, полупрозрачная граница лучше приспосабливается к разным фоновым цветам.

  

• Расположение и перспектива: Элементы размещаются под углом 90˚, что дает максимальную четкость на квадратной сетке пикселов. Перспектива, как и текстуры, может использоваться только в тех случаях, когда это действительно необходимо для выполнения информационной функции иконки.

Организуйте свое рабочее пространство

Правильная организация пространства позволяет создавать мелкие иконки быстрее и проще. Я рекомендую воспользоваться моим опытом, и настроить себе нечто вроде такого:

Выделю несколько моментов такой организации:

• Пиктограммы рисуются в удвоенном разрешении, используя сетку в 2px. Это дает уверенность, что получившаяся иконка будет сглаженной, без зазубрин и лесенок, позволяет не беспокоиться о правильности заливки некоторых пикселов. Можно работать несколько небрежно в укрупненной версии, получая отличный результат в целевом разрешении.
• Следующий прием, о котором я хотел рассказать — использование холста с широкими отступами, и меньшим, отключаемым темным квадратом, ограничивающим иконку. Хитрость появилась потому, что пикселы контура часто «прилипают» к краям холста, а используя дополнительные отступы мы получаем представление о том, как пиктограмма будет выглядеть при использовании. Темный квадрат — нечто такое, что можно отобразить при рисовании контура, чтобы убедиться что размер иконки не превышает намеченного.
• Я использую отдельное, неотвлекающее окно, показывающее уменьшенную на 50% копию рисуемой иконки. Создать такое можно с помощью [ View>New View ] в GIMP, или [ Window>Arrange>New Window of… ] в Photoshop. Данный прием избавляет от необходимости каждый раз уменьшать масштаб, чтобы посмотреть, что получилось после редактирования.

Распространенные ошибки

Из-за того, что такая техника рисования широко распространена, я часто вижу одни и те же ошибки, всплывающие многократно.

Вот несколько советов, как их избежать:

• Либо забывают нарисовать тень, либо делают ее слишком темной. Это одна из самых распространенных ошибок. Тени — необходимая деталь, делающая иконку как бы прикрепленной к фону, и если эту деталь упустить, она выглядит наклеенной на подложку. С другой стороны добавление слишком темной тени, так же ухудшает результат. Иконка должна быть крайне прозрачной, при этом иметь непрозрачные области в местах прилегания к подложке. Плохой идеей является попытка сделать одну тень на весь набор иконок, так не получится.
• Непрозрачные края. Из-за них иконка плохо смотрится на подложках разных цветов. Никогда не делайте таких, за исключением случаев, когда необходимо получить границу темнее внутреннего цвета.
• Не выставляйте источник света по центру иконки, добавляя ненужные круговые градиенты, и т.д. Затенение иконок должно быть крайне простым в 90% случаев. Некоторые материалы, такие как металл, требуют более детальной проработки, однако большинство других могут быть изображены с использованием лишь линейных градиентов, и границ со светлой внутренней тенью.
• Уродливые, блеклые цвета. Я постоянно замечаю такие, особенно когда они находятся на границе, сугубо нуждающейся в насыщенном цвете. Привлекательность иконок в 32 пиксела зиждится на ярких, соблазнительных цветах — внимательно отнеситесь к выбору. В следующей статье я надеюсь подробнее описать приемы, позволяющие получить красивые, живые цвета — а пока просто запомните, что «мягкий» свет и перекрытие — ваши лучшие друзья.
• Замыленные или ступенчатые края. Лучшее решение, позволяющее избежать этой ошибки — рисовать иконку в двойном размере, используя сетку в 2px, а потом объединять слои и сжимать ее до целевого разрешения. Выравнивание деталей по сетке — крайне важно для создания качественной пиктограммы, не поленитесь потратить время на это.

Процесс создания иконки в реальном времени:

Оригинал: Guide to Creating 32px Icons