Важно! Для работы функции «Пространство дизайна (предварительная версия)» требуется ОС Mac OS X 10.10 или Windows 8.1 (64-разрядная) или более поздней версии.
Интерфейс «Пространство дизайна (предварительная версия)» дополняет рабочую среду Photoshop для веб-дизайнеров и разработчиков приложений. В техническом смысле, интерфейс «Пространство дизайна (предварительная версия)» — это слой HMTL5/CSS/JS, надстроенный поверх Photoshop. Такое отделение этого нового сервиса от стандартной среды Photoshop обеспечивает новый интерфейс, более интеллектуальное взаимодействие и ускоренное обеспечение самых востребованных функций.
Интерфейс «Пространство дизайна» пока относится к категории «Просмотры технологии». Помогите нам сделать функцию «Пространство дизайна (предварительная версия)» такой, какой вы хотите ее видеть.
Список известных проблем в данной версии см. в разделе Самые распространенные известные проблемы.
Примечание.
Исходный код рабочей среды «Пространство дизайна (предварительная версия)» находится по адресу github.
В Photoshop выполните одно из перечисленных ниже действий.
- Выберите Окно > Пространство дизайна (предварительная версия).
- В раскрывающемся меню выбора рабочей среды в правом верхнем углу экрана выберите Пространство дизайна (предварительная версия).
Примечание.
Рабочая среда «Пространство дизайна (предварительная версия)» включена по умолчанию. Если вдруг параметры для перехода в рабочую среду «Пространство дизайна» будут недоступны (что маловероятно), установите флажок Включить пространство дизайна (предварительная версия) в окне Установки > Просмотры технологии.
Выбор рабочей среды «Пространство дизайна (предварительная версия)»
После перехода в интерфейс «Пространство дизайна (предварительная версия)» выберите Справка > Введение в пространство дизайна, чтобы получить краткий обзор его функций и возможностей. Введение отображается автоматически при первом переходе в среду Пространство дизайна (предварительная версия).
Пространство дизайна (предварительная версия) Пользовательский интерфейс
A. Панель инструментов B. Свойства C. Слои и библиотеки D. Сворачивание и разворачивание столбцов
Удерживая клавишу Cmd/Ctrl, щелкайте значки с пометкой D, чтобы быстро переключаться между столбцами «Свойства» и «Слои и библиотеки».
Более подробная информация о доступных функциях
- При необходимости можно развернуть рабочее пространство и просматривать свойства, слои и библиотеки в одном столбце. Выберите Окно > Один столбец.
Режим одного столбца
- Если вы постоянно пользуетесь сочетаниями клавиш, то можете скрыть панель инструментов. Выберите Окно > Закрепить панель инструментов.
Создать документ с помощью функции «Пространство дизайна (предварительная версия)» можно несколькими способами.
- Выберите Файл > Создать или используйте сочетание клавиш Cmd/Ctrl+N. Пространство дизайна (предварительная версия) быстро создает документ с одной монтажной областью на основе шаблона iPhone 6.
- Выберите меню Файл > Создать…, чтобы открыть диалоговое окно «Новый». Укажите необходимые сведения и нажмите кнопку «ОК».
Дополнительные сведения см. в разделах Создание изображения и Создание документа монтажной области.
- Выберите Файл > Создать из шаблона и выберите один из следующих шаблонов:
- В интерфейсе среды «Пространство дизайна (предварительная версия)» выполните одно из следующих действий:
- Выберите Слой > Создать новую монтажную панель. Рабочая среда «Пространство дизайна (предварительная версия)» добавляет в документ монтажную область с размерами по умолчанию.
- Чтобы добавить монтажную область для конкретного устройства, выберите Слои > Новая монтажная область, а затем выберите необходимый набор. Выберите Слой > Новая монтажная область > iPad Pro.
- Добавьте элементы дизайна в монтажную область.
Добавлять в документ монтажные области также можно нажатием значков + рядом с монтажными областями, которые уже есть в документе. Значки + появляются при выборе существующей монтажной области там, где на холст могут поместиться дополнительные монтажные области.
Следующие инструменты доступны в среде «Пространстве дизайна (предварительная версия)»:
Инструменты
Примечание.
Первая буква определяет клавишу для вызова инструмента. Например, для вызова инструмента «Прямоугольник» служит клавиша R.
Кроме обычных задач выделения, новый инструмент «Выделение» позволяет быстро перемещаться по иерархиям слоев и монтажных областей.
- Чтобы развернуть вложенную группу или иерархию слоев, дважды щелкните ее, когда активен инструмент «Выделение».
- Нажмите клавишу Esc, чтобы перейти вверх на один уровень в иерархии.
Построение фигур. Эти инструменты работают во многом так же, как в обычной середе Photoshop.
Работает во многом так же, как инструмент «Перо» в обычной середе Photoshop.
При изменении ширины, высоты или других числовых свойств объекта можно вводить математические операции для получения точных значений. Например, 500/3 или 20*4.
Усовершенствованный инструмент «Эталон» Позволяет копировать цвета, эффекты и другие атрибуты. Выполните следующие действия.
- Выделите объект, в который нужно скопировать атрибуты. Например, выделите прямоугольник.
- Выберите инструмент «Эталон».
- Выполните следующее действие с объектом, из которого необходимо скопировать атрибут:
Щелчок: копирование цвета
Shift + щелчок: копирование эффектов
«Пробел»: вызов элементов управления доступными атрибутами с помощью образцов. Когда это применимо, в числе этих атрибутов есть гарнитура шрифта.
Щелкните атрибут, который нужно скопировать.
В рабочей среде «Пространство дизайна (предварительная версия)» предусмотрена система поиска, которая, помимо прочего, позволяет искать следующие объекты:
- Команды меню
- Открытые документы
- Недавние документы
- Слои, пиксельные слои, корректирующие слои, группы слоев, векторные слои, группы и текстовые слои
- Монтажные области
- Библиотеки — все или только конкретные
- Смарт-объекты
- Стили
- Графика
- Наборы
При поиске можно фильтровать результаты поиска так, чтобы они включали только определенный тип объектов.
Выполните следующие действия.
- Выберите Редактирование > Поиск, чтобы вызвать функцию поиска. Также можно нажать клавиши Ctrl/Cmd+F или щелкнуть значок поиск слева в строке заголовка.
Комплексные функции поиска
Поиск с использованием фильтров; в этом примере мы выполняем поиск в библиотеках Creative Cloud Library
Пространство дизайна (предварительная версия) значительно упрощает создание масок для изображений в проекте.
- Выберите слой на панели Слои.
- Щелкните значок Режим маски (
) в верхней строке рабочей среды «Пространство дизайна». Можно также нажать клавишуМ, чтобы использовать клавишу быстрого доступа. Когда режим маски включен, инструмент Выделение выглядит пустым (
), а значок «Режим маски» становится голубым.
- С помощью таких инструментов, как Ручка и Прямоугольник нарисуйте маску для изображения.
- Завершив создание маски, выйдите из режима маски одним из следующих способов.
- Щелкните значок Режим маски (
).
- Нажмите клавишу «Esc».
- Нажмите клавишу быстрого доступа для режима маски — M.
Создавайте направляющие в рабочей среде «Пространство дизайна (предварительная версия)», чтобы обеспечить точность работы с элементами дизайна.
- Выберите Вид > Показать направляющие.
- Щелкните инструмент Выделение и наведите указатель мыши на край рабочей области. Обратите внимание: синяя подсветка указывает на то, что доступна возможность создания направляющих.
- Щелкните и протяните направляющую.
Если выделена монтажная область или слой в такой области, создается направляющая для данной монтажной области. Такая направляющая отображается, только когда выбрана эта монтажная область или ее вложенные слои. Если не выделена монтажная область или слой в такой области, создается направляющая для документа.
- Выделите три или более слоя.
- Выберите меню Монтаж > Распределить и выберите нужную команду в подменю. Также можно нажать кнопку «Распределение» на панели «Распределение и выравнивание».
- По горизонтали: слои размещаются с равными промежутками, начиная отсчет от центрального в горизонтальном направлении пикселя каждого слоя.
- По вертикали: слои размещаются с равными промежутками, начиная отсчет от центрального в вертикальном направлении пикселя каждого слоя.
- Выделите два или больше слоев.
- Выберите меню Монтаж > Выровнять объекты и выберите нужную команду в подменю. Также можно нажать кнопку «Выравнивание» на панели «Распределение и выравнивание».
- Слева: все выделенные слои выравниваются по крайнему левому пикселю крайнего левого слоя.
- Центр: все выделенные слои выравниваются по центральному пикселю слоев в горизонтальной плоскости
- Справа: все выделенные слои выравниваются по крайнему правому пикселю крайнего правого слоя.
- Сверху: все слои выделенные выравниваются по их крайнему верхнему пикселю.
- Середина: все выделенные слои выравниваются по центральному пикселю слоев в вертикальной плоскости.
- Снизу: все выделенные слои выравниваются по их крайнему нижнему пикселю.
Трансформирование можно применять к одному или нескольким слоям. Чтобы выполнить трансформирование, выделите нужный объект, затем выберите команду трансформирования. При изменении ширины, высоты или других числовых свойств объекта можно вводить математические операции для получения точных значений. Например, 500/3 или 20*4.
- Выберите меню Слой > Трансформировать и выберите нужную команду в подменю.
- Поворот на 180: объект поворачивается на 180 градусов
- Повернуть вправо: объект поворачивается по часовой стрелке на 90 градусов
- Повернуть влево: объект поворачивается против часовой стрелки на 90 градусов
- Также можно повернуть объект непосредственно на холсте. Выделите объект, наведите указатель мыши на уголок рамки и виджет изменится для выполнения поворота.
Поворот объекта на холсте
- Выберите команду «Отразить» в меню Монтаж.
- Отразить по горизонтали: объект отражается по горизонтали
- Отразить по вертикали: объект отражается по вертикали
- Поменять местами: два выбранных слоя или группы слоев меняются местами
Можно корректировать объект путем изменения доступных параметров на панели Оформление.
Степень общей непрозрачности слоя определяет, насколько сильно он скрывает или отображает содержимое нижележащего слоя. Слой со степенью непрозрачности 1 % является практически прозрачным. Совершенно непрозрачный слой имеет степень непрозрачности 100 %.
- На панели Слои выделите один или несколько слоев.
- Укажите значение непрозрачности на панели Оформление.
Режим наложения определяет результат наложения пикселей слоя на нижележащие пиксели изображения. Режимы наложения позволяют создавать большое количество различных специальных эффектов.
- На панели Слои выделите один или несколько слоев.
- Выберите один из следующих режимов наложения на панели Оформление:
- Обычный
- Растворение
- Замена темным
- Замена светлым
- Осветление
- Перекрытие
- Умножение
- Затемнение основы
- Линейный затемнитель
- Темнее
Если вы используете другой режим наложения в стандартной среде Photoshop, он также отражается в среде «Пространство дизайна (предварительная версия)».
Дополнительные сведения об эффектах каждого режима наложения см. в разделе Режимы наложения.
- На панели Слои выберите текстовый слой.
- Задайте следующие настройки на панели Оформление:
- Шрифт: выберите гарнитуру из раскрывающегося списка.
- Толщина: задайте толщину линий для выбранного шрифта.
- Цвет текста: выберите цвет текста одним из следующих способов:
- Размер: задайте размер шрифта для выделенного текста.
- Буква: задайте межбуквенный интервал.
- Строка: задайте интерлиньяж.
- Выровнять: выровняйте текст по центру, по левому или правому краю, либо примените выключку.
Инструменты для работы с векторами позволяют использовать параметры «Добавление», «Вычитание», «Пересечение» или «Исключение» для изменения текущих фигур на слое или для объединения одного или нескольких выделенных слоев-фигур.
- На панели Слои выберите слои, которые необходимо объединить.
- Выберите Слои > Объединить и выберите один из следующих вариантов.
- Объединить фигуры: добавляется новая область в существующие фигуры или контур
- Вычесть фигуру: перекрывающаяся область удаляется из существующих фигур или контура.
- Пересечение фигур: область ограничивается до пересечения новой области с существующими фигурами или контурами.
- Разность фигур: исключается наложение областей в объединении новой и существующей областей.
- На панели Слои выделите один или несколько слоев.
- Откройте инструмент выбора цвета заливки на панели Оформление, затем выберите цвет одним из следующих способов.
- Укажите значение альфа-канала, чтобы настроить непрозрачность цвета заливки.
- На панели Слои выделите один или несколько слоев.
- Откройте инструмент выбора цвета обводки на панели Оформление, затем выберите цвет одним из следующих способов.
- Укажите значение альфа-канала, чтобы настроить непрозрачность цвета обводки.
- Укажите толщину обводки.
- В раскрывающемся меню выберите выравнивание обводки: Внутри, По центру или Снаружи.
- На панели Слои выделите один или несколько слоев.
- На панели Эффекты щелкните значок «+», чтобы добавить тень снаружи или внутри.
Добавляет эффект обводки на выделенный слой.
Заполняет содержимое слоя цветом.
Добавляет тень, отбрасываемую содержимым слоя.
Придает слою эффект «притопленного кадра», добавляя к объектам тени, отбрасываемые только внутри границ слоя.
- Задайте необходимые настройки для этого эффекта.
- Для наложения цвета можно задать режим наложения. Дополнительные сведения об эффектах каждого режима наложения см. в разделе Режимы наложения.
- Для внутренних и внешних теней можно задать следующие параметры:
- Режим наложения
- Координаты Х и У тени
- Требуемая степень размытия тени
- Протяженность тени. Настройка «Размах» расширяет границы тени перед размытием.
Теперь библиотеки Creative Cloud Library можно использовать для организации, просмотра и демонстрации ресурсов прямо из интерфейса «Пространство дизайна (предварительная версия). Работа с библиотеками в интерфейсе «Пространство дизайна (предварительная версия)» осуществляется во многом так же, как в обычной середе Photoshop. Дополнительные сведения см. в этих ресурсах:
- Библиотеки Creative Cloud в Photoshop
Можно экспортировать монтажные области, слои, группы слоев или документы как ресурсы PNG, JPEG, PDF или SVG прямо в интерфейсе «Пространство дизайна (предварительная версия)».
- На панели Экспорт щелкните «+», чтобы задать настройки экспорта для выбранных слоев, из которых требуется создать ресурсы.
- Задайте масштаб, суффикс и формат для ресурса, который требуется экспортировать.
- При необходимости щелкните «+», чтобы указать настройки для других ресурсов.
- Щелкните значок
, чтобы сохранить сформированные ресурсы на компьютере.
Щелкните значок , чтобы быстро добавить все доступные типы ресурсов, поддерживаемые устройствами iOS. Аналогично, щелкните значок
, чтобы быстро добавить все доступные типы ресурсов, поддерживаемые дисплеями с высоким разрешением (HiDPI).
Примечание.
Для удобства при экспорте нескольких объектов в качестве ресурсов интерфейс «Пространство дизайна» сохраняет порядок холстов объектов, а не порядок Z на панели Слои. Также можно задать несколько параметров экспорта для разных наборов слоев, а затем одновременно экспортировать их, выбрав Файл > Экспортировать или щелкнув значок Экспортировать на верхней строке заголовка.
- При вводе отрицательного значения преобразования для смарт-объекта, связанного с библиотекой, возникает ошибка. При вводе отрицательного числа в поле «Ширина» или «Высота» в интерфейсе «Пространство дизайна (предварительная версия)» возникает состояние внутренней ошибки, при котором невозможно выбрать слой, а видимые инструменты на холсте и элементы управления не реагируют на действия пользователя.
Обходное решение: выберите Окно > Вернуться в стандартный Photoshop и Шаг назад в истории, пока слой не станет видимым на холсте.
- Возникает ошибка при втором использовании инструмента «Эталон» для того же смарт-объекта, связанного с библиотекой, после отмены первой попытки.
Обходное решение: отмените операцию два раза перед второй попыткой использования инструмента «Эталон».
- Возникает ошибка при открытии файла Illustrator (Импорт PDF).
Обходное решение: выберите Окно > Вернуться в стандартный Photoshop. Теперь вернитесь в интерфейс «Пространство дизайна (предварительная версия)».
- В некоторых случаях для смарт-объекта, связанного с библиотекой, функция Поменять местами включена, только когда выбран один слой.
Обходное решение: щелкните значок «Поменять местами».
- Если создать в стандартной среде Photoshop фигуру и выделить ее перед переходом в среду «Пространство дизайна (предварительная версия)», изменяются настройки заливки и обводки этой фигуры.
Обходное решение: отмените выделение фигуры или отмените операцию перед переходом в среду «Пространство дизайна».
- Попытка выполнить экспорт в режиме редактирования текста завершается ошибкой, также отключается значок «Экспорт» на панели.
Обходное решение: используйте команду меню или значок «Экспорт» в заголовке документа. Вернитесь в стандартную среду Photoshop, а затем снова в интерфейс «Пространство дизайна (предварительная версия)», чтобы повторно активировать значок панели «Экспорт».
- Если создается фигура с помощью инструмента «Перо», когда не выбран ни один слой, эта фигура помещается за пределами монтажной области на панели Слои, но внутри монтажной области на холсте.
Обходное решение: создав фигуру, щелкните инструмент Выделение и сдвиньте ее с помощью клавиш со стрелками.
- В случае отмены создания маски слоя остается отображаемый участок на маске, примененной к слою с помощью команды «Маскировать все». В результате этого слой отображается так, как будто к нему не применена маска. Однако значок на панели Слои все еще ошибочно показывает, что слой содержит маску.
Обходное решение: выполните команду «Отменить» два раза.
- Контуры создаются без удержания клавиш-модификаторов после первого контура. При удалении первого нарисованного контура происходит вычитание.
Обходное решение: нажмите и удерживайте клавишу SHIFT, прежде чем начать рисовать.
- Проблемы с выделением слоя. Если нет выбранных слоев, они не выделяются при наведении указателя мыши. Клавиши-модификаторы Cmd/Ctrl тоже не работают. Если слой выбран, при нажатии клавиши-модификатора Cmd/Ctrl отображаются только быстрые направляющие, а выделение среды голубым цветом в среде «Пространство дизайна (предварительная версия)» не отображается.
- (Только для Windows) В настоящее время невозможно выполнить панорамирование холста путем прокрутки с помощью сенсорной панели в ОС Windows.
- Координаты X и Y отображаются неправильно после перемещения монтажной области на холсте.
- Перемещение слоя за пределы монтажной области и обратно приводит к нарушению координат X и Y для слоя.
- Удаление первой маски слоя, имеющего несколько масок, приводит к инверсии/вычитанию маски.
- Числа не локализуются, как следует. Запятая в числах отображается как точка.
- Экспорт ресурсы из состояния модального инструмента приводит к ошибке.
- Можно быстро изменить цвет фона для рабочей области. Щелкните правой кнопкой мыши за пределами монтажных областей и другого содержимого в рабочей области, затем выберите цвет.
Изменение цвета фона для рабочей области
- Используйте следующие комбинации клавиш для переключения между стандартными интерфейсом Photoshop и средой «Пространство дизайна (предварительная версия)»:
- Cmd+Ctrl+` (Mac)
- Alt+Ctrl+` (Windows)
- Щелкните имя слоя на панели Слои, чтобы переименовать его.
- Дважды щелкните холст, чтобы развернуть иерархию слоев. Нажмите клавишу Esc, чтобы вернуться к предыдущему выделению и отменить выбор слоев на верхнем уровне.
- Дважды щелкните один слой на холсте (текстовый или векторный), чтобы перейти в режим редактирования. Нажмите клавишу Esc, чтобы выйти из режима редактирования.
- Активные слои или группы выделены голубым цветом.
- Щелкните значок + рядом с выбранной монтажной областью в документе, чтобы добавить новую монтажную область.
- На векторном и пиксельном слоях отображаются ручки трансформирования для поворота и изменения размера; на текстовых слоях ручки не отображаются.