Трассировка фотографии для получения стилизованного под графику эффекта

В этой статье мы расскажем, как создать поразительный монохромный пейзаж из серии фотографий с помощью методов Стивена Чана, разработанных им для иллюстраций в журнале Esquire.

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

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

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

Если вы хотите точно следовать всем шагам, описанным в этой статье, вы должны купить на iStockphoto следующие изображения: Rialto Bridge; Beautiful Venice; Venice Canal, Cross-Processed; Historical Regatta — Italy; seagull on canal Venice, Italy и Colorful canal Venice, Italy.

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

Шаг: 1

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

Шаг: 2

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

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

Шаг: 3

После того, как вы подберете нужные вам изображения, импортируйте их в Illustrator и грубо обрисуйте контуром каждое из них с помощью инструмента «Перо» (P). Нажмите на каждом, удерживая Cmd / Ctrl + 7, чтобы создать обтравочную маску. Вы можете сделать это примерно так, как показано на рисунке. Большая точность на данном этапе нам не нужна.

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

Шаг: 4

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

Шаг: 5

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

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

Шаг: 6

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

Шаг: 7

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

Шаг: 8

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

Шаг: 9

Повторите шаги 7 и 8 для остальных элементов, добавляя больше деталей к элементам, которые находятся на переднем плане. В следующих шагах я объясню, как я использовал некоторые из инструментов Illustrator для создания конкретных элементов, которые вам придется адаптировать к вашей собственной композиции:

Шаг: 10

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

Быстрый способ нарисовать повторяющиеся линии на крышах и арках, которые составляют большую часть моста, это использовать инструмент «Смешивание» (Объект> Смешивание> Параметры смешивания). С его помощью мы можем залить середину двух выбранных объектов:

Шаг: 11

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

Шаг: 12

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

Шаг: 13

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

Существует много способов вырезать изображение, но я предпочитаю использовать инструмент «Перо» (P). Возможно потому, что я часто использую его в Illustrator. После того как вы создали выделение вокруг модели, инвертируйте его (Ctrl + Shift + I) и удалите фон с «Растушевкой» 0,1 (Выделение> Изменить> Растушевка). Сохраните изображение в формате .png с прозрачным фоном:

Шаг: 14

Импортируйте только что сохраненное изображение обратно в документ Illustrator (в верхний слой), и приступайте к сведению всей композиции в монтажной области. Для данного стиля нам нужно задать для штрихов цвет 75% черного, ширина — 0.75 pt, чтобы создать мягкий вид и подчеркнуть линии графического дизайна.

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

Шаг: 15

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

Шаг: 16

Если у вас остались какие-либо пустые области, то можно использовать для их заполнения узор, чтобы обойтись без заливки цветом. Откройте образец узора по умолчанию, нажав на правой вкладке в панели «Образцы» и выбрав Открыть библиотеку образцов> Узоры> Основная графика. Это также можно использовать, чтобы задать тени и текстуру для многих других элементов.

В качестве завершающего штриха, я продублировал (Alt + перетащить) орнамент моста на переднем плане, чтобы создать эффект симметрии:


Завершенное изображение:

Данная публикация представляет собой перевод статьи «Photoshop tutorial: Trace photos for beautiful line art» , подготовленной дружной командой проекта Интернет-технологии.ру

Меню