Я люблю иконки!

блог Кондратьевой Анны

Разработка сайта — htmlman

Как рисовать пиксельные иконки

Каюсь, всегда побаивалась и старалась избегать работы с мелкими иконками, где каждый пиксель на счету. Но вот судьба свела меня и с такими:) Как оказалось, не всё так ужасно, как мне представлялось, главное — знать несколько основных приёмов.

То ли действительно не существует в русскоязычном интернете уроков по теме, то ли я просто не умею гуглить, но в итоге и эти правила мне приходилось выводить самостоятельно, воюя с карандашом в фотошопе и изучая под восьмикратным зумом все понравивишиеся 16-пиксельные иконки.
1. 1:1
Всё такое же непоколебимое и мегаглавное правило. Даже мои наивные планы уменьшить необходимый референс и рисовать поверх с треском провалились — уменьшенное размытое нечто скорее мешало, чем помогало.

2. Рисовать лучше с включённой сеткой (Ctrl+Э).
С ней обзор, конечно, ни к чёрту, но сам процесс рисование улучшается в разы — у всех нарисованных шейпов будут чёткие края, да и пен-тулом работать станет гораздо удобнее.

3. Вектор.
Пентул вообще очень помогает в рисовании аккуратных контуров, особенно когда речь идёт не о линиях в 0, 45 или 90 градусов и не о ровных окружностях. Создать карандашом не слишком размытую и не режущую глаз излишней чёткостью линию — слишком трудоёмкая работа, чтоб тратить на неё время. Я предпочитаю рисовать их пентулом по сетке, а потом уже карандашом править мелкие недочёты.

4. Контрастные бордеры.
Если оттенять тёмное светлым и наоборот, иконки выглядят чётчё и контрастнее.

5. Градиенты.
Даже самые мягкие и незаметные градиенты могут в разы улучшить вид иконки. Причём рисовать их лучше через Blending Options, а не от руки.

Ну а вот результаты моих трудов:)

3 комментариев

  1. Болтян Евгений:

    Здорово!) А ты фрилансер или работаешь в конторе какой-то?

    Ответить
    • Шама:

      Я работаю на аутсорсе:)

      Ответить
  2. Ivan:

    Ты молодец!

    Ответить

Добавить комментарий