Использование размытого фона в веб-дизайне

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

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

Где

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

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

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

Почему

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

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

Как

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

Если вы являетесь поклонником программирования, то, безусловно, есть способ создать эффект размытия фона при наведении на него мыши. Это, однако, может быть не самым оптимальным способом создания размытого фона, но это, безусловно, придаст вашему сайту крутой эффект. Если вы заинтересованы в таком кодировании, tympanus.net предлагает код, который делает почти то же самое, что упоминалось выше, но вместо этого фон размывается, когда вы наводите курсор мыши на объект, а не на сам фон.

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

Полностью размытый фон можно легко создать, открыв выбранное изображение в Photoshop и добавив к нему фильтр Gaussian Blur. Величина радиуса или, другими словами, насколько сильное размытие вы хотите, будет зависеть от ваших личных предпочтений. Использование радиуса размытия где-то между 5px-10px должно быть достаточным, но опять же, это все личные предпочтения.

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

Хотите создать свой собственный дизайн с размытым фоном? Вот некоторые вещи, о которых вы должны подумать, прежде чем приступить к своему проекту.

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

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

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

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

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

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