Главная > Web-дизайн > Оживите ваши мобильные дизайны световыми эффектами

Оживите ваши мобильные дизайны световыми эффектами


30 августа 2012, 13:00. Разместил: Design FactoRy
Графические дизайны сдабриваются световыми эффектами уже долгие годы. Это отличный способ сделать обыденный дизайн интереснее, реалистичнее или абстрактнее, либо даже вдохнуть в него новую жизнь. Некоторые дизайнеры считают световые эффекты не более чем украшениями или даже слабой попыткой подправить неудачный дизайн. Однако, в умелых руках световые эффекты действительно способны полностью преобразить как дизайн, так и пользовательскую среду, в том числе, мобильного веб-сайта.

Сконструировать отменный дизайн, однако, непросто. Чтобы он получился внутренне содержательным и приятным внешне, придётся учесть массу нюансов дизайна, перебрать множество разнообразных элементов, и всё ради двухмерной картинки в единой плоскости. Разработка дизайнов для мобильных приложений ещё сложнее — нельзя забывать об особенностях их использования. Успех построения мобильного дизайна в огромной степени определяется достигнутым при этом уровнем удобства пользователя, так что, помимо практичного и понятного интерфейса, вам обязательно придётся продумать и структуру пользовательской среды. Достаточно простой способ повышения презентабельности вашего мобильного дизайна состоит в украшении его световыми эффектами.

Дыхание жизни

Итак, вы спроектировали ваш действительно роскошный дизайн; в нём всего в меру, бесподобная цветовая схема, шикарная компоновка и оптимально выровненный шрифт. И всё же, смотрится он скучновато, да и само ваше приложение кажется несколько безликим. Вдохните в ваш дизайн жизнь, придайте ему собственное настроение посредством наложения световых эффектов в виде лёгких (или, наоборот, мощных) акцентов.

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

* Реалистичность
* Размах
* Настроение
* Энергетику
* Своеобразие

Классификация световых эффектов

Хотите - верьте, хотите - нет, но в вашем распоряжении множество световых эффектов. Меня нельзя назвать фотографом даже с натяжкой. Я и со шкалой настройки-то моей простенькой цифровой камеры не умею обращаться, так что, следующие мои высказывания, наверное, выдадут мою слабую осведомлённость в данном вопросе. И всё же, в фотографии применяется всего штук восемь основных световых эффектов для кадрирования, подсветки или просто повышения отчётливости изображения.

* Рассеянный свет
* Контрастный свет
* Разрежённый свет
* Искусственный свет
* Контровый свет
* Световое пятно
* "Нимб"
* Направленный свет (боковой)

В графическом дизайне, например, при проектировании интерфейсов и макетов страниц, а также мобильных дизайнов мы не пользуемся всем ассортиментом световых эффектов, но давайте соберём из них, как из деталей конструктора, следующие шесть типовых вариантов подсветки:

* "Нимб" и подсветка для красоты
* Собственное свечение объекта
* Тени
* Контровый свет
* Мягкий свет
* Контрастное освещение

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

"Нимб" и подсветка для красоты

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

Этот световой эффект очень востребован в графическом проектировании для мобильных устройств и даже в веб-дизайне – пожалуй, он наиболее популярен. Действительно яркий пример отчётливого "нимба" в мобильном дизайне - обработанное изображение, помещаемое iOS на вашу иконку... Я по-свойски называю его "слюнявчиком". Вот ещё несколько примеров "нимба" и подсветки для красоты в веб-дизайне для мобильных устройств:

Мобильный дизайнМобильный дизайн
Мобильный дизайнМобильный дизайн
Мобильный дизайнМобильный дизайн
Мобильный дизайнМобильный дизайн
Мобильный дизайнМобильный дизайн

Контровый свет

Что такое контровый свет, в общем-то, ясно из названия: это свет из источника позади объекта. Контровое освещение красиво очерчивает силуэт объекта и даже подчёркивает мелкие детали. Контровый свет смягчает края, контуры которых проступают резче или мягче в зависимости от контрастности и яркости освещения позади объекта – чем ярче свет, тем мягче края.

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

Мобильный дизайнМобильный дизайн
Мобильный дизайнМобильный дизайн

Свечение объекта

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

Можно слегка размыть контуры, применить продольные или лучевые наклонные скаты, либо даже неровный произвольный скат, а то и смазать изображение. Естественный эффект свечения достигается также за счёт контрастного цветного фона. Красиво светиться будет и яркоокрашенный объект с нерезким контуром на тёмном или совсем чёрном фоне. Приятное слабое рассеянное свечение можно наложить поверх всей "обёртки" вашего приложения - в качестве лёгкого дополнительного штриха. Вот несколько мобильных веб-сайтов, удачно украшенных световым эффектом свечения.

Мобильный дизайнМобильный дизайн
Мобильный дизайнМобильный дизайн
Мобильный дизайнМобильный дизайн
Мобильный дизайнМобильный дизайн

Мягкий свет

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

В мобильных дизайнах эффект мягкого света достигается за счёт использования монохромной или аналогической цветовой схемы, либо цветовой схемы с очень слабой контрастностью. Кроме того, мягкость света можно имитировать плавностью совмещения контуров элементов, отказом от резких очертаний, границ и штрихов. Просто стремитесь приглушить контрастность изображения, и вы найдёте для этого подходящий способ. Вот пара отличных примеров применения эффекта мягкого света в дизайнах мобильных веб-сайтов.

Мобильный дизайнМобильный дизайн
Мобильный дизайнМобильный дизайн
Мобильный дизайнМобильный дизайн
Мобильный дизайнМобильный дизайн
Мобильный дизайнМобильный дизайн

Контрастное освещение

Забудьте всё, что было мной сказано о снижении контрастности. Если вам нужна броская, выпуклая картинка, ищите способ поднять её контрастность выше, выше и выше. Контрастный свет должен падать прямо на объект. Он создаёт резкий перепад между яркими светлыми и тёмными теневыми участками. Достичь эффекта контрастного освещения достаточно легко, выбрав в качестве цветовой схемы набор дополнительных цветов, углубив тени и ещё более высветлив гладкие и блестящие детали.

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

Мобильный дизайнМобильный дизайн
Мобильный дизайнМобильный дизайн

Тени

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

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

Мобильный дизайнМобильный дизайн
Мобильный дизайнМобильный дизайн
Мобильный дизайнМобильный дизайн
Мобильный дизайнМобильный дизайн

Не бойтесь пробовать

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