Как сохранить монтажную область в фотошопе отдельно

Обновлено: 05.07.2024

Как сделать несколько монтажных областей в фотошопе?

Создание документа монтажной области

В Photoshop выберите Файл > Создать.
В диалоговом окне Новый введите имя изображения. Например, Веб-сайт для iPhone.
В раскрывающемся меню Тип документа выберите Монтажная область.
Выберите один из более 35 наборов настроек Размер монтажной области.

Как сделать монтажную область?

Чтобы создать копию существующей монтажной области, выберите инструмент «Монтажная область», нажмите нужную монтажную область и затем кнопку «Новая монтажная область» на панели «Управление» или «Свойства». Для создания нескольких копий нажмите нужное количество раз, удерживая нажатой клавишу Alt.

Как в Фотошопе сохранить в формате SVG?

Если векторный объект нарисован в самом Фотошопе, то чтобы экспортировать SVG, выберите в панели слоёв векторный слой, вызовите контекстное меню и используйте команду File → Export As. В открывшемся окне экспорта можно выбрать SVG-формат.

Как сделать несколько листов в фотошопе?

Как добавить холст в фотошопе?

Как посмотреть размер монтажной области в Иллюстраторе?

Чтобы просмотреть размеры монтажной области, щелкните инструмент «Монтажная область», выберите «Документ» в меню палитры, и щелкните нужную монтажную область.

Как экспортировать монтажную область в Иллюстраторе?

Чтобы экспортировать каждую монтажную область как отдельный файл PNG, выберите «Использовать монтажные области» в диалоговом окне «Экспорт». Чтобы экспортировать только несколько монтажных областей, укажите нужный диапазон. Затем нажмите «Сохранить» (Windows) или «Экспорт» (Mac OS), укажите следующие параметры.

Как изменить размер холста в фотошопе горячими клавишами?

Также можно выбрать в панели меню «Изображение» пункт «Размер холста» или нажать комбинацию горячих клавиш CTRL>ALT>C. Откроется диалоговое окно настройки «Размер холста». Здесь также вводятся единицы измерения, ширина и высота.

Как увеличить изображение в слое в фотошопе?

Как увеличить слой в виде картинки на фоне (либо на холсте)?

Для того чтобы открыть ее, нужно выбрать инструмент Rectangular Marquee Tool на панели слева, кликнуть на картинке правой кнопкой мыши, после – нажать на Free Transform. Для того чтобы изменить конкретно размер слоя-картинки, надо выбрать пункт Scale.

Как изменить размер проекта в фотошопе?

Изменение размеров отпечатка и разрешения

Как сохранить в формате SVG?

Выберите команду «Файл» > «Сохранить как» или «Файл» > «Сохранить копию». Введите имя файла и выберите папку для сохранения. Выберите в качестве формата файла формат SVG (*.

Можно ли открыть SVG в фотошопе?

Формат SVG изначально поддерживается в Adobe Photoshop, Photoshop Elements и InDesign. Но вы можете открыть файлы SVG в этих программах при помощи плагина SVG Kit для Adobe CS, который был разработан компанией Scand.

С помощью Photoshop можно экспортировать монтажные области, слои, группы слоев или документы Photoshop как графические ресурсы PNG, JPEG, GIF или SVG.

Экспорт монтажных областей, слоев или документов с помощью функции «Быстрый экспорт»

Экспорт документа Photoshop или всех его монтажных областей

Выберите Файл > Экспорт > Быстрый экспорт в [формат изображения]. Если появится запрос, выберите целевую папку. Photoshop экспортирует текущий документ в качестве графического ресурса в формате, заданном в настройках быстрого экспорта. Если документ содержит монтажные области, то все они экспортируются по отдельности при выборе этого параметра.

Экспорт выбранных слоев, групп слоев или монтажных областей

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

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

Изменение настроек быстрого экспорта

По умолчанию в процессе быстрого экспорта создаются ресурсы в формате PNG с прозрачностью, и каждый раз появляется запрос на выбор места экспорта. Чтобы изменить настройки, выберите Установки > Экспорт или Файл > Экспорт > Настройки экспорта , а затем укажите следующее:

Выберите предпочитаемый формат быстрого экспорта : PNG, JPG, PNG-8, GIF или SVG.
Параметры, связанные с форматом. Например, для PNG можно указать, экспортировать ресурсы с включенным параметром Прозрачность (32 бита) или выполнять экспорт изображений меньшего размера (8 бит).
Местоположение для изображений, экспортируемых с помощью быстрого экспорта . Для этого выберите один из следующих вариантов.

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

Возможность включать метаданные (информацию об авторских правах и контактные данные) в экспортируемые ресурсы.
Возможность преобразовать ресурсы в цветовое пространство sRGB.

Диалоговое окно «Экспортировать как»: монтажные области, слои или документы

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

Выберите Файл > Экспорт > Экспортировать как , чтобы экспортировать текущий документ Photoshop. Если документ содержит монтажные области, то все они экспортируются с помощью этого диалогового окна.
Чтобы вызвать это диалоговое окно для слоев, групп слоев или монтажных областей, выберите нужные объекты на панели Слои . Щелкните выделенные объекты правой кнопкой мыши и выберите Экспортировать как в контекстном меню.

Параметры в диалоговом окне «Экспортировать как»

Можно задать следующие параметры в диалоговом окне Экспортировать как :

Выберите PNG , JPG , GIF или SVG .

Для PNG укажите, экспортировать ресурсы с включенным параметром Прозрачность (32 бита) или выполнять экспорт изображений меньшего размера (8 бит). Для JPEG укажите требуемое качество изображения (0–100 %). Изображения GIF по умолчанию прозрачны.

При экспорте ресурсов PNG учитывайте следующее.

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

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

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

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

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

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

Бикубическая, четче: удобный метод для уменьшения размера изображения на основе Бикубическая интерполяция при увеличении резкости. Этот метод позволяет сохранить детали изображения, подвергнутого повторной выборке. Если интерполяция «Бикубическая, четче» делает слишком резкими некоторые области изображения, попробуйте воспользоваться бикубической интерполяцией.

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

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

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

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

Этот параметр полезен в некоторых ситуациях, например:

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

Если изображение превышает размер холста, оно обрезается до заданных значений ширины и высоты.

Щелкните Сбросить , чтобы вернуть значения, заданные в параметре Размер изображения .

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

Экспорт ресурсов разного размера

Диалоговое окно «Экспортировать как» позволяет экспортировать выделенные слои, монтажные области или документы в качестве ресурсов разного размера. Выполните следующие действия.

На панели в левой части окна выберите относительный размер ресурса, например 1,25x .
Выберите суффикс для имени ресурса, экспортируемого с относительным размером. Например, @ 1,25x . Суффиксы упрощают управление экспортируемыми ресурсами.
При необходимости щелкните значок +, чтобы задать другие размеры и суффиксы для экспортируемых ресурсов.

Выбранные параметры масштабирования применяются ко всем выделенных слоев или монтажным областям.

Один из новых инструментов, появившихся в Фотошоп СС 2015, более или менее схож с аналогичным в Adobe Illustrator и называется монтажная область. Данный инструмент позволяет нам создавать несколько страниц в пределах одного документа. Но Монтажная область (artboard) программы Фотошоп является более гибким инструментом, поскольку у нас есть возможность свободно изменять ее размер и расположение.

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

Итак, что мы будем создавать:

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

Шаг 1

Запустите ваш Фотошоп CC 2015, нажмите комбинацию клавиш CTRL+N, чтобы создать новый документ. Выберите тип документа (Document Type): Монтажная область (Artboard). Ниже области выбора типа документа вы можете выбрать один из предустановленных размеров монтажной области или установить его вручную, введя цифры в соответствующие окошки Ширина (width) и Высота (height).

Для данного урока были выставлены следующие размеры: Ширина (width) 728 пикселей и Высота (height) 90 пикселей. Когда выставите все необходимые параметры, нажмите ОК.

Шаг 2

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

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

Шаг 3

Шаг 4

Когда вы закончите рисовать прямоугольник, автоматически появится палитра Свойства (Properties). Это так же является одним из нововведений версии Фотошоп СС 2015.

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

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

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

Некоторые из читателей скажут: «О, Боже, каждый настраивает, как хочет, неужели еще статью писать об этом?»

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

Мобильное удобство с Adobe Comp CC

Adobe Comp CC отличный вариант для быстрого начала работы над новым проектом. Это может быть дизайн, графика, UX/UI решения и прочее. Да, приложение мобильное, но даже в нем можно настроить сетку, добавить разное содержание, использовать форматирование шрифтов Typekit, графику, фотографии. Главное же в том, что экспортировать готовый проект можно сразу в Photoshop CC и продолжать работу в нем. Иными словами, одно дело сидеть перед монитором, другое – на диване с планшетом (не графическим) в руках и стилусом.

Умные установки

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

Но можно дополнительно и улучшить все и сразу. Переходим в меню Редактирование - > Настройки и выбираем категорию «Единицы измерения и линейки». Выбрать параметры можно разные, но целесообразно, ввиду уже принятых стандартов, назначить измерение Линеек в пикселях. Иногда этот параметр задается уже предустановленным, иногда нет. Открыть и проверить будет не лишним. Таким образом, Линейки всегда будут измеряться в пикселях независимо от выбранного профиля (рабочего пространства).

Теперь открываем раздел Настройки - > Производительность. Находим «История и кеширование» и видим, что существует несколько наборов по оптимизации работы Photoshop CC. Если выбрать Веб-дизайн, то уровень кеша будет 2, а размер фрагмента 128 КБ, если работу с фотографиями, то параметры изменятся на 4 и 1024 КБ соответственно. Данная оптимизация влияет на уменьшение размера файлов при большом количестве слоев. То есть, вы можете выбрать предустановки. Можете их даже отрегулировать самостоятельно. И зависит это от вашей конфигурации РС.

Запустив Photoshop CC и не создавая/открывая никакого документа, буквально в пустом рабочем пространстве, нажмите T, выбрав инструмент Текст. На панели под горизонтальным меню можно выбрать шрифт, размер и прочее. Теперь это – установка по умолчанию для всех новых документов. Даже если перезапустить приложение, установки не изменятся. Это удобно в целом.

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

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

Нажмите Alt + проведите курсором по холсту. Выбранный холст дублируется.
На панели Слои выделите слой, нажмите Alt и мышкой перенесите выбранный слой вверх или вниз. Слой дублируется.
Выберите монтажную область на панели слоев и нажмите Ctrl+J – область дублируется со всем содержимым.
Alt + клик по монтажной области на панели Слоев – выделяет её. Особенно удобно, если копий много или находятся они друг за другом и хочется их развести в стороны.
Экспортировать монтажные области быстро можно через Файл – Экспорт – Быстрый экспорт в PNG.
Если выбрать инструмент Монтажная область, зажать Alt и кликнуть по плюсику рядом с областью, то создастся копия её. Если просто по плюсику, то добавиться новая, пустая.

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

Сетки, столбики и строчки

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

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

Заготовка фигур на будущее

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

Photoshop СС позволяет сохранить их, и затем использовать много и много раз. Например, нарисуем фигуру, выберем Перо и добавим пару опорных точек. Затем с помощью инструмента Выделение узла придадим форме новый вид.

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

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

Полезные клавиши

Любая возможность экономии времени при работе – всегда отлично и всегда всеми приветствуется. Поэтому напомним:

С помощью инструмента Перемещение выберите опцию Автовыбор Слой или Группа на панели. Это позволяет, кликнув по содержимому слоя, выбрать и сам слой.
Если Автовыбор выключен, то CTRL+ клик по содержанию делает все то же самое – выделяет слой и содержание.
Инструмент Перемещение и включенная опция Автовыбор. Теперь нажмите Shift и кликните несколько объектов. Все они выделятся и слои тоже.

Упрощенный вектор

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

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

Для пропорций во время рисования нажмите Shift. Таким образом, кривые будут создавать более плавные.
В настройках Photoshop CC откройте Инструменты и установите галочку на параметре «Привязать векторные инструменты и преобразования к пиксельной сетке». Эта гарант того, что края вашей фигуры будут четче.

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

Копирование настроек

Переходим на панель Слоев, кликаем ПКМ и выбираем Копировать атрибуты фигуры. При этом Фигура должна быть представлена как отдельный смарт-объект на слое. Также можно ПКМ кликнуть по самой фигуре и отдельно скопировать обводку или заливку.

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

Ссылки на объекты

Каким бы странным, возможно, это и не казалось бы, но связанные смарт-объекты, помещенные в рабочий файл PSD, позволяют сильно уменьшить размер рабочего файла.

Например, создаем проект для устройств с дисплеем Retina (HiDPI) @1x. Как мы помним, объект должны быть высокого качества и большого размера. В идеале, затем ваше оригинальное изображение должно быть в @2x или @3x раз увеличено. Переходим в меню Файл - > Поместить связанные. Теперь если вам необходимо отредактировать объект, то вы кликаете на Редактировать содержимое и изменяете исходный файл объекта.

Когда вы настроили фигуру/объект под нужный размер, цвет и готовы увеличить их в @2x или @3x раз, то достаточно просто выбрать Файл ->Экспортировать как… и в левом меню выбрать нужный параметр. Поверьте, Photoshop CC умеет делать такое и даже префикс в названии даст соответствующий.

Стили слоя

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

Но стили слоя или даже группы слоев можно сохранить. Примените к слою стили и эффекты, перейдите Окно -> Стили -> и ПКМ по иконке меню справа. Выбирайте новый стиль и включаете то, что нужно. Это либо только эффекты, либо наложения, либо и то и другое. И сохраняете. Стиль появился в общей библиотеке и теперь его можно применить к любому иному объекту или даже слою, к тексту.

Adobe Preview CC

Завершая работу и наш рассказ, стоит обратить внимание еще на одно мобильное приложение Adobe Preview CC. Удобно оно тем, что позволяет просматривать проекты Phototshop CC на разных iOS устройствах. При этом если в файл PSD вносятся изменения, то на экране iPhone эти изменения сразу же и отображаются. Если у вас также есть и iPad, то и его можно сразу подключить и увидеть, как сайт будет выглядеть.

Завершение

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

Ответ самый простой: Photoshop обладает огромным числом способов экономии нашего времени при проектировании, рисовании. И вполне возможно, какие-то моменты данного материала вам обязательно пригодятся. Профессионалы смогут что-то вспомнить, новички – подчерпнуть новое. И разумеется, это еще не все. Photoshop может и в CSS описывать слои и объекты, и экспортировать различными способами, и даже слои фильтровать. Но это более всего наглядно и пропустить, в целом, в самом приложении сложно.

Читайте также: