Возможно, прозвучит банально, но Photoshop действительно и считается и является лучшим и удобным приложением не только для работы с изображениями и фотографиями, но и для веб-дизайна. Об этом мы даже рассказали вам в прошлом материале. Но в течение многих лет пользователи желали различных улучшений для программы, чтобы придать ей большую эффективность. Сама же компания Adobe посчитала иначе и мы с вами имеем сейчас то, что имеем. В версиях СС имеются функции, которых нет в CS6/CS5, а в этих версиях нет «фишек» из СС. Именно поэтому обычно у творческих людей на компьютерах установлена не одна версиях Photoshop. Впрочем, нужно поблагодарить компанию за многочисленные фильтры, пресеты (presets), кисти, поддержку 3D и многое иное.
Так или иначе, существует в приложении (любой версии) и поддержка пользовательских скриптов или сценариев (Scripts). Они похожи на действия (Actions), но позволяют пользователям принимать решения во время своей работы, а не просто слепо повторяют заложенные в них ранее шаги. Скрипты позволяют добиться очень многого, потому как у нас с вами появляется доступ ко всему функционалу приложения.
Самый простой пример скрипта: конвертация всей папки с изображениями из одного формата в другой, изменение размера изображения и добавление мета-данных, удаление пустых слоев, работа с масками. Но в реалии скрипты могут еще многое и ниже мы посмотрим, что именно и как это всё работает.
Вспоминая известное
Чтобы не повторяться постоянно, сразу обратим внимание на главное:
- Все рассмотренные нами скрипты тестировались и имеют поддержку (x64) Photoshop CS5/CC2014/CC2015. Если разработчики обращают внимание отдельно на версии, в описании ниже будет отмечено.
- Установка скриптов осуществляется в папку Photoshop (ваша версия)/Presets/Scripts/
- В самой программе вызываются через меню Файл -> Сценарии. Если скрипта нет, выберите в этом меню Обзор и сценарий активируется в приложении.
- Для установки горячих кнопок для запуска скриптов, откройте Редактирование -> Клавиатурные сокращения, и в первой же вкладке выберите меню Файл, прокрутите список, раскройте Сценарии и увидите все ваши скрипты.
Измерение в пикселях – Pixel Measure
Как часто вам приходилось измерять точное расстояние между двумя элементами по горизонтали или вертикали. И не просто измерять в пикселях, но и равномерно распределять другие элементы. Посчитать точное расстояние в Photoshop можно, но кропотливо. Есть решение проще.
Скрипт Pixel Мeasure позволяет сделать это в два клика. Загрузите архив с github (теперь он здесь хранится, ссылка в названии) и распакуйте в папку со скриптами.
Выберите нужный документ и с помощью выделения обозначьте нужное расстояние. Рассчитываться будет та сторона прямоугольного выделения, которая больше (длиннее). Затем среди слоев появится текстовой слой с количеством пикселей и слой в виде линии. Этот слой можно перемещать и как линейкой замерить расстояние. Вы скажите, что при выделении и так указана ширина и высота, но в данном случае создается готовая линия, которой удобнее измерять и которую можно перемещать, да и случаи в жизни бывают разные.
Разделение на слои – Split to Layers
Совсем маленький и скромный скрипт позволит сделать то, что очень часто бывает так необходимо. Вы что-то создаете, дорисовываете кисточкой или накладываете объекты друг на друга или рядом и в какой-то момент осознаете, что забыли все это сделать на отдельных слоях. Досада! Приходится переделывать!
Скрипт сам разделит все созданное на слои. Если используется кисточка с размытыми краями, то готовьтесь к тому, что скрипт обработает каждый пиксель и может создать до 70+ слоев. Если кисть жесткая (обычная), то все проходит быстро и четко. Пример ниже.
Важно: рабочий слой должен быть разблокирован на панели слоев (значка замочка не должно быть) и иметь прозрачный фон. На белом фоне (однородном) разделения не происходит.
Переименование группы слоев – Group Layer Renaming
Создавая дизайн сайта в Photoshop приходится (и без этого никуда) использовать много слоев. Ну, очень много. Иногда эти слои являются дубляжами друг друга. Соответственно, намного удобнее становится ориентироваться в проекте, если каждый слой имеет свое название. Но представьте, как муторно и долго переименовывать большое количество слоев. Данный скрипт сделает все за вас и переименование 30 слоев сократится, как минимум, на две минуты.
Загрузите скрипт со странички автора и скопируйте в папку приложения, а затем увидите его в меню.
Откройте документ, выберите нужные слои для переименования, запустите скрипт и введите нужное название. Но при этом переименовать можно разными способами: добавить ваше название в конце уже имеющегося; добавить в начало; или заменить на ваше полностью. Мы выбрали первое и результат виден на скриншоте ниже, а чтобы названия не сливались (Слой 5мой слой), поставьте в поле названия сначала пробел.
Плоский дизайн – Flat Layout Wrapper
Работая над веб-дизайном, рано или поздно, возникает момент, когда вам необходимо или просто хочется самому продемонстрировать, как ваш сайт будет выглядеть в окне браузера. В данном случае разработчики взяли за основу Safari.
Скрипт обрабатывает все ваши слои, удаляет сетки и прочее и «упаковывает» в соответствующую рамочку ваш проект. При этом загрузка происходит при 100% масштабировании, то есть реальном размере вашего проекта.
Как обычно: загрузите все файлы и папочку из архива в скрипты, а затем вызовите его через меню.
Такое изображение можно сохранить в JPG или PNG, а может даже и PDF, и представить на суд заказчика, например.
Изменяя Радиус – Radius Resizer
В Photoshop сложно менять каждый отдельный угол одного прямоугольника в любое время. А если этот объект требуется изменить на нескольких слоях, то и тем более приходится долго маяться. Ох, а ведь бывает, что нужно сделать углы разными по радиусу!
Установка и вызов скрипта происходит как обычно, но скопированы должны быть все файлы и папки из архива.
Выбираете фигуру, запускаете скрипт и устанавливаете значение радиуса угла. Если эта фигура есть на нескольких слоях, то выделяете все нужные слои и уже затем запускаете для них скрипт и меняете значение радиуса угла. Если у фигуры уже есть скошенный угол, то скрипт покажет вам его значение и будет гораздо проще настроить точно такой же угол и в других местах/слоях.
Генератор шаблонов – Template Generator
Начиная работу с новым дизайн-проектом, всегда приходится делать одну и ту же рутинную работу по созданию сетки, разметки рабочего полотна. Казалось бы, это должно уже стать постоянной функцией Photoshop – но это не так. Данный скрипт создает сетки автоматически при создании нового документа. Это легко и удобно.
Установка немного отличается от стандарта. Необходимо все файлы и папку templates из загруженного архива со странички автора скопировать в Photoshop/Presets/Scripts/Event Scripts Only. Если вдруг такой папки нет – создайте сами.
Затем запустить Photoshop и в меню Файл выбрать Сценарии -> Обзор и найти файл +install.jsx Запустите его и Скрипт установится.
После этого останется всего-то создать новый документ и в конце его названия добавить размер сетки. Эта сетка создастся автоматически.
При этом существует возможность создания пользовательских шаблонов к этому скрипту. Особенность в том, что все шаблоны psd должны сохраняться в ту же папку templates, а название файла и станет тем ключом, который необходимо будет вводить в конце названия документа при создании нового в Photoshop. Важно помнить, что обычный скрипт не изменит размер созданного полотна на свой, поэтому, если это нужно – создайте пустой слой в шаблоне с именем Lock Size и разместите его самым первым (сверху). Поскольку скрипт выполняется снизу вверх, то по завершению действий заданный вами размер изменится на шаблонный.
Мобильный предпросмотр – Device Art Generator
Достаточно часто веб-дизайнеру приходится смотреть, как его творение будет выглядеть на экранах смартфонов и планшетов. Сделать это можно по-разному, но в самом Photoshop такой возможности нет. Данный скрипт позволяет увидеть именно это и поддерживает такие устройства как iPhone, iPad, Samsung Galalxy, HTC One, Motorola, Nexus.
Установка отличается чуть-чуть. Скопируйте файлы скриптов в папку Photoshop/Presets/Scripts/, а папку DeviceFrames из архива в Photoshop/Presets/.
Затем откройте свой PSD, сохраните в PNG (для удобства работы скрипта) и запускайте Сценарий deviceArtGeneratiorUI.jsx. Мы выбрали модель Htc One X и загрузку из PNG. Результат будет показан в отдельном документе ниже на нашем скриншоте. Смысл такого моделирования – визуализация расположения элементов по ширине. Понятное дело, что Landing Page будет прокручиваться, но как будет выглядеть в целом, можно представить.
Трансформация – Transform Each
Как часто нам приходится, работая в Photoshop, увеличивать или уменьшать размер объекта? При этом обычно мы делаем это «на глазок» и всегда переделываем не один раз. Данный скрипт позволит не просто поменять размер объекта в процентах, но и предварительно оценить его внешний вид. Одновременно можно обрабатывать от двух до шести слоев.
В нашем примере мы выбрали слои, которые создают иконку YouTube и попробовали её увеличить до 151% и уменьшить до 50%. Нажали кнопочку Preview и посмотрели, как будет смотреться рядом сдругими изображениями.
От светлого к темному – Lighten&Darken Color
Работа с цветом и подбором оттенков важна в веб-дизайне. И если вам необходимо часто менять оттенки и подбирать их, то работа может не просто превратиться в рутину, но и времени уйдет много, да и настроение подпортится. Очередной скрипт позволяет установить горячие кнопки для различных нужных вам оттенков, чтобы затем одним нажатием быстро заменить один цвет на другой.
Скачать можно по ссылке (эта уже обновленная) и в архиве два скрипта: один на увеличение яркости, другой на уменьшение. Скопируйте файлы .jsx в Photoshop/Presets/Scripts/ и найдите их в меню Файл -> Сценарии.
Важно: оттенок цвета меняется не на объекте и не на слое, а на панели инструментов слева на иконках выбора цвета. Разумеется, менять оттенок можно и в палитре цветов вручную (без скрипта), но иногда подбирать четкий цвет сложно. Здесь же шаг составляет 10%.
Завершение
Мы привели не слишком большой список различный сценариев (скриптов) для Photoshop. Разумеется, на просторах интернета можно найти их и в большем количестве, платных и бесплатных. Какие-то функции уже используются самой Adobe в том или ином варианте, какие-то нет. Да и в разных версиях самого приложения разные возможности. Мы надеемся, что когда-нибудь все описанное нами выше вам потребуется и действительно поможет в процессе веб-дизайна, сделает работу более быстрой, эффективной и немного автоматической.