Переменные в Фотошопе или как импортировать внешние PSD-файлы влёгкую

Автор оригинала: Yaron Schoen
  • Перевод
Во время работы над крупными проектами с множеством макетов и видов объекта даже минимальное изменение в повторяющемся компоненте может потребовать времени. Проход по множеству макетов и подстройка цвета или начертания у подобного повторяющегося элемента может стать изнуряющим делом. Конечно же, если у вас есть подмастерье, выполняющий всю грязную работу за вас, то вы, определённо, везунчик, но что же делать нам, фрилансерам?

Неужели нам остаётся лишь сносить эту му́ку? Что ж, теперь нет! Недавно я обнаружил подход, который позволит дизайнерам распрощаться с открытием 23 PSD-файлов только ради смены цвета элемента в шапке. Вместо этого мы можем поступать разумно, как наши коллеги, разработчики, и импортировать внешние файлы при помощи кое-чего с названием «Variables (Переменные)».

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

Что такое переменные в фотошопе?

Вот как звучит техническое описание от Эдоби.
Переменная в основном используется для задания элементов в шаблоне для последующей замены. Есть три способа задания переменной:
  • переменная видимости — отображает или скрывает содержимое слоя;
  • замена пикселей — переменные, которые заменяют пиксели слоя пикселями изображения из другого файла;
  • замена текста — переменные, которые заменяют строку в текстовом слое.

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

Приступим

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



Обычно компонент имеет множество состояний (например, авторизованный/неавторизованный). Потому страницы стилей и создаются для компонента, чтобы показать его состояния. В идеале хотелось бы импортировать страницу стилей компонента и незаметно помещать её в макет. Это позволило бы нам получить файл, который является и стилевым и встроенным, импортируемым во все макеты, где имеется данный компонент.



Я сделал ненастоящую страницу стилей для глобального заголовка и назвал её Component_GlobalHeader.psd. Для того, чтобы следовать всем этапам, пожалуйста скачайте её.

Шаг второй: создание основы
Откройте макет сайта и создайте новый слой. Назовём его тем же именем, что и страницу стилей, т.е. Component_GlobalHeader. Это тот слой, в который мы будем совершать импорт содержимого внешнего файла.



Шаг третий: создание переменной
Пора создать переменную. Сделать это можно выбрав Image → Variables → Define. Перед вами всплывёт окно, в котором мы зададим некоторые параметры.

Во-первых, всегда проверяйте, что вы выбрали именно тот слой, который требуется. Это можно увидеть в поле «Layer (Слой)». Если слой будет задан неверно, в последствии может возникнуть бардак.



Так как мы фокусируемся на импорте, сразу переходим к «Pixel replacement (Замене пикселей)». В поле «Name (Имя)» введите то же название, что и у слоя, и у файла. Лучше всё называть одинаково, потому что это поможет в организации в будущем.



Теперь перейдём к полю «Method (Способ)». Мы собираемся выбрать метод масштабирования при замене изображения. Варианты таковы:
  • «Fit (Подгонка)» — масштабирует таким образом, что изображение вмещается в контейнер (некоторые части контейнера могут остаться пустыми);
  • «Fill (Заполнение)» — масштабирует таким образом, что изображение вмещается в контейнер целиком (некоторые части изображения могут выйти за пределы контейнера);
  • «As Is (Как есть)» — масштабирование не применяется;
  • «Conform (Приспособление)» — масштабирует изображение непропорционально таким образом, что оно целиком заполняет контейнер.

«As Is (Как есть)» — это то, что нам нужно, так как мы не хотим совершать никаких манипуляций над внешним файлом.



«Alignment (Центровку)» можно оставить как есть, по центру, но это дело предпочтений, а так же зависит от самого компонента. Раньше я выравнивал по левому верхнему углу. Всё зависит от вас.

«Clip to Bounding Box (Обрезку по рамке)», пожалуй, стоит оставить отключённым.

Жмём «Next (Следующий)».

Шаг четвёртый: импорт
Для того, чтобы импортировать файл, требуется выбрать или создать новый «Data set (Набор данных)». Наборы данных — это коллекции переменных и связанной, с ними, информации. Вы выбираете набор данных для каждого отдельного файла, так что, если у вас множество виждетов в одном файле, вам нужен только один набор с именем, например, sidebar_widgets.

Поскольку мы пока не создавали наборы данных, начнём с создания первого. Для этого кликните на маленьком значке с дискетой (возле мусорной корзины). Теперь, когда мы создали набор, давайте как-нибудь его назовём. Да, верно. Пусть именем будет имя переменной, слоя и внешнего файла. Как я говорил, они должны быть идентичны.





Вот и всё, теперь мы можем загружать внешний файл. Нажмите на кнопку выбора файла в секции «Value (Значение)» и выберите Component_GlobalHeader.psd. Заметьте, если у вас стоит галочка «Preview (Предварительный просмотр)», вы увидите, как ваш компонент появился в макете. Сверхважно: всегда нажимайте «Apply (Применить)» перед нажатием «OK». Если этого не сделать, всё, что мы сделали, будет потеряно и придётся начать сначала. Поэтому вначале «Apply (Применить)», затем «OK».



Мы импортировали внешний компонент в наш макет! Ура! Но подождите… мы же видим весь этот огромный слой, а нам нужна лишь его часть.



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



Шаг шестой: обновление
Теперь, когда мы работаем с внешним файлом, давайте я объясню в чём прелесть этого. Допустим, что красный индикатор текущей страницы вас больше не прёт, а вместо не го хочется синего. Запросто! Открываете ваш внешний файл и меняете цвет на синий, сохраняете его и возвращаетесь к макету. Теперь выберите Image → Apply Data Sets и выберите тот набор данных, который вам нужно обновить. Вы сразу же увидите изменения.



Недостатки

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

Основной недостаток заключается в том, что после изменений компонента и сохранения файла, в макет эти изменения автоматически не внесутся. Это значит, что вам всегда придётся «Применять наборы данных», открывая макет. Хотя я и не пробовал подобное решение, но мне кажется, что можно создать некоторое действие, которое будет открывать PSD и автоматически применять наборы.

Другой недостаток — файловая структура. Перемещение файла ломает всю эту систему, вызывая ошибку при применении наборов. Так как это всё не закономерно, я не нашёл способа справиться с этой проблемой.1

Тем не менее, я верю в то, что эта система сохранит бесчисленное множество часов изнуряющего механического труда. И стоит знать, когда стоит её использовать. В основном это сгодится для проектов, содержащих более 15 макетов.

Заключение

Этот пример — лишь верхушка айсберга. Вы можете и сами раскрыть весь потенциал данного метода. Будьте творческими и экспериментируйте. Почему бы не добавить все виджеть, используя лишь один набор данных?

Послесловие

Мне кажется, что многие об этом не знают. Статья по-своему актуальна на фоне сегодняшних баталий Фотошоп против Индизайна. Мне, например, не хочется переходить на Индизайн и подобная система очень облегчает работу, а также на шаг приближает Фотошоп к его «конкуренту». Надеюсь, что вам был полезен мой труд.

И ещё: если мой перевод пунктов меню расходится с локализацией, напишите мне в личку и я это поправлю.

Примечания

1. skriv: «Можно сделать Action и его загнать в ScriptEventManager, для обновления всех слоев при открытии документа».
Поделиться публикацией

Комментарии 37

    +1
    Спасибо!
      +1
      Действительно, удобно.
      Спасибо. Однозначно в «избранное».
        +1
        Спасибо. Очень полезная информация.
          +1
          Спасибо, статья действительно актуальная. Я сейчас для похожих целей использую смарт-объекты и их копии, что позволяет реализовать подобное поведение — сменил контент смарт-объекта — все копии изменились. Сейчас попробую поработать с переменными.
            +2
            На самом деле это одно из самых непонятных для меня явлений в Фотошопе. Почему, сделав смарт-объекты, они не добавили простейшую возможность подключения в них файлов.

            Т.е. я вначале обрадовался пункту меню «Open as smart-object», но, когда понял, что он делает на самом деле, загрустил.
              0
              Ну вот пример использования мной смарт-объектов: отражение иконки — рисую иконку, делаю из её слоев смарт-объект, для отражения дублирую смарт-объект переворачиваю его и задаю градиентную маску, объединяю оба этих слоя в еще один смарт-объект. Теперь у меня есть иконка с отражением. И теперь чтоб нарисовать аналогичную иконку с отражением я создаю новый смарт-объект через копирование для этой иконки через контекстное меню. 2 раза кликаю, выделяю слой изображения иконки (не отражения) снова 2 раза кликаю — меняю изображение иконки, сохраняю все отредактированные смарт-объекты и получаю новую иконку с уже готовым отражением. Так же у меня сделаны заготовки для двдшотов — меняю контент смарт-объекта и получаю двд с новой наклейкой в коробочке с отражением.
            +4
            Еще один Хак

            1. Скачиваем файлик
            2. Ложим его в папку: /Applications/Adobe Photoshop CS5/Presets/Scripts/ (Для винды не помню какой)
            3. Запускаем фотошоп и видим в File → Scripts:
            image
            4. Создаем mainSite_index.psd (короче родителький в который все будет инклудиться)
            5. Cоздаем в нем пустой слой, конертируем его в SmartObject и обзываем Global_header
            image
            6. Создаем PSD файл с нашей шапочкой — Global_header.psd и ложим его в туже директорию.
            7. File → Scripts → Includes и наш слой заменяеться контентом из Global_header.psd

            Плюсы: Там же в скриптах можно прописать правило при открытиии файла вызывать скрипт Includes или поставить горячию клавишу.

            Минусы: Если много слоев, немного долго думает :)
              0
              Пункт 4 можно заменить другим действием: просто перетащив Global_header.psd в наш файл, автоматически создасться Smart Object c названием файла.
                +1
                По топику!
                Можно сделать Action и его загнать в ScriptEventManager, для обновления всех слоев при открытии документа!
                  0
                  Спасибо, добавил в примечания.
                0
                Потестить не успел еще, поэтому просто вопрос — указано, что директория должна быть та же, где лежит исходный макет. Можно ли как-то прописать конкретную подпапку в этот скрипт, чтобы корень не захламлять?
                  0
                  Да, откройте скрипт любым редактором, там код закоментирован, разберетесь.

                  Однако, способ описаный в теме, намного удобней. Если сделать как я писал выше, написать Action и загнать в ScriptEventManager.
                    0
                    Ок, спасибо! Попробую разобраться сегодня.
                      0
                      Работает классно! Спасибо!

                      Единственное, возможно, стоило бы включить проверку, чтобы обновлялись файлы смарт-объектов только те, чья дата последнего изменения новее, чем у самого файла, в котором производятся изменения (надеюсь, понятно смог объясниться).
                  +1
                  В борьбе Фотошоп vs. Индизайн выигрывает Иллюстратор. В нем легко задаются стили для графики и текста и быстро же менются + прилинковывается внешняя графика + все страницы в одном файле
                    0
                    «Месье знает толк в извращениях?»

                    Может статейку о том, как делать макеты в Иллюстраторе?
                      +2
                      Таких статей валом, достаточно много людей делают макеты в иллюстраторе. А вот в индизайне, напротив, я первый раз слышу, чтоб кто-то делал сайты. Разве что рисовать все в шопа, а комбайнить в индизайне.
                        0
                        Cmart вот, что пишет: «на тридцать девятом году своей жизни понял что ппц
                        понял, что сайты проектировать лучше в иллюстраторе, нежели в фотошопе.

                        (людвиг вот вообще всё делает в индизайне, потому что талантливый человек и профессионал — в отличие от).»
                          0
                          Я всё же за то, что собирать макет в Иллюстраторе — это извращение. Если уж так хочется работы с вектором, но не хочется Фотошопа, то стоит смотреть в сторону Фаерворкс. Насколько мне известно, по работе с вектором он близок к Иллюстратору, но при этом интерпретирует вектор, как растровую графику, что для веба более наглядно.

                          Фотошоп — своеобразный стандарт. Технологи хотят убить дизайнера уже за макет в PDF (это после Индизайна так), а за макет в AI что они сделают, я не представляю.

                          С другой стороны, я считаю, что даже если ты отдаёшь макет в PSD, всё равно все компоненты, которые ты можешь нарезать сам, лучше нарезать и сложить отдельно в папку. Возможно, что такой подход при сдаче макета в INDD вызовет меньше ярости у технолога.
                            0
                            было бы здорово использовать Фаерворкс, но он, к сожалению, до сих пор тормозной. + многослойные эффекты выглядят не так как задумывалось (например несколько однопиксельных окантовок выглядят толще чем они же в фотошопе и иллюстраторе)
                              0
                              Если верстальщик не знает/не умеет/не хочет работать с макетом в Illustrator, аккуратно экспортирую в PSD и нет проблем. Местами геморно, но не более, чем готовить обычную PSD'шку к отправке.

                              В идеале можно бы использовать и Fireworks — в нём можно было бы вообще всё делать, от интерактивных прототипов до сборки финального дизайна, но уж очень он стал противный и тормознутый.

                              Честно говоря, я давно ищу какой-то один продукт, в котором можно провести весь цикл от разработки прототипа до отполированного, готового к нарезке/сборке дизайна.

                              Пока что лучшим является для меняя связка Axure (прототипирование) + Illustrator (UI) + Pages/InDesign (документация). Плюс параллельно часто запускаются Photoshop и Flash и тогда весь этот зоопарк начинает неимоверно бесить: начиная от разных хоткеев на одинаковые команды (и разные названия команд выполняющие одно и тоже действие) и заканчивая прелестями экспорта/импорта.

                              Так что поиск универсального инструмента продолжается.
                          0
                          Гораздо интересней, как всё это потом разбирать верстальщику на запчасти.

                          Экспортировать выделенные объекты как в Кореле уже можно?
                            0
                            Save for web с порезкой по слайсам, как минимум.
                            Да, для экспорта одного-единственного объекта я использовал скрипт, который
                            { Select inverse; Hide; Export }
                            И да, верстать текст и рисовать векторные объекты в фотошлёпе — дикое извращение. Конечно некоторые умудряются набирать текст в Пеинте…
                              +1
                              Костыль такой костыль. В Фотошопе то же самое. А вот в Кореле давно есть, пусть не всё супер, но есть же.
                              Уже и не знаю, может билет купить да лично объяснить с угрозами членовредительства, что макеты не только собирают, но и разбирают.

                              Не выровненный по пиксельной сетке вектор — не меньшее извращение. Третьего дня переделывал все контуры на внутренние за одним мегадизайнером.
                          0
                          реквестирую топик о разработке макетов в иллюстраторе
                        0
                        Круто! Вообще скриптовый язык в ФШ довольно крутой, странно, что из других Адоби-программ только в инДизайне похожее используется, ну и во Флеше, но там всё по-другому.
                        А кому-нибудь ваще интересно было бы почитать что-нибудь типа «скрипты в фотошопе для чайников» со всякими смешными штуками и продолжение темы про собственные панели?
                          0
                          С удовольствием бы почитал
                            0
                            Да, интересно, еще как.
                              0
                              Думаю, многим будет интересно. Обязательно публикуйте.
                              0
                              Те, кто попал на мастер-класс Михаила Баранова по Иллюстратору на последнем РИТе, смеются над вашими трюками.
                                0
                                Есть что-нибудь (видео/статья), чтобы оценить?
                                  +1
                                  Очень надеюсь, что скоро будет видео. Но в любом случае попробуем в ближайшее время выложить презентацию.
                                +2
                                Предложу тогда еще один способ. При этом ссылки на внешние файлы будут относительными, и можно не использовать переменные, а обойтись смарт-объектами.

                                Ссылка на внешний файл (или просто имя файла если папка общая) указывается в имени файла:
                                image

                                Затем скачиваем небольшую бесплатную утилитку: daminion.net/solinker-ru

                                Создаем проект и указываем папку с PSD макетами. Нажимаем кнопку «Обновить все» — все смарт объекты обновятся из внешних файлов
                                image

                                Программу писали для себя, но потом решили что может она кому-то еще пригодится.
                                Поддерживает CS2, CS3, CS4, CS5
                                  0
                                  она у меня глючила, коверкала масштаб смартобъектов. Больше не ставил.
                                  0
                                  Хочется верить что photoshop в будущем будет более ориентирован на создание лейаутов.
                                  Или же в то, что fireworks достигнет уровня photoshop по работе с растром.
                                    0
                                    Сам пару месяцев назад намутил похожую фишку, но отталкивался от AppleScript и, увы, дело так и не довел до полного завершения. Технически — отлично выбирает смарт-объекты в корне psd файла и обновляет их из нужной папки. До работы с папками внутри psd-шки не дошел — немного влом было :-[

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

                                    Самое читаемое