Редкий современный дизайн обходится совсем без теней. Большинство популярных дизайн-систем типа 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, так и на Я.Деньги.money.yandex.ruЯндекс.ДеньгиЕсли понравилось — не забывайте ставить классы и подписывайтесь на мой блог и мой канал в одноклассниках. Всем чмоки в этом чятике.dtf.ruЯн Корвин – Блог на DTFЕсли есть пожелания/предложения о чём написать или любой другой фидбек — прошу в комментарии!#дизайн #ui #ux #тени И ещё у меня есть пара каналов в телеге, вдруг вам будет интересно:Мой УЙ. Всякое про дизайн.#трудовыебудни техподдержки. Изредка пощу (постю? постирую?) что-то про работу.
Объективно он должен быть на месте унылейшего Оппенгеймера, но какие-то критики заговнили видимо, не помню чет тряски на счёт него. Ваш любимый фильм Нолана кстати?
Игру можно без танцев с бубнами приобрести в 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 годаЗагр…
Каждый раз когда возникает такая тема, в комментариях начинается жара. Да, дружочек, давай, посоветуй мне сериал Друзья, Клинику или ТБВ. Так что я взял 5 сериалов, которые обожаю, регулярно пересматриваю и которые ни разу не видел в советах комментаторов.
фикс (о котором никто не просил)
Ещё градиентами обмазаться, ага.
Комментарий недоступен
Не ври, это сделал Артемий Лебедев, это же новый логотип для завода по изготовлению мороженного. Ты просто взял и перевернул мороженку! ФУ!
Найс. Можно ещё по вертикали вниз немного сдвинуть и норм будет