В рамках курса, который я частично веду в EpicSkills, возникла идея статьи о том, какие функции Photoshop и в каком объеме нужно знать html‑css‑верстальщику. За сим и публикую эту статью‑шпаргалку.

Эта запись ни в малейшей степени не конспект, но примерно 10 % информации, дающейся на занятии.

Дополнение летом 2015
Недавно Photoshop обновился, теперь экспорт делается легко и непринужденно, правым кликом по слою. Иногда, прявда, глючит...

В дополнение к статье «Как фотографу изучить Photoshop» и вообще всем статьям с меткой Photoshop в моем блоге (статьи про GIMP и ArtWeaver можно не читать – в 2008 году написаны, устарели).

Главное

Не используйте русифицированный Photoshop! Подавляющая часть уроков написана для англоязычного интерфейса, на русский язык интерфейс переведен с ошибками. Например, настройка автовыбора инструмента «Перемещение» имеет выпадающий список (выбирать по клику слой или группу слоёв) в русском переводе перепутана – устанавливаем ее на «слой» – выбирается группа слоёв, устанавливаем на «группа» – выбирается слой. Такова официальная локализация от компании Adobe. В дальнейшем тесте я рассуждаю об англоязычном интерфейсе.

Убедитесь, что ваш Photoshop правильно настроен: выпадающее меню Edit → Color Settings (вызывается Shift + Ctrl+ K), выставьте:

  1. Settings: North America...
  2. RGB: sRGB

Это то цветовое пространство, «в котором работает весь WEB».

Интерфейс

Под выпадающим меню длинная горизонтальная область – в ней отображаются настройки активного инструмента.

Панель со всеми инструментами, обычно, слева, прочие панели справа или «плавают».

Внешний вид Photoshop настраивается: можно перетаскивать панели, включать и отключать их видимость (в выпадающем меню Window), сворачивать и разворачивать (двойной клик по названию панели).

Создав рабочее окружение с нужными панелями и скрыв всё ненужное, можно сохранить вариант получившегося интерфейса. Список рабочих окружений – в верхней правой части окна Photoshop, там же выпадающий список, в нижней части которого пункт «New Workspace…» – нажимаем, именуем, сохраняем.

Необходимые и желательные для верстальщика панели:

  1. Layers – панель слоёв – папки и слои из которых состоит макет.
  2. Character – данные о выделенном тексте (шрифт, цвет, размер, интерлиньяж и пр.) – удобно держать в плавающем виде (иконка) с автозакрытием: правый клик по названию панели → выставить галку Auto Collapse.
  3. Info – не обязательная, показывает цвет под курсором, размеры выделения области, длину измерения (все данные этой панели могут быть получены иным образом, а места занимает много).

Прочие панели – по вкусу верстальщика сайтов, у каждого свои методы. Используете Actions – держите эту панель; удобно ориентироваться по миниатюре – держите открытой панель Navigator.

Все лишние панели закрыть, ибо занимают место. Спасибо, кэп!

Как верстальщику работать в Photoshop

Положение Ваших рук: правая на мыше, левая на левой части клавиатуры: указательный на Tab, большим покрываем Alt и Пробел.

Включите линейки (выпадающее меню View → Rules, поставить галочку (оно же – Ctrl + R)), убедитесь, что они показывают пиксели (правой кнопкой мыша кликнуть на линейке, выбрать пиксели).

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

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

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

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

Зажать H, зажать левую кнопку мыши – документ масштабируется так, чтоб был виден целиком, можно перетащить рамку (Вы держите левую кнопку нажатой, просто тащите мыша) в любое место и отпустить – окажитесь в этой области с тем масштабом, который был ранее. АРХИудобно для перемещения по увеличенному документу! Почти как зажатие Пробел, но быстрее при перемещении на «большие» расстояния.

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

Выбор слоёв

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

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

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

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

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

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

Двойной клик по миниатюре текстового слоя – это редактирование слоя, выставляйте текстовой курсор в нужное место – узнаете шрифт, размер, интерлиньяж, трансформации, кернинг, спейсинг и цвет. Если параметры Horizontally Scale или Vertically Scale отличаются от 100 % – всё, 3,14здец нужно делать текст изображением или экспериментировать с CSS3-свойством transform у блока, в который включать только этот текст. Ну и налаживать взаимодействие дизайнера и верстальщика, если это контентный текст.

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

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

Лирическое отступление: в верхней левой части панели слоёв есть выпадающий список – это режим наложения слоя. Если его значение отличается от Normal, то опять налаживаем взаимодействие дизайнера и верстальщика, т. к. слои, имеющие наложение в режиме отличном от Normal и не являющиеся часть сложных коллажей‑картинок (которые целиком сохранаются в единое изображение), сверстать корректно (как в макете), зачастую, или нереально вовсе, или требует дополнительных трудозатрат с Вашей стороны.

Цвет в макете: инструмент Euedropper Tool (в настройках указать Sample Size → Point Sample).

Размер в макете: инструмент Ruler Tool – нажать, тащить мышью, отпустить – в панели настроек увидите измеренное расстояние. Если тащить с зажатым Shift, измеритель перемещается строго горизонтально, строго вертикально или под 45° (для верстальщика не актуально). Можно использовать Rectangle Marquee Tool, создавая выделение (размер выделения будет показан рядом с выделением), если Photoshop версии CS6 и новее. Убрать получившееся после измерения выделение – Ctrl + D.

Прочие полезные верстальщику техники

Показать и скрыть сетку, направляющие, габариты трансформации, нарезку – 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.

Заключение

Это запись для учащихся на курсе, часть занятий которого я веду, поэтому консультировать в комментариях по используемым техникам, наверное, не стану. Приходите на курс EpicSkills.