Создаем рекламный буклет в Фотошоп

Создаем рекламный буклет в Фотошоп

Microsoft Xbox One – игровая приставка, которая является приемником предыдущего поколения Xbox 360, купить ее можно по ссылке тут.

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

Этапы урока

В этом уроке мы разработаем дизайн шаблона рекламного буклета в программе Photoshop. Мы начнём урок с основных изображений, создадим различные кривые фигуры, используя инструменты Фигуры(shape /lessons/tools), команду Деформации (warp), а также добавим стили слоя, чтобы придать буклету глянцевый вид. Для выполнения данного урока я использовал программу Photoshop CS6, но вы можете использовать любую версию программы, начиная с версии CS3.

Образец Рекламного Буклета – Общий вид

alt

Образец Рекламного Буклета – Вид оборотной стороны

alt

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

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

Создайте новый документ в программе Photoshop (Ctrl+N). Установите следующие размеры: 3242 рх по высоте и 2480 px по ширине, разрешение (resolution) 300 пикселей / дюйм (pixels/Inch).

alt

Перейдите Файл – Поместить (File > Place) и в появившемся окне выберите исходное изображение с солнечным островом. Нажмите кнопку Поместить (Place), чтобы добавить выбранное изображение на наш рабочий документ в качестве смарт-объекта. Примените масштабирование к изображению, расположив остров, как показано на скриншоте ниже. Нажмите клавишу (Enter), чтобы применить трансформацию.

alt

Повторите предыдущий шаг. Добавьте исходное изображение “Водные виды спорта“ в качестве смарт-объекта. Расположите данный слой с изображением поверх слоя с солнечным островом.

alt

К слою с изображением “Водные виды спорта“, добавьте слой-маску. Щёлкните по миниатюре слой-маски, чтобы перейти на неё. Выберите инструмент Градиент alt(Gradient tool), установите Линейный(linear) градиент, цвет градиента чёрно-белый. Потяните градиент по диагонали.

alt

С помощью инструмента Прямоугольник alt (Rectangle tool), нарисуйте прямоугольник голубого цвета #0099c5. Высота прямоугольника примерно 860 px.

Примечание переводчика: автор преобразовал слой с фигурой прямоугольника в смарт-объект.

alt

Далее идём Редактирование – Трансформация – Деформация (Edit > Transform Path > Warp), чтобы применить команду деформации. Потяните опорные точки таким образом, чтобы совместить прямоугольник с верхними изображениями, как показано на скриншоте ниже.

alt

К слою с голубым прямоугольником добавьте стиль слоя Наложение градиента (Gradient Overlay). Примените следующие настройки для данного стиля слоя:

  • Режим наложения (Blend Mode): Перекрытие (overlay)
  • Цвет градиента чёрно-белый
  • Стиль (style): Линейный (Linear)
  • Угол (Angle): 0

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

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

alt

Нарисуйте ещё один прямоугольник белого цвета поверх слоя с голубым прямоугольником. С помощью команды Деформации (warp), деформируйте левую сторону прямоугольника, как показано на скриншоте ниже.

Примечание переводчика: не забудьте преобразовать слой с белой фигурой в смарт-объект.

alt

К слою с белой фигурой добавьте слой-маску. С помощью инструмента Градиент, цвет градиента от белого к чёрному, нарисуйте линейный градиент на слой-маске слоя. Потяните градиент по диагонали от нижней левой точки вверх до верхнего правого угла белого прямоугольника. Если всё сделаете правильно, то у вас должен получиться красивый “глянцевый” эффект, как показано на скриншоте ниже.

alt

С помощью инструмента Эллипс alt(Ellipse tool), нарисуйте эллипс синего цвета #005c98. С помощью инструмента Трансформации (transform (Ctrl+T)), примените масштабирование к эллипсу, расположив его, как показано на скриншоте ниже.

alt

Находясь на слое с нарисованным эллипсом, нажмите клавиши (Ctrl+C), чтобы скопировать в буфер данных, а затем нажмите клавиши (Ctrl+V), чтобы вклеить синий эллипс, который мы скопировали только что. Немного увеличьте размер дубликата синего эллипса, чтобы он был немного больше, чем предыдущий эллипс. Теперь поменяйте режим фигуры на Вычесть переднюю фигуру (Subtract Front Shape). Таким образом, с помощью дубликата слоя со вторым эллипсом, мы обрежем первый эллипс и в результате получим ‘кривую фигуру’.

Примечание переводчика: 1. Выберите инструмент Эллипс alt(Ellipse), установите режим Слой-фигура(Layer-shape) 2. Как только вы нарисовали фигуру эллипса, пока не преобразовывайте его в смарт-объект 3. Находясь на слой-маске, нажмите клавиши (Ctrl+C), чтобы скопировать в буфер обмена данных, а потом (Ctrl+V), чтобы вклеить скопированные данные на слой-маску слоя с фигурой, таким образом, вы получите дубликат эллипса, т.е. у вас на одном слое будут два эллипса 4. Затем нажмите клавиши (Ctrl+T), поиграйте с масштабированием и деформацией, сместите дубликат эллипса, чтобы получить красивый узор кривой фигуры, а затем выберите инструмент Выделение контура (Path Selection tool) и в настройках данного инструмента, выберите режим Вычесть переднюю фигуру (Subtract Front Shape), в некоторых версиях программы Photoshop данный режим значится, как Вычесть из области фигуры(Subtract from shape area) 5. В конце преобразуйте слой с созданной кривой фигурой в смарт-объект или здесь же в панели управления инструмента Выделение контура (Path Selection tool), выберите режимОбъединить компоненты фигуры (Merge Shape Components).

alt

Далее, выберите режим Объединить компоненты фигуры (Merge Shape Components). Теперь, элементы ‘кривой фигуры’ будут объединены.

alt

Продублируйте слой с кривой фигурой, отразите по вертикали дубликат слоя, для этого идёмРедактирование – Трансформация – Отразить по вертикали (Edit > Transform path > Flip Vertical). С помощью инструмента Перемещение alt(Move tool), сместите дубликат кривой до конца влево, а затем поменяйте режим наложения для данного дубликата слоя с кривой на Умножение (multiply).

alt

К дубликату слоя с кривой, добавьте слой-маску. Выберите инструмент Градиент alt (Gradient tool), установите линейный градиент, цвет градиента чёрно-белый. С помощью градиента скройте правую половину кривой фигуры.

Примечание переводчика: автор создаёт плавный переход цвета на изображении кривой фигуры.

alt

Повторите Шаги 13 – 14, чтобы добавить ещё одну фигуру кривой на нижнюю часть изображения. С помощью инструмента Свободная трансформация (Free Transform), увеличьте масштаб изображения данной кривой фигуры.

alt

Выделите все слои с фигурами, за исключением слоёв с задним фоном, с водными видами спорта и солнечным островом. Нажмите клавиши (Ctrl+G), чтобы сгруппировать их в одну группу. Дважды щёлкните по слою с новой группой и в появившемся окне дайте новое название группе Синие фигуры(blue shape). Данный шаг является выборочным, но я обычно группирую слои, чтобы было удобно работать в панели слоёв.

alt

Выберите инструмент Прямоугольник alt (Rectangle shape tool). Нарисуйте прямоугольник бледно-коричневого цвета (#efe0c9) поверх слоя с группой Синие фигуры (blue shape).

alt

Далее, ещё раз идём Редактирование – Трансформация – Деформация (Edit > Transform Path > Warp), чтобы деформировать верхнюю часть прямоугольника, придав форму кривой. См.скриншот ниже. Нажмите клавишу (Enter), чтобы применить изменения деформации.

alt

Добавьте ещё один прямоугольник тёмно-коричневого цвета (#b19e90) на нижнюю часть изображения, высота прямоугольника примерно 425 px. С помощью Деформации (warp), придайте верхней части прямоугольника изгиб кривой.

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

alt

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

alt

Находясь на слое с белым прямоугольником, поменяйте режим наложения на Мягкий свет (soft light). Нажмите клавиши (Alt+Ctrl+G), чтобы создать обтравочную маску.

alt

Нарисуйте чёрный прямоугольник в верхней части изображения со следующими размерами: 952 px по ширине и 460 px по высоте.

alt

Потяните левую нижнюю опорную точку чёрного прямоугольника с помощью инструмента Угол alt(Convert Point tool), чтобы преобразовать острый угол в дугу. Теперь с помощью инструмента Стрелка alt (Direct Selection tool), потяните ту же самую точку в верхний правый угол изображения.

alt

Поменяйте режим наложения для слоя с чёрным прямоугольником на Мягкий свет (Soft light). Данный режим сделает чёрный цвет фигуры полупрозрачным.

alt

Создайте новый слой. Выберите инструмент Кисть alt (Brush tool), установите мягкую круглую кисть. Установите Размер (size) кисти примерно 1300 px, цвет кисти белый, Непрозрачность (opacity) кисти 30%. Щёлкните 2-3 раза кистью в одном и том же месте в пределах синей изогнутой фигуры. В результате мы получим мягкий белый световой блик.

alt

Выделите все пять слоёв, которые вы создали, чтобы сгруппировать их. Назовите новую группуПередняя фигура (front shape). Не забудьте сохранить документ Файл – Сохранить (File > Save).

alt

Нажмите клавиши (Ctrl+N), чтобы создать новый документ. Установите следующие размеры: 600 рх по высое и 600 px по ширине, разрешение (resolution) 150 пикселей / дюйм (pixels/Inch).

alt

Нарисуйте прямоугольник чёрного цвета со следующими размерами 300×100 px. Продублируйте чёрный прямоугольник, для этого, удерживая клавишу (Alt), перетащите фигуру с помощью инструментаВыделение контура (Path selection tool).

alt

Поверните один из чёрных прямоугольников, а затем сместите его, чтобы получилась перевёрнутая буква “L”.

alt

Чтобы убедиться, что оба прямоугольника идеально выровнены, выделите их с помощью инструментаВыделение контура (Path Selection tool), а затем нажмите кнопку Выровнять по правому краю (Align Right Edges) в настройках данного инструмента.

alt

Нарисуйте тонкий горизонтальный прямоугольник. Выберите опцию Вычесть переднюю фигуру(Subtract Front Shape), чтобы сделать горизонтальный вырез у чёрных прямоугольников.

alt

Щёлкните за пределами холста или по пустому пространству, чтобы отменить выделение всех прямоугольников. С помощью свободной трансформации, поверните фигуру так, чтобы получился математический знак ‘больше’.

alt

Далее, выберите опцию Объединить компоненты фигуры (Merge Shape Component). Таким образом, мы объединим все три прямоугольника.

alt

Идём Редактирование – Определить произвольную фигуру (Edit > Define Custom Shape), назовите новую фигуру “стрелка метро”, затем нажмите “OK”. Мы сохранили нашу нарисованную фигуру, таким образом, мы сможем применить её в другом документе с помощью инструмента Произвольная фигураalt (Custom Shape tool).

alt

Теперь возвращаемся к нашему первому рабочему документу с изображением солнечного острова и водных видов спорта. Нарисуйте тёмно-коричневый круг #b5a294 с помощью инструмента Эллипс alt(Ellipse tool). Добавьте заголовок синего цвета #018dc0 и два произвольных параграфа с помощью инструмента Горизонтальный текст alt (Horizontal Type tool).

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

На тот случай, если вы не знали, программа Photoshop может упростить этот шаг. Убедитесь, чтобы инструмент Горизонтальный текст alt (Horizontal Type tool) был активным, теперь щёлкните мышью по области, куда вы хотите добавить текст, а затем потяните её, создавая активную область для текста.

Теперь, всё, что вам нужно сделать, это добавить параграфы.

alt

Выберите инструмент Произвольная фигура alt(Custom shape tool), установите белый цвет. Выберите / нарисуйте фигуру “стрелка метро” внутри тёмно-коричневого круга.

alt

Выделите четыре слоя, чтобы сгруппировать их в одну группу. Назовите новую группу Текст слева (left text).

alt

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

alt

Выберите инструмент Кисть alt (Brush tool), установите Непрозрачность (opacity) кисти 50%, цвет кисти тёмно-коричневый. Щёлкните по зубчатому колёсику и в появившемся меню выберите опциюЗагрузить кисти (Load Brushes). Выберите нужные кисти, чтобы загрузить их, в данном случае кисти Пляж.

В открывшемся окне Загрузить (load), нажмите кнопку Добавить (Append), чтобы добавить кисти Пляж к существующему набору кистей, а не заменяя их.

alt

Создайте новый слой, назовите этот слой “Цветок”. Выберите кисть с рисунком цветка. Щёлкните один раз кистью по холсту, чтобы нарисовать цветок.

alt

С помощью свободной трансформации, уменьшите масштаб изображения цветка. Но перед этим, не забудьте вначале преобразовать слой с цветком в смарт-объект.

alt

С помощью инструмента Текст alt(Type tool), добавьте подзаголовок “Flower Garden” ниже изображения цветка.

Примечание переводчика: “Flower Garden” — Декоративный Сад. Вы можете добавить любой текст на своё усмотрение.

alt

Добавьте значки с пляжной тематикой с помощью инструмента Кисть alt (Brush tool). Преобразуйте слои в смарт-объекты, а затем уменьшите их размер, не забудьте добавить подзаголовки под каждым значком.

alt

Выделите слои со значками пляжной тематики, включая слои с подзаголовками, чтобы сгруппировать их в одну группу. Назовите новую группу Категории (features).

alt

Выберите инструмент Произвольная фигура alt (Custom shape tool). Щёлкните по зубчатому колёсику в окне списка произвольных фигур и в появившемся меню выберите категорию Web. Далее, в появившемся окне, нажмите кнопку Добавить (Append).

Примечание переводчика: категория Web — фигуры с тематикой интернет паутины.

alt

Повторите Шаг 45, чтобы загрузить кисти Объекты (Objects).

alt

В нижней части изображения, добавьте замещающий текст для номера телефона, адреса почтовой почты и адреса вебсайта туристического агентства. А также с помощью инструмента Произвольная фигура alt (Custom shape tool), добавьте значки телефона, почтовой службы и вебсайта.

alt

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

alt

Ещё раз выберите инструмент Произвольная фигура alt (Custom shape tool), чтобы загрузить произвольные фигуры из категории Символы (Symbols).

alt

Выберите / нарисуйте фигуру самолёта. Цвет фигуры белый, а затем расположите самолёт справа от текста “Travel Agent” (Туристическое Агентство).

alt

Чтобы самолёт выглядел более изящно, добавьте к слою с фигурой самолёта стиль слоя Тень (Drop Shadow). Примените следующие настройки для данного стиля слоя, которые указаны на скриншоте ниже.

alt

Как обычно, выделите слой с текстом и слой с фигурой самолёта и сгруппируйте их в одну группу, чтобы панель слоёв выглядела аккуратно.

Примечание переводчика: 1. Выделите слой с текстом “Travel Agent” (Туристическое Агентство) и слой с фигурой самолёта, чтобы сгруппировать их 2. Назовите новую группу Логотип Туристического Агентства (Travel Agent Logo).

alt

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

alt

К слою с главным заголовком, добавьте стиль слоя Тень (drop shadow), чтобы сделать вид текста красивым. Примените следующие настройки для данного стиля слоя, которые указаны на скриншоте ниже.

alt

Нажмите кнопку “OK”, чтобы применить стиль слоя Тень (Drop Shadow). Таким образом, если всё сделано правильно, то вы добавите красивую тень к тексту.

alt

Нарисуйте красный круг (#ed1c24) с помощью инструмента Эллипс alt (Ellipse tool). Как только вы создали круг, добавьте текст “START FROM $375 / person” на четырёх отдельных слоях, откорректируйте размер шрифта по мере необходимости.

Примечание переводчика: 1. “START FROM $375 / person” (“От 375$ на человека”). 2. Вы можете добавить любой текст на своё усмотрение, например, “Горящий Тур от 175 евро” J

alt

Возвращаемся к слою с красным кругом, чтобы придать ему вид 3D кнопки. Вначале добавьте стиль слоя Внутренняя тень (Inner Shadow).

Примените следующие настройки для стиля слоя Внутренняя тень (Inner Shadow), которые указаны на скриншоте ниже.

  • Цвет: белый
  • Режим наложения (Blend mode): Нормальный (normal)
  • Непрозрачность (Opacity): 28%
  • Смещение (Distance): 33 px.

alt

Примените следующие настройки для стиля слоя Внутреннее свечение (Inner Glow), которые указаны на скриншоте ниже.

  • Режим наложения (blend mode): Нормальный (Normal)
  • Непрозрачность (Opacity): 9%
  • Цвет: чёрный
  • Размер (Size): 65 px

alt

Примените следующие настройки для стиля слоя Глянец (Satin), которые указаны на скриншоте ниже.

  • Режим наложения (blend mode): Нормальный (Normal)
  • Цвет: белый
  • Непрозрачность (Opacity): 19%
  • Угол (Angle): 19 градусов
  • Смещение (Distance): примерно 23 px
  • Размер (Size): примерно 46 px
  • В конце, поменяйте Контур (Contour) на Кольцо (ring).

alt

Примените следующие настройки для стиля слоя Наложение градиента (Gradient Overlay), которые указаны на скриншоте ниже.

  • Режим наложения (blend mode): Перекрытие (Overlay)
  • Цвет градиента: чёрно-белый
  • Стиль (Style): Линейный (Linear)
  • Угол (Angle): примерно 122 градусов

alt

Примените следующие настройки для стиля слоя Тень (Drop Shadow), которые указаны на скриншоте ниже.

  • Непрозрачность (Opacity): 37%,
  • Смещение (Distance): 6 px
  • Размер (Size): 10px.

Нажмите кнопку “OK”, чтобы применить все стили слоя, которые вы назначили, начиная с Шага 57.

alt

Этот же “эффект красной кнопки” понадобится нам при создании оборотной стороны буклета, поэтому, мы сохраним этот эффект в качестве стиля слоя, т.к. это сэкономит наше время позже. Всё, что вам нужно сделать, это открыть вкладку Стилей (Styles) (обычно данная вкладка расположена в той же самой группе вкладок Цвет (Adjustment) и Образцы (Swatches)).

Нажмите значок Создать Новый Стиль (Create New Style), дайте соответствующее название новому стилю, например, “красная кнопка”, а также поставьте галочку в окошке Включает эффекты слоя(Include Layer Effects).

alt

Выберите инструмент Горизонтальный текст alt (Horizontal Type tool), наведите курсор на край красного круга, как только изменится курсор, щёлкните по краю фигуры. Это позволит нам напечатать текст точно по контуру красной фигуры. Нажмите кнопку для фиксации правки Применить текущую правку (Commit any current edits) в верхней панели настроек инструмента текст, чтобы применить текст.

Примечание переводчика: 1. наведите курсор на край фигуры, как только исчезнет пунктирный круг вокруг курсора и появится кривая, щёлкните кнопкой мыши, чтобы начать печатать текст 2. Когда текст создан или изменен, в правой части панели управления выбранного инструмента появляются две иконки. Первая Отменить текущую правку (Cancel any current edits) предназначена чтобы игнорировать любые изменения, а другая Применить текущую правку (Commit any current edits) чтобы подтвердить изменения и применить текст. 3. После создания текста, автор нажимает комбинацию клавиш (Ctrl)+(Enter), таким образом, он привязывает текст к контуру. 4. Вы можете либо нажать кнопку для фиксации правки, чтобы применить текст или привязать текст к контуру, какую технику использовать — дело вкуса.

alt

Выделите текст с помощью инструмента Текст alt (Type tool). Установите размер текста, цвет, задайте значение интерлиньяжа в панели настроек Символ (Character).

alt

Всё ещё находясь на слое с текстом, нажмите клавиши (Ctrl+T) для активации инструмента Свободная трансформация (free transform), увеличьте масштаб круга, к которому привязан текст, а затем поверните текст, чтобы выставить его по центру. Не забудьте нажать клавишу (Enter), чтобы применить трансформацию.

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

alt

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

Примечание переводчика: просто пока не нажимайте клавишу (Enter).

alt

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

Примечание переводчика: как только вы нажмёте клавишу (Ctrl), рядом с курсором появится маленький значок чёрного треугольника, далее, наведите этот чёрный треугольник на внутренний край красной кнопки, а теперь щёлкните, таким образом, вы поменяете положение текста.

alt

Откорректируйте расположение номера телефона; в режиме свободной трансформации, увеличьте масштаб, а затем поверните строку с номером телефона. Нажмите клавиши (Ctrl+Enter), чтобы применить поворот.

alt

Перед тем, как мы перейдём к следующему шагу, на мой взгляд, будет удобно, если мы временно отключим видимость слоёв с группами Передняя фигура (front shape) и Синие фигуры (blue shape).

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

alt

Возвращаемся на слой с красным кругом. Расположите две направляющие линии с левой и справой стороны круга, затем нарисуйте стрелку с помощью инструмента Произвольная фигура alt(Custom Shape tool). Цвет стрелки бледно-коричневый (#b4a193).

alt

Выберите инструмент Стрелка alt (Direct Selection tool), наведите курсор на левый край стрелки, щёлкните, чтобы выделить обе опорные точки с левой стороны стрелки. Как только вы выделили эти точки, потяните их влево до направляющей линии, которая расположена слева.

alt

С помощью инструмента Свободная трансформация (Free Transform (Ctrl+T)), поверните стрелку по вертикали. Не нажимайте пока клавишу (Enter).

alt

Нажмите кнопку Деформации (Warp). Выберите тип Деформации (Warp): Дугой (Arc), а затем потяните за точку деформации влево. Таким образом, мы деформируем стрелку, как показано на скриншоте ниже. Нажмите клавишу (Enter), чтобы применить трансформацию.

Примечание переводчика: кнопка Деформации (Warp) – это кнопка переключения между режимом свободной трансформации и режимами деформации, она расположена в верхней панели управления.

alt

Если стрелка получилась слишком большой или слишком выпуклой, то повторите действие ещё раз с помощью свободной трансформации.

alt

Поменяйте режим наложения для слоя со стрелкой на Умножение (Multiply). Это придаст стрелке тёмный полупрозрачный вид.

alt

Продублируйте слой со стрелкой (Ctrl+J). Сместите дубликат стрелки вправо, расположив на правой стороне красного круга.

alt

Нажмите ещё раз клавиши (Ctrl+T) для активации режима свободной трансформации. Поверните стрелку стрелкой вниз. Нажмите клавишу (Enter), чтобы применить трансформацию.

alt

Включите видимость слоёв с группами Передняя фигура (front shape) и Синие фигуры (blue shape). Мы завершили создание главной странички рекламного буклета!

Теперь мы можем приступить к созданию оборотной стороны.

alt

Создайте новый документ в программе Photoshop (Ctrl+N). Установите следующие размеры: 2480рх по ширине и 3242 px по высоте, разрешение (resolution) 300 пикселей / дюйм (pixels/Inch).

alt

Нарисуйте прямоугольник по высоте рабочего документа, но только на половину ширины. Цвет прямоугольника свело-коричневый (#f0ebdc).

Примечание переводчика: используйте инструмент Прямоугольник alt (Rectangle) в режиме слой-фигура (layer-shape).

alt

Идём Редактирование – Трансформация – Деформация (Edit > Transform > Warp). Деформируйте правую сторону прямоугольника, создав вид развивающегося флага. Нажмите клавишу (Enter), чтобы применить трансформацию.

alt

Находясь на том же самом слое с прямоугольной фигурой, нарисуйте ещё один прямоугольник в центре по горизонтали.

Примечание переводчика: удерживайте клавишу (Shift) во время создания горизонтального прямоугольника, иначе ничего не получится.

alt

Щёлкните по горизонтальной фигуре инструментом Выделение контура (Path Selection), чтобы фигура стала активной. Далее, в верхней панели управления, поменяйте контурный режим на Вычесть область пересечения фигур (Exclude Overlapping Shapes). Данный режим “Удалит” любые участки пересечения обоих прямоугольников.

Примечание переводчика: то же действие можно выполнить с помощью инструмента Прямоугольник alt (Rectangle), только вначале активируйте режим Вычесть область пересечения фигур (ExcludeOverlapping Shapes), а затем нарисуйте горизонтальный прямоугольник, данный режим автоматически удалит участки пересечения фигур.

alt

Идём Редактирование –Трансформация — Деформация (Edit > Transform Path > Warp). Выберите тип деформации: Флагом (Flag). Вы можете менять значение Изгиба (Bend) путём смещения точки деформации вверх или вниз.

alt

Выберите инструмент Волшебная палочка alt (Magic Wand tool), а затем в панели управления поставьте галочки в окошках Смежные пиксели (Contiguous) и Образец со всех слоёв (Sample All layers). Щёлкните по верхнему правому углу, чтобы выделить его.

alt

Далее, идём Выделение – Модификация – Расширить (Select > Modify > Expand Selection). Установите значение Расширить на (Expand): 10 px, а затем нажмите кнопку “OK”. Таким образом, мы расширим область выделения на 10 px.

alt

Создайте новый слой ниже слоя с искривлённым прямоугольником, залейте выделенную область серым цветом (#f0ebdc). Нажмите клавиши (Ctrl+D), чтобы отменить активное выделение.

alt

Повторите Шаг 86 и Шаг 87 на двух новых слоях. Все белые участки теперь должны быть залиты серым цветом.

alt

Перейдите Файл – Поместить (File > Place) и в появившемся окне выберите исходное изображение с куклой. Откорректируйте масштаб изображения. Расположите изображение в нижней правой части изображения, заполнив серый участок.

alt

Расположите слой с изображением куклы поверх слоя с нижней правой серой заливкой (в данном случае, слой с серой заливкой был Слой 3 (Layer 3)). Нажмите клавиши (Alt+Ctrl+G), чтобы преобразовать слой с изображением куклы в обтравочную маску.

alt

Повторите Шаги 89 и 90. Поместите исходное изображение обезьянки на рабочий документ.

alt

Повторите предыдущие шаги, добавьте последнее исходное изображение с храмом.

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

alt

Перейдите на слой с искривлённым прямоугольником, чтобы применить стиля слоя Наложение градиента (Gradient Overlay).

Примените следующие настройки для стиля слоя Наложение градиента (Gradient Overlay), которые указаны на скриншоте ниже.

  • Режим наложения (blend mode): Мягкий свет (Soft Light)
  • Цвет градиента: чёрно-белый
  • Стиль (Style): Линейный (Linear)

alt

Нажмите кнопку “OK”, чтобы применить стиль слоя Наложение градиента (Gradient Overlay). В результате мы получим красивый коричневый градиент на изображении прямоугольников.

alt

Выберите инструмент Горизонтальный текст alt (Horizontal Type tool). Добавьте текст с информацией про туристические места или возможно про туристический маршрут. Начните с заголовка текста, цвет заголовка тёмно-коричневый (#605146).

alt

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

alt

Помните про фигуру стрелки метро, которую мы создали? Ещё раз нарисуйте фигуру стрелки метро с помощью инструмента Произвольная фигура alt (Custom Shape tool). На этот раз, цвет фигуры синий (#26afd8).

alt

Чтобы быстро добавить ещё стрелок метро (того же размера и цвета), удерживайте клавишу (Alt) при смещении первой стрелки метро с помощью инструмента Стрелка alt (Direct Selection tool). Повторите этот шаг, пока мы не получите четыре стрелки метро.

alt

Выделите слой с заголовком, слой с параграфом и фигуры со стрелками, чтобы сгруппировать их в одну группу (Ctrl+G). Дважды щёлкните по названию группы, чтобы переименовать группу.

alt

Нажмите клавиши (Ctrl+J), чтобы продублировать группу. С помощью инструмента Перемещения alt(Move tool), переместите содержимое текста в правую часть изображения, расположив напротив изображения обезьянки. Поменяйте заголовок текста.

alt

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

alt

С помощью инструмента Эллипс alt (Ellipse tool), нарисуйте фигуру красного круга, как показано на скриншоте ниже. Слой с красным кругом должен располагаться поверх всех остальных слой в палитре слоёв.

alt

Откройте вкладку Стили (Styles), выберите стиль слоя ‘красная кнопка’, чтобы применить стиль слоя, который мы создали ранее.

alt

Добавьте ещё одну фигуру круга, только на этот раз в панели управления, отключите Заливку цветом(Fill color), а также выберите Обводку (Stroke), цвет обводки тёмно-коричневый (#bcab9e), толщина обводки 1 pt.

Примечание переводчика: Заливка цветом (Fill color) и Обводка (Stroke) – это новые опции, которые появились в панели управления инструмента Произвольная фигура alt (Custom Shape Tool) в версии Photoshop CS6. С помощью данных опций можно выбрать цвет заливки фигур, а также выполнить обводку фигур, включая тип обводки, пунктирной линией или сплошной. Если у вас стоит другая версия программыPhotoshop, то вы можете воспользоваться режимом Контуры (Paths) и просто нарисовать контурный круг или с помощью инструмента Овальная область alt (Elliptical Marquee Tool), нарисуйте круг, а затем выполните заливку контура, только не забудьте создать новый слой.

alt

С помощью инструмента Горизонтальный текст alt (Horizontal Type tool), добавьте текст “DAY” “01” на двух отдельных слоях. С помощью свободной трансформации поверните текст.

alt

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

alt

Дважды продублируйте слой с группой. Поменяйте расположение и содержимое текста, как показано на скриншоте ниже. Поздравляю! Мы завершили создание дизайна рекламного буклета.

alt

alt

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

Итоговый результат:

alt

alt

Имея готовый шаблон и немного изменив дизайн, мы можем создать флаер с другой тематикой, как вы можете увидеть на скриншоте ниже. Я создал флаер с ресторанной тематикой.

alt

Рисуем рыбку Дори в программе Photoshop

Рисуем рыбку Дори в программе Photoshop

Автоматизированная ленточная библиотека IBM System Storage TS3500 с высокой степенью масштабируемости предназначена для резервного копирования и архивного хранения в средах на базе мэйнфреймов и открытых систем в крупных компаниях и организациях.Купить ее можно тут по ссылке.

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

 

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

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

Итоговый результат

alt

Происхождение

  1. Кто такая Дори?
  2. Где она живёт?
  3. Как она выглядит?

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

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

Ключевые детали, которые нужно запомнить:

  • Дори имеет реальный прототип рыбки Синий Хирург
  • У неё большие блестящие сиреневые глаза
  • Её выражение делает её немного глуповатой
  • У неё нет стандартной рыбьей чешуи

Моя версия

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

  • Её форму тела
  • Структуру её головы
  • Её выражение

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

Создайте новый документ 1250 x 1040 px с разрешением 150 dpi. С помощью жёсткой круглой кисти, начните рисовать контур Дори. Используйте простые фигуры, чтобы воссоздать её тело и постепенно добавляйте детали.

alt

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

alt

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

alt

Шаг 1

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

Мы используем два исходных изображения с рыбками в этом уроке:

  • Рыбка Синий хирург 1
  • Рыбка Синий хирург 2

Если вы используете исходные изображения рыбок на чёрном или белом фоне, то вам будет легко отделить рыбок от заднего фона. Вначале, с помощью инструмента Волшебная палочка alt(Magic Wand Tool (W), выделите / удалите задний фон на исходных изображениях с рыбками.

alt

Шаг 2

Далее, с помощью инструмента Прямолинейное лассо alt (Polygonal Lasso Tool (L), выделите фрагменты текстуры рыбок, а затем скопируйте / вклейте выделенные фрагменты текстур на наш набросок. Вначале заполните яркой синей текстурой тело рыбки. С помощью инструмента Ластик alt(Eraser Tool (E), скройте участки текстур, которые выходят за предела контурного рисунка.

alt

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

Поменяйте режим наложения для слоя с наброском на Мягкий свет (Soft Light), таким образом, мы совместить набросок с синей текстурой, а затем продолжайте добавлять текстуру.

alt

Если вам понадобится увидеть изображение наброска, то вы можете вновь поменять режим наложения на Нормальный (Normal). Продолжайте выделять отдельные детали, используя оба исходных изображения с рыбками, а затем наносить на наш набросок, используя инструмент Свободная трансформация (Free Transform Tool (Ctrl+T). Выберите режим Деформация (Warp), если вам нужно придать фрагменту нужную форму. Давайте начнём с нижнего и верхнего плавника.

alt

Теперь переходим к хвостовому плавнику, не забудьте добавить чёрную текстуру на спинку, которая соединяется с хвостовым плавником. 

alt

Вырежьте фигуру сердечка с помощью инструмента Ластике alt (Eraser Tool (E).

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

alt

Шаг 3

Теперь давайте добавим блестящие глаза Дори. Вначале мы поменяем цвет золотой блестящей текстуры на красивый розовый цвет. Идём Изображение – Коррекция – Цветовой тон / Насыщенность (Image > Adjustments > Hue & Saturation). Установите значение Цветового тона (Hue) на -78.

alt

Используем ту же самую технику, скопируйте / вклейте фрагмент сверкающей текстуры на наш рабочий документ. Уменьшите Непрозрачность (Opacity) слоя с текстурой до 30%, таким образом, вам будет лучше видеть набросок. С помощью инструмента Ластик alt(Eraser Tool (E), скройте лишние участки текстуры. Здесь же, с помощью Кисти alt (Brush Tool (B)), вы можете прокрасить глазные яблоки белым цветом.

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

alt

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

alt

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

Шаг 1

Чтобы придать нашему персонажу больше объёма, нам понадобится поработать над светотенями, немного поработав кистью. Объедините все слои с фото текстурами и слой с наброском. Создайте новый слой поверх объединённого слоя в качестве обтравочной маски. Поменяйте режим наложения для нового слоя на Умножение (Multiply).

Начните прокрашивать тени на изображении Дори с помощью инструмента Мягкая кисть (Soft Round Brush (B).

alt

Начните с туловища, а затем переходите к мелким деталям, таким как глаза и полоска на плавнике. По мере отбора образцов цветовых оттенков со смежных участков с помощью инструмента Пипетка alt(Eyedropper Tool (E), ваши цветовые оттенки превратятся в идеальную тень.

alt

Не забудьте нарисовать в улыбке Дори белые зубки!

Шаг 2

Теперь давайте перейдём к световым бликам! Создайте новый слой, поменяйте режим наложения наПерекрытие (Overlay) и с помощью мягкой белой кисти, добавьте светлые блики поверх изображения Дори. На созданном слое, вы можете продолжать добавлять световые блики, однако, при добавлении деталей, таких как блеск в глазах, вам потребуется создать отдельный слой в режиме Нормальный(Normal), а затем прокрасить глаза на созданном слое.

alt

Источник света расположен в нижней правой части сцены, поэтому, не забывайте про это во время создания светотеней!

Шаг 3

Пользуясь возможностью, исправьте отдельные участки изображения Дори, которые выглядят немного грубоватыми. С помощью жёсткой круглой кисти, со 100% Жёсткостью (Hardness), добавьте чёткие блики, а также доработайте края.

alt

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

Чтобы справится с этой задачей, нам необходимо добавить однородную текстуру. Создайте новый слой, поменяйте режим наложения для данного слоя на Мягкий свет (Soft Light). С помощью жёсткой круглой кисти, цвет кисти серый, прокрасьте поверх всей области кожи на изображении Дори. 

Теперь щёлкните правой кнопкой по слою с нарисованной серой текстурой, чтобы применить стиль слоя Наложение узора (Pattern Overlay). В настройках данного стиля слоя, выберите текстуру ‘Heavy Canvas Texture’ для заливки серой области текстурой. Уменьшите Непрозрачность (Opacity) слоя до 35%, чтобы полученный эффект не выглядел слишком грубым.

alt

Перед тем как мы завершим работу над созданием нашей рыбки Дори, нам нельзя забывать про её очаровательные веснушки! Просто используйте жёсткую круглую кисть, чтобы нарисовать мелкие тёмно-синие веснушки поверх «носа» Дори. Используйте инструмент Ластик alt (Eraser Tool (E), чтобы совместить веснушки с её кожей.

alt

Шаг 1

Одна из самых моих любимых частей этого урока – это задний фон. Это действительно простая техника, которую вы можете использовать для большинства своих других работ.
 
В заключительных шагах, поищите в интернете на стоковых ресурсах исходные изображения с подводной сценой. В этом уроке я использовал стоковое изображение Подводный риф, которое вы можете скачать бесплатно на сайте Pixabay, но я также порекомендовал бы использовать стоковые изображения с коралловыми рифами, которые вы можете найти на стоковом ресурсе Envato Market.

  • Коралловый риф 1
  • Коралловый риф 2

Подсказка:

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

alt

На скриншоте вы можете увидеть мои эксперименты с задним фоном, используя различные исходные изображения, которые были взяты на сайте Pixabay. Какая сцена вам больше нравится?

Шаг 2

Откройте исходное изображение с подводной сценой, переместите данное изображение на наш рабочий документ. Расположите слой с подводной сценой ниже всех слоёв с Дори. Я использую изображение с красивым Подводным рифом. Вначале отразите изображение по горизонтали, для этого идём Редактирование – Трансформация – Отразить по горизонтали (Edit > Transform > Flip Horizontal). Если вам необходимо применить масштабирование под размеры рабочего документа, то просто нажмите клавиши (Ctrl+T) для активации Свободной трансформации (Free Transform). После добавления заднего фона, убедитесь, чтобы рыбка Дори была расположена в центре подводной сцены.  

alt

Шаг 3

Чтобы задний фон выглядел настоящим, как в мультфильме, я применю к нему небольшое Размытие по Гауссу (Gaussian Blur). Мы применяем данное размытие не только для того, чтобы добавить динамики к рыбке Дори, но, а также, чтобы добавить глубины резкости к сцене и  чтобы задний фон казался немного дальше.

Находясь на слое с задним фоном, идём Фильтр – Размытие – Размытие по Гауссу (Filter > Blur > Gaussian Blur). Установите Радиус (Radius) размытия на 4 px. И мы завершили работу над нашей подводной сценой!

alt

Мы нашли Дори!

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

Я знаю насколько сложно нарисовать цифровой рисунок, но если вы попрактикуете эту технику, то вы сможете воссоздать по-настоящему реалистичные эффекты!

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

Итоговый результат

alt

Автор: Melody Nieves