Как сделать хорошие тени 🐝

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

Эй, хотел сказать тебе спасибо (и тебе тоже). Было приятно и неожиданно увидеть столь бурный отклик на эту тему на родном DTF. Продолжайте ставить лайки, мне понравилось.
Если хочется ещё статей — подписывайся🦔 И подумай про донат. Даю время до конца статьи.
Ян Корвин

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

По умолчанию во всяких редакторах типа Figma, XD, Sketch при создании тень тупо чёрная (#000). Но тень такого цвета далеко не всегда выглядит хорошо. Добавьте тени лёгкий оттенок и она станет выглядеть намного органичнее — даже в реальной жизни тени не чёрные.

Практически идентичные тени. Единственная разница — цвет.

Не важно, используете вы Figma, Sketch, XD или ещё что-то, совет универсальный:

Даже если взять стандартную тень и всего лишь увеличить blur и соответственно ему задать смещение, вы получите тень, которая выглядит намного приятнее.

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

Ещё один лайфхак (*distant trigger sounds*) - использовать несколько теней, наслаивая их друг на друга. Настраивать их, конечно, тяжелее, чем одну, но человечество придумало всякие генераторы как раз для этой цели.

Одинокая тень-одиночка на одинокой дороге. Одна.

Тут, естественно, тоже есть ограничения. Хотя тень слева и выглядит красиво, она получается очень длинная и в интерфейс в приложение, например, её не впихнёшь. Максимум — на какой-нибудь лендинг. Выглядит она как-то так:

box-shadow: 0px 2.07544px 2.21381px rgba(46, 60, 80, 0.0196802), 0px 4.98758px 5.32008px rgba(46, 60, 80, 0.0282725), 0px 9.39116px 10.0172px rgba(46, 60, 80, 0.035), 0px 16.7522px 17.869px rgba(46, 60, 80, 0.0417275), 0px 31.3332px 33.4221px rgba(46, 60, 80, 0.0503198), 0px 75px 80px rgba(46, 60, 80, 0.07);

Понятное дело, что для интерфейсов лучше использовать что-то более подходящее. Например, если не ошибаюсь, в Material тени состоят из трёх слоёв, во Fluent — из двух.

Да-да, есть тут небольшая путаница. В английском это — opacity, непрозрачность. Но в русском почему-то все поголовно говорят прозрачность, хотя параметр тот же самый. Он же альфа.

Ну да не суть. Просто не используйте для теней большие значения. Максимум, что вы можете себе позволить — это 25%, больше обычно выглядит плохо. По крайней мере с тёмными тенями. О цветных поговорим чуть ниже.

Цветные тени — плюс-минус новое веяние дизайна, и использовать их можно далеко не везде. Отличаются они обычно более высокой opacity (в среднем раза в два выше) по сравнению с их тёмными собратьями и, очевидно, цветом.

Довольно важная вещь, и так далеко по списку. *разочарованно цыкает*

Хотя никто не отрицает, что тень может использоваться чисто для декоративного эффекта — выделить какой-то элемент, например, обычно с их помощью передают подъём элементов (elevation). Если хочется что-то почитать про это — можно глянуть в документацию Material, там всё подробно расписано и даже показано.

Но смысл простой: элементы на экране находятся в псевдо-3d пространстве и с помощью теней показывается изменение их высоты.

Вот и конец статьи. Время пришло. Я ни к чему не принуждаю. Просто дружеское напоминание, что донатить можно как через систему DTF, так и на Я.Деньги.