Найти тему

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

Оглавление

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

Содержание

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

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

Шаг 1

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

-2

Шаг 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.

-3

Шаг 3

-4

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

Шаг 1

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

-5

Шаг 2

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

-6

Шаг 3

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

-7

Шаг 4

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

-8

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

Шаг 1

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

-9

Шаг 2

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

-10

Шаг 3

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

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

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

-11

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

Шаг 1

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

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

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

-12

Шаг 2

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

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

-13

Шаг 3

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

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

-14

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

Шаг 1

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

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

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

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

-15

Шаг 2

-16

Шаг 3

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

-17

Шаг 4

-18

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

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

-19

Поделиться своей работой и задать вопрос можно на странице урока сайта photoshop-master.ru