Размытый фон в веб-дизайне

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

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

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

Где?

У нас на вооружении уже есть достаточное количество трендов, которые мы используем в дизайне. Так, откуда же появилась идея размытого фона? Поначалу эта технология использовалась в кино и фотографии. Позже её начали использовать в СМИ и печатном дизайне — газетах, журналах, плакатах, листовках. Вы наверняка ранее уже видели эти приемы на печатных носителях. Однако, в веб-дизайне данный прием использовался крайне редко. Так же, дизайнеры часто использовали этот прием для оформления своих портфолио и домашних страниц (в основном, с использованием Flash). Вероятно, ранее размытые фоны не использовались в силу технических ограничений, накладываемых браузерами, для которых делался дизайн. Большие изображения имеют большой объем, их сложно растянуть по размеру экрана в т.ч. без потери качества или создать красивую бесшовную текстуру. Как следствие, веб-дизайнеры и верстальщики старались (и до сих пор стараются) избегать данной техники.

Почему?

Посмотрите на десяток современных сайтов — повсеместно используется масса резких графических образов, шрифтов, форм, линий, которые так или иначе заставляют ваш взгляд невольно изучать и воспринимать тонны ненужной информации. Внимание распыляется на множество мелочей, даже таких как фоновые изображения. Если же вы делаете страницу продаж, для вас это может стать катастрофой и снижением конверсии до 30-50%. А всё потому, что вы не контролируете внимание посетителя. Он изучает фон вашей страницы, смотрит на логотип, множество деталек оформления и всё это вместо того, чтобы изучать тот продукт, который вы хотите ему предложить. 99% страниц в интернете перегружены информацией (не только текстовой, но и графической).

Как?

Есть масса способов создания размытого фона. Самый простой — это использовать фильтр размытия (Filter -> Blur -> Gaussian Blur) в Adobe Photoshop. Открываем большую фотографию и размываем. Более того, вы будете приятно удивлены, что размер размытой фотографии в формате JPEG на самом деле очень маленький. Картинка размером 4000 x 2000 px может иметь размер всего 20-30 Kb! Это является особенностью формата JPEG, который отлично оптимизирует и сжимает плавные градиенты, которые образуются при размытии фотографии.

Можно размыть не весь фон, а только его края или определенные участки. Это зависит от ситуации и расположения элементов страницы. Частичное размытие так же позволяет добиться интересных эффектов. Есть несколько способов частичного размытия. Можно использовать выделение области изображения в фотошопе, потом использовать размытие краев выделения (Select -> Modify -> Feather) и применить фильтр размытия (Filter -> Blur -> Gaussian Blur). Другой вариант, если вы опытный дизайнер — использовать быструю маску (Quick Mask), которая вызывается нажатием "Q". В режиме быстрой маски вы можете отметить нужные области с помощью обычной кисти (Brush). Потом выходите из режима быстрой маски (повторным нажатием "Q") и получаете нужное выделение. Возможно, придется его инвертировать (Selecti -> Inverse).

Примеры

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

Бесплатные размытые фоны и текстуры

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

Бесплатный онлайн клипарт размытых фонов и текстур Бесплатный онлайн клипарт размытых фонов и текстур Бесплатный онлайн клипарт размытых фонов и текстур Бесплатный онлайн клипарт размытых фонов и текстур Бесплатный онлайн клипарт размытых фонов и текстур Бесплатный онлайн клипарт размытых фонов и текстур

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

Желаю удачи и креативного дизайна!

Вольный перевод статьи

Поделитесь с друзьями:



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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>