Лучшие статьи категории «Дизайн»

Подписка

Длинные тени в дизайне

Сегодня мы поговорим об одной из новых тенденций в мире дизайна — длинных тенях. До недавнего времени увидеть такие тени можно было очень редко (особенно это касается веба), но с появлением новых направлений в дизайне длинные тени получили возможность передать всю красоту, наделенного ей, элемента в интерфейсы сайтов и мобильных приложений.

Что такое длинные тени?

Как не сложно догадаться, длинные тени — это тени, отходящие от объекта, намного дальше, нежели обычные. Изначально, этот эффект можно было увидеть только на фотографиях, где солнце было максимально близко к горизонту (как правило, во время рассвета или заката) и все объекты отбрасывали длинные тени. С помощью этого эффекта фотографы придавали снимку драматизм.

Дизайнеры очень долго обходили этот необычный эффект стороной т.к. область его применения была крайне узкой и зачастую нарисованная, например, иконка, редко вписывались во внешний облик сайтов или приложений. И мало бы что изменилось, если бы не появился плоский дизайн. Его бурное развитие дало положительный импульс для этого эффекта и возможность для применения в дизайне. Результаты не заставили себя долго ждать, эффект стал пользоваться большой любовью среди дизайнеров и, как следствие, стал новой тенденцией.

Главная особенность длинных теней — применение только для небольших объектов в плоском стиле. Как правило, такими объектами выступают иконки и кнопки (примеры отлично иллюстрируют причины такого выбора).

Для создания длинной тени нужно задать угол около 45 или 120 градусов (для выбора направления тени) зеркально отходящего от объекта. В качестве цвета выбирается однотонная гамма, хотя иногда на тени можно увидеть и небольшой градиент.

Длинные тени в дизайне
Длинные тени в дизайне

Заимствование из плоского дизайна

Т.к. длинная тень используется преимущественно на плоских конструкциях, то и принципы (особенности) дизайна берутся именно оттуда. Её можно даже считать одной из форм плоского дизайна. И вот почему: длинная тень основывается на простых формах и чистых линиях (как и flat-дизайн); используются яркие и динамичные цвета, причем цвет тени необязательно должен быть черным. Мы бы даже сказали, что он очень редко будет черным. Темно серым, темно синим, но не черным.

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

Длинные тени в дизайне
Длинные тени в дизайне
Длинные тени в дизайне
Длинные тени в дизайне
Длинные тени в дизайне
Длинные тени в дизайне
Длинные тени в дизайне
Длинные тени в дизайне
Длинные тени в дизайне
Длинные тени в дизайне
Длинные тени в дизайне
Длинные тени в дизайне
Длинные тени в дизайне
Длинные тени в дизайне
Длинные тени в дизайне
Длинные тени в дизайне
Длинные тени в дизайне
Длинные тени в дизайне

Найти эти и многие другие примеры для вдохновения вы всегда можете на Dribbble.

Категория: Дизайн Рубрики: , Автор: Илья Федотов (G+)


Комментарии (4)

Макс / 10 Сентябрь 2013 в 21:01

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

Илья Федотов / 11 Сентябрь 2013 в 21:24

Макс, отличный генератор, спасибо за дополнение.

Nastya / 13 Сентябрь 2013 в 18:09

И все же, мне кажется, мода на сей эффект пройдет очень быстро. Хотя мне нравится, не скрою )

Forex / 3 Октябрь 2013 в 21:06

Классно мне нравиться и даже кое-что новенькое, спасибо.

Добавить новый комментарий

* — поля обязательные для заполнения XHTML: Вы также можете использовать эти тэги: <a href="" title=""> <pre lang=""> <blockquote> Перейти наверх

Поиск

Популярные статьи

Комментарии

  • Павел Тимощенко: Аналогично скриню картинки для некоторых...
  • Зенков Андрей: Учитывая, что иконки служат для подсказки тем,...
  • Зенков Андрей: Дизайнер должен ответственно подойти к...
  • Оля: DizGraf, вот отличный русскоязычный бесплатный фотобанк.
  • V.V: В копилку еще один типограф Дениса Селезнёва на JavaScript.
  • Сергей: Спасибо за примеры инфографики. Для тех, кому нужны еще...
  • Андрей Зенков: Спасибо автору. Хорошая подборка. Аж стыдно за то,...
  • Адениум: Наука даром не дается — наука трудом берется....

Друзья

Нашли ошибку?

Если вы нашли грамматическую ошибку на сайте, выделите ее и нажмите сочетание клавиш Ctrl+Enter.

Система Orphus