Создаем изометрический пиксельный плакат для билборда
Реклама сейчас на каждом шагу вокруг нас, и вполне возможно, что однажды вам потребуется изобразить ее на уровне пикселей. Сегодня мы расскажем, как превратить обычное изображение в его изометрический пиксельный аналог на билборде.
Прежде, чем приступать к работе, прочтите статью о создании пиксельного человечка.
1. Пропорции
Сначала мы нарисуем рекламный щит. Для определения высоты стойки билборда, мы используем рисованного пиксельного человечка.
Шаг 1
Высоты стойки щита в четыре «человечка» будет достаточно:
Шаг 2
Ширину стойки мы установим примерно равной росту человечка:
Шаг 3
Завершаем контур стойки. В нижней части мы замыкаем его кривой, чтобы придать стойке цилиндрический вид:
Шаг 4
После этого мы создаем очертания самого билборда:
Шаг 5
Залейте контур цветом:
Шаг 6
С помощью теней придайте стойке объемности:
Наш холст готов.
2. Адаптация изображения
Изометрические пиксельные изображения не должны выглядеть реалистично, поэтому перед размещением фотографии на билборде ее нужно трансформировать. Тогда ее стиль будет соответствовать стилю всего изображения.
Шаг 1
Сначала я добавил название гамбургера. На самом плакате будут и другие надписи, и все их лучше будет добавить непосредственно в пикселях:
[IMG=https://cms-assets.tutsplus.com/wp-content/uploads/users/358/posts/23944/image/07-picture-fix.png]
Шаг 2
Для адаптации изображения в изометрическую проекцию преобразуем фотографию (Редактирование> Свободная трансформация), и устанавливаем значение «Вертикального наклона» - 26,5.
Под таким же градусом расположите и сам рекламный щит. Я советую вам сделать слой плаката поверх билборда немного прозрачным, чтобы вы могли видеть под ним края щита:
Шаг 3
Вы можете дополнительно обрезать и изменить изображение. В этом шаге я постарался добиться, чтобы гамбургер и текст были пропорционально размещены в пределах холста билборда:
Шаг 4
Залейте всю область щита красным цветом, и выделите более светлую полосу в верхней части билборда:
3. Надписи
Сначала создадим название бургера, которое состоит из больших букв.
Шаг 1
Я прочертил контуры "C", "l" и "о" прямо поверх этих букв, но на другом слое. И чтобы не прочерчивать остальные литеры, я скопировал букву "о", потому что оставшиеся буквы очень похожи на нее:
Шаг 2
Остальные литеры слова довольно просто создать из буквы "о":
Шаг 3
Затем мы добавим слово "NEW" рядом с названием Clogger, небольшими наклонными буквами.
Мы можем легко получить "N", "E" и "W" (как и большинство букв алфавита) из фигуры, похожей на "8":
Шаг 4
Сотрите несколько пикселей, и вы получите нужное слово:
Шаг 5
Сгладим слово Clogger и добавим небольшую тень:
Шаг 6
Нам нужно создать надпись "ONLY AT [логотип ресторана]". Для этого нам нужны три маленьких строки, каждая буква в них будет всего три пикселя в ширину. Мы можем получить эти буквы из универсальной фигуры:
Я решил создать очень простой значок, напоминающий известный логотип сети ресторанов быстрого питания.
Шаг 7
Затем поместите последний набор букв на билборд:
Можно объединить все надписи билборда в одном слое.
4. Трассировка и преобразование в пиксели
Для трассировки гамбургера создайте новый слой поверх всех предыдущих слоев и начните работу на этом новом слое.
Шаг 1
На этом слое я прочертил черными линиями контуры булочек. При этом используйте как можно более ровные линии:
Шаг 2
Можно залить контуры черным цветом, чтобы получить однотонную фигуру, а затем залить ее цветом, который вы хотите использовать для булочек:
Шаг 3
Добавим небольшую каемку по внутренним сторонам булочек, которые всегда светлее:
Шаг 4
Затем добавим немного теней: для нижней булочки, чтобы подчеркнуть объем, для верхней - чтобы обозначить более запеченные участки:
Шаг 5
Основная идея заключается в том, чтобы сделать фигуры более простыми, а также уменьшить количество цветов, поэтому добавим еще один темный участок и один светлый, и этого будет достаточно:
Шаг 6
Добавим на булочки семена кунжута с помощью светлых пикселей с более темной тенью снизу. Вы можете сначала создать тени на отдельном слое черным цветом, а затем уменьшить непрозрачность слоя:
Шаг 7
Все котлеты на изображении будут одинаковыми, поэтому в качестве образца нам достаточно создать только одну:
На время отключите видимость слоя оригинальной фотографии, чтобы «без помех» оценить вид всех частей созданного пиксельного изображения.
Шаг 8
Наши две котлеты, уже залитые цветом и без отвлекающего исходного изображения:
Шаг 9
Давайте придадим объем одной из котлет: сделаем ее более светлой сверху и темной снизу. В отличие от большинства остальных пиксельных объектов, для этих элементов мы не будем использовать темные контуры:
Шаг 10
Завершите создание теней и скопируйте их для второй котлеты. Затем на новом слое вам нужно добавить текстуру мяса. Она не должна быть сложной:
Шаг 11
Структура мяса должна быть тонкой, поэтому отрегулируйте непрозрачность, а затем сведите слои:
Шаг 12
Добавим в бутерброд сыр. Сначала нарисуйте по верхнему краю котлет линию из желтых пикселей:
Шаг 13
Теперь создадим уголки сыра, опускающиеся на котлету.
На снимке видно, что большие «языки» сыра одинаково расположены на обеих котлетах, только они выступают в разных местах и имеют немного разную позицию:
Шаг 14
Добавьте сыру немного теней. Края должны быть светлее, а правая сторона темнее. Небольшая тень, отбрасываемая сыром на котлету, придаст ему объем и контрастность:
Шаг 15
Теперь переходим к овощам. Их структура будет схожа с их расположением на исходном изображении:
Шаг 16
Дальше с помощью теней придадим всем овощам объемный вид: делаем их светлее в центре и еще светлее в самом верху. С помощью разных светлых участков на слое зелени мы отображаем различные начинки. То же самое для белого соуса:
Шаг 17
В завершении работы со слоем овощей я добавил тень, чтобы отделить и сделать их немного ярче. Это просто темная линия вдоль верхнего края каждого элемента:
Шаг 18
В середине бургера лежат несколько колечек лука. На новом слое сделаем базовые формы для них. Создайте что-то типа волнистых завитушек:
Шаг 19
Волнистые фигуры будут представлять колечки, поэтому они должны быть толще в середине и тоньше по краям, где они скрываются под другой начинкой. Заполните остальную часть пространства более темным, красным цветом:
Шаг 20
Добавьте для колец небольшие тени, а также несколько ярких пикселей, похожих на блики света:
Все кольца лука можно разместить на одном слое:
Шаг 21
В конце мы создадим нижний слой начинки. Элементы, составляющие начинку можно размещать в произвольном порядке, но они должны быть квадратной формы. Некоторые фрагменты могут сливаться. Их все нужно создать на новом слое:
Шаг 22
Затем создайте рядом с этими квадратами другие, более темно-красного или коричневого цвета, по краям слоя они могут быть еще темнее:
Шаг 23
Добавьте небольшую тень. Самые темные линии помогают создать объем, но они не должны очерчивать контуры:
Шаг 24
Как и для колечек лука, добавьте несколько светлых бликов, похожих на блестящий жир:
Теперь я объединяю все элементы бургера в один слой.
Шаг 25
И в завершении я добавил тень, отбрасываемую гамбургером:
Наш билборд готов.
Теперь вы знаете, как превратить фотографию в изометрическое пиксельное изображение. Надеюсь, статья окажется полезной для вас.