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

Sergey Minkin
Sep 9, 2013 · 5 min read

Привет, меня зовут Сергей Минкин. Я работаю в компании 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.

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

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

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


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


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


Thanks to ideali and Eugene Kudashev

    Sergey Minkin

    Written by

    Product designer, Moscow, Russia

    Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
    Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
    Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade