Живые фоны и градиенты: как оживить фон сайта

Что такое живой фон простыми словами

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

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

И хорошая новость. Всё это делается парой приёмов - без тяжёлых картинок и анимаций во весь экран.

Зачем оживлять фон страницы

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

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

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

Из чего состоит живой фон: четыре слоя

Радиальное свечение - как лампа в углу

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

Весь секрет - в растушёвке. Резкое пятно бьёт как фонарик в лицо. А вот очень размытое, уходящее в ноль у краёв - читается как солнце за облаком. Сажай источник за пределы видимой области, в угол или чуть наружу, чтобы виден был только «хвост» свечения.

Mesh-градиент - слоистый фон из цветных пятен

Наложи несколько радиальных пятен разного цвета друг на друга - и они смешаются в плавные переливы. Это и есть mesh-градиент Mesh-градиент (mesh - сетка) - фон из нескольких цветных пятен, наложенных слоями. Их мягкие края перетекают друг в друга, давая ощущение живой, неровной поверхности вместо ровной полосы. , тот самый «сочный» фон с современных лендингов.

Тут вся хитрость - в количестве. Проверенный рабочий диапазон - примерно четыре-шесть пятен. Меньше - бедно. Заметно больше - картинка плывёт в грязь, а на слабых устройствах страница начинает подтормаживать. Бери два-три родственных цвета плюс один акцент. Не радугу.

Лёгкое движение - чтобы фон дышал, а не дёргался

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

Зерно и шум - щепотка фактуры

Гладкий градиент порой выглядит «пластиковым». А ещё идёт некрасивыми полосами Полосатость (banding) - видимые ступеньки-полосы на плавном градиенте. Возникают, когда оттенков не хватает на гладкий переход. Лёгкое зерно разбивает полосы и прячет их. там, где оттенков не хватило на плавный переход. Лекарство - зерно: лёгкий шум поверх фона, как плёночное напыление. Оно убивает цифровую стерильность и маскирует полосатость.

Доза решает всё. Зерно должно угадываться, а не бросаться в глаза. Видно шум с первого взгляда? Значит, его в разы больше, чем нужно. Кладётся он обычно тонким полупрозрачным слоем поверх градиента.

Как собрать живой фон по слоям: пример

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

База. Возьми не чистый чёрный, а тёплый тёмный оттенок - петрол, графит, глубокий синий. Чистый чёрный выглядит дёшево и плоско.
Свечение. Добавь одно мягкое радиальное пятно в верхний угол, цветом из акцентной палитры. Растушуй так, чтобы у противоположного края оно полностью растаяло в базе.
Второй источник (по желанию). Экран большой и пустой - кинь второе пятно в нижний угол, другого оттенка и слабее первого.
Зерно. Накинь поверх еле заметный слой шума. Цель - убрать пластиковость, а не сделать наждачку. Видно зерно сразу - убавь.
Движение (опционально). Заставь свечение очень медленно плыть, цикл в десятки секунд. И не забудь статичную версию для тех, кто отключил анимацию.

А вот тот же рецепт, но уже как бриф для нейронки - чтобы не объяснять «сделай красивее» на пальцах, а сразу назвать слои словами.

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

Частые ошибки в фонах и как их избежать

• Чистый чёрный или белый как база. Плоско и дёшево. Возьми чуть тёплый или чуть холодный оттенок - и сразу появляется «дороговизна».
• Свечение как прожектор. Слишком яркое и резкое пятно режет глаз. Растушёвывай сильнее и сажай источник в угол или за край экрана.
• Радуга вместо палитры. Пять контрастных цветов в одном градиенте - грязь на стыках. Бери родственные оттенки плюс один акцент.
• Слишком много пятен. Перебор со слоями - тормоза на слабых устройствах и визуальный шум. Держись в зоне четыре-шесть.
• Быстрая анимация. Движение за пару секунд раздражает и отвлекает от чтения. Замедляй до десятков секунд на цикл.
• Игнор режима «уменьшить движение». Для части людей анимация - это физически плохо. Всегда оставляй статичный запасной вариант.
• Зерно на максимум. Видно шум сразу - его кратно больше нужного. Он должен лишь угадываться.
• Живой фон под длинным текстом. Переливы и движение под абзацами статьи мешают читать. Под контентом фон делай тише, чем в герой-блоке.