Главная » Adobe Photoshop, Графика и анимация, Ищем вдохновение в идеях » Иллюстрации на фотографии в Photoshop

Иллюстрации на фотографии в Photoshop

В статье «Тренды в веб-дизайне в 2019-2020 годах» мы начали говорить о том, что сейчас популярно в современном мире дизайна. В отдельную тему захотелось выделить такое веяние как совмещение фотографии и иллюстрации, что особенно стало популярным в рекламной графике и на просторах социальных сетей. Хотите сделать свое фото в Instagram выделяющимся и ярким или добавить яркий акцент на рекламном материале, который точно никто не пропустит? Добавьте к фотографии иллюстрации. Как? Об этом мы поговорим в текущей статье. Не можете сами? Закажите работу у меня через форму обратной связи!


В Pinterest вы можете найти огромное количество примеров на тему совмещения фотографии с иллюстрацией, например:

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

Кстати, контурная обводка смотрится очень интересно и в анимации, в чем вы можете убедиться, посетив мою статью «Контурная анимация в Adobe Flash»
Так же можно добавить дополнительные эффекты в виде иллюстраций, как здесь:

Или перерисовать часть фотографии в вектор, а часть оставить фотографией, как здесь:

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

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

Будем создавать вот такое креативное фото с контурной обводкой.

В качестве исходных материалов я использовала фотографии с фотостока Pixabay:

Ссылки на исходные материалы – Фото, Ловушка для снов, Like.

Шаг 1.
С помощью инструмента Перо создала контуры для очков, волос, цепочек сережек и других элементов. Цвет обводки – белый, без заливки, ширина обводки 3 пикселя. Каждая линия на новом слое. Принцип показан на видео ниже.

Шаг 2.
Открыла документ с ловушкой для снов, вырезала оттуда перо и поместила его на документ с фото. Сначала для одной серьги. Щелкнула два раз правой клавишей мыши по слою с пером и вызвала окно Параметры наложения, где выставила следующие параметры – Наложение цвета – белый, Выполнить обводку – 1 пиксель.


Продублировала слой с пером, отобразила его по горизонтали – Редактирование – Трансформирование – Отразить по горизонтали и подвинула ко второй сережке.

Шаг 3.
Поместила слово Like за девушку. Для этого я поместила весь слой впереди девушки, затем создала слой маску для слоя со словом Like и просто закрасила черной кисточкой те места, которые должны быть за девушкой.
Как и в предыдущем шаге задала параметр наложение Наложение цвета – Белый.

Шаг 4.
Для слоя с фото создала корректирующий слой Сочность и изменила значение Сочность до 66

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

Если вы хотите узнавать еще больше интересного из мира дизайна – подписывайтесь на обновления блога Дизайн в жизни!

(Visited 18 times, 1 visits today)

3 комментарии на “Иллюстрации на фотографии в Photoshop

  1. Как-то трудозатратно, Вам не кажется? Делать всё это в фотошопе. Гораздо проще сделать данный эффект в любой векторной программе.

    1. Можно и в Иллюстраторе сделать) Я показала принцип работы с инструментом Перо в Photoshop. Такая контурная графика и там и там легко делается. А что касается более сложной иллюстрации, то да — лучше обратиться к векторному редактору. Просто мне удобно и там и там. Если кто-то не умеет работать в векторном редакторе- ему данный совет пригодится. Спасибо за комментарий)

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *