Урок полиграфический продукции в фотошопе буклет. Как сделать буклет в фотошопе

Чтобы фон выглядел достаточно грубым, возьмем отсканированное изображение черного квадрата, распечатанного на старой бумаге. Можно использовать "UNSCUFFED .jpg " из этого архива . Вставим изображение в документ.

Шаг 3

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

С этим изображением пока ничего не делаем.

Шаг 4

Шаг 10

Теперь расположим все слои так, чтобы создать девушку, играющую на гитаре. Некоторые элементы приходится вращать и менять их размер, чтобы они подошли.Некоторые области могут нуждаться в работе с маской (это лучше чем просто стереть часть слоя). Для этого добавляем векторную маску (Add Vector Mask) и затем рисуем на самой маске.

Шаг 11

Создаем новый слой, и перемещаем его под слой волос и слой губ в Палитре Слоев. Используем Инструмент Овальная Область (Elliptical Marque Tool - M), расположенный там же, где и Инструмент Прямоугольная Область (Rectangular Marquee Tool - M).Рисуем круг и размещаем его на месте головы и заливаем любым цветом. Затемзаходим в меню Слой (Layer) > Стиль Слоя (Layer Style) > Наложение Градиента (Gradient Overlay) и применяем градиент

Шаг 12

Шаг 21

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

Шаг 22

Затем из архива вставляем "card .jpg " в рабочий документ. Изменяем его размер так, чтобы оно закрывало весь холст, и устанавливаем Параметр Наложения слоя: Перекрытие (Overlay ). Уменьшаем непрозрачность (Opacity ) слоя до 40%. Затем дублируем слойи начзначаем Параметр Наложения: Замена Темным (Darken ) и устанавливаем непрозрачность (Opacity ) Слоя30%. Этот слой должен быть выше.

C Перекрытием 40% .

С Перекрытием 40% и Темнее 30 %.

Шаг 23

Добавим еще немного эффектов: "briodoodles .jpg " и "FOLDED .JPG ". Выбираем "briodoodles .jpg " и делаем Инверсию (Cntrl + I ), затем устанавливаем Параметр Наложения: Осветление (Screen ). Для "FOLDER .jpg " тоже выбираем Осветление (Screen ). Затем перемещаем эти слои левее, чтобы справа осталось место для текста.

Шаг 24

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

Шаг 25

Для последних штрихов, выбираем слой "Card" (Перектырие 40%) и нажимаем Shift+ Cntrl + U, чтобы обесцветить его. Затем выбираем меню Слой (Layer) > Выполнить Сведение (Flatten Image).

Шаг 26

Открываем палитру Каналов, и щелкаем правовой кнопкой мыши на Синем Канале. Выбираем С оздать дубликат канала (Duplicate Channel ), и вставляем полученный канал в отдельный документ.

Шаг 27

Выбираем меню Изображение (Image) > Режим (Mode) > Битовый формат (Bitmap), ставим значения как на снимке. Нажимаем OK и снова выбираем меню Изображение (Image) > Режим > Градации серого (Grayscale).

Шаг 28

Выбираем Инструмент Волшебная Палочка (Magic Wand Tool - W) и убираем галочку с параметра Смежные Пиксели (Contigious). Стандартный Допуск (Tolerance) 32 отлично подойдет. Затем выбираем любой черный пиксель из холста. Нажимаем Cntrl + C, чтобы копировать и вставляем выделение в рабочий документ

Шаг 29

Нажимаем Cntrl + U, в появившемся диалоге Цветовой тон/Насыщенность (Hue/Saturation) ставим значения как на снимке. Затем назначаем Параметр Наложения слоя (Blending Mode): Мягкий Свет (Soft Light), и Непрозрачность (Opacity) 70 %. Дублируем этот слой, и устанавливаем для копии Параметр Наложения: Осветление (Screen) 30 %.

Шаг 30

Выбираем меню Слой (Layer) > Новый Корректирующий Слой (Adjustment Layer) > Кривые (Curves), и усиливаем светлые пиксели.

Шаг 31

Наконец отрегулируем Цветовой тон/Насыщенность (Hue/Saturation), и можно распечатывать документ...

Заключение

Мы можем видеть готовое изображение на снимке, а есть версия побольше . Заметьте, что место справа оставлено для вашего собственного текста.

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

(Этот урок есть в видео формате )

  1. Создаем новый проект и вводим эти данные: (режим CMYK используется специально для работы с полиграфией, в отличии от RGB)

  1. Очерчиваем направляющими границы нашего проекта, при необходимости линейку включаем комбинацией Ctrl + R . Чтобы убрать направляющие затаскиваем их обратно в линейку инструментом «перемещение», чтобы скрыть их нажимаем Ctrl+ H и та же комбинация, чтобы проявить их обратно.

3. Заходим в Изображение-Размер холста, и увеличиваем высоту и ширину на дюйм. Это нужно для обрезки буклета в типографии, на первых изображениях она также есть. За направляющими должен получится белый фон (забылась слегка)).

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

5. Информация будет расположена вертикально и надо сделать колонки. Вы можете просто с помощью линейки измерить расстояние, поделить на три и поставить направляющие. Но, так как, я закоренелый гуманитарий и избегаю любых подсчетов, то выбрала вариант проще. Берем инструмент «прямоугольник» и от первой (нами поставленной) направляющей делаем фигуру. Трансформируем с помощью клавиш Ctrl+T .

6. Создаем два дубликата прямоугольника и располагаем их по холсту как на скрине. Выделяем все три фигуры на панели слоев с помощью Shift , зажимаем Ctrl + T и тянем за край третьего прямоугольника. Таким образом, они равномерно распределяются по холсту (не заходя на типографическую обрезку).

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

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

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

Материалы для урока:

Шаг 1 . Есть некоторые вещи, которые мы должны рассмотреть прежде, чем начать проектировать брошюру: размер, форма, и складной тип. Вообще, мы должны начать с карандаша и бумаги - нарисуем эскиз нашей брошюры. У брошюры будет две стороны, значит, будет два документа в Фотошоп - один для внутренней стороны брошюры, другой для обложки.
Ниже проект тройной брошюры. Назовём каждую область печати «Лицо», таким образом у нас будет «Лицо1», «Лицо2», …., «Лицо6»

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

Сторона 1
Шаг 3 . Создаём новый документ. Для проекта печати, параметры настройки документа очень важны. Затем нажмите Ctrl+R , чтобы появилась линейка. Теперь нам нужны направляющие. Наведите на линейку курсор (инструмент «Перемещение » \Move Tool) и, зажав левую кнопку мыши, вытащите оттуда одну направляющую. По вертикали, например; сделайте так же по горизонтали.
*для того, чтобы убрать Направляющие, нажмите Ctrl+H . Та же комбинация, для того, чтобы они появились вновь*.
Единицы измерения - дюймы (кликаем ПКМ по линейке и из открывшегося списка выбираем «дюймы» (Inches))

Шаг 4 . Границы рабочей области. Определим границы нашего документа для печати. Расположим направляющие по каждой стороне документа.

Шаг 5 . Теперь увеличим документ в меню Изображение\Размер холста (Image\Canvas Size) - добавьте дюйм к ширине и высоте документа, кроме того убедитесь, что якорная точка находится посередине. Как видите, документ увеличился на 0,5 дюймов по каждой стороне.

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

Шаг 7 . Границы безопасности. Даже если наш процесс обрезки прекрасен, всё же есть ещё небольшая область, которую мы должны оставить пустой. Мы добавим границу безопасности между краем рабочего документа и нашим проектом, т. е. сделаем отступ. Для этого вытащите направляющие и расположите на 0,25 дюйма внутри нашей «Главной области».

Шаг 8 . Теперь мы должны сделать три колонки с направляющими. Есть несколько способов, чтобы поделить на три части, один из них - взять калькулятор и разделить 11/3=3.66. Выберите инструмент «Прямоугольник» (Rectangle Tool)(U) в режиме фигур и нарисуем прямоугольник, как показано ниже. Точность сейчас не важна. Теперь выберите инструмент «Перемещение» (Move Tool) (V), включите на панели параметров опцию «Показать управляющие элементы» (Show Transform Controls) и дублируйте прямоугольник (для этого зажмите клавишу Alt и переместите прямоугольник). Дублируйте второй прямоугольник. Теперь у нас три прямоугольника. Измените цвет копий (в графических целях). Теперь выделим три прямоугольника (на палитре слоёв, зажав Shift , кликните по слоям) и при активном инструменте «Перемещение» потяните за правый узелок вправо, пока не достигнете правой границы «Главной области», нажмите Enter . Этот процесс расширит наши прямоугольники в равных пропорциях. Теперь выберите средний прямоугольник и установите новые «колонные» направляющие, удалите наши прямоугольники. Наш документ поделён на три равные части.

Шаг 9 . Края безопасности при сворачивании. Это очень важно, так как при сворачивании используется 2-3 мм при печати, у вас не должно быть никаких графических объектов в этой области. Добавьте направляющие на ¼ дюйма к «колонным» направляющим с каждой стороны. Теперь у вас есть отличный документ - шаблон для дальнейших проектов, обязательно сохраните.

Шаг 10 . Фон. Как вы помните, мы используем цветовую модель CMYK . Щёлкните по цвету переднего плана на палитре цветов и выберите цвет фона. Инструментом «Прямоугольник» (Rectangle Tool)(U) нарисуйте прямоугольник, как показано ниже.

Шаг 11 . Направляющие обрезки. Установите цвет переднего плана как показано ниже, выберите инструмент «Линия» (Line Tool) и нарисуйте линии, как показано ниже.

Шаг 12 . Поместите все слои с линиями в группу и назовите её "Trim Guides ". CTRL+G - создать группу слоев (предварительно слои нужно выделить)

Дизайн
Шаг 13 . Автор использовал текстуру, чтобы придать фону эффект грязной старой бумаги. Текстуру можно зять в архиве. Перенесите текстуру на наш документ на новый слой (при помощи инструмента «Перемещение»), расположите текстуру так, как показано ниже, назовите слой «BG Texture ». При помощи инструмента «Штамп » (Clone Stamp Tool) уберите следы от чернил и поменяйте режим наложения (Blending Mode) для слоя на Умножение (Multiply), непрозрачность (Opacity) для слоя 40%.

Шаг 14 . Выберите инструмент «Прямоугольник» (Rectangle Tool)(U) в режиме фигур и нарисуйте полоску, как показано ниже, цвет любой, назовите слой «Stripe ».

Примените следующие стили слоя:
Наложение градиента\Gradient Overlay :

Обводка \Stroke:

Тень \Drop Shadow:

Шаг 15 . Нажимаем сочетание клавиш Ctrl+ A (выделим всё), на палитре слоёв выбираем слой «BG Texture » и копируем выделение (Ctrl+ C ). Сделайте активным слой «Stripe », создайте новый слой, назовите «Stripe Texture » и вставьте выделение (Ctrl+ V ). Ctrl+ T и трансформируйте слой «Stripe Texture», как показано ниже. Оставаясь на слое «Stripe Texture », нажимаем Ctrl+клик по миниатюре маски слоя «Stripe ». Инвертируем выделение Выделение\Инверсия (Select\Inverse) и нажимаем Delete . Снимите выделение Ctrl+ D . Поменяем режим наложения (Blending Mode) для слоя "Stripe Texture " на Линейный затемнитель (Linear Burn). Создайте новую группу, назовите « Stripe » и поместите туда слои "Stripe" и "Stripe Texture"

Шаг 16 . Автор решил не использовать вертикальное расположение полос, а повернуть их под углом 15° и 5°. Выберите инструмент «Перемещение» (Move Tool) и выберите группу «Stripe», Ctrl+ T , измените угол наклона -15° , нажмите Enter

Вытащите ещё одну направляющую.

Шаг 17 . Добавим вторую полосу. Выберите группу «Stripe» и при активном инструменте «Перемещение» (Move Tool), зажмите клавишу Alt и передвиньте полосу (этим вы скопируете её). Расположите дублированный слой под оригиналом. Ctrl+ T и поверните скопированную полосу горизонтально. Поменяйте настройки в стиле слоя Stripe (копия): Наложение градиента\Gradient Overlay:

Шаг 18. Повернём вторую полосу. Ctrl+ T , измените угол наклона -5° ,нажмите Enter и спустите эту полосу вниз на несколько миллиметров.

Выравнивание. Поскольку автор хочет добавить эффект обертки с полосами на задней стороне, очень важно поместить их в центре. Выделяем всё (Ctrl + A ), выбираем инструмент «Перемещение» (Move Tool), делаем активной группу "Stripe" и на панели параметров кликаем по значку «Выравнивание центров по горизонтали » (Align Horizontal Center), снимите выделение Ctrl+ D . Повторите эту операцию с группой "Stripe copy"

Шаг 19 . Теперь мы добавим жёлтую ленту. Создайте новую группу между группами "Stripe" и "Stripe copy" и назовите "Ribbon". Создайте новый слой, назовите "Ribbon", вытащите направляющую и инструментом «Прямоугольник » (Rectangle Tool)(U) в режиме фигур нарисуйте прямоугольник, как показано ниже, (чуть шире красных), цвет любой. Выберите инструмент «Добавить опорную точку » (Add Anchor Point Tool) и добавьте точку на середине нижней ширины. Выберите инструмент «Угол » (Convert Point Tool) и кликните по точке. Теперь инструментом «Стрелка » (Direct Selection Tool) переместите точку вверх, получились уголки.

Шаг 20 . Добавим стиль слоя к нашей ленте
Наложение градиента\Gradient Overlay:
Обводка\Stroke:

Шаг 21 . Добавим тень ленте. Дублируйте слой "Ribbon" (Ctrl+ J ), назовите новый слой «Ribbon Shadow» и растрируйте его (щелчок ПКМ по слою и выберите из списка «Растрировать слой») (поместите слой с копией ниже оригинала), сместите слой «Ribbon Shadow» немного вниз и вправо. Примените стиль слоя: Наложение цвета\ Color Overlay . Примените 10 рх. Меняем режим наложения Умножение » (Multiplay) и непрозрачность (Opacity) для слоя 75 %.

Шаг 22 . Деформируем ленту. Сделаем активным слой «Ribbon», Ctrl+Т , кликаем ПКМ и выбираем «Деформация » (Warp), потянем за узелки, чтобы исказить, как на скриншоте. Добавьте текстуру на ленту, используя технику Шага 15 . Меняем режим наложения (Blending Mode) для слоя на «Умножение » (Multiplay) и непрозрачность (Opacity) для слоя 50 %.

Шаг 23 . Добавим название брошюры. Выбираем инструмент «Текст » (Type Tool (T)) и введите слово. Теперь в меню Окно\Символ (Window\Character) и в диалоговом окне выставите следующие настройки. Потом поверните текстовый слой на -15° . Добавим стиль слоя:
Наложение цвета \Color Overlay
Внешнее свечение \Outer Glow
Внутренняя тень \Inner Shadow

Шаг 24 . Повторите предыдущий шаг, напишите слово, но с меньшим шрифтом и поместите его на нижней полосе, примените те же самые стили. Поверните текстовый слой на -5° , измените настройки для стиля Наложение цвета\ Color Overlay

Шаг 25 . Создайте новый слой под названием " Shadow " ниже группы "Stripe". Нарисуйте овальное выделение инструментом «Эллипс » (Ellipse Tool), цвет чёрный и примените Фильтр\Размытие\Размытие по Гауссу (Filter\Blur\Gaussian Blur), радиус 20 рх, поверните эллипс на -15° , поменяйте режим наложения (Blending Mode) для слоя на «Умножение » (Multiplay) и непрозрачность (Opacity) для слоя 50 %.

Шаг 26 . Наполняем брошюру контентом. Создаём Paragraph Text слой для колонны «Лицо2», шрифт Arial Black , цвет чёрный, также автор добавил название текста, настройки ниже. Как только вы создали текстовые слои (их должно быть три), поверните их на -15° . Не забудьте о границах - направляющих безопасноти.

Шаг 27 . Продолжаем добавлять текст. Заметьте, что угол поворота у текстового слоя "Contact Us" -5° . Создайте для каждой области печати группы и поместите текстовые слои в них «Лицо1», «Лицо2», «Лицо3».

У нас готова первая сторона нашего проекта. Сохраните документ и назовите "brochure - front".

Сторона 2.
Шаг 28 . Скройте или удалите слои «Лицо1», «Лицо2», «Лицо3», оставим только полосы и ленту. Создайте три группы «Лицо4», «Лицо5», «Лицо6».

Шаг 29 . Выберите "Stripe Copy". В меню Редактирование\Трансформирование\Отразить по горизонтали (Edit\Transform\Flip Horizontal) отразите полосу. Сделайте то же самое с группой "Stripe". Переместите ленту как показано ниже.

Шаг 30 . Продолжаем добавлять текст. Только угол вращения в этом случае должен быть положительным, поворачиваем на +15°.

Шаг 31 . Добавим изображение,Рамки Полароид, переносим на наш документ, назовём слой "Polaroid" и поместим слой в группу «Лицо5». Теперь вставьте любое изображение в тёмный прямоугольник "Polaroid" (добавьте маску слоя). Слой расположите над слоем "Polaroid" и назовите "Picture", поменяйте режим наложения (Blending Mode) для слоя на «Перекрытие » (Overlay).

Шаг 32 . Слейте слои "Picture" и "Polaroid" в один и идём в меню Изображение\Коррекция\Цветовой тон/Насыщенность (Hue/Saturation) (Ctrl + U ), настройки ниже

Шаг 33 . Добавим тень к изображению. Создайте чёрный прямоугольник на новом слое, расположите слой под слоем "Polaroid" и назовите "Shadow". Нажимаем Ctrl+ F , чтобы применить фильтр «Размытие по Гауссу» с последними настройками. Поменяйте режим наложения (Blending Mode) для слоя на «Умножение » (Multiplay) и непрозрачность (Opacity) для слоя 60 % и поверните слой с тенью на несколько градусов вправо.

Шаг 34 . Последние штрихи. Поверните «Лицо5» немного вправо, выберите инструмент «Затемнитель » (Burn Tool) и немного затемним некоторые участки на нашем фото

Шаг 35 . Вторая сторона готова.

Шаг 1

Для начала нужно создать узор сетки. Создайте новый документ (Ctrl + N) размером 200х200 пикселей. Это размер квадрата сетки. Вы можете задать другой размер в зависимости от того, какую сетку хотите создать. Не забудьте установить разрешение на 300 пиксель/дюйм, чтобы можно было распечатать брошюру.

Шаг 2

Кликните дважды на фоновом слое. У Вас появится окно создания нового слоя. Просто нажмите ОК и фоновый слой будет разблокирован.

Шаг 3

Кликните на слое дважды ещё раз, чтобы открыть окно стилей. Выберите стиль Обводка и установите Положение – По центру, Размер – 2 пикселя. От размера обводки зависит толщина линий сетки.

Шаг 4

Сохраните узор через меню Редактирование > Определить узор (Edit > Define Pattern).

Шаг 5

В появившемся окне введите имя узора. Лучше, если оно будет иметь смысл. Например, я назвал узор «Grid Lines 200». Из названия понятно, что это сетка с расстоянием между линиями 200 пикселей. Нажмите ОК и узор будет сохранён.

Шаг 6

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

Шаг 7

Теперь отведём направляющие, которые обозначат места сгибов и отступы. Разделите документ на три части по ширине и введите отметки для направляющих, пройдя в меню Просмотр > Новая направляющая (View > New Guide).

Шаг 8

Нужно создать две вертикальные направляющие на отметках 4, 65 и 9,35 дюймов. В результате мы получим 3 области. Справа налево: передняя страница (Front), задняя страница (Back) и боковая (Flap).

Шаг 9

Теперь нужно разграничить отступы. Ниже предоставлены типы направляющих и отметки.

Левый отступ: Вертикальная – 0,25 дюйма.
Правый отступ: Вертикальная – 13,75 дюйма.
Верхний отступ: Горизонтальная – 0,25 дюйма.
Нижний отступ: Горизонтальная – 8, 25 дюйма.
Левый сгиб 1 Вертикальная – 4,525 дюйма.
Левый сгиб 2: Вертикальная - 4,775 дюйма.
Правый сгиб 1: Вертикальная – 9,225 дюйма.
Правый сгиб 2: Вертикальная – 9,475 дюйма.

Шаг 10

Мы разграничили рабочее пространство. Теперь можно переходить к рисованию буклета. Создайте новый слой ( ",this,event,"320px");">Create New Layer) и залейте его белым цветом при помощи инструмента Заливка ( ",this,event,"320px");">Paint Bucket Tool). Затем перейдите в меню Редактирование > Заливка (Edit > Fill) и выберите узор, который мы сохранили ранее.

Шаг 11

Размер сетки Вы можете изменить при помощи инструмента Свободное трансформирование (Ctrl + T). Как только сетка будет установлена, перейдите в меню Выделение > Цветовой диапазон (Select > Color Range). Понизьте Разброс (Fuzziness) до 0 и пипеткой кликните на белой области на холсте. Нажмите ОК.

Шаг 12

Как только белые участки будут выделены, инвертируйте выделение (Ctrl + Shift + I) и скопируйте его на новый слой (Ctrl + J). Оригинальный слой можно удалить. На новом слое должна быть только сетка. На следующем скриншоте фоновый слой был скрыт, чтобы Вы поняли, смысл этого шага.

Шаг 13

Теперь добавим цвета. Выберите инструмент Градиент ( ",this,event,"320px");">Gradient Tool), настройте его, как показано ниже, и сделайте заливку на новом слое. Этот слой должен быть под сеткой.

Шаг 14

Сделайте выделение слоя с сеткой ( ",this,event,"320px");">Ctrl + Click), выберите белую кисть и обрисуйте всю выделенную область.

Шаг 15

Инвертируйте выделение (Ctrl + Shift + I), создайте новый слой и назовите его «Grid Colors».

Шаг 16

Инструментом Заливка ( ",this,event,"320px");">Paint Bucket Tool) залейте квадраты разными оттенками зелёного цвета. Как закончите, нажмите Ctrl + D, чтобы убрать выделение.

Шаг 17

Установите Режим наложения слоя на Перекрытие ( ",this,event,"320px");">Blending Mode – Overlay) и понизьте Непрозрачность (Opacity) до 40%. Сохраните документ (Ctrl + S).

Шаг 18

Создайте новый слой ( ",this,event,"320px");">Create New Layer) и инструментом Многоугольное лассо ( ",this,event,"320px");">Polygonal Lasso Tool) создайте выделение, показанное на следующем скриншоте.

Шаг 19

Залейте выделение синим градиентом.

Шаг 20

Установите Режим наложения на Жёсткий свет ( ",this,event,"320px");">Blending Mode – Hard Light).

Шаг 21

Добавим ещё одну линию графика. Выберите инструмент Перо ( ",this,event,"320px");">Pen Tool) и нарисуйте контур, как показано ниже.

Дизайн буклета для магазина кофе в Photoshop и InDesign


Часть 1

Описание урока

Использованная программа: Adobe Photoshop CS5
Сложность: средняя
Примерное время на выполнение: 2 часа

Законченная композиция (то, что мы будем создавать)

Привет всем! Представляю вам практическое руководство по созданию готового к распечатке буклета меню для
вымышленного магазина с названием “Фиолетовый кофе”. На этом уроке вы научитесь готовить фон и остальные
элементов композиции к распечатке, с последующим импортированием в Adobe InDesign для окончательной
обработки. Ну что, вы готовы?

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

Я разделил урок на 2 части. Он посвящен созданию фона макета меню и добавлению украшению его
дополнительными графическими элементами при помощи Adobe Photoshop. Позднее, все это будет
импортировано в InDesign, для окончательной обработки. Вторая часть описывает наложение текстовых элементов
в среде Adobe InDesign, наведение окончательного лоска и создание буклета, полностью готового к распечатке.

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

Итак, приступим.
Для выполнения урока нам понадобятся:

Установки документа
Помните, самое важное в этой работе – это, как говорится, перо и бумага! Сделайте набросок того, что вы хотите
получить на выходе процесса. Ниже вы можете видеть предварительный набросок, который нарисовал я, и на
который буду основываться при создании дизайна. У нас получится две страницы: титульная и обратная.

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

Шаг 1
Займемся созданием документа Photoshop для дизайна фона, логотипа компании и размещения на композиции
кофейной чашки.

Итак, начнем! Запустите Photoshop и пройдите в меню Файл > Создать (File > New). Прежде всего, нужно
определиться какого размера будет бумага, это очень часто зависит от конкретных пожеланий клиента, бюджета
проекта. Мы используем размер стандартного письма – 8.5x11 дюймов. Здесь, так же важно задать правильное
разрешение. По своему опыту могу сказать, что минимальное разрешение – это 300 пикселей/дюйм. На этом
уроке я решил работать непосредственно с цветовой схемой CMYK.

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

Продублируйте документ в ширину: 17 дюймов (8.5x2). После того, как вы дважды проверите правильность всех
настроек, жмите OK.

Шаг 2
Теперь у нас есть печатаемый холст, но нам еще предстоит несколько увеличить рабочую область дизайна за
счет имеющихся отступов от краев. Отобразите Линейку (Command + R) и расположите на холсте вдоль границ
документа четыре направляющие (кликните по линейке и перетащите на холст указатель мыши). Затем пройдите в
меню Изображение > Размер холста (Image > Canvas Size) и увеличьте размер документа на 1/8 дюйма верх, вниз,
вправо и влево. Самый быстрый способ сделать это – просто прибавить к текущему значению высоты и ширины по
0.25 дюйма, как показано на рисунке ниже. Убедитесь, что опорная точка находится по центру холста и нажмите
OK. Вы получили холст, увеличенный на 1/8 дюйма с каждой стороны.

Теперь, расположите одну направляющую прямо вдоль вертикальной оси симметрии холста, разделив его на
два колонки. Расставьте еще две направляющие на расстоянии 1/8 дюйма слева и справа от вертикальной оси
симметрии, обозначив, таким образом, серединные непечатные области.

Дизайн фона

Шаг 3
Приступаем к графическому дизайну. Прежде всего создадим слой с градиентной заливкой. Для этого пройдите
в меню Слои > Новый слой-заливка > Градиент (Layer > New Fill Layer > Gradient) и задайте следующие настройки
цветов градиента: Фиолетовый (C:80, M:100, Y:30, и K:25), Черный (C:70, M:70, Y:70, и K:95), которые создают
наиболее часто используемую версию богатого черного цвета. Если вы хотите побольше узнать об использовании
черного цвета в печатном дизайне, можете пройти по этой ссылке: Полное руководство по применению в дизайне
черного цвета. Проконтролируйте, чтобы был задан угол 90 градусов.

Шаг 4
Украшаем эффектами наш фон. Создайте новый слой над слоем с градиентной заливкой, задайте Основной цвет
- C:80 M:70 Y:60 K:80, и Фоновый – белый. Теперь пройдите в меню Фильтр > Рендринг > Облака (Filter > Render >
Clouds). Измените Режим наложения (Blending Mode) слоя с облаками на Перекрытие (Overlay).

Далее пройдите в меню Фильтр > Размытие > Динамическое размытие (Filter > Blur > Motion Blur), задайте Угол
(Angle) равный 90 градусам и Расстояние (Distance) равное 999 пикселям. После этого, в завершение создания
эффекта, подкорректируйте Уровни (Ctrl + L) как показано на рисунке ниже.

Шаг 5
При помощи инструмента Перо (Pen Tool) нарисуйте такую же фигуру, которая показана на рисунке ниже. Залейте

образованный контур цветом: C:10, M:15, Y:0, и K:0. Для улучшения структуры слоев, я использовал группы.
Сначала создадим группу с названием “Кривые справа” и поместим в нее все кривые линии, распложенные на
правой половине холста.

После того, как кривые будут нарисованы, пройдите в меню Слои > Слой-маска > Скрыть все (Layer > Layer Mask
> Hide All) и залейте холст горизонтальным градиентом (от черного к белому), оставляя видимой только левую
часть фигуры. Затем измените Непрозрачность (Opacity) слоя с кривой фигурой до значения 25% и задайте Режим
наложения (Blending Mode) - Осветление основы (Color Dodge).

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

Теперь выберите группу “Кривые справа” и перетащите ее к правой грани холста. После этого продублируйте
всю группу целиком (можно просто зажать Alt и указателем мыши сдвинуть изображение в сторону) и пройдите
в меню Редактирование > Трансформация > Отразить горизонтально (Edit > Transform > Flip Horizontal), чтобы
зеркально отразить кривые. Далее, выберите новую созданную группу (дубликат) и переименуйте ее в “Кривые
слева”, после чего переместите фигуры к левому краю холста.

Шаг 7
Создайте новый слой над группами с кривыми. При помощи инструмента Эллипс (Ellipse Tool (U)) нарисуйте
розовый (C:5 M:55 Y:0 K:0) круг (чтобы получить идеальный круг, удерживайте Shift). Далее пройдите в меню
Фильтр > Размытие > Гауссовское размытие (Filter > Blur > Gaussian Blur). Вам будет предложено предварительно
растрировать фигуру. Задайте радиус равный 50 пикселей и нажмите OK. Затем измените режим наложения круга
и задайте непрозрачность равную 25%. Теперь разместите его где-нибудь над кривыми.

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

Шаг 8
Для выполнения этого шага вам понадобится набор “звездных” кистей. Нанесите на новом слое серию из белых
(C:0, M:0, Y:0, and K:0) звезд, распределив их в случайном порядке. После этого примените стиль слоя Внешнее
свечение (Outer Glow) в сочетании с режимом наложения “Экран”. Размер кисти установите равным 70 пикс. и
задайте вот этот цвет C:15, M:55, Y:0, K:0. Наконец, установите Непрозрачность слоя со звездами равной 70%.

Шаг 9
Следующим шагом добавим на композицию логотип. Конечно, настоящий логотип должен представлять из себя
более сложную дизайнерскую разработку, поэтому я буду называть наш элемент просто “название компании”.
При помощи направляющих разделите пополам левую часть документа вертикально и горизонтально. Затем,
при помощи инструмента Горизонтальный текст (Type Tool (T)) заглавными буквами белого цвета наберите
слово “VIOLET”. Я использовал коммерческий шрифт Avant Garde, но вы можете использовать любой другой
(Futura, Century Gothic и т.д.). Ниже приведены параметры шрифта. Далее, выделите букву “O” и измените ее цвет
на C:10, M:85, Y:0, and K:0.

Наконец, в качестве дополнительного эффекта наложите на слой с текстом стиль слоя Наложение градиента

(Gradient Overlay) от серого к белому (Gray to White). Установите режим наложения слоя Линейное затемнение
(Linear Burn), Непрозрачность: 75% и Угол (Angle): 90 градусов.

Шаг 10
Теперь создадим отражение текста. Для этого продублируем слой с текстом, растрируем его (самый быстрый
способ – создать под той копией пустой слой, выделить оба эти слоя и нажать Ctrl+E, чтобы объединить их).
После этого пройдите в меню Редактирование > Трансформирование > Отразить вертикально (Edit > Transform
> Flip Vertical). Расположите слой-копию копию сразу под слоем с текстом. Наконец, создайте для копии слой-
маску: Слои > Слой- маска > Скрыть все (Layer Mask > Hide all) и залейте ее Градиентом (Gradient Tool) от черного к
белому.

Продолжение следует...