Глава 3.1.0. Обзор интерфейса Adobe Photoshop

Разберём интерфейс и основные приёмы работы верстальщика в графическом редакторе Adobe Photoshop (далее «Фотошоп»).

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

При запуске Фотошопа открывается начальный экран. С начального экрана можно выбрать и открыть нужный макет:

Начальный экран Фотошопа

Замечание

Для создания и управления документами и файлами используются элементы интерфейса: палитры, панели и окна. Расположение этих элементов называется рабочей средой. Рабочую среду можно настроить по своему желанию — показать или скрыть панели/палитры, расположить их в нужном порядке.

У каждой панели есть меню (иконка справа от заголовка панели), клик по которому открывает команды для настройки панели. Например, с помощью команд Close /Close Tab Group можно скрыть панель или группу панелей. Скрыть или показать панель/палитру также можно из меню Window.

Рабочая область Фотошопа

Для работы нам понадобятся панели Layers, Character, Info и Properties. Остальные панели можете оставить в интерфейсе на своё усмотрение.

Рабочая область

Рассмотрим рабочую область редактора и поближе познакомимся с её элементами.

A: Панель с инструментами
B: Панель настройки текущего инструмента
C: Окно документа
D: Панель Character (Текст)
E: Панель Layers (Слои)

При смене активного инструмента меняется набор доступных настроек на верхней панели выбранного инструмента.

Центральную часть занимает «Окно документа». Внизу расположен элемент с настройкой масштаба макета и строка состояния.

Элемент с настройкой масштаба и строка состояния

Помимо панелей можно настроить отображение линейки в рабочей области макета. Меню View / Rulers или горячая комбинация клавиш Ctrl/Cmd + R.

Линейки в рабочей области

Панель инструментов

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

Move tool (горячая клавиша V). Этот инструмент позволяет выбрать элемент на макете. После выделения можно узнать свойства этого элемента. Либо переместить выбранный элемент.

Замечание

Для измерения расстояний между элементами можно использовать инструмент Marquee Tool — выделение области (горячая клавиша M).

При работе с текстом мы будем использовать инструмент Type tool (горячая клавиша T).

Также нам пригодится инструмент Eyedropper tool или «пипетка» (горячая клавиша I) — с помощью неё мы будет получать цвет элемента.

Панель слоёв

Макет представляет собой набор слоёв или групп слоёв. Каждый слой содержит элементы. Слои накладываются друг на друга. Для наглядности можно сравнить макет со слоёным пирогом. Слоёная структура макета отображается на панели Layers.

Панель Layers

На панели показана последовательность расположения слоёв на макете. Например, текстовый слой english yes расположен над слоем Слой 3. В самом низу обычно лежит большой фоновый слой — в нашем случае это слой bg.

На панели Layers можно управлять видимостью слоя. Мы можем скрыть или показать слой с помощью кнопки управления видимостью слоя (иконка глаза слева от названия слоя).

Группы слоёв отображаются как папки.

Группы слоёв

Есть возможность работать сразу с несколькими слоями. Например, объединить или одновременно экспортировать несколько слоёв. Чтобы выбрать несколько слоёв одновременно, нужно c зажатой клавишей Ctrl/Cmd или Shift нажимать на слои.

Панели информации

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

Панель Properties (Свойства) содержит дополнительные характеристики элемента.

Панель текстовых параметров

Панель Character (или Текст) отображает установленные настройки шрифтов для текстовых элементов.

Подробная информация о работе с этими панелями будет рассмотрена в следующих разделах методики.

Официальное руководство со сведениями о настройке и интерфейсе рабочей среды Фотошопа можно найти тут.

 

Инструкция~ 2 минуты