Создание фона для сайта: Как сделать фон для сайта?

Содержание

Дизайн сайтов. Оформление фона сайта

При разработке дизайна для страниц сайтов очень важно уделить внимание оформлению фона всей страницы или ее элементов. Традиционным считается обычный белый фон – на нем легче воспринимать текст сайта. Также не мешают восприятию текстовой информации сайта и оттенки белого – бежевый, кремовый. Однако все чаще сайты с простым белым фоном кажутся заказчикам слишком скучными и однообразными. Тогда возникает потребность создать сайт с фоном другого цвета или с фоновым рисунком. Что нужно учесть при использовании фонового рисунка или цветного фона в дизайне Вашего сайта?

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

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

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

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

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

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

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

Подводя итог всему вышесказанному, можно сделать несколько выводов:

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

Создание фонов — Руководство Figma

Добавить в избранное

Создание фонов в Figma

Руководство Figma

Инструмент дизайна Figma