Photoshop. Монтажные области

Уроки Photoshop от профессионального полиграфиста – это практический курс для желающих освоить Photoshop и/или отточить навыки работы в нём.

Создать новый файл в Photoshop 

Рис. 1. Буфер обмена.

Рис. 1. Копируем изображение в Буфер обмена.

Создать новый файл в Фотошоп можно несколькими способами. Первый способ – это создание файла с помощью буфера обмена.
Я в интернете нашёл нужное мне изображение. Далее, копирую его в буфер обмена через контекстное меню, вызываемое правой кнопкой мыши. Перехожу к Фотошоп и вызываю Меню: Файл→Создать (Menu: File→New) или горячую клавишу [Ctrl + N]. Старайтесь запоминать горячие клавиши или, для начала, записывать, и сразу привыкайте использовать их в работе. Во-первых, горячие клавиши существенно ускоряют работу, а, во-вторых, это признак профессионализма.

Рис. 2. Буфер обмена.

Рис. 2. Создание файла через Буфер обмена.

В диалоговом окне Фотошоп предлагает способы создания файла, и «Буфер обмена» стоит на первом месте. Сразу правильно заданы все параметры, а именно размеры, разрешение, цветовая палитра.
Вновь созданный файл пустой, с единственным слоем «Фон». Вставляем файл из буфера обмена, горячая клавиша [Ctrl + V]. Изображение встаёт на новый слой. Теперь можно с ним работать или просто сохранить.

Второй способ создания файла – это пользовательский файл, т.е. файл, созданный с нашими параметрами/настройками. В правой панели диалогового окна задаём параметры файла: это размеры (ширина и высота) «Холста», можно задать в любых единицах измерения (Сразу оговорюсь, что для полиграфии удобно пользоваться метрической системой – это мм или см, а для WEB удобно пользоваться пикселями);
Разрешение изображения, традиционно измеряется в ppi (pixels per inch или в пикселях на дюйм). Для полиграфии – это от 150 до 300 ppi, для WEB – не имеет значения;
Цветовая палитра: для полиграфии это CMYK, для WEB – RGB;
А также цвет фона.

Растрирование

Подробности читайте в большой статье, посвящённой одному из «китов» современной полиграфии – растрированию. Из статьи Вы подробно узнаете: о понятии линиатура (частота растра); о связи частоты растра и разрешения; о зависимости частоты растра от печатной машины и типа бумаги…

Перейти…

Рис. 3. Шаблон файла.

Рис. 3. Сохраняем Шаблон файла в Photoshop.

Но самое интересное, это не то, что можно создать файл с нужными параметрами, а то, что часто используемые нами настройки можно сохранить в качестве шаблона и использовать их в последующей работе.
Для примера создадим настройку стандартного листа форматом А4 полиграфического качества, разрешением 300 ppi, в палитре CMYK.
В этом поле вводим название нашей сохранёнки. Если шаблон с таким именем уже есть, то Фотошоп не разрешает повторно его ввести.

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

Если в ваших работах меняется преимущественно один параметр, то не следует заводить кучу шаблонов. Поясню. Допустим, я работаю с файлами полиграфического качества, Разрешение и Цветовая палитра у меня неизменны, а меняется только формат (размер файла). В этом случае, я буду пользоваться одним шаблоном А4, недавно созданным и просто оперативно менять в нём размеры – это, всё равно, будет быстрее, чем выискивать шаблон с нужными размерами, если у меня их штук 20.

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

Создадим файл из нашего шаблона. Новый файл всегда со стандартным слоем «Фон» (Background), который имеет непрозрачную заливку.

Но Фотошоп не отстаёт от других производителей и идёт в ногу со временем, поэтому здесь, как и в других программах, я имею в виду не только продукты Adobe, появились «Монтажные области». Вижу удивление и неприязнь со стороны полиграфистов-допечатников, но не спешите судить, давайте посмотрим для чего они нужны и как с ними работать.

Монтажные области в Photoshop 

Рис. 4. Монтажная область.

Рис. 4. Создать Монтажную область в Photoshop.

Создадим «Монтажную область» через контекстное меню. В имени «Монтажной области» сразу удобно описать её размеры. Зачем это нужно будет понятно в дальнейшем.

Размер Монтажной области можно регулировать мышкой, а значения размеров отображаются в панели Инфо. Размер указывается в тех единах измерения, которые мы задали в Настройках. Поправим их. Меню: Редактирование→Настройки→Единицы измерения и линейки… Или горячие клавиши [Ctrl + K].
Когда мы создаём файл для WEB удобно пользоваться пикселями. Почему? Да потому, что в WEB у нас поле вывода – это экран, а размеры областей экрана выражаются в пикселях. Даже если мы специально не готовим изображения под WEB, а тупо выкладываем их в социальных сетях, всё равно, удобно контролировать размер, а значит и качество изображений, через пиксели.

Рис. 5. Настройки линеек.

Рис. 5. Настройки линеек в Photoshop.

Итак, параметр Линейки меняем на «пиксели».

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

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

Рис. 6. Структура Монтажной области.

Рис. 6. Структура Монтажной области в Photoshop.

Создадим ещё одну Монтажную область и назовём её по такому же принципу, т.е. в названии укажем размер области.

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

Рис. 7. Инструмент Монтажная область.

Рис. 7. Инструмент Монтажная область в Photoshop.

Ещё один способ создания Монтажной области – это создание при помощи инструмента. Инструмент так и называется «Монтажная область» и прячется на самой верхней полке, под инструментом «Перемещение». Инструмент позволяет рисовать Монтажные области произвольных размеров. Нажимая на «+» можно быстро размножать Монтажные области.

Рис. 8. Размножение Монтажных областей.

Рис. 8. Размножение Монтажных областей в Photoshop.

В панеле «Свойства» можно редактировать некоторые параметры Монтажной области, например, такие как: Изменить шаблон; Цвет фона; а также Ширину и смещение по оси Х.

Я заготовил файл, в котором на реальном примере показан способ применения Монтажных областей на практике. Суть данного приёма в том, что, когда для Сайта необходимо создать дизайн баннеров разных размеров, мы не создаём кучу отдельных файлов с разными размерами, а создаём один файл с несколькими Монтажными областями.
Ещё раз. Для адаптивной вёрстки в WEB необходимо создание баннеров одного дизайна, но разных размеров. Также это может понадобиться и для рекламных модулей, которые размещаются в разных областях сайта или размещаются на разных сайтах, где области размещения могут варьироваться.
И либо мы работаем по старинке, создаём для каждого размера отдельный файл, а на второй монитор выводим эталон. Либо мы работаем новым способом, создавая необходимое количество монтажных областей и дизайним сразу всё. Так не только дизайн баннеров получается быстрее и качественнее, но и мы получаем существенное ускорение на этапе создания готовых файлов, т.е. файлов непосредственно для WEBа.

YouTube-канал XpertPRESS

Уроки Photoshop от профессионального полиграфиста – это практический курс для желающих освоить Photoshop и/или отточить навыки работы в нём. Мы расскажем и покажем Фотошоп от азов до самых сложных практических приёмов. Объясним базовые понятия растровой графики и полиграфического качества. Приёмы работы с объектами, с цветом, дизайнерские фишки, анимация, RAW и мн. др. Отработаем и закрепим горячие клавиши, клавиши быстрого доступа иные приёмы быстрой и качественной работы, т.е. профессиональные навыки. Добро пожаловать на Канал…

Перейти…

Технология работы с Монтажными областями в Photoshop 

Рассмотрим конкретный пример. У меня есть сайт с разными рекламными площадями, с разными размерами рекламных модулей. Под эти размеры я создал Монтажные области.
В некотором моменте поведение Монтажной области напоминает поведение Холста. Действительно, изображение, выходящее за пределы Холста, как и изображение, выходящее за пределы Монтажной области, перестаёт быть видимым. Однако, если вывести за Монтажную область всё изображение, то оно вновь становится видимым и может спокойно существовать за пределами Монтажной области. Причём эта зона огромна (в отличие от Illustrator) и сюда можно накидать кучу вспомогательного материала, чего затруднительно сделать в Иллюстраторе при больших файлах и почти невозможно сделать в Индизайн.
За это Фотошопу респект и уважуха!

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

Инструмент «Перемещение» с Монтажной областью работает также, как и в обычном файле, полностью поддерживаются все режимы, включая и «Автовыбор» слоя.

Рис. 9. Настройка экспорта.

Рис. 9. Настройка быстрого экспорта в Photoshop.

Но самое вкусное, что есть в технологии создания WEB-баннеров – это Быстрый экспорт. Параметры Быстрого экспорта настраиваются в (Меню: Редактирование→Настройки→Экспорт), либо через горячую клавишу [Ctrl + K].
В блоке «Формат быстрого экспорта» выбираем именно формат файла. Фотошоп не предлагает нам ничего лишнего, а только поддерживаемые WEB форматы. Напомню, что для WEB используется цветовая палитра RGB, и определённые форматы. Коротко рассмотрим их. JPG – не поддерживает прозрачность, но основное преимущество – это мощный компрессующий движок.
PNG – менее эффективен при сжатии, но поддерживает прозрачности.
GIF – предназначен для анимации, а SVG – это векторный формат, Фотошоп просто его поддерживает, но записывать в него векторы не может.
В другом блоке настроек можно указать место сохранения файлов экспорта. Это либо то же место, где сохранён рабочий файл, либо мануальное место, т.е. место по нашему выбору.

И так, для нашего примера подходит jpg или PNG. Оптимальнее JPG, но для примера я использую PNG.

Через контекстное Меню есть возможность для «Быстрого экспорта» использовать не все Монтажные области, а только выделенные. Для выделения используем инструмент «Перемещение». Если нет выделенных Монтажных областей, то «Быстрый экспорт» через Контекстное меню не работает. Но при этом будет работать через меню (Меню: Файл→Экспортировать→Быстрый экспорт в …). В этом случае экспорт распространяется на все Монтажные области.

В диалоговом окне выбираем место расположения файлов экспорта, согласно сделанным ранее настройкам. И вот он фокус! Мы сразу получаем нужное количество файлов (по количеству Монтажных областей) в нужном формате и, самое главное, с правильным названием. Обратите внимание, файлы названы по названиям Монтажных областей. И козырь в рукаве сейчас сыграл нам на пользу.

Видео версия урока в Photoshop 

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

Скачать рабочие файлы  

Скачать рабочие файлы со слоями в формате PSD можно по ссылке.

Cкачать архив

00172

Превью Архива