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

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

У нас будет две стороны для печати, лицевая и задняя часть, значит будет два документа в Photoshop .

Я покажу вам как создать брошюру. Ниже показаны складные типы брошюры.

И здесь и на передней части, мы будем печатать имена на каждой области, «Лицо », так мы имеем «Лицом 1 », «Лицом 2 », «Лицом 3 » ... до тех пор, пока не закончим «Лицом 6 ».

Шаг 2

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

Все это поможет нам при размещении нашего контента в брошюре.
В моем проекте вы можете увидеть как я поместил поле «Обратная связь » в текстовом поле №2 (см. предыдущий график).

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

Шаг 3

Начинаем создавать наш дизайн! Работаем со стандартным документом 11х8.5 дюйма. Открываем Photoshop , жмем Ctrl+N , чтобы создать новый документ.

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

Ставим параметры следующим образом:

Resolution (Резрешение) - 300 pixels per inch;

Color mode (Цветовой режим) - CMYK ;

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

После того как мы создали документ, нам понадобятся Направляющие ( (Просмотр - Линейки / Сочетание клавиш «Ctrl+R»)).

Мера измерения в линейке должна быть в дюймах. Сделать это можно следующим образом, зажмем Alt и кликаем по направляющей, в появившемся меню выбираем дюймы (Inches).

Теперь мы должны включить опцию Show Guides (Направляющие), следуем (Просмотр - Показать - Направляющие) или нажатием клавиш Ctrl+; .

Шаг 4

Мы должны определить границы нашей области для печати 11х8.5 дюймов.

Для этого мы должны расположить 4 направляющих по каждой стороне документа.

Вы можете спрятать направляющие по мере надобности и снова показать, (Просмотр - Показать - Направляющие / Сочетание клавиш «Ctrl+;»).

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

Шаг 5

Теперь у нас есть 4 направляющих, следуем (Изображение - Размер холста / Сочетание клавиш «Alt+Ctrl+C»), и добавляем один дюйм к высоте и ширине документа, документ будет след. размеров: 12х9,5 дюймов.

Кроме того, убедитесь что точка находится в самом центре. Жмем ОК и вы видите что белый фон увеличился на 0,5 дюйма, по каждой стороне.

Шаг 6

Теперь мы добавим 0,25 дюйма для печати. Создадим 4 направляющих, выше 1 / 4 дюйма дюйма до предыдущей направляющей.

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

Шаг 7

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

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

Шаг 8

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

Брошюра состоит из трех равных столбцов.

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

Это будет примерно (113=3.6).

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

Вставляем в документ на новый слой и называем «BG Texture » и используя инструмент (Инструмент «Перемещение» / Клавиша «V») и (), помещаем внутри печатную область, в тот самый треугольник который рисовали в предыдущих шагах (шаг 10). Теперь используем инструмент () чтобы убрать на текстуре ненужные пятна, линии. Меняем слоя с текстурой на (Умножение) и (Непрозрачность) - 40% .

Важно знать

Изменения режимов смешивания в RGB и в CMYK различаются.

Режим RGB - используется легкое смешивание слоев, режим CMYK - используется доля черного при смешивании.

Популярный режим смешивания (Умножение), при смешивании использует математические формулы RGB цветом.

Результат будет разный, в зависимости от цветового режима.

Ниже приведен пример режима смешивания Multiply (Умножение) в двух цветовых режимах RGB и CMYK .

Цвета Cyan (Голубой), Magenta (Пурпурный) и Yellow (Желтый), Red (Красный), Blue (Синий) и Green (Зеленый), показывают огромную разницу с цветами RGB .

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

Чтобы фон выглядел достаточно грубым, возьмем отсканированное изображение черного квадрата, распечатанного на старой бумаге. Можно использовать "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), и можно распечатывать документ...

Заключение

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

Дизайн буклета для магазина кофе в 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) от черного к
белому.

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

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

Инструкция

Буклет, как и другие печатные изделия, несет в себе информацию об организации, каких-то услугах, определенном проекте или мероприятии. Поэтому макетирование буклет а начинается со сбора информации для него. Это фотографии, логотип и контактные данные организации, текст, которого в буклет обычно входит одна, максимум две, страницы.

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

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

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

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

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

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

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

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

Превью результата

Создаем готовую к печати складываемую брошюру формата А4

Подробности

ПО: Adobe Photoshop CS4
Уровень сложности: Средний/тяжелый
Необходимое время: 2 часа

Этап 1 – Концепт

В любом проекте требуется концепт (идея). Сначала нужно распланировать всё, чтобы не застопориться в середине процесса. Сейчас нам нужно определить размеры нашего документа. Лучше всего делать это с помощью ручки/карандаша и листа бумаги – так вы сможете быстро обрисовать форму и необходимые элементы. Мы разрабатываем брошюру, которая в сложенном состоянии будет иметь формат листа А4. Если вы хотите использовать другие форматы, то просто не забывайте про размеры и пропорцию. Лучше всего работать в миллиметрах. Если же вы захотите использовать дюймы, то вам нужно будет конвертировать все наши значения (Photoshop делает это автоматически). На самом деле, наш набросок представляет собой одну большую несуразицу, поэтому мы решили четко графическим способом выделить концепт. Не нужно придавать этому особое значение, просто вписывайте нужные значения, и не морочьте себе голову. Большие цифры определяют расположение отдельных страниц. Имейте в виду, что главная страница находится в самом конце документа, а последняя находится в середине. Сначала это может запутать, но здесь работает лишь логика. Вам важно представить эту брошюру в голове. К тому же, важно учитывать реальные размеры бумаги, и размеры документа, подготовленного к печати. Также хотим вам рассказать, что подобный тип складывания называется C (си).

Этап 2 – Разрешение

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

Принтеры печатают маленькие цветные точечки на листе бумаги. Таким образом обычно работают принтеры. И DPI (dots per inch или точек на дюйм) – это значение, которое определяет чисто этих точек в одном дюйме. Вы также можете использовать DPCM (точек на см), но лично мы никогда не сталкивались ни с дизайнерами, ни с печатными компаниями, которые пользовались бы этой единицей изменения. Хотя их можно свободно переключать в Photoshop. При создании нового документа просто впишите значение 72 pixels/inch (Это PPI, а не DPI, но это значение часто называют DPI). Если вы поменяете единицу измерения на pixels/cm…

…значение автоматически переключится на 28,346. То же самое произойдет, если вы измените единицы измерения (если вы измените пиксели на cm/inches, то значение dpi здесь будет играть свою роль). При создании изображений для экранов компьютеров зачастую используется значение 72dpi. На самом деле dpi здесь вообще не имеет значения, так как соотношение пикселей и dpi влияет только на печатную продукцию. Можете считать, что это нечто вроде легенды. Универсальное значение для печатной продукции 300dpi. Этот минимальное значение для того, чтобы получилось довольно резкое красивое изображение на маленьких поверхностях (визитные карточки, брошюры, билеты и прочее). Но это значение используется не всегда. Так как мы разрабатываем брошюру формата А4, которую можно хорошо видеть и прочитать, держа в руках. Некоторые печатные фирмы советуют использовать 600dpi и выше. В прошлом мы занимались разработкой баннера, который висел на стене, и разрешение там было 28dpi (если бы мы тогда использовали 300dpi, то наша вычислительная техника просто-напросто сгорела бы если не при разработке такого документа, то при сохранении). Понятное дело, что 28dpi – это очень мало, и если держать в руках часть того самого баннера, будет видно, что печать там очень плохая. Тем не менее, с дальнего расстояния (на улице, к примеру) баннер смотрелся очень четко и резко.

Опять же, кратко о DPI. DPI определяет число точек, которые представляют собой «детальность» изображения. Точки выстраиваются в ряды и строчки. Горизонтальное и вертикальное число точек может отличаться, но сейчас мы не будем забивать вам голову этим. Просто запомните – используйте 300dpi, если нет конкретных требований к печатной продукции.

Этап 3 – По поводу краев и полей

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

Давайте проясним, края – это те части дизайна, которые будут обрезаны после печати. Они выпадут из дизайна. Зачастую они отнимают где-то 1мм документа. Если мы используем такие размеры нашей визитной карточки, как показано в неудачном примере, то у нас появятся эти неприятные белые линии. Но, если мы расширим наш дизайн на несколько миллиметров, то это все можно скрыть. Именно для этого нужны края. Нашей брошюре мы выставляем 2-хмиллиметровые края, но обычно оставляют по 3мм. Мы оставили 2 только потому, что нам так рекомендовала печатная компания. Некоторые позволяют оставлять даже 1мм. Если вы не знаете, насколько большими должны быть ваши края, выставляйте 3мм (0.125 дюйма) с каждой стороны. Иногда бывает так, что печатается документ, где по краям везде белый фон и сам рисунок не заходит за край – в таких случаях выставлять края не требуется. Но вы должны об этом знать в любом случае. Теперь давайте попробуйем сделать визитную карточку с краями. Размер 3,5х2 – это 89х51мм, что является стандартом в США (но так же используется в других странах). Стандартный размер в Польше составляет 90 на 50 мм. Разница невелика, то мы воспользуемся вторым вариантом, чтобы более четко продемонстрировать вычисления.

Как видно, мы добавили по 3 мм с каждой стороны документа. Так какие же следует вводить значения? Используем следующее вычисление:

Реальный размер: 90х50мм
Размер краев: 3мм
Добавляем края: 90+(3*2)х50+(3*2)
Размер документа: 96х56мм

Обратите внимание, что при добавлении краев к документу, мы умножаем их на два. Это потому, что края ведь с обеих сторон. Не забывайте об этом. Границы документа определяются метками обрезки (они показывают места, где страница должна быть обрезана, вы можете видеть это на «плохом примере», приведенном сверху). Тем не менее, мы не можем их сделать автоматически в Photoshop (насколько нам известно). Мы можем нарисовать их вручную, но этого обычно никто не делает. Проще всего импортировать документ в illustrator, и там края добавятся автоматически. Если у вас нет ни Adobe Illustrator, ни InDesign, просто сообщите сотруднику печатной компании, что вам нужны края в 3мм. Это все делается секунду, не больше (позже мы покажем вам, как это делается).

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

Этап 4 – Как легко добавить края и поля

Давайте еще раз обратимся к тому шаблону визитной карточки. Прежде всего – концепт. Наша визитная карточка имеет размер 90х50мм. Нам нужно добавить направляющие, которыми мы обозначим поля и края. Это наиболее быстрый способ, который нам известен. Также неплохо было бы для себя создать файл, где уже заранее выставлены все нужные направляющие. Это хорошо экономит время – вы просто открываете заготовку вместо того, чтобы создавать новый проект и выставлять направляющие заново. Давайте предположим, что у нас будет 5-имиллиметровые поля и 3-хмиллиметровые края. Края увеличивают общий размер документа, а поля находятся на самом документе. Дальнейшие действия могут немного запутать вас, но постарайтесь сосредоточиться на работе. Поля у нас есть с обеих сторон, поэтому в целом они занимают 10мм документа по горизонтали и вертикали (а края добавляют по 3мм с каждой сторон, поэтому они в общем составят 6мм). Теперь возьмите реальные размеры (90х50) и отнимите с каждой стороны ширину поля (10х10). Таким образом у нас получится документ в размере 80х40мм. Создайте новый документ Photoshop с этим размером. Теперь вам не придется ничего дальше вычислять.

Теперь пройдите в меню View > New Guide (дважды) и добавьте горизонтальные и вертикальные направляющие с 0px в поле ввода.

Повторите это действие, но вместо того, чтобы вводить 0px, введите 100% (вы можете выставлять направляющие не только в сантиметрах, но и в процентном соотношении, в дюймах и т.д.). У вас должно получиться следующее:

Затем пройдите в меню Image > Canvas size и введите значение 10 миллиметров в каждое поле (это будет размер полей). Убедитесь, что поле Relative выделено.

И опять же, таким же образом добавьте направляющие. Подсказка: вы можете сохранить процесс создания направляющих в Photoshop в виде action (чтобы вам не пришлось вводить конкретные значения, сохраните просто начало и конец), таким образом ускорив работу.

И еще раз пройдите в меню Image > Canvas size, и введите 6мм в поля – на этот раз это размер краев. Как видно, значения относительные и всегда одинаковые, из этого у нас есть возможность создать один большой action в Photoshop, который значительно ускорит процесс.

Мы уже позаботились об этом, подготовили. Во время воспроизведения этого action диалоговое окно будет открываться 4 раза. Просто введите 100% в поле, и каждый раз нажимайте Enter. На этом всё. Легкий процесс становится еще более легким. Конечно же, иногда вам нужно использовать иной размер краев, поэтому важно не забывать, как все это делается руками.

Этап 5 – Довольно разговоров, – приступаем к разработке дизайна!

Итак, всю «грязную» работу мы на сегодня закончили. Надеемся, вы извлекли нечто новое для себя. Теперь можно перейти к непосредственно разработке дизайна. Вы хоть помните, что мы сегодня собрались создавать? Что-то нам кажется, что мы совсем вас запутали с этим примером визитной карточки. Сегодня мы занимаемся разработкой складной брошюры формата А4:

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

Заметили что-нибудь? Когда вы выставите края, у вас получатся следующие размеры страниц: 208 / 211 / 211. Почему здесь есть отличие? Это необходимо для нормального складывания. Самая маленькая страница должна быть скрыта в двух других. Если ее размер будет 211мм (как у остальных), то она просто не уместится с складку. Исключив эту пару миллиметров, вы можете избежать серьезной проблемы.

Итак, мы можем прямо отсюда начать работать. Прежде всего, создайте новый документ с реальным размером, уменьшенным на 10мм по обеим осям (поля). Просто повторите 4 этап. Мы используем края толщиной в 2мм, вместо стандартных 3мм. Мы просто запускаем собственный action, а затем просто открываем меню Image > Canvas size, и вписываем -2мм (-1мм?) в каждое поле ввода (не забывайте про галочку напротив Relative).

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

Прежде всего, давайте мы расскажем вам, как удалять уже выставленные направляющие в Photoshop. Это понадобится вам, если вы случайно выставите их не в том месте. Здесь у нас начинается магия – нажмите V или выберите инструмент перемещения (Move Tool), кликните по направляющей, которую вы хотите удалить, и перетащите её за пределы документа – она исчезнет. Если вы хотите повернуть направляющую на 90 градусов, то можете просто нажать Alt и кликнуть в той точке, где она должна повернуться. Если вы хотите переместить направляющую на 10 пикселей и размножить её, то нужно делать это, удерживая клавишу Shift. Теперь давайте выставим направляющие для складывания. Пройдите в меню View > New Guide и введите 213mm в поле ввода. Повторите этот шаг, но уже со значением 424mm (213+211). Сохраните документ как inside.psd. Теперь удалите обе направляющие и добавьте две новые, но теперь уже вводите значения 210mm и 421mm (210+211). Затем сохраните документ под именем outside.psd. Теперь мы приступим к работе с документом outside.psd, а документ inside.psd останется нетронутым в виде пустого бланка с направляющими.

Этап 6 – Лицевая сторона

Вы можете начать с заливки всего документа белым цветом. Нам тоже придется это сделать, потому что мы предпочитаем начинать работу с прозрачного фона. Такой вот выбор. Просто не нравится авто-заполнение при изменении размера холста и т.д. Вы можете использовать данный тип брошюры для представления работы клиентам. Нам кажется, что такой подход довольно часто встречается в работе. Нам также попадались C-брошюры, в которых было размещено резюме. Мы используем выдуманные компании с выдуманной продукцией и предложениями. Поэтому не нужно думать, что мы здесь что-то рекламируем – просто используем для наглядности. Мы не будем пользоваться изображениями, так как изображения каждый размещает по-своему. Конечно же, мы предложим вам пример, но вы сами должны решить, где лучше будет отобразить то или иное изображение. Мы воспользуемся иллюстрациями, которые вы можете видеть на сайте. Вам будет удобнее, если использовать группы и сортировку слоев.

Создайте выделение с помощью инструмента создания прямоугольного выделения (rectangle marquee tool). Здесь вам как раз помогут направляющие. Выделение должно охватывать 1/3 документа, - это и будет лицевая сторона.

Затем залейте выделение цветом #c96003. На самом деле, нам следовало бы приводить вам цвета в формате CMYK, так как именно в этом режиме цвета мы работаем, но есть некоторые причины к тому, почему мы этого не делаем: прежде всего, вам не столь важно использовать прямо-таки те же самые цвета; во-вторых, палитра в CMYK не может быть точно отображена на экране компьютера (так как система отображает цвета RGB). Так что, если вы хотите использовать какой-то определенный цвет, то вам следует воспользоваться палитрой цветов из печатной фирмы, либо вы можете просто отпечатать несколько версий с разным цветом фона. В конце концов, вы можете просто выбрать цвет и вставить его в hex-значение в пипетке, и тогда сможете получить CMYK-значения. Теперь мы поиграем немного с инструментом заливки градацией (Gradient Tool), чтобы наш фон был немного живее. Наши градации должны быть применены в качестве обтравочных масок (clipping mask). Для того чтобы создать обтравочную маску, переместите курсор между слоями в окне слоев. Зажмите Alt, и когда курсор изменится, кликните левой кнопкой мыши. Теперь обтравочный слой не будет выходить за пределы основного слоя. Используйте цвет схожий с #e6b338 для того чтобы сделать несколько радиальных и линейных градаций. Уровень плотности отображения (opacity) для нашего инструмента создания градаций выставлен на 30%. Примечание: если вы используете градации для печатной продукции, то постарайтесь сделать так, чтобы отличались как минимум на 5% в CMYK-значении, иначе их просто не будет заметно.

Теперь проделайте то же самое, только с цветом #8d261c.

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

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

Небольшой трюк: воспользуйтесь инструментом создания округлого выделения (Elliptical marquee tool), и создайте большой эллипс по всей странице.

Затем, с помощью инструмента создании градаций (с уровнем плотности отображения на 30%) создайте 2 или 3 градации белого цвета. В самом конце измените уровень плотности отображения слоя с градацией на Мягкое освещение (Soft light) или Наложение (Overlay).

Повторите эту процедуру пару раз. Вы так же можете попробовать черный цвет.

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

Этап 7 – Страница 6

Задняя сторона – идеальное место для того, чтобы разместить карту и контактные данные. Все складные брошюры, которые мы когда-либо разрабатывали, были основаны на этом концепте. Иногда там размещают различные фотографии компании. Просто сохраняйте простоту. Нам кажется, что многие люди чисто интуитивно в поисках контактных данных смотрят на заднюю сторону. Создайте выделение между направляющими. Убедитесь, что включена привязка.

Это поможет вам при работе с направляющими, и поспособствует тому, что дизайн будет более четкий. Залейте слой темно-серым цветом. Затем добавьте немного текста – готово! Нам бы не хотелось захламлять страницу. Воспользуйтесь преимуществом панели Символов (Character panel) и поиграйте со шрифтами – это очень важная часть дизайна печатной продукции.

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

Этап 8 – Страница 5

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

Мы решили здесь расположить страницу с информацией. В большинстве случаев эта информация находится на странице 2, а контент 5 страницы привязывается к содержимому страниц 3 и 4. Нам кажется, что это немного неудобно, и с точки зрения удобства использования мы соединили 2, 3 и 4 страницы вместе, а 5 оставили отдельно. Мы также немного изменили внешний вид страницы 6, но без серьезных изменений. Так как контент должен быть раздельным, мы просто соединили фоны. Мы планируем сделать оранжевый фон по всей брошюре. Залейте фон тем же цветом, который вы использовали на странице 6. Затем создайте выделение. Нечто вроде этого:

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

Сделайте заголовок. Здесь суть заключается в том, чтобы смешать два цвета.

Теперь возьмите Ручку (Pen) и создайте форму, которая подойдет области с оранжевым цветом. Не беспокойтесь о цвете.

Теперь возьмите инструмент создания текста (Type Tool) и переместите курсор мыши над этой формой. Обратите внимание на то, что курсор изменился. Если вы передвинете его к границе формы, то появится дополнительная линия. После произведения клика, у вас появится возможность писать текст вокруг формы. Внутри формы у курсора будет дополнительный круг. После произведения клика границы вашего текста будут ограничены размерами формы. Итак, кликайте внутри формы – это и будет область для информации «о нас». Она может быть более объемной или, наоборот, сокращенной. Мы же воспользуемся простым наполнителем.

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

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

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

Этап 9 – Страницы: 2, 3 и 4

Откройте ранее подготовленный файл inside.psd. Здесь мы поместим контент на одном дыхании. Нам не хотелось бы уделять много внимания дизайну и контенту, так как здесь все очень строго зависит от предпочтений клиента или назначения брошюры. Поэтому мы не будем описывать каждый незначительный шаг, осветим лишь основное. Итак, залейте всю область документов оранжевым цветом и стилизуйте их градациями, как мы делали это на страницах 1 и 5. Также неплохо было бы добавить немного «шума» в градации. Благодаря этому вы сможете избежать резких переходов в цвете.

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

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

Также учитывайте тот факт, что брошюру, скорее всего, будут рассматривать с более близкого расстояния, чем вы смотрите на нее на мониторе. Попробуйте сами. Наши дизайнеры обычно смотрят в монитор на расстоянии вытянутой руки + 15 сантиметров. Обычно при просмотре брошюр, люди сгибают руки в локтях, поэтому она гораздо ближе к глазам. Если вам кажется, что шрифт очень маленький, попробуйте распечатать пример на домашнем принтере. Вполне вероятно, что текст окажется очень удобным для чтения. Переходим к странице 2.

Наш контент на страницах 3 и 4 будет связан. Мы сделали заголовок для обеих страниц. Обратите внимание на пространство, отмеченное красной стрелкой. Старайтесь располагать текст подальше от областей складки, иначе их будет сложно читать.

На странице 3 мы поместим 2 макета книг. Здесь вряд ли нужно что-то объяснять, поэтому мы просто выполняем задачу.

И другие простенькие макеты журналов.

И целый разворот:

Этап 10 – Подготовьте макеты

Настанет время, когда вам нужно будет показывать работу клиенту. Не совсем разумно посылать ему просто два предварительных файла (внутреннюю сторону и внешнюю). Его это немного смутит. Ваш клиент вряд ли будет знать хоть что-нибудь о печати, но он точно хотел предварительно увидеть результат вашей работы. Так что, давайте попробуем сделать макет. Наш макет будет очень маленьким ввиду ширины веб-сайта. Постарайтесь, чтобы ваш макет был большим в размере, чуть меньше оригинального размера (на 20-30% меньше исходных размеров). Конечно же, вы можете воспользоваться и нашими макетами. Просто поместите свой дизайн поверх нашего, пройдите в меню Edit > Transform > Distort, и подстройтесь под размеры. Вы даже можете увеличить наш макет, если для вас не так важно качество.
mockup.zip | 3 мб

Этап 11 – Сохраняем для последующей печати

Лучше всего, конечно, поддерживать контакт с печатной фирмой. Нам не приходится создавать какие-то специальные сохранения, так как наша печатная компания принимает в работу и PSD-файлы. Тем не менее, не у каждого есть возможность отсылать (и принимать) файлы размером до 2 гб. Да и в целом ситуация усложняется, если вы не можете лично присутствовать в офисе печатной фирмы. Существуют архиваторы, которые позволяют нам сокращать размеры файлов без потери качества. Вы можете сохранить документ в формат TIFF с включенным сжатием LZW. Некоторые фирмы просят не прикреплять ICC-профиль к документам:

Нам кажется, что большинство печатных компаний примут файл в таком виде. Если PSD-файл весит 250 мб, то TIFF практически без потери качества будет весить всего 26 мб. Таким образом становится гораздо проще отослать нужный файл. Учитывайте то, что вас могут попросить внести какие-то изменения в документ. Также есть возможность сохранять файл в формате PDF. Выбирайте самое лучшее качество, и не забудьте запретить другим людям редактировать документ.

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

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

Результат

Скачать PSD

Касса