{"id":2412,"title":"\u0423\u0433\u0430\u0434\u0430\u0439\u0442\u0435 \u0433\u043e\u0440\u043e\u0434\u0430 \u043f\u043e \u0437\u0432\u0443\u043a\u0443 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u044e\u0449\u0435\u0433\u043e\u0441\u044f \u043f\u0438\u0432\u0430 \u0438 \u043f\u0435\u043d\u0438\u044e \u043a\u0438\u0442\u043e\u0432","url":"\/redirect?component=advertising&id=2412&url=https:\/\/vc.ru\/special\/sound&placeBit=1&hash=1620c155cf544062859cfaabcc12f9dd73613708c43c381ba3dbf0828037edcd","isPaidAndBannersEnabled":false}
Офтоп
Ян Корвин

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

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

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

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

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

{ "author_name": "Ян Корвин", "author_type": "self", "tags": ["\u0442\u0440\u0443\u0434\u043e\u0432\u044b\u0435\u0431\u0443\u0434\u043d\u0438","\u0442\u0435\u043d\u0438","\u0434\u0438\u0437\u0430\u0439\u043d","ux","ui","000"], "comments": 63, "likes": 51, "favorites": 146, "is_advertisement": false, "subsite_label": "flood", "id": 175397, "is_wide": true, "is_ugc": true, "date": "Wed, 22 Jul 2020 09:45:29 +0300", "is_special": false }
0
63 комментария
Популярные
По порядку
Написать комментарий...

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

28

Ладно, ты меня уделал

2

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

6

Этим можно брать, и обмазываться  ред.

13

Я сделаль. 

14

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

2

Отлично вписался. ред.

19

Ну вписался и вписался

4
Православный историк
3

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

1

В глаза ебусь наверно но разница настолько минимальна что я ее порой не вижу

3
Простой Слава

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

5

7 летнее ноутбучное обосанное TN вместо экрана

6
Простой Слава
8

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

4

У меня тоже есть такая страничка из нулевых. Даже парочка. На моём монике выглядело збс, а я тут недавно её нашёл... уххх.... :D

0
Новый корабль

Покажешь?

0

В примере со слоеной темой разница и правда минимальная

1

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

Моё увожение за The IT Crowd 😊

5

Ура, хоть кто-то 😅

2

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

Это, конечно, не значит что делать стоит только так. Иногда правила имеет смысл нарушать. Но тогда нужно понимать зачем это делается. 

Можно еще попробовать применять практики из исскуства. Недавно тут была статья, что для создания определенного стиля художник делает тень "холодной", а свет "теплым". Это можно взять на вооружение. Но я бы сказал, что такой прием опять же ситуативный, так как нарушает общее правило. 

В целом правило простое: люди привыкли видеть натуральные цвета поэтому в общем случае интерфейсы с натруальными цветами воспринимается пользователем легче. (Читай избегайте, абсолютно черного, красного и т.д.)

2

Тень в реальном мире редко бывает просто черной, она обычно содержит в себе оттенок основного цвета обьекта. Такие тени смотрятся органично.

А если у нас тень от белого объекта, то что делать? Серый цвет применять или уходить в холодную/теплую зоны?

0

Если фон накотором лежит белый обьект имеет какой-то цвет, то можно отталкиватся от него. Потому что в реальном мире будет смешение цветов.

Можно и серый с прозрачностью, потому что прозрачность будет сама создавать смешение цветов. Но тогда есть шанс, что тень получется не очень приятная глазу, так как серый будет просто создавать эффект "выцветания".
В первом примере, в тертьем квадртике (который просто белый на белом) - там просто серая тень. Хотя опять же, тут стоит учитывать светимость цветов, потому что яркий цвет на белом фоне будет терятся. 

Можно так же посмотреть какие цвета у объекта и подложки и смешать их самому, но я думаю можно и без таких сложностей.  ред.

2

Главное правило - количество теней должно быть обратно пропорционально сложности приложения и количеству элементов в нем.

2

Хорошая мысль)

0

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

Canva)

0

GIMP Filter-> Drop Shadow (legacy)

0

New Layer -> Rectangle Select -> Bucket Fill -> Gaussian Blur

0
1
Организованный браслет
0

Это точно про Paint? Потому что в Windows 7 размытия нет

0
Организованный браслет

В Windows 7 размытия нет, потому на складах Microsoft размытия хранилось не так уж и много, а поскольку Фил человек прозорливый, то он начал копить размытие ещё с пастгена с заделом на будущее, поэтому, например, на Xbox 360 было принято решение лишнее размытие не завозить, чтобы подкопить на следующие поколения.

0
1

Ваще изи :D 
Правда без размытия, но ты его и не просил)

0

А сложные фигуры?

0

Неожиданно  интересный материал, спасибо.

1

Я бы хотел гайд как перестать читать ыур вместо blur.

1
Странный волк

что ты наделал....

0

Спиздил материал у Лебедева и доволен. Молодец чо.  https://www.artlebedev.ru/backstage/icon-reflections/

–5

Я писал его сам. Если там есть пересечения - я не удивлюсь, потому что я говорю об основных и довольно очевидных вещах.

Upd: посмотрел. При чем тут отражения в иконках и мой материал? ред.

2

Сморозил херню и доволен. Молодец чо

0

Автор, а у вас есть портфолио по ui/ux? Там профиль на бехансе или личный сайт? Интересно посмотреть.

0

Есть на дрибббле, но я не уверен что я им очень доволен (:

0

Пиздец жиза, при том что у меня даже работа за деньги есть, но я ее не выкладываю, чот стыдно

2

Самые клёвые тенюшки делаются не стандартным эффектом тени а блюром объекта на слой ниже который делается меньше. 

0

В фигме (вот это реально единственный её минус, лол) нет просто параметра inset как в css, поэтому тень нельзя сделать меньше объекта. А так эффект тот же был, не?

0

Самый простой костыль закинуть объект поменьше под слой и сделать тень от него, тогда будет то-же самое, я просто Layer Blur на квадрат меньшего размера наложил.

1

Это да, я так и делаю (:

0

Ещё если ну очень хочется белый квадрат на белом фоне не обязательно делать чернильную тень чтобы он выделялся, достаточно сделать лёгкую обводку и не борщить с тенью.

1

Да, тоже хороший вариант - я сам до этого дошёл со временем. Спасибо, годно) ред.

0

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

0

В Cкетче можно отрицательный Spread делать для тени, чтобы добиться этого эффекта. Очень не хватает этого в других редакторах.

1

Не прошло и года как появился "Spread" на тени в фигме =D

1

Ну вообще прошло. Там прошло 958, что ли, дней, с тех пор как у них впервые про это спросили) ред.

0

@Ян Корвин про тени я в целом знал, но меня давно мучает вопрос, как делать такие красивые границы. У меня они настолько дефолтными выходили, что я просто отказался от них в свое время. Или это тоже тень и границы нет? ред.

0

Это тоже тень, просто очень мелкая. Если скажешь с какого скрина, смогу сказать какой у неё сетап)

0
Странный волк

Подскажите пожалуйста с гифки тени, где квадраты "поднимаются"

0

CSS
box-shadow: 0px 1.6px 3.6px rgba(46, 60, 80, 0.13), 0px 0.3px 0.9px rgba(46, 60, 80, 0.1);

1

(отвечал errday villain) Справедливости ради, цвет тени в реальном мире зависит не от цвета объета, преграждающего свет, а от окружающего света. На улице в солнечный день оно будет голубоватым, а в темной комнате его не будет, тень будет черной. Но в непосредственной близости с объектом может быть свет, отраженный от самого этого объекта, но это именно свет, он делает тень светлее. ред.

0

Кстати, если тень на цветах, то черный очень грязно смотрится. Лучше брать тень цветную: немного "темнее" по тональности. Например: фон - желтый, тень - оранжевая или красная; фон - голубой, тень - синяя.

0
Читать все 63 комментария
null