реклама
разместить

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

Редкий современный дизайн обходится совсем без теней. Большинство популярных дизайн-систем типа 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, так и на Я.Деньги.

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

Если понравилось — не забывайте ставить классы и подписывайтесь на мой блог и мой канал в одноклассниках. Всем чмоки в этом чятике.

Если есть пожелания/предложения о чём написать или любой другой фидбек — прошу в комментарии!

И ещё у меня есть пара каналов в телеге, вдруг вам будет интересно:

7070
реклама
разместить
63 комментария

фикс (о котором никто не просил)

28

Ещё градиентами обмазаться, ага.

6

Комментарий недоступен

14

Не ври, это сделал Артемий Лебедев, это же новый логотип для завода по изготовлению мороженного. Ты просто взял и перевернул мороженку! ФУ!

2

Найс. Можно ещё по вертикали вниз немного сдвинуть и норм будет

1
Раскрывать всегда
Реджи Фис-Эме: «Должен признать, Astro Bot почти превзошла Nintendo в её собственном жанре»

Почти.

Реджи Фис-Эме: «Должен признать, Astro Bot почти превзошла Nintendo в её собственном жанре»
7272
2828
77
33
11
11
11
Отличный байт на срач, но нет. Это даже близко не уровень нинтендо.
реклама
разместить
Оказывается Интерстеллар один из самых низкооцененных фильмов Нолана, не понимаю.
Оказывается Интерстеллар один из самых низкооцененных фильмов Нолана, не понимаю.

Объективно он должен быть на месте унылейшего Оппенгеймера, но какие-то критики заговнили видимо, не помню чет тряски на счёт него. Ваш любимый фильм Нолана кстати?

8484
1111
22
22
22
11
Любимый Inception, потому что он идеально выстроен в собственной системе правил, и может позволить себе быть настолько нелогичным, насколько это нужно. Интерстеллар собирается быть очень логичным и научным, но при этом чем дольше о нём думаешь, тем глупее всё происходящее там. Зато красиво.
🥲начало хорошее.
179179
3737
2020
1919
22
22
22
Еще 3
Puss of Persia
Авторы Celeste отменили метроидванию Earthblade

Одной из причин послужил конфликт в команде.

Авторы Celeste отменили метроидванию Earthblade
4646
77
77
33
11
11
Я не удивлен, что в команде, сделавшей игру про транса, начались конфликты и отмены, все идет свои чередом.
Дежурное напоминание о том, что Final Fantasy 7 Rebirth выходит на ПК уже СЕГОДНЯ. Самая важная инфа по игре:
  • Игру можно без танцев с бубнами приобрести в EGS по скидке в 30% за 3 499,30 ₽
  • Оценки Final Fantasy VII Rebirth для ПК — 90 баллов из 100 на Metacritic
  • На «низких» и «средних» настройках графики ПК с видеокартой RTX 3060 Ti в среднем обеспечивает более 60-70 fps, а на «высоких» — 57 fps.
  • Денувы нет
  • Это прямой сиквел Final Fantasy 7 Remake 2021 года
  • Загр…
7373
4545
1414
22
11
11
11
Че за кринж пост уровня переустановки системы для киберпанка
Дружба и любовь 🦄
Дружба и любовь 🦄
138138
4949
2020
22
11
11
11
Пора уже перестать такое смотреть
5 комедийных сериалов с высокими оценками, которые вы не видели (мои любимые)

Каждый раз когда возникает такая тема, в комментариях начинается жара. Да, дружочек, давай, посоветуй мне сериал Друзья, Клинику или ТБВ. Так что я взял 5 сериалов, которые обожаю, регулярно пересматриваю и которые ни разу не видел в советах комментаторов.

5 комедийных сериалов с высокими оценками, которые вы не видели (мои любимые)
123123
88
66
22
11
11
Dragon Age: The Veilguard не оправдала ожиданий EA — 1,5 миллиона игроков за дебютный квартал

Это на 50% ниже прогнозов компании.

Dragon Age: The Veilguard не оправдала ожиданий EA — 1,5 миллиона игроков за дебютный квартал
620620
5353
1919
1717
1010
66
Еще 3
[]