Создаем изометрический пиксельный плакат для билборда

00-final-product

Что мы будем создавать

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

Прежде, чем приступать к работе, прочтите статью о создании пиксельного человечка.

1. Пропорции

Сначала мы нарисуем рекламный щит. Для определения высоты стойки билборда, мы используем рисованного пиксельного человечка.

Шаг 1

Высоты стойки щита в четыре «человечка» будет достаточно:

01-dimensions

Шаг 2

Ширину стойки мы установим примерно равной росту человечка:

02-dimensions

Шаг 3

Завершаем контур стойки. В нижней части мы замыкаем его кривой, чтобы придать стойке цилиндрический вид:

03-dimensions

Шаг 4

После этого мы создаем очертания самого билборда:

04-dimensions

Шаг 5

Залейте контур цветом:

05-dimensions

Шаг 6

С помощью теней придайте стойке объемности:

06-dimensions

Наш холст готов.

2. Адаптация изображения

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

Шаг 1

Сначала я добавил название гамбургера. На самом плакате будут и другие надписи, и все их лучше будет добавить непосредственно в пикселях:

[IMG=https://cms-assets.tutsplus.com/wp-content/uploads/users/358/posts/23944/image/07-picture-fix.png]

Шаг 2

Для адаптации изображения в изометрическую проекцию преобразуем фотографию (Редактирование> Свободная трансформация), и устанавливаем значение «Вертикального наклона» — 26,5.

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

08-picture-fix

Шаг 3

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

09-picture-fix

Шаг 4

Залейте всю область щита красным цветом, и выделите более светлую полосу в верхней части билборда:

10-picture-fix

3. Надписи

Сначала создадим название бургера, которое состоит из больших букв.

Шаг 1

Я прочертил контуры «C«, «l» и «о» прямо поверх этих букв, но на другом слое. И чтобы не прочерчивать остальные литеры, я скопировал букву «о«, потому что оставшиеся буквы очень похожи на нее:

11-picture-fix

Шаг 2

Остальные литеры слова довольно просто создать из буквы «о«:

12-picture-fix

Шаг 3

Затем мы добавим слово «NEW» рядом с названием Clogger, небольшими наклонными буквами.

Мы можем легко получить «N«, «E» и «W» (как и большинство букв алфавита) из фигуры, похожей на «8«:

13-picture-fix

Шаг 4

Сотрите несколько пикселей, и вы получите нужное слово:

14-picture-fix

Шаг 5

Сгладим слово Clogger и добавим небольшую тень:

15-picture-fix

Шаг 6

Нам нужно создать надпись «ONLY AT [логотип ресторана]«. Для этого нам нужны три маленьких строки, каждая буква в них будет всего три пикселя в ширину. Мы можем получить эти буквы из универсальной фигуры:

16-picture-fix

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

Шаг 7

Затем поместите последний набор букв на билборд:

17-picture-fix

Можно объединить все надписи билборда в одном слое.

4. Трассировка и преобразование в пиксели

Для трассировки гамбургера создайте новый слой поверх всех предыдущих слоев и начните работу на этом новом слое.

Шаг 1

На этом слое я прочертил черными линиями контуры булочек. При этом используйте как можно более ровные линии:

18-pixel-fix

Шаг 2

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

19-pixel-fix

Шаг 3

Добавим небольшую каемку по внутренним сторонам булочек, которые всегда светлее:

20-pixel-fix

Шаг 4

Затем добавим немного теней: для нижней булочки, чтобы подчеркнуть объем, для верхней — чтобы обозначить более запеченные участки:

21-pixel-fix

Шаг 5

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

22-pixel-fix

Шаг 6

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

23-pixel-fix

Шаг 7

Все котлеты на изображении будут одинаковыми, поэтому в качестве образца нам достаточно создать только одну:

24-pixel-fix

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

Шаг 8

Наши две котлеты, уже залитые цветом и без отвлекающего исходного изображения:

25-pixel

Шаг 9

Давайте придадим объем одной из котлет: сделаем ее более светлой сверху и темной снизу. В отличие от большинства остальных пиксельных объектов, для этих элементов мы не будем использовать темные контуры:

26-pixel

Шаг 10

Завершите создание теней и скопируйте их для второй котлеты. Затем на новом слое вам нужно добавить текстуру мяса. Она не должна быть сложной:

27-pixel-fix

Шаг 11

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

28-pixel-fix

Шаг 12

Добавим в бутерброд сыр. Сначала нарисуйте по верхнему краю котлет линию из желтых пикселей:

29-pixel-fix

Шаг 13

Теперь создадим уголки сыра, опускающиеся на котлету.

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

30-pixel-fix

Шаг 14

Добавьте сыру немного теней. Края должны быть светлее, а правая сторона темнее. Небольшая тень, отбрасываемая сыром на котлету, придаст ему объем и контрастность:

31-pixel-fix

Шаг 15

Теперь переходим к овощам. Их структура будет схожа с их расположением на исходном изображении:

32-pixel-fix

Шаг 16

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

33-pixel-fix

Шаг 17

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

34-pixel-fix

Шаг 18

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

35-pixel-fix

Шаг 19

Волнистые фигуры будут представлять колечки, поэтому они должны быть толще в середине и тоньше по краям, где они скрываются под другой начинкой. Заполните остальную часть пространства более темным, красным цветом:

36-pixel-fix

Шаг 20

Добавьте для колец небольшие тени, а также несколько ярких пикселей, похожих на блики света:

37-pixel

Все кольца лука можно разместить на одном слое:

38-pixel

Шаг 21

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

39-pixel

Шаг 22

Затем создайте рядом с этими квадратами другие, более темно-красного или коричневого цвета, по краям слоя они могут быть еще темнее:

40-pixel

Шаг 23

Добавьте небольшую тень. Самые темные линии помогают создать объем, но они не должны очерчивать контуры:

41-pixel

Шаг 24

Как и для колечек лука, добавьте несколько светлых бликов, похожих на блестящий жир:

42-pixel

Теперь я объединяю все элементы бургера в один слой.

Шаг 25

И в завершении я добавил тень, отбрасываемую гамбургером:

43-pixel

Наш билборд готов.

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

Перевод статьи «Create an Isometric Pixel Art Billboard in Adobe Photoshop» был подготовлен дружной командой проекта Сайтостроение от А до Я.