Рисуем четкую иконку дома в 32x32 (аля FatCow)

  • Tutorial

Как правильно нарисовать иконку (размер 32х32, часть I)


Хочу предложить вашему вниманию урок по созданию иконок размером 32х32 в программе Adobe Photoshop. Данный урок позволит научиться рисовать иконки не прилагая много усилий – в итоге вы поймете что рисование иконок для интерфейсов не такая уж и сложная задача, нужно лишь запастись терпением, и знать представление о работе в программе Adobe Photoshop.
40.png 39.png
Итак, начнем! В первую очередь, чтобы иконки не выбивались из размера и были похожи по стилю, нужно сделать шаблон, на основе которого мы будем рисовать серию иконок.

Первым делом запустим программу Adobe Photoshop, далее заходим в меню File > New, либо нажмем сочетание клавиш Ctrl+N, и создаем изображение размером 32х32 пикселя, и разрешением 72 dpi.
Как нарисовать иконку
Далее, чтобы у наших иконок были четкие неразмытые края, и в дальнейшем они выглядели четко и контрастно, нам нужно настроить отображение сетки (Grid), благодаря которой мы будем ориентироваться при рисовании – ведь изображение состоит из пикселей, соответсвенно нам нужно чтобы у нас отображалась сетка с шагом в один пиксель.
Заходим в меню Edit > Preferences > Guides, Grid and Slices, либо жмем на клавиатуре сочетание Ctrl +K и производим настройки как показано на изображении.
Как нарисовать иконку
Теперь у нас создан шаблон, на основе которого мы будем создавать наши маленькие шедевры. Так как у нас в иконках подразумевается тень, то это нужно учесть. Размер тени я планирую сделать на 2 пикселя снизу от иконки и по 1-му пикселю с каждой стороны, следовательно, иконка у нас получится 30х30 плюс тень. Для удобства давайте поставим направляющие, которые позволят нам в дальнейшем видеть границы между изображением иконки и тенями, на которые мы отвели соответствующее пространство.
03.png
В итоге наш шаблон готов, и теперь можно приступить непосредственно к рисованию иконок.
Как нарисовать иконку
Иконка Home
Чтобы четко видеть формы, которые мы рисуем, я буду использовать черную заливку. Итак с помощью инструмента pen_tool.png Pen Tool (K) рисуем основу для иконки Home.
Как нарисовать иконку
Далее, чтобы придать нужный цвет и контур идем в меню Layer > Layer Style > Gradient Overlay… и делаем градиентную заливку от цвета eae6c9 до цвета cbcfba
Как нарисовать иконку
После, чтобы форма была в будущем контрастной мы присвоим этой форме контур. Для этого идем в меню Layer > Layer Style > Stroke… и делаем линию толщиной 1 пиксель и с цветом 868686
Как нарисовать иконку
Вот что у нас должно получиться
Как нарисовать иконку
Теперь с помощью того же инструмента pen_tool.png Pen Tool (K) рисуем основу для крыши
Как нарисовать иконку
Теперь придадим ей нужный цвет — идем в меню Layer > Layer Style > Gradient Overlay… и делаем градиентную заливку от цвета b06a00 до цвета 8c4d00.
Как нарисовать иконку
Получаем вот такой результат
Как нарисовать иконку
Ну вот, уже кое-какие очертания у нас появились, теперь будем дополнять нашу форму деталями – с помощью инструмента restange_tool.png Rectange Tool (U) рисуем трубу
Как нарисовать иконку
Назначаем на трубу градиентную заливку от цвета eae6c9 до цвета cbcfba, только градиент на этот раз направляем горизонтально
Как нарисовать иконку
Как и ранее, добавляем контур толщиной 1 пиксель и с цветом 868686
Как нарисовать иконку
Получаем…
Как нарисовать иконку
Теперь прячем трубу на задний план, и с помощью инструмента restange_tool.png Rectange Tool (U) рисуем еще один элемент крыши
Как нарисовать иконку
Назначаем градиент от цвета ce9128 до цвета b06a00
Как нарисовать иконку
… и добавляем контур толщиной 1 пиксель и с цветом a86600
Как нарисовать иконку
Смотрим…
Как нарисовать иконку
Прячем готовый элемент так же как и трубу на задний план, и опять же с помощью инструмента restange_tool.png Rectange Tool (U) рисуем дверь
Как нарисовать иконку
И выполняем уже знакомую нам операцию с градиентом от цвета b06a00 до цвета cd9128
Как нарисовать иконку
… и не забываем про линию… толщина 1 пиксель, цвет a75700
Как нарисовать иконку
Смотрим результат…
Как нарисовать иконку
Получился, вполне симпатичный домик, но мы продолжим наполнять нашу иконку деталями – жмем restange_tool.png Rectange Tool (U) и рисуем чердачное окно
Как нарисовать иконку
Ну, и, опять же, градиент – с цвета 2e8ce0 до цвета 7cc6fd
Как нарисовать иконку
Назначаем контур толщиной в 1 пиксель, и цветом 4381c8
Как нарисовать иконку
Оцениваем результат…
Как нарисовать иконку
Наш домик почти готов, но он смотрится слишком плоским – будем добавлять объем с помощью бликов.
Создаем новый слой, и с помощью инструмента pencil_tool.png Pencil (B) рисуем две линии
Как нарисовать иконку
Идем в меню Layer > Layer Style > Gradient Overlay… и делаем градиентную заливку от цвета 000000 до цвета ffffff. Обратите внимание на параметр Blend Mode – я поставил значение Screen
Как нарисовать иконку
Должен получиться следующий результат
Как нарисовать иконку
Для того чтобы добиться нужного нам эффекта, нужно к слою применить следующие манипуляции
Как нарисовать иконку
В результате, мы получаем вот такой эффект
Как нарисовать иконку
Теперь сделаем блик под крышей. Создаем новый слой, и с помощью того же инструмента pencil_tool.png Pencil (B) рисуем следующее
Как нарисовать иконку
Так как градиент у нас на этом объекте будет точно такой как и на прошлом, то имеет смысл сэкономить время и просто скопировать стиль со слоя, который мы сделали до этого. Чтобы скопировать стиль, жмем правой кнопкой мыши на слое с первыми бликами и в выпадающем меню выбираем Copy Layer Style. Теперь жмем так же правой кнопкой мыши на слой с бликом под крышей, и в меню выбираем Paste Layer Style. Таким образом мы скопировали стиль с черно-белым градиентом – осталось произвести манипуляции с самим слоем
Как нарисовать иконку
Результат будет следующим
Как нарисовать иконку
Продолжаем добавлять блики. Хочу заметить что каждый блик должен быть на отдельном слое, так будет легче манипулировать со стилями… Рисуем еще четыре блика – каждый в отдельном слое
Как нарисовать иконку
Предлагаю сэкономить время – копируем стиль со слоя, на котором мы делали первый блик. Далее, назначаем на скопированный стиль на каждый из последних четырех слоев. Так же для каждого слоя производим соответствующие манипуляции
Как нарисовать иконку
В результате у нас должно получиться следующее
Как нарисовать иконку
На этом этапе домик смотрится завершенным, но я все же позволю себе нанести последние штрихи, подчеркнув фундамент. Для этого с помощью инструмента pencil_tool.png Pencil (B), выбрав цвет f3f3ea, рисуем следующее
Как нарисовать иконку
Почти готово. Ниже добавим еще одну линию только с цветом b5b8a3.
Как нарисовать иконку
Осталось нашему домику добавить тень. Для этого выделяем все слои, и группируем их в одну группу – это будет наш исходник. Далее делаем копию группы, и в этой копии сжимаем все слои в один – идем в меню Layers > Merge Layers (Ctrl + E). Это будет слой к которому мы применим тень, а наш исходник мы сделаем невидимым
Как нарисовать иконку
Далее идем в меню Layer > Layer Style > Drop Shadow… и назначаем тень со следующими параметрами
Как нарисовать иконку
И, в итоге получаем готовую к использованию иконку!
Как нарисовать иконку
Как нарисовать иконку Надеюсь, мой урок был вам полезен. Чем кончилось и откуда началось.
Поделиться публикацией

Комментарии 33

    +2
    Хм, а почему просто не использовать pixel grid вместо настройки сетки?
      +3
      Потому что в старых версия Фотошопа нет pixel grid.
      0
      Мне полезен. Спасибо.
        +4
        Было бы здорово рядом с каждым скриншотом видеть результат в конечном размере 32х32, чтобы наглядно проследить «эволюцию»
          +1
          В фотошопе: Window -> Navigator

          Ой, я сперва не понял, что вы имеете в виду урок.
            +1
            Вы мне сейчас предложили загнать статью в фотошоп?
              0
              Есть еще видеурок, надо только найти куда я его сохранил.
                0
                Видеоурок не нужен, тут и так всё предельно понятно. Я имел ввиду маленькую иконку результата на каждом из шагов. Чтобы, например, увидеть результат до подчёркивания фундамента.
          +5
          Короче весь этот урок можно выразить тремя словами: надо попадать в пиксели.
            +5
            Четырьмя, конечно! Вот я лох :)
              0
              Сказано емко. Но в данном случае проще сказать, чем сделать :)
            +17
            Как_нарисовать_сову_(полная_версия).jpg
            +7
            А вот рекламу хостинга(не связанную с постом) делать не кошерно в первом предложении.
              0
              Он бабки зарабатывает. Почти в каждой статье такое безобразие, да и в профиле:

              О себе: Ковыряюсь с хостингами.

              А ну как вся статья ради ссылки и написана :)
                +2
                Ну статье однозначный плюс, а вот в карму за такое наглое и бессовестное враньё (а делать часть текста статьи рекламной ссылкой, не относящийся к выделенному фрагменту — это именно враньё) можно и минус поставить.
                  –3
                  Не понятно, почему не наказывают за рекламу?
                    +3
                    Ко всему прочему это кросспост — americanohost.ru/lessons-icons/
                      –1
                      Вам какое дело? Ну есть ссылка, ну и что? Вам же понравилась статья, вы же благодарны? И чего гадить ради не понятно какой справедливости?
                        +1
                        Меня оскорбило то, что меня обдурили.

                        Хочу предложить вашему вниманию урок

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

                        Надеюсь, мой урок был вам полезен. Чем кончилось и откуда началось.
                        И вот второй раз меня дурят. Почему меня держат за лоха? Прям оскорбление какое-то.

                        Если бы просто написали в конце- вот тут вот есть сайт прикольный — это одно. А когда мне стараются под видом одного подсунуть другое — это жуть как неприятно
                          0
                          А если написать — тут можно выразить свою благодарность — кликните?
                          Я наоборот не хочу вводить в заблуждение. Пишу прямо и откровенно.
                          И стараюсь интересно. Если не интересно — не читайте. За все время
                          написания статьей, я потратил 200-350 трудочасов. Заработал 200 долларов.
                          Вы оцениваете час моей работы в 1 доллар? Вы, однако, не до оцениваете
                          меня. Я не пишу ради денег на хабр. Хабр жаден как и обыкновенный USSR
                          человек. Я пишу, потому что не могу не писать. Но на Хабре нельзя заработать.
                            0
                            Я написал в 2 раза больше топиков, чем вы. Так что не стоит рассказывать, что я не понимаю бедных авторов.
                            Топик я оценил положительно. Но оценил негативно то, что вы меня попытались обдурить.
                    0
                    А в последнем предложении как хостинг относится к посту?
                      0
                      Это хостинг, где иконка дома — одна из 3500 иконок, которые выложены для бесплатного скачивания.
                      Иконка дома рисовалась специально для пака иконок этого хостинга. Старался рассказать подробно.
                    +5
                    Далее, чтобы придать нужный цвет и контур идем в меню Layer > Layer Style > Gradient Overlay… и делаем градиентную заливку от цвета eae6c9 до цвета cbcfba

                    Есть такая шикарная серия статей "So You Want To Be A Pixel Artist?". А в ней статья "The Gradient Tool Is Evil". Там объясняется, что использовать градиент — это делать через задницу и показывают отличные примеры с градиентом и с нормальным пиксель артом:

                    Элементы:

                    против


                    На примере результата:

                    против


                    Конечно, это не принижает ценности статьи, но каждый новичок, который будет по этому учиться и думать "о, градиент! быстро, клёво и красиво!" пусть внимательно прочитает этот комментарий.
                      +3
                      Пиксельарт и иконки, всё-таки разные вещи. Задача пиксельарта — передать реализм при помощи ограниченных средств, задача иконки быть красивой как конфетная обёртка.
                        +2
                        Интересно, почему все самые познавательные статьи (не из Википедии), которые я вижу в последнее время, написаны до середины 2000-х? :)
                          0
                          Ценное добавление, сложно поспорить.
                            0
                            Имхо, данный пример с картинками не слишком нагляден. Обе картинки выглядят одинаково непрофессионально, и второй вариант больше похож на попытку спрятать градиент с помощью наложения шума, нежели на более правильный подход к рисованию pixel-арта.
                              0
                              Иконка и должна быть схематичной. Но даже в примерах… Я вот не могу сказать, что нижний вариант намного лучше верхнего. По моему опыту, излишняя детализация очень, очень часто ведет к тому, что картинка превращается в пёстрое месиво пикселей.
                              +4
                              Как альтернатива создания градиентов — использовать шейп, залитый однородным цветом, а сам цветной градиент получать путём наложения чёрно-белого градиента. Например, color dodge/screen для осветления и linear burn/multiply для затенения. В сухом остатке — очень быстро и просто менять цвета, не нужно точно подбирать 2 цвета, вместо этого достаточно изменить основной цвет и подкорректировать прозрачность градиентной заливки. Как показала практика, это чертовски удобно и позволяет немного оптимизировать работу дизайнера. Вот простой пример, все градиенты получены путём смешивания базового цвета и обычного чёрно-белого перехода с различными режимами наложения.
                              image
                                0
                                а перекрасить этот автобус можно в пару кликов :)
                                  +2
                                  Классный автобус и гифка не хуже.

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

                              Самое читаемое