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

Казалось бы, что о фоне для страниц сайта рассказано почти все, созданы огромные библиотеки подборок файлов текстур и интересных образцов, написано множество книг и статей в интернете. Но каждый раз перед мастером (или учеником в сфере веб-дизайна) встает вопрос: «Боже мой, что же мне выбрать-то? Фотографию или видео, а может артик красивый, или нет, использую фотографию с фильтрами и эффектами». А сам заказчик при этом бывает краток и лаконичен: «Что-нибудь простенькое и уникальное, естественно, ну, вы понимаете…». И получается, что в действительности выбор фона не такая простая задача. Иногда даже приходится часами сидеть и перебирать оттенки, так как то ядовито-ярко получается, то – пастельно слишком, то – «уныленько».

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

Именно поэтому основное наше внимание мы уделим вопросам выбора подходящего фона и вопросам необходимости в Photoshop.

Цвет или градиент

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

Но все идеи разделяются на две школы, когда речь заходит о градиентах: использование цветного оттенка с переходом в белый/черный или смешивание двух разноцветных. И оба варианта отлично используются в мире, хотя градиент с переходом в белое или черное намного проще применять и создавать. И это несмотря на тенденции, моду и стиль.

Проекты 90yearsofdesignphilips, dowjones, greenname, apple, nvidia, packwire – яркие тому примеры. Некоторые проекты создавались недавно и стали лауреатами WebbyAwards, некоторые были созданы давно и до сих пор не изменили своего дизайна, ибо он удобен и классичен.

Легкий узор

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

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

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

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

This is Teixido представляет собой сайт дизайнерской студии, в основе которого текстурированный фон серого оттенка. При этом весь дизайн создан плоским, строгим, но не без изящества, стилистики и простой красоты.

Сайты-победители Сss Design Awards paybase, chekotin, World Architecture Week 2016, UNIEL ltd. Corporate Site, Pixel имеют фоном на главной странице или на всех страницах проекта текстуру. Не арт и не фотография, но небольшой узор. Иногда этот узор явный и яркий, и используется для секций, а иногда это едва заметный, сливающийся с контентом.

Фото и видео

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

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

Представим только некоторые особо яркие  красивые проекты, что используют видео и фотографию в качестве фона. Hotel Tann, INDASTRO, Boorbool, Honders/Alting, lavva . digital studio, tourdargent.

Иллюстрация

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

Большинство веб-дизайнеров, использующих иллюстрацию, создают, как правило, либо узкотематические проекты, либо авторские работы. И поэтому найти в интернет-библиотеках подборки иллюстрированных уникальных элементов (иконок, полосок, кнопочек и пр.) бывает очень сложно. Потому-то частенько можно увидеть повторяющиеся картиночки, образы.

Иллюстрация, арт, художественные эффекты – помогают создать определенную атмосферность проекта. Например, РБК в Сила граната использовали акварельную иллюстрацию и тем самым передали всю сочность фрукта, его вкус, терпкость. Фотографии с этим не справились бы в полном объеме.

Threecents решились на иллюстрацию вкупе с анимацией и рассказали о содовой воде и пузырьках. Наглядно, просто и понятно.

Проекты 2016 Trends in the watch industry, Mi Banxico (о банках, вкладах и пр.), Eurovet и многие другие, например, из наших прошлых материалов, обладают разной по стилистике иллюстрацией. И сюда же относится и использование 3D и объемных объектов.

Удобный инструментарий

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

  • Ultimate CSS Gradient Generator – предлагается «поиграть» с цветами и настроить градиент. При этом можно сразу получить и CSS код, что генерируется «на лету», задать размер и многое другое.
  • Subtle Patterns – подборка из огромного числа легких и тонких узоров, которые можно загрузить бесплатно и отредактировать цветность по желанию самостоятельно.
  • Zen BG – интересный проект, позволяющий выбрать текстуру (клик по первый и откроется список), настроить градиент, плотность рисунка текстуры, применить его к данной странице и посмотреть, как это выглядит, выбрать цвета, четкость/замыленность текстуры и затем получившийся вариант сохранить к себе компьютер и использовать в дальнейшем.

Примеры текстур в Photoshop

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

Вариант 1

Создаем небольшой хост, обычно 100х100, но для наглядности мы взяли 600х600, залили его грязно-розовым цветом и наложили Шум с размытием по Гауссу.

Затем переходим в Галерею фильтров и выбираем Акцент на краях. Настройки же – дело вкуса, и каждое изменение одного из трех параметров приведет к совершенно разным узорам.

 В принципе, узор у нас готов, но если его размножить, то на стыке будут видны границы. Этого-то как раз и не должно быть. Но решается просто. Открываем Фильтр ->Другое -> Сдвиг и устанавливаем параметры сдвига в половину вашей ширины и высоты. То есть, у нас 600х600, мы устанавливаем 300х300, если 100рх, то 50рх. Применяем и видим, что границы сдвинулись и стали хорошо видны. Если размножить этот узор, то везде будут опять-таки видны границы.

Выбираем Восстанавливающую кисть, зажимаем Alt+лкм для выбора кусочка и затем «затираем» ею границы. Можно использовать Точечную восстанавливающую кисть и аналогично (без alt’а) аккуратно заштриховать границы.

Теперь осталось сохранить узор (Редактирование) и выбрать его потом в меню Заливки для нового документа.

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

Вариант 2

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

Создаем холст 600х600 и заливаем голубым цветом. Затем выбираем фигуру Линия (2px) и рисуем крестик.

Объединяем два слоя с фигурами, выделяем слой-фигуру Ctrl+T и, зажимая Alt, немного уменьшаем крестик в масштабе. Растрируем слой с фигурой и создадим дубликат слоя (Ctrl+J). С помощью Редактирование - > Коррекция изменим яркость фигуры и насыщение. Иными словами, чтобы она стала почти белой.

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

Перейдите на цветной слой и добавите 1% Шума из меню фильтров. Уменьшите изображение до 50 px, например. При необходимости может потребоваться подрегулировать цвета, подвигать слои. Иными словами – творите и дайте волю фантазии. Сохраните узор.

 

Теперь можно выбрать нужный холст или объект, выбрать заливку и нанести узор, добавить градиент, освещение и прочие украшательства. Получилось своеобразная стеганая объемность, для которой уже не требуется регулировать Сдвиг краев. Аналогичное как раз и использовалось в проекте dowjones.

 

Выводы

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

Ключом же к эффективности выбора и создания фона служит общая концепция проекта. Если создается сайт ювелирной тематики, то вполне могут быть и многоугольники, объемные фигуры кристаллов, могут быть растительные элементы или едва заметные фильтры шума, мазков сухой кистью и прочее. Например, colly используют клеточку, staffanstorp шум на фоне (да-да, он есть), robot-or-not применили фоном прозрачную иллюстрацию. Фон должен быть частью всего проекта, а не просто задний план, на котором помещены секции и элементы сайта (иконки, текст и т.д.). О многих эффектах (но еще не обо всех интересных) мы уже рассказывали ранее, поэтому в нашем блоге без труда найдется нужное.

Помните, что фон – не первое, что видит посетитель, но от этого не становится вторичным и не важным.