iShadow: автоматизация создания теней в стиле iOS в Фотошоп
В iOS 10 в 2016 году одним из визуальных новшеств стала размытая тень под обложками альбомов в приложении «Музыка», генерируемая из этих обложек. Такие тени сейчас повсеместно встречаются не только в интерфейсах, но и в дизайне сайтов.
Воспроизвести такой эффект в ФШ просто:
- создать дубликат слоя;
- на свой вкус применить фильтр размытия;
- уменьшить масштаб;
- слегка сдвинуть по вертикали;
- в конце изменить режим смешивания слоя для наложения на фон.
В свое время в блоге Инвижн был опубликован видеоурок для Скетча и год спустя продуктовый дизайнер Олег Фролов создал бесплатный плагин, автоматизирующий создание таких теней. Это и вдохновило меня создать фри аналог для Фотошопа.
Скрипт в обзоре на Ютюб канале «Блог фрилансера. Веб-дизайн»
Ниже небольшая история создания проекта.
Первый подход
Джаваскрипт для меня почти дремучий лес (хотя был первый опыт создания скрипта для Иллюстратора), но есть объемные гайды по скриптингу для Фотошопа и самое главное — Гугл. В первом подходе при реализации скрипта нужно выполнение простых функций в JS:
- Duplicate (слой тени помещается вниз и отдельно к имени добавляется префикс «_shadow»);
- Translate (смещение по оси Y на заданное количество px);
- Resize (масштабирование слоя пропорционально в %);
- applyGaussianBlur (размытие, как и сдвиг задается в px);
Так была создана первая базовая версия скрипта, имеющая интерфейс с полями ввода, которые передают целочисленные значения в функции, похожая на плагин для Скетча.
В результате нажатия OK создается тень с наложенным черным цветом через Layer Effects → Color Overlay (Opacity 15%), этот трюк был использован в видео по Скетчу от Инвижн. И как писал Илья Бирман в своем Телеграмм-канале:
«Тень должна быть или темнее того, что ее отбрасывает или светлее. Иначе получается не тень, а размазня»
Настройки добавленного к слою тени оверлея по желанию подкрутить можно самим.
Доработки v0.2
Отсутствие превью при работе со скриптом весьма некошерная штука. Думал по началу, что расширить функционал раз плюнуть. Тут всплывает проблема масштаба Эдоуб: смещение слоя для превью можно делать сколько угодно перед нажатием OK, но масштаб и размытие операции деформирующие слой и повторный вызов этих функций при изменении значений в полях применится к уже уменьшенному и размытому слою. Пришлось бороться с проблемой в лоб — на каждое изменение значений в полях под капотом скрипта происходит откат к сохраненной точке в панели Истории ФШ и повторное выполнение трех базовых функций. При этом Фотошоп не торопится показать новое превью и приходится принудительно обновлять интерфейс app.refresh(), что заметно для глаз.
Интерфейс v0.3
Идеи нарастают, как снежный ком, как и строки кода в скрипте. Для удобства в диалоговое окно добавляю слайдеры, с ними сразу появляется желание поиграться с вариантами тени. JS код становится становится все веселей: слайдеры и поля передают друг другу значения на лету, превью начинают генерироваться на уже 6 возможных способов изменения чисел + 7 чекбокс превью.
Сохранение данных v0.4
На текущий момент осилен еще один апдейт, который напрашивался по опыту использования стандартных фильтров Фотошопа—сохранять последние значения скрипта. Если в макете ряд однотипных слоев, которым нужна тень в стиле iOS, то запоминать и заново вводить числа в то время, как наши космические корабли бороздят просторы вселенной…не юзерфрендли как-то.
В случае попытки неправильного запуска/использования скрипта формируется несколько алертов с подсказками.
Заключение
Идеи для скрипта не закончились и напрашивается версия 0.5 с мультиселектом слоев, хотя на горизонте маячат проблемы с генерацией превью сразу для нескольких теней слоев. За выходом версий можно следить на странице проекта.
Обычно я занимаюсь иллюстрациями и полиграфией, отношение к дизайну интерфейсов и веб-дизайну имею чуть больше, чем никакое. Но брошенный самому себе вызов—написать данный скрипт, дал новый опыт и привнес разнообразие в рабочие будни. Как продукт бесплатный и полезный для определенного круга людей, скрипт помог немного попиарить себя в профессиональной среде (20k просмотров в паблике ВКонтакте Awdee, скачивания с Гитхаба из России, Украины, США и десятка других стран).
Донаты
Если вы скачали скрипт и он вам пригодился в работе, можете поддержать создание новых скриптов любой суммой через сервисы
Вопросы/предложения hi@sergosokin.ru, https://telegram.me/sergosokin
