Коллективный .PSD

Или как правильно развить синдром золушки

Привет, меня зовут Сергей Минкин. Я работаю в компании AltSpace (часть холдинга Digital October Group), проектирую и визуализирую интерфейсы.

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


Соблюдайте порядок в мастерской

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

Все по полочкам

Объект из нескольких слоев — это папка

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

Например, если кнопка состоит из иконки и подписи их стоит объединить в папку Button. Меню, которое состоит из пары таких кнопок, становится группой Menu. Фон из нескольких слоев  папка Background.

Принцип ясен: логика группировки папок должна совпадать со структурой вашего макета.

Если объект состоит из нескольких слоев, он должен стать папкой

Новый слайд версия 34/1 от 27 ноября

Часто внутри файла хранится несколько версий элементов, например фоны для кнопки разного цвета.

Чтобы вы сами же потом не забыли, что пачка непонятных скрытых слоев — это версии того самого фона, просто правильно сгруппируйте их. Самое простое — сделать папку Background и положить туда все версии. Но идеальным вариантом будет дублировать папку с кнопкой, именуя каждую копию номером итерации. Тогда будет понятно, что это три версии кнопки — не только вам, но и всем тем прекрасным людям, которым достанется макет.

При такой группировке любой из ваших коллег поймет, что здесь 3 версии кнопки

Оставьте фломастеры себе

Многие любят обозначать слои и папки цветами. Фиолетовый — элементы навигации, желтый—текстовые слои и т.д. Проблема в том, что цветовое кодирование понятно только автору. Если вы отдаете кому-то другому такой раскрашенный файл, то ничего, кроме желания подарить вам флаг ЛГБТ-сообщества, у этого человека не возникнет.

wiki: Радужный флаг

Когда ты отдаешь .psd с «замком», где-то умирает котенок

Часто дизайнеры любят лочить какие-то слои и работать так. Но если вы оставили где-то в дебрях папок такой слой, то вашему коллеге придётся пересмотреть все папки, потому что вся корневая папка блокируется — её нельзя перемещать.

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

По статистике в год от этого умирает не менее миллиона котят

Динозаврам место в музее

Поверьте, очень много дизайнеров-старичков до сих пор не жалуют Layer Styles и все, казалось бы, простые вещи делают отдельными растровыми слоями. Это приносит адские страдания всем, кто затем хочет изменить объект.

Мы знаем, что ты мастер сетки 80-го левела

Направляющие помогают нам жить. Можно быстро смастерить сетку или просто что-то выровнять. Но зачастую мы используем их разово, то есть выровняли объект и забыли, а направляющие между тем копятся и копятся.

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

Скриншот реального проекта после одного из коллег

Сдавай пустые бутылки в утиль по 10 копеек

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

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

Кусочек файла реального проекта. Про разукрашивание слоев вы помните, да?

Маленький Alt, большие возможности

Многие не любят группировать объекты, объясняя это тем, что их потом надо постоянно сворачивать, а это утомительно.

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

Вообще, поэкспериментируйте с альтом в других функциях фотошопа, найдёте много нового.

Как быстро причесать монстра

Не забывайте про такую хорошую вещь, как настройки панели слоев. Здесь несколько полезных вещей:

  • Thumbnail Contents. Эта штука позволяет показывать в превью слоя не весь слой целиком, а только то, что есть в нем, то есть обтравливать контент.
  • Expand New Effects. Отжав эту галочку, вы сможете автоматом схлопывать все добавленные стили слоя.
  • Add Copy. Абсолютный must unselect. Отжав эту галочку вы уберете все те “Copy 230" в названиях слоев. Чистота исходника разом вырастет на 30%.

Хоткеи — не просто красивое слово

Я расскажу только про три хоткея. Это копирование, вставка и очистка Layer Styles.

Комбинации надо назначить в настройках горячих клавиш

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

Моментальное дублирование одним нажатием:


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


Отдельное спасибо Евгению Кудашеву.