Проводка

Дизайн макет брошюры в фотошопе. Как сделать буклет в фотошопе

Дизайн макет брошюры в фотошопе. Как сделать буклет в фотошопе

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

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

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

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

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

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

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

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

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

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

Шаг 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) и нарисуйте контур, как показано ниже.

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

Конечный результат

Подробности

  • Программа: Adobe Photoshop CS4
  • Сложность: Средняя/Сложная
  • Время: 2 часа

Шаг 1 — Концепция

Каждый проект должен начинаться с концепции. Сначала мы должны продумать детали, чтобы не потерпеть неудачу в середине процесса дизайна. Сейчас нам нужно определить размеры документа. Лучше всего делать вычисления на бумаге карандашом, где вы можете бысто и просто нарисовать контуры и значения. Мой буклет после складывания получился размером A4. Если вы хотите использовать размер Letter вместо европейских стандартов, проверьте размеры. Я использую в работе миллиметры. Если вы хотите использовать дюймы, пересчитайте мои значения (Photoshop не делает этого автоматически). На самом деле мой набросок — это большая мазня, так что я решил сделать ясное графическое представление концепции. Не заботьтесь об этом слишком, просто запишите значения, чтобы не запутаться. Большие цифры обозначают расположение отдельных страниц. Заметьте, что первая полоса находится в конце документа, в то время как последняя — в середине. Здесь также есть размер бумаги в реальном размере и размер с припусками под обрез. Это называется тип складывания C.

Шаг 2 — Разрешение

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

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

Значение автоматически пересчитается и изменится на 28,346. То же произойдёт, когда вы измените единицу измерения (если вы измените пиксели на сантиметры или дюймы, значение dpi тоже изменится, попробуйте). Для создания экранных изображений, например, для интернета, обычно используется значение 72 dpi. На самом деле dpi здесь нет, для экранных изображений используются только пиксели, а dpi — это только привязанность к печатному размеру. Универсальное значение для печати — это 300 dpi. Оно годится, чтобы получить достаточно чёткое, хорошо запечатанное изображение для малых печатных форм (как визитки, буклеты, флаеры, билеты и т.п.). Но его нельзя использовать во всех случаях. Для нашего буклета A4 формата, который будут рассматривать с расстояния вытянутой руки, это превосходно. Некоторые печатные учреждения советуют даже 600 dpi и больше, но это всё же излишне. В прошлом я делал баннер, который висел на стене, и его разрешение было 28 dpi (Если бы я использовал разрешение 300 dpi, мой компьютер бы повис из-за размера документа). Конечно, 28 dpi — это очень мало, и если бы у нас в руках был кусок этого баннера, мы бы увидели все несовершенства печати, однако из-за большого расстояния (шириной в улицу, например) он выглядел достаточно чётко.

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

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

У нас будет две стороны для печати, лицевая и задняя часть, значит будет два документа в 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 .

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

Вот что получится в результате выполнения урока:

Шаг 1 - Составление плана

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

В первую очередь определимся с размерами документа. Лучше всего сделать необходимые расчеты с помощью ручки и бумаги. Так быстрее и легче определить необходимые формы и значения.

Я буду показывать, как сделать брошюру формата A4 (в сложенном виде). Если вам требуется создать документ в формате Letter, а не европейского стандарта, проверьте размер. Мне удобнее работать в миллиметрах. Если вы предпочитаете пиксели, пересчитайте мои значения.

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

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

Шаг 2 - Выбор разрешения

Качество печати напрямую зависит от разрешения. Создавая новый документ, сразу задаем разрешение:

DPI - это значение, которое определяет количество точек (пикселей) на один дюйм. Также разрешение может измеряться в пикселях на см. Однако, я еще не встречал ни одной типографии, в которой бы пользовались этой единицей измерения. Фотошоп преобразует разрешение в разные единицы измерения автоматически. По умолчанию при создании нового документа задается значение 72 пикс/ дюйм. Если поменять единицу измерения, значение автоматически изменится на 28,346:

При создании изображения для отображения на компьютерных мониторах чаще всего используют разрешение 72dpi. Лучшее же разрешение для вывода на печать - 300 dpi. Это минимальное разрешение для получения четких цветных отпечатков небольшого размера (буклеты, визитки, билеты, листовки и т.д.). Для брошюры формата A4, которую будут смотреть, держа ее в руках, это будет замечательно. Некоторые полиграфические компании предлагают печать документов с разрешением даже 600 точек на дюйм, а то и больше.

Итак, DPI определяет количество точек, из которых состоит изображение. Точки расположены по строкам и столбцам. Количество точек по горизонтали и по вертикали может меняться. Но не будет забивать этим голову. Запомните только, что для печати оптимально разрешение - DPI-300, если нет других рекомендаций.

Шаг 3 - Поля и припуски под обрез

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

Расскажу небольшую грустную историю…

Допустим, нам нужно сделать визитку. В нашем распоряжении только программа Photoshop. Предположим, что мы уже знаем, что необходимо задать разрешение 300 dpi, а вот про припуски под обрез никогда не слышали. Итак, мы делаем визитку таким образом:

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

Итак, припуски под обрез - это часть дизайна. В нашем примере я сделал их по 2 мм. Теперь несовершенства обрезки будут совершенно незаметны. В разных типографиях требования к припускам под обрез разные - от 1 до 3 мм с каждого края. Таким образом, при дизайне визиток обязательно нужно это учитывать. Теперь попробуем создать визитку с припусками под обрез. Размер в 3,5×2 дюйма соответствует американскому стандарту 89×51 мм. В Польше стандартный размер визитки составляет 90×50 мм. Разница небольшая, но чтобы вычисления были более понятными, будем использовать второй размер вариант.

Как видно из рисунка выше, со всех четырех сторон документа есть дополнительно 3 мм. Итак, как сделать расчет окончательного размера документа:

  • Требуемый размер документа: 90 * 50 мм
  • Размер припусков под обрез: по 3 мм
  • Добавим припуски: 90+(3*2) * 50+(3*2)
  • Фактический размер документа: 96 * 56

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

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

Теперь расскажу о полях. Если без припусков под обрез у нас появляется линия белого цвета в 1 мм шириной, это означает, что с какой-то стороны вырезан 1 мм дизайна. Но мы же не хотим, чтобы часть дизайна была отсечена. Чтобы этого избежать, все важные вещи, такие как логотип или текст, помещаются на небольшом расстоянии от краёв, чаще всего это 5 мм.

margin line - линия полей

bleed line - линия припуска под обрез

Шаг 4 - Простой способ сделать поля и припуски под обрез

Возьмём за основу шаблон нашей визитки ещё раз. Итак, визитка размером 90×50 мм.

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

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

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