Закрыть ... [X]

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


Значки 32px

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

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

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

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

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

пиктограмму Стиль

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

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

Некоторые пиктограммы из системных настроек OS X Часть иконок набора от Pranav Pramod Ну и мой набор по вселенной Legend of Zelda, созданный специально для настоящей публикации

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


Источник: http://digilinux.ru/2013/05/22/lowres-icons-howto/


Поделись с друзьями



Рекомендуем посмотреть ещё:



Методика «Пиктограмма Лурия А.Р. (опосредованное.) Простое оригами из моделей


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


ШОКИРУЮЩИЕ НОВОСТИ