Дополнения

Бесплатная рассылка

Вы будете получать ссылки на свежие видеоуроки по фотошопу совершенно бесплатно

крупнейшая в мире социальная сеть пользователей Adobe Photoshop

211 720 чел. 402 079 работ 4 109 уроков
  • Обучайтесь и совершенствуйтесь
  • Разместите своё портфолио
  • Участвуйте в конкурсах
  • Подписывайтесь и оценивайте
  • Комментируйте и общайтесь
Присоединиться

Сложность: Легкая

Создаем в Фотошоп иконки в стиле 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

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

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

(до 5 шт)
jpg, png, gif, общий вес файлов не более 7Мб, не менее 450px по ширине и высоте, jpg или анимированный gif
Ссылки внутри комментариев могут вести только на эти сайты

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

{{work.views}}

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

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


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

Наверх

Авторизация

Забыли?

Регистрация

Не удалось загрузить работу. Возможно она была удалена.
GIF {{work.bite}} Мб Загрузить
18+
Работа имеет содержимое для 18+ лет
Мне нравится {{work.likes}} {{work.views}} Жалоба

Оставить комментарий {{work.childs.length || 0}}

(до 5 шт)
jpg, png, gif, общий вес файлов не более 7Мб, не менее 450px по ширине и высоте, jpg или анимированный gif
Ссылки внутри комментариев могут вести только на эти сайты
Войти Авторизуйтесь, чтобы комментировать работы, ставить лайки и просто быть участником нашего дружного сообщества!
Сначала популярные Сначала старые Сначала новые
Добавить комментарий
Разбор работы по просьбе автора:
Популярные работы автора:
Курсы и уроки автора:
Онлайн-курс {{work.relless.type}}

Жалоба

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

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

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

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

Комментарий

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


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

{{text}}

Исходник:

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

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

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

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

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

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

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

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

Вашу работу разберет один из экспертов проекта «Фотошоп-мастер». Это позволит вам увидеть свои ошибки и сделать следующую работу лучше. Разбор будет сделан в комментариях к работе и будет виден всем пользователям.

Пункт «18+» допустимо ставить только для работ, действительно содержащих элементы, которые не должны видеть несовершеннолетние: обнаженка, сцены жестокости, и т.д. Запрещается ставить такую метку на обычные работы. За подобное поведение у пользователя будет блокироваться возможность добавления новых работ. Все понятно, больше не показывать

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


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

Запланировать

Правила загрузки работ на «Фотошоп-Мастер»

  • 1. На сайте запрещается размещать изображения, которые содержат нецензурную лексику, угрозы, оскорбляет, унижает чье-либо достоинство, а также явно или косвенно нарушает законодательство Российской Федерации.

  • 2. Сайт photoshop-master.ru приветствует соблюдение авторских прав. В случае возникновения споров или разногласий Администрация сайта приложит все усилия для разрешения сложившейся ситуации.

  • 3. Правило третье. Публикуемые работы не должны содержать изображения, связанные с наркотиками , порнографического содержания, сцены насилия.

Подробная информация о правилах публикации https://photoshop-master.ru/blog/post/rules