Простое создание тени в стиле iOS 10 в Фотошоп

В iOS 10 в 2016 году одним из визуальных новшеств стала размытая тень под обложками альбомов в приложении «Музыка», генерируемая из этих обложек. Такие тени сейчас повсеместно встречаются не только в интерфейсах, но и в дизайне сайтов.

Воспроизвести такой эффект в ФШ просто:

  • создать дубликат слоя;
  • на свой вкус применить фильтр размытия;
  • уменьшить масштаб;
  • слегка сдвинуть по вертикали;
  • в конце изменить режим смешивания слоя для наложения на фон.

В свое время в блоге Инвижн был опубликован видеоурок для Скетча и год спустя продуктовый дизайнер Олег Фролов создал бесплатный плагин iShadow, автоматизирующий создание таких теней. Это и вдохновило меня создать бесплатный аналог для Фотошопа.

Скрипт в обзоре на Ютюб канале «Блог фрилансера. Веб-дизайн»

Ниже небольшая история создания проекта.

Первый подход

Джаваскрипт для меня почти дремучий лес (хотя был первый опыт создания скрипта для Иллюстратора), но есть объемные гайды по скриптингу для Фотошопа и самое главное — Гугл. В первом подходе при реализации скрипта нужно выполнение простых функций в JS:

  • Duplicate (слой тени помещается вниз и отдельно к имени добавляется префикс «_shadow»);
  • Translate (смещение по оси Y на заданное количество px);
  • Resize (масштабирование слоя пропорционально в %);
  • applyGaussianBlur (размытие, как и сдвиг задается в px);

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

Все вводится с клавиатуры, результат неизвестен до нажатия OK

В результате нажатия OK создается тень с наложенным черным цветом через Layer Effects → Color Overlay (Opacity 15%), этот трюк был использован в видео по Скетчу от Инвижн. И как писал Илья Бирман в своем Телеграмм-канале:

«Тень должна быть или темнее того, что ее отбрасывает или светлее. Иначе получается не тень, а размазня»

Настройки добавленного к слою тени оверлея можно подкрутить самим.

Доработки v0.2

Отсутствие превью при работе со скриптом весьма некошерная штука. Думал по началу, что расширить функционал раз плюнуть. Тут всплывает проблема масштаба Эдоуб: смещение слоя для превью можно делать сколько угодно перед нажатием OK, но масштаб и размытие операции деформирующие слой и повторный вызов этих функций при изменении значений в полях применится к уже уменьшенному и размытому слою. Пришлось бороться с проблемой в лоб — на каждое изменение значений в полях под капотом скрипта происходит откат к сохраненной точке в панели Истории ФШ и повторное выполнение трех базовых функций. При этом Фотошоп не торопится показать новое превью и приходится принудительно обновлять интерфейс, что заметно для глаз.

Чтобы не лицезреть обновление окон каждый раз, превью временно можно отключить

Доработки v0.3

Идеи нарастают, как снежный ком, как и строки кода в скрипте. Для удобства в диалоговое окно добавляю слайдеры, с ними сразу появляется желание поиграться с вариантами тени. JS код становится становится все веселей: слайдеры и поля передают друг другу значения на лету, превью начинают генерироваться на 6 возможных способов изменения чисел + 7 чекбокс превью.

Времени на проект уходит все больше, но и результат все больше радует глаз

Сохранение данных v0.4

На текущий момент осилен еще один апдейт, который напрашивался по опыту использования стандартных фильтров Фотошопа — сохранять последние значения скрипта. Если в макете ряд однотипных слоев, которым нужна тень в стиле iOS, то запоминать и заново вводить числа в то время, как наши космические корабли бороздят просторы вселенной…не юзерфрендли как-то.

При первом запуске скрипта значения по умолчанию 0–100–0, далее пользовательские

В случае попытки неправильного запуска/использования скрипта формируется несколько алертов с подсказками.

Заключение

Идеи для скрипта не закончились и напрашивается версия 0.5 с мультиселектом слоев, хотя на горизонте маячат проблемы с генерацией превью сразу для нескольких теней слоев. За выходом версий можно следить на Гитхабе.

Обычно я занимаюсь иллюстрациями и полиграфией, отношение к дизайну интерфейсов и веб-дизайну имею чуть больше, чем никакое. Но брошенный самому себе вызов—написать данный скрипт, дал новый опыт и привнес разнообразие в рабочие будни. Как продукт бесплатный и полезный для определенного круга людей, скрипт помог немного попиарить себя в профессиональной среде (20k просмотров в паблике ВКонтакте Awdee, скачивания с Гитхаба из России, Украины, США и десятка других стран).

Если вы скачали скрипт и он вам пригодился в работе, можете выразить благодарность в виде символичной суммы на Альфа Банк / Яндекс.Деньги мне на печеньки или поделиться ссылкой с друзьями-дизайнерами.