Уроки Веб и приложения Валерия Мирошниченко 26 декабря 2014

Создаем в Фотошоп иконки в стиле Pixel Art

Сложность урока: Легкий

Начните свой день с завтрака в стиле pixel art! Нарисовав в Photoshop эти аппетитные изображения, вы можете использовать их в качестве иконок на рабочий стол, аватарок или игровых иконок. Вы изучите основы создания формы, сглаживания краев и выбора цветов.

1. Подрумяним хлеб!

Шаг 1

Мы начнем с простого – внешней формы тоста. Создайте новый документ в Adobe Photoshop. Для pixel art я выбираю размер 200x200 и устанавливаю прозрачный (transparent) фон. Используя инструмент Карандаш (Pencil tool) (B) размером в 1 пиксель, начните рисовать следующее:

1. Семь пикселей по горизонтали.
2.  По одному пикселю по диагонали с каждой стороны.
3. 11 пикселей с каждой стороны, формируя остальную часть верхушки тоста. Закруглите края, нарисовав по два пикселя по диагонали с каждой стороны. Десять вниз с обеих сторон и можно приступать к центральной части тоста.
4. Два вниз, один по диагонали, 20 вниз с каждой стороны.
5. Два вниз, два по горизонтали, чтоб немного округлить нижние края.
6. Соедините две стороны, нарисовав 23 пикселя по горизонтали.

Шаг 2

Для рисования хлеба, я использовала четыре цвета:
Темно-коричневый для внешних линий: R: 108 G: 013 B: 003.
Средне-коричневый для внешней части корочки: R: 182 G: 090 B: 020.
Коричневый для остальной части корочки: R: 214 G: 123 B: 027.
Желто-коричневый для центральной части хлеба: R: 250 G: 211 B: 127.

Средне-коричневый поместите возле краев тоста. Коричневый будет внутренней границей корочки. Теперь используйте инструмент Заливка (Paint Bucket) (G), чтоб заполнить оставшуюся часть хлеба желто-коричневым цветом.

Шаг 3

1. Этот тост не будет готов без кусочка тающего масла. Создайте новый слой на панели слоев перед тем, как рисовать масло.
2. Используйте яркий желтый цвет, чтоб нарисовать форму тающего масла инструментом Карандаш (Pencil tool).
3. Края масла должны быть обозначены теми коричневыми цветами, которые мы использовали в последнем шаге.
4. Обратите внимание на то, как на углах и вертикальных краях добавлены самые темные цвета.
5. Поместите кусочек масла в центр тоста.
6. Белый и светлый кремовый цвета использованы для световых пятен на хлебе и масле.
7. Возьмите темно-корчневый цвет для Карандаша (Pencil), снизьте непрозрачность (opacity) до 30-50%. Обведите тост по контуру, делая его темнее на углах, чтоб смягчить строгие края.

2. Готовим вафли!

Шаг 1

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

Шаг 2

В качестве основного цвета вафель я выбрала R: 241 G: 180 B: 99. Цвета теней: Коричневый и Средне-коричневый (со второго шага в рисовании тостов). На палитре слоев я создаю Новый слой и рисую маленькие квадраты 6 на 6 пикселей, но без угловых пикселей, создавая вафельную текстуру.

Шаг 3

В таком рисунке легче будет Скопировать (Ctrl+C) и Вставить (Ctrl+V) повторяющиеся элементы, равномерно разместив их внутри вафли. Используйте желто-коричневый цвет, чтоб высветлить область вокруг вафельной текстуры, и средне-коричневый для создания глубины.

Шаг 4

Нарисуйте кусочек масла и сгладьте края вафли, сделав темную обводку, используя Шаг 3 из рисования тоста.

3. Выпекаем печенье

Шаг 1

Форма печенья также проста: прямоугольник с закругленными краями (два пикселя по вертикали, два по горизонтали), но при этом верхний правый угол сделан из шести диагональных пикселей, это будет откушенная часть печенья.

Шаг 2

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

Шаг 3

Глазурь белая, поэтому тени на ней будут светло-голубыми. Обратите внимание, что
некоторые линии «размыты» (англ. «dithered»). Дизеринг в пиксель арте – техника создания текстуры (похожей на шум), для затемнения или высветления области при использовании минимального количества цвета.

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

Начинка из конфитюра будет ярко-розовой с добавлением темно-розовых и светло-розовых акцентов. Также не забудьте обвести само печенье темно-коричневым цветом с 30-50% непрозрачностью (opacity), чтоб смягчить края.

4. Яичница-глазунья!

Шаг 1

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

1. Десять пикселей по горизонтали.
2. Добавьте по три пикселя с каждой стороны линией ниже, пропустив один пиксель.
3. Два пикселя по диагонали и ещё один по диагонали.

Теперь нужно повторить шаги, которые уже были проделаны. Но сперва добавьте 4 пикселя с непрозрачностью (opacity) 50% в пустых углах. Дорисуйте круг.

Шаг 2

Начнем с желтка. Для него я использовала три цвета:

Средне-коричневый в нижней части: R: 182 G: 090 B: 020.
Желтая охра по бокам: R: 255 G: 150 B: 57.
Желтый для оставшейся части: R: 251 G: 208 B: 59.

Шаг 3

Изображение ниже может показаться более сложным, чем оно есть на самом деле. Я использовала тот же светло-голубой цвет, что и при рисовании печенья (Шаг 3), но регулировала его непрозрачность для дизеринга и создания тени. То же самое делаю и с темно-коричневым для желтка, используя непрозрачность (opacity) 20-25%, разместив этот слой выше остальных. Для добавления светлых участков я использовала желтый, светлый кремовый и белый цвета.

Я сгладила края глазуньи за три шага: углы с непрозрачностью (opacity) 50%, пара пикселей рядом с каждым углом – 30%, и остальное – 10-20%.

5. Жарим бекон

Шаг 1

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

Используйте Карандаш (Pencil tool), чтоб нарисовать четыре пикселя, потом три вниз и влево по диагонали, снова четыре по горизонтали.

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

Справа три пикселя вправо, один по диагонали, шесть вниз, два по диагонали влево, четыре вниз, восемь вниз.

Скопируйте (Ctrl+C) и Вставьте (Ctrl+V) эту верхнюю часть, далее идем в Редактировать – Трансформация – Отразить по вертикали (Edit – Transform – Flip Vertical) и соединяем получившийся элемент с первой половиной. Слейте эти два слоя (Ctrl+E). Теперь будем заполнять созданную форму.

Шаг 2

Используйте инструмент Заливка (Paint Bucket Tool), чтоб заполнить форму кирпично-красным (R:204 G:0 B:0). Нарисуйте волнистые линии Карандашом (Pencil tool) с непрозрачностью (opacity) 50%. Затемните края бекона темно-коричневым цветом с непрозрачностью 50%.

Шаг 3

Добавьте светлые участки линиям, используя белый цвет и непрозрачность (opacity) 30%, 20% и 100%. Для создания лоснящихся кусочков добавьте несколько пикселей возле краев с непрозрачностью 80%.

Шаг 4

Чтоб облегчить процесс добавления обводки по краю, используйте инструмент Волшебная палочка (Magic Wand Tool) (W) для выделения области вокруг бекона. Идем в Выделение – Модификация – Сжать (Select – Modify – Contract) и устанавливаем значение 1 пиксель. Инвертируйте выделение (Shift+Ctrl+E). Создайте новый слой ниже слоя с беконом, заполните выделение темно-коричневым с непрозрачностью (opacity) 30%. Можете наслаивать цвет в углах, чтоб их смягчить. Когда будете удовлетворены результатом, слейте выделенные слои (Ctrl+E).

Доброе утро! Завтракать подано!

Не останавливайтесь на этом, добавьте к своему завтраку иконки фруктов, кофе, сока… Нарисованные в этом уроке иконки относятся к американскому завтраку, поэтому если вы живете в другой стране или увлечены другой культурой, я бросаю вам вызов создать маленькие иконки ваших вкусных блюд. Ориентируясь на урок, нарисуйте все съедобное, что есть на вашей кухне. Удачи в пиксель-арте!

Автор: Mary Winkler

Переводчик: Мирошниченко Валерия

Источник: design.tutsplus.com

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

Прикольные иконки, но в Люстре смотрелись бы перспективнее..) Спс..)

Хех, спасибо за урок :)

вроде получилось

хватило только на хлебушек)

Эх, мне бы терпения )))

спасибочки) классный урок) все вышло

терпения хватило только на вафли и хлеб) потом может вернусь уроку)

Спасибо за урок!, а решил намазать на хлеб сгущёнку)

спасибо,очень занимательно) хотелось бы еще что-то связонное с пикселями)

Спасибо за урок!
Они такие милые =)

Спасибо за урок) Решила создать такую вот текстурку)

Спасибо за урок!)))

Завтрак в сухомятку.)

Спасибо за урок!))

Спасибо за урок! Тема легкая и понятная. Добавил немного своих иконок (Из русской еды там варенье, пряники и грибы).

Спасибо за урок)

На все иконки терпения не хватило)))
За урок спасибо!

Попробую.. Завтра-послезавтра увидите работу :)
Но она не легкая..

моя первая работа

Не понимаю я такой стиль...абсолютно...))

Терпение нужно невероятное для такой, казалось бы, маленькой работы)Спасибо за урок

Мой микро завтрак =)

молодец!все сделала.У меня терпения не хватило..

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

Новые работы пользователей

По заданным фильтрам работы не найдены

Попробуйте изменить критерий поиска или сбросить фильтры


Смотреть все работы

Предыдущая Следующая
Добавлена {{work.date}}
Не удалось загрузить работу. Возможно она была удалена.
GIF {{work.bite}} Мб Загрузить
Редактировать Удалить
18+
Работа имеет содержимое для 18+ лет
{{work.views}} {{work.comments}}
Жалоба

Комментарии {{work.childs.length || 0}}

Видео к работе
Популярные работы автора:
Работа получила награды:
Курсы автора:
Онлайн-курс

Жалоба

Опишите суть жалобы, при необходимости добавьте ссылки на скриншоты

Спасибо! Ваше обращение ушло на рассмотрение.

Название работы

Описание работы (необязательно)

Комментарий

Ваша миниатюра:

Название:
{{name}}
Описание:

Исходник:

{{source.name}} {{source.name}}

Тэги:
#{{tag.label}}

Есть ли у вас исходник к работе?

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

Пример исходника

Выберете тэги работы:

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

Не более десяти тэгов на одну работу

Комментарии к работе будут отключены, на их месте будет выведена реклама.

После добавления работы:


Запланировать публикацию

Отменить планирование
Запланировать

Используя данный сайт, вы даёте согласие на использование файлов cookie, данных об IP-адрес, помогающих нам сделать его удобнее для вас. Подробнее