Дополнения

Бесплатная рассылка

Вы будете получать ссылки на свежие видеоуроки по фотошопу совершенно бесплатно

наш канал

стать автором

Создаем дизайн плаката в стиле 80-х в Фотошоп

09 августа 2017 3 104 просмотра | Сложность:

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

Сегодня мы используем набор текстур "80-х" от GoMedia, чтобы создать дизайн плаката в ретро стиле. Мы будем использовать несколько векторных иллюстраций из этого набора, чтобы создать высоко детализированный дизайн с большим количеством великолепных световых эффектов и текстур.

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

Скачать архив с материалами к уроку

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

Шаг 1

Создаем новый документ в Фотошопе размером 21.59 на 27.94 см, и разрешением 300 точек на дюйм (300 dpi).

Заливаем наш холст темным, глубоким пурпурным цветом (#0b0513).

Загружаем фоновое изображение Base Nebula Image из секции с дополнительными материалами для данного урока.

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

Затем наложите поверх изображение туманности #1 (Nebula Fog) из дополнительных материалов. Понизьте уровень непрозрачности (Opacity) данного слоя до 20% и измените режим наложения (blend mode) на Умножение (Multiply).

Это поможет создать красивый многослойный фон:

Загрузите Изображение туманности #2 (Messy Nebula) из секции с дополнительными материалами для данного урока.

Поместите это изображение над центром вашего холста и измените режим наложения (blend mode) на Перекрытие (overlay). Затем примените маску слоя (layer mask) и мягкой черной кисточкой замаскируйте края этой туманности, таким образом, чтобы получались плавные переходы к основному фону.

Шаг 2

Настало время добавить больше цвета!

Выберите инструмент Градиент и протяните линейный градиент от низа холста вверх, предварительно выставив диапазон цветов от 6bb9bf к прозрачному.

Затем измените режим наложения для этого слоя на Линейный свет (linear light) и уменьшите его непрозрачность (opacity) до 45%. Это должно дать легкий эффект светимости в нижней части вашей композиции.

Создайте новый слой (Ctrl+Shift+N), возьмите большую мягкую кисть пурпурного цвета (#98499b) и нарисуйте цветовое пятно в центре вашего холста:

Выберите инструмент Градиент (gradient tool) и установите тип Зеркальный градиент (reflected gradient).

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

Установите режим наложения на Перекрытие (overlay). Это создаст симпатичный световой эффект:

Шаг 3

Теперь загружаем бесплатные изображения для данного урока GoMedia 80s Texture Pack (см. доп. материалы).

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

Начинаем с переноса векторной иллюстрации напольной сетки на наш основной холст.

Примените к ней Наложение цвета (Color overlay). Цвет белый (#ffffff).

Примечание переводчика: Для этого необходимо применить Стиль слоя (Layer Style), кликнув двойным щелчком мыши по слою с нашей веторной иллюстрацией, и в появившемся окне выбрать свойство Наложение цвета (Color overlay)

Затем, сохраните этот слой в качестве смарт-объекта (примечание переводчика: для этого необходимо кликнуть правой кнопкой мыши по слою и во всплывающем меню выбрать Преобразовать в смарт-объект (Convert to smart object)). Это очень важно для неразрушающего рабочего процесса, т.е. чтобы все, что применялось к слою раньше, не было нарушено последующими воздействиями. Вам будет необходимо все последующие векторные иллюстрации, используемые в данном уроке, сохранять как смарт-объекты, чтобы сохранить их качество.

Теперь измените режим наложения на Перекрытие (overlay) и замаскируйте верхнюю часть нашей сетки таким образом, чтобы получился эффект исчезновения (плавного растворения) сетки в нашем фоне.

Также примените к слою с сеткой один из параметров наложения - Внешнее свечение (outer glow).

Настройки для внешнего свечения следующие:

  • Режим наложения (Blend Mode): Перекрытие (Overlay)
  • Непрозрачность (Opacity): 27%
  • Цвет (Color): ffffff
  • Размах (Spread): 0%
  • Размер (Size): 27%

Теперь зажмите клавишу CTRL и кликните по слою с сеткой. Это позволит выделить нашу сетку.

При активном выделении, создайте новый слой (ctrl+shift+N) и назовите его "Подсветка сетки" (highlight grid).

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

Измените режим наложения для слоя с сеткой на Перекрытие (overlay). Это должно придать эффект дисперсии для подсветки.

Шаг 4

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

Расположите ее в центре вашего холста и установите режим наложения для данного слоя на Перекрытие (overlay):

Таким же методом перенесите в нашу композицию один из 3D векторных прямоугольников, расположив его между двумя сетками:

Опять же измените режим наложения для слоя с сеткой на Перекрытие (overlay) и понизьте непрозрачность (opacity) слоя примерно до 40%.

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

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

Теперь возьмите инструмент Прямолинейное лассо (polygonal lasso tool) и с его помощью выделите верхнюю панель самого большого из прямоугольников.

Создайте новый слой (ctrl+shift+N) и на нем протяните линейный градиент (от белого к прозрачному) вниз по всей длине прямоугольника.

Установите режим наложения на Перекрытие (overlay), и у вас получится действительно классный эффект 3D освещения:

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

Шаг 5

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

Шаг 6

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

Перенесите его на ваш холст, расположив его по центру в верхней части вашей композиции:

Теперь примените несколько параметров наложения (blending options) к нашему логотипу (Для этого необходимо применить Стиль слоя (Layer Style), кликнув двойным щелчком мыши по слою с нашим веторным логотипом).

Тень (Drop Shadow):

  • Режим наложения (Blend Mode): Умножение (Multiply)
  • Непрозрачность (Opacity): 12%
  • Угол (Angle): 120
  • Расстояние (Distance): 5px
  • Размах (Spread): 0%
  • Размер (Size): 10px

Внешнее свечение (Outer Glow):

  • Режим наложения Blend Mode: Перекрытие (Overlay)
  • Непрозрачность (Opacity): 100%
  • Цвет (Color): 68374b
  • Размах (Spread): 12%
  • Размер (Size): 172px

Наложение цвета (Color Overlay):

  • Режим наложения (Blend Mode): Нормальный (Normal)
  • Цвет (Color): ffffff
  • Непрозрачность (Opacity): 100%

Шаг 7

Пришло время добавить еще больше освещения космического пространства в центральную область нашей композиции!

Добавьте несколько пятен мягкой белой кисточкой вокруг центра вашего холста. Затем измените режим наложения этого слоя на Перекрытие (overlay):

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

Шаг 8

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

Создаем новый слой, называем его "квадраты" (squares), и используя инструмент «волшебная палочка» (magic wand tool) выделите различные квадраты вашего кубика Рубика. Залейте эти выделенные квадраты насыщенным красным цветом (#f15d66) (Так, как показано на изображении ниже).

Теперь примените параметр наложения (blending option) Наложение цвета (color overlay) к оригинальному слою с кубиком, используя цвет (#b3509e).

Скопируйте оригинальный кубик Рубика, поместите его над этими двумя слоями и установите для него режим смешивания Умножение (Multiply). Это означает, что черные контуры будут видны, а белая заливка станет невидимой, тем самым показывая цветные квадратики, находящиеся под ней. Также можно применить к этому слою эффект Внешнее свечение (Outer glow) с белым цветом (#ffffff).

Вставьте одно из изображений туманности над слоем с кубиком Рубика и примените обтравочную маску (clipping mask), чтобы изображение туманности было видно только в пределах формы нашего кубика.

Измените режим наложения этого слоя на Умножение (multiply) и понизьте непрозрачность (opacity) до 40%.

Чтобы закончить нашу работу с кубом, примените еще несколько текстур с изображением туманности к определенным поверхностям куба. Затем используйте несколько новых слоев для нанесения белых световых пятен над кубиком (используйте смесь режимов наложения «нормального» и «перекрытия» для слоев со световыми пятнами).

Шаг 9

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

Ниже показан результат:

Шаг 10

Настало время добавить в нашу композицию классный текст в ретро стиле!

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

Шаг 11

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

Начнем с применения трех корректировочных слоев:

Корректировочный слой Карта градиента (Gradient Map)

  • Градиент (Gradient): От фиолетового к оранжевому
  • Режим наложения (blend mode): Перекрытие (Overlay)
  • Непрозрачность (Opacity): 15%

Корректирующий слой Уровни (Levels):

15 / 1.00 / 247

Корректирующий слой Кривые (Curves):

(смотрите скриншоты ниже)

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

Измените режим наложения для этого нового слоя на Умножение (multiply) и уменьшите его непрозрачность (opacity) до 50%.

И наконец, загрузите текстуру картона из дополнительных материалов, и расположите ее таким образом, чтобы она также закрывала полностью ваш холст. Измените режим наложения для этого нового слоя на Перекрытие (overlay) и уменьшите непрозрачность (opacity) до 40%.

Это должно придать вашей композиции финальный винтажный эффект.

Поздравления! Вы закончили вашу работу.

Здесь можно полюбоваться вашим финальным результатом.

Автор: www.designcuts.com 

Понравилось? Поделитесь с друзьями!
Источник: www.designcuts.com Переводчик: Фёдоров Владимир
Прикрепить работу или скриншот Максимально-допустимый вес для загрузки изображения (jpg): 5 MB
Размещение ссылок внутри комментария допустимо только на этот список сайтов.
Лариса21 час назад9

Владимир, спасибо за перевод!

Mariy7771 день назад8

Благодарю автора и переводчика за урок!

Очень интересный урок,спасибо!!!

Bukca15 августа 201711

Создаем дизайн плаката в стиле 80-х в Фотошоп. Спасибо.

Mr.Evil14 августа 201719

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

OKS (anonimus)14 августа 201711

классно, спасибо)

saek kiram14 августа 201715

Спасибо очень круто)

nastenka.parfeevets13 августа 201714

Хороший урок) Спасибо!

Чёрный Сергей12 августа 201713

спасибо

Валера Решетняк11 августа 201714

спасибо

los.kotyara11 августа 20179

Вот так вот)

viking10 августа 201720

Спасибо! Не шедевр, но я старался...

id.khodulyaka09 августа 2017

где взять векторные изображения? такие как в уроке, а не дополнительные

Svetlana11 августа 2017

Ответ на форуме в теме к уроку.

Faraon6209 августа 201719

Спасибо за интересный урок!

Svetlana09 августа 201725

Как то так))

voki09 августа 201724

Спасибо за перевод!

Kibo1909 августа 201720

Спасибо!

mond stein09 августа 2017

Уже сделав такой красивый фон, буду чувствовать себя счастливой! :D

Авторизация


Регистрация

Наверх