Основы работы​ ​с​ ​макетом дизайна​ ​в​ ​формате PSD

Рабочая среда «Начало работы»

Рабочая среда Photoshop «Начало работы» позволяет быстро переходить к последним документам, библиотекам и наборам. Кроме того, в этой рабочей среде может отображаться содержимое, соответствующее вашим требованиям (зависит от состояния подписки). Еще одним преимуществом среды «Начало работы» является поддержка поиска необходимого ресурса Adobe Stock непосредственно во время работы над проектом.

Рабочая среда «Начало работы» отображается при запуске Photoshop или отсутствии открытых документов.

Примечание. При необходимости количество отображаемых последних документов можно изменить. Выберите «Установки» - «Обработка файлов» и укажите требуемое значение (0–100) в поле Длина списка недавних файлов.

Для выхода из рабочей среды «Начало работы» нужно просто нажать клавишу Esc.

Отключение рабочей среды «Начало работы»

1. Выберите «Установки» - «Основные».
2. Снимите флажок Показывать рабочую среду «Начало работы», если нет открытых документов.

Обзор рабочей области Photoshop

A: Панель «Инструменты»

B: Панель «История»

C: Панель «Цвет»

D: Панель «Библиотеки Creative Cloud»

E: Панель «Слои»

Описание рабочей среды

• Находящаяся в верхней части окна панель приложения содержит переключатель рабочих пространств/сред, меню (только Windows) и другие элементы управления приложением. При работе в некоторых программах Adobe на платформе Mac пользователь может отобразить или скрыть эту панель, используя меню «Окно».
• Панель «Инструменты» содержит инструменты для создания и редактирования изображений, графических объектов, элементов страниц и т. д. Связанные инструменты располагаются в группах.
• На панели «Управление» в строке Параметры выводятся настройки выбранного в данный момент инструмента.
• Окно документа отображает находящийся в работе файл. В окна документа можно поместить закладки, а в некоторых случаях их можно группировать и закреплять.
• Палитры упрощают отслеживание и изменение обрабатываемого объекта. Палитры можно группировать, собирать в подборки или закреплять.
• Фрейм приложения группирует все элементы рабочей среды в единое интегрированное окно, которое позволяет работать с приложением, как с единым целым. При перемещении или изменении размера фрейма приложения или его элементов, все элементы внутри него взаимодействуют друг с другом и не перекрываются. Палитры не исчезают при переключении приложений или при случайном щелчке за пределами приложения. При работе с несколькими приложениями можно расположить их рядом на экране или на нескольких мониторах.

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

• Рабочая среда Photoshop проста в использовании и содержит ряд функций, которые обеспечивают удобство использования.
• Различные уровни яркости: щелкните «Редактирование» - «Установки» (Windows) или Photoshop - «Установки» (Mac OS) и выберите образец «Цветовая тема» в разделе «Интерфейс».
• Чтобы быстро уменьшить яркость, нажмите Shift + 1; чтобы увеличить яркость, нажмите Shift + 2. В Mac OS также необходимо нажать клавишу FN.
• Представления в изображении: получайте актуальные сведения по мере использования избранных инструментов. Представления в изображении показывают размеры выделенного фрагмента, углы трансформирования и т. д. Чтобы изменить размещение представлений, выберите параметр в разделе «Показывать значения трансформирования» в установках интерфейса.
• Максимально доступное пространство экрана: нажмите кнопку в нижней части панели инструментов, чтобы переключиться между стандартным и полноэкранным режимами отображения.

Скрытие или отображение всех панелей

• Чтобы скрыть или отобразить все палитры и панели, включая панель «Инструменты» и панель «Управление», нажмите клавишу Tab.
• Чтобы скрыть или отобразить все палитры и панели, кроме панелей «Инструменты» и «Управление», нажмите клавиши Shift+Tab.

Можно временно отобразить скрытые панели, если в установках интерфейса выбран параметр «Автоматически показывать скрытые панели». Переместите курсор к краю окна приложения (Windows) или к краю монитора (Mac OS) и наведите его на появившуюся полосу.

Параметры отображения палитр/панелей

• Нажмите значок меню палитры/панели в ее правом верхнем углу.

Меню палитры/панели можно открыть, даже если она свернута.

В Photoshop можно изменить размер шрифта для текста панелей и всплывающих подсказок. В настройках интерфейса выберите размер в меню «Размер шрифта меню».

Перенастройка панели «Инструменты»

Инструменты панели «Инструменты» могут располагаться в один или два столбца.

Щелкните двойную стрелку, расположенную в верхней части панели «Инструменты».

Управление окнами и палитрами/панелями

Пользовательское рабочее пространство/среду можно создать, перемещая и изменяя окна документов и палитр/панелей. Можно сохранить несколько рабочих сред и переключаться между ними.

Упорядочение, стыковка и свободное перемещение окон документа

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

• Для изменения порядка окон документов перетащите закладку окна в новое место в группе.
• Для открепления (свободного перемещения или отстыковки) окна документа из группы окон перетащите закладку окна из группы.

Примечание. Можно также выбрать меню «Окно» - «Упорядочить» - «Свободно перемещать содержимое окна» для перемещения одного окна документа либо «Окно» - «Упорядочить» - «Свободно перемещать всё содержимое окон» для перемещения всех окон документа сразу.

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

Прикрепление и открепление палитр/панелей

• Чтобы прикрепить палитру/панель, перетащите её за вкладку в док и поместите сверху или снизу от других палитр или панелей, либо между ними.
• Чтобы прикрепить группу палитр/панелей, перетащите её в док за строку заголовка (пустую одноцветную строку над вкладками).
• Чтобы удалить палитру/панель или группу палитр/панелей из дока, перетащите ее из дока, удерживая за вкладку или строку заголовка. Можно перетащить палитру/панель в другой док или сделать плавающей.

Добавление и удаление палитр/панелей

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

• Для удаления палитры/панели щелкните правой кнопкой мыши (Windows) или левой кнопкой мыши с удерживанием клавиши Control (Mac) на её закладке и выберите «Закрыть» или удалите её из меню «Окно».
• Чтобы добавить палитру/панель, выберите её в меню «Окно» и закрепите в нужном месте.

Изменение размеров палитр/панелей

• Чтобы свернуть или развернуть палитру/панель, группу палитр/панелей или ряд палитр/панелей, дважды щелкните вкладку. Также можно дважды щелкнуть область вкладки (пустое пространство рядом с вкладками).
• Для изменения размера палитры/панели потяните за любую из её сторон. Размеры некоторых палитр/панелей, например, палитры «Цвет», нельзя изменить таким способом

Свертывание и развертывание значков панели

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

• Чтобы свернуть или развернуть все значки панели в столбце, щелкните двойную стрелку в его верхней части.
• Чтобы развернуть значок одиночной палитры/панели, щелкните его.
• Чтобы изменить размер значков палитры/панели так, чтобы видеть только значки (без подписей), изменяйте ширину дока до исчезновения текста. Чтобы восстановить текст, увеличьте ширину дока.
• Чтобы свернуть развернутую палитру/панель в значок, щелкните её вкладку, значок или двойную стрелку в строке заголовка.
• Чтобы добавить плавающую палитру/панель или группу палитр/панелей в док значков, перетащите её туда за вкладку или строку заголовка (палитры/панели автоматически сворачиваются в значки при добавлении их в док значков).
• Чтобы переместить значок палитры/панели (или группу значков палитр/панелей), перетащите значок. Значки панелей можно перетаскивать вниз и вверх в пределах одного дока, в другие доки (где значки будут отображаться в стиле панелей этого дока), либо за пределы дока (где они станут плавающими значками).

Сохранение и переключение рабочих пространств/сред

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

Сохранение пользовательского рабочего пространства/среды

1. Настроив требуемую конфигурацию рабочей среды, выберите Окно - Рабочая среда - Новая рабочая среда.
2. Введите имя рабочей среды.
3. В меню «Захват» выберите один или несколько вариантов.

Удаление пользовательской рабочей среды

• Выберите «Управление рабочими средами» в переключателе рабочих сред на панели приложения, выберите рабочую среду и нажмите «Удалить».
• Выберите Удалить рабочую среду в переключателе рабочих сред.
• Выберите «Окно» - «Рабочая среда» - «Удалить рабочую среду», укажите среду, которую нужно удалить, и нажмите «Удалить».

Как работать в Photoshop

Создание нового файла

Происходит по нажатию клавиш Ctrl + N, после чего появляется окно с настройками нового документа.

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

Также размеры рабочей области и размеры изображения можно задать с помощью меню «Размер изображения» (Alt + Ctrl + I) и «Размер холста» (Alt + Ctrl + C)

Ориентация по документу

Tab – показать или скрыть все панели.

Зажать Пробел, «схватить» мышью за документ и перетаскивать – перемещение в рамках масштаба. Зажатие кнопки временно активирует инструмент Hand Tool.

Ctrl + 1 – установка масштаба 100 %.

Зажать H, зажать левую кнопку мыши – документ масштабируется так, чтоб был виден целиком, можно перетащить рамку

Зажать Alt, крутить колесо мыши – масштабирование в обе стороны.

Выбор слоёв

Можно поискать нужный слой в панели слоев, но есть способ быстрее.

Зажать Ctrl и кликнуть на слой. Зажатие кнопки временно активирует инструмент Move Tool. Работает в случае выбора любого инструмента кроме Hand Tool (по зажатию Ctrl включается инструмент масштабирования) и самого Move Tool. Чтобы это работало, убедитесь, что настройки инструмента Move Tool (это панель под выпадающими меню, когда инструмент выбран) выставлены следующие: Auto‑Select – галка стоит, в выпадающем списке рядом – Layer.

Показать и скрыть

Показать или скрыть какие‑либо слои просто – кликнуть на иконке «глаз» этого слоя в панели слоёв.

Alt + клик по иконке «глаз» в панели слоёв – показать только один какой‑либо слой, прочее скрыть.

Информация о слоях

Двойной клик по миниатюре текстового слоя – это редактирование слоя, выставляйте текстовой курсор в нужное место – узнаете шрифт, размер, интерлиньяж, трансформации, кернинг, спейсинг и цвет.

Если у слоя справа есть курсивная надпись «fx» и иконка, открывающая список, значит у слоя есть эффекты. Кликайте на открывающую иконку – увидите список эффектов (можно отключить их показ – кликаем на иконки глаза рядом с эффектами), двойной клик по эффекту вызовет панель с настройками эффекта.

Показать и скрыть сетку, направляющие, габариты трансформации, нарезку – Ctrl + H.

Отмена и повтор последнего действия – Ctrl + Z

Отмена действий последовательно – Ctrl + Alt + Z

Команда из выпадающего списка Image → Trim – подрезка прозрачных или однотонных пикселей.

Узнать истинный габарит слоя с полупрозрачными эффектами – правый клик по названию слоя → Convert to Smart Object. После этого габарит трансформации показывает размер с эффектами. Обрезать макет до габаритов какого‑либо изображения для его экспорта – инструмент Crop Tool.

F12 – восстановить макет в том виде, в котором он сейчас сохранен на диске.

Экспорт графики для WEB

Большие фотографические (многоцветные) изображения – JPEG, качество 60‒95.

Малюсенькие картинки, вписывающиеся в 256 цветов, не нужна полупрозрачность или она бинарная – PNG‑8.

Любые картинки где нужна полупрозрачность или отсутствие искажений – PNG‑24.

Горячие клавиши

Полный список горячих клавиш вы можете найти на официальном сайте helpx.adobe.com

Список часто используемых горячих клавиш:

• Ctrl + A - выделить всё;
• Ctrl + C - копировать;
• Ctrl + V - вставить;
• Ctrl + N - новый документ;
• Shift + Ctrl + N - новый слой;
• Ctrl + S - сохранить;
• Shift + Ctrl + S - сохранить как;
• Ctrl + Shift + Alt + S - сохранить для Web;
• Ctrl + Z - вернуть назад;
• Alt + Ctrl + Z - вернуть на несколько шагов назад;
• Shift + Ctrl + Z - вернуть на шаг вперед;
• Ctrl (-) - уменьшение изображения;
• Ctrl (+) - увеличение изображения;
• Ctrl + Alt + 0 - натуральный размер изображения;
• Ctrl + D - снять выделение.

Часто используемые инструменты:

• V - перемещение;
• B - кисть;
• E - ластик;
• H - рука;
• M - выделение;
• P - перо;
• T - текст.

Дополнительные материалы

1. Новые возможности photoshop
2. Работа со слоями
3. Нарезка макета
4. Скоростная нарезка макетов