Создание фона для сайта

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

 

Бесплатные средства создания фоновых изображений

 

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

 

Noise Texture Generator

 

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

 

Repper Patterns

 

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

 

Colour Lovers

 

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

 

Texture Generator

 

По своему функционалу — аналог Noise Texture Generator, с которого начат настоящий обзор, но немного более продвинутого уровня. Имеется возможность выбрать тип текстуры, задать различное расположение внутренних блоков и уровни размытости, зернистости, шероховатости и всего того, что нужно для получения оригинального изображения.

 

Trianglify Generator

 

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

 

Используем HTML и CSS

 

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

 

Для этого нужно использовать стили, представляющие собой описание элементов оформления всех объектов страницы, понятное каждому браузеру. В качестве атрибута стиль может быть прописан для любого тега. Существует и возможность описать внешний вид с помощью CSS (Cascading Style Sheets), которую и используют профессиональные дизайнеры. Тогда коды стилей должны находиться между тегами <style type=»text/css»> </style>, что помещаются внутрь тега <head> </head>, или в отдельном файле, а он указывается в секции метатегов любой страницы.

 

В качестве фона может использоваться цвет или картинка, в том числе и с текстурами. Самый простой вариант — задать атрибут style с нужным свойством background-color тегу <body>. На практике это выглядит так:

 

<body style=»background-color: #000000″>.

 

В таком случае цвет страницы изменится с цвета по умолчанию на чёрный. Существует и более простой вариант изменения стиля < body bgcolor=»#000000″>. Все браузеры поймут, что bgcolor — это атрибут стиля. Вместо RGB кода «#000000″ можно использовать ключевые слова:

 

<body style=»background-color: black»> или <body bgcolor=»black»>.

 

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

 

<body background=»my-image.jpg»>;

<body style=»background-image: url(my-image.jpg)»>.

 

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

 

Обычно при создании сайта картинка на фон берётся маленькая, с текстурой. Визуальное клонирование таких вполне логично. Посетители сайта воспринимают его не как повторение одной картинки, а именно в качестве фона. Способом повторения можно управлять. Для этого существует свойство background-repeat, которому можно задавать значения:

 

  • repeat-x – клонирование изображения по горизонтали;
  • repeat-y – по вертикали;
  • repeat – клонировать во все стороны;
  • no-repeat – клонирование запрещено.

 

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

 

Фон можно «заморозить» по отношению к прокрутке. Тогда контент сайта будет проплывать над ним. Таким образом добиваются оригинального визуального эффекта или используют фоновое изображение в качестве логотипа сайта. Для этого нужно прописать следующий код:

 

<body style=»background-image: url(my-image.jpg); background-repeat: no-repeat; background-position: top center; background-attachment: fixed»>.

 

Заморозка относительно прокрутки достигается с помощью свойства background-attachment: fixed, а  background-position: top center указывает на необходимость размещения фоновой картинки вверху и по центру.

 

Но всё это относится к использованию атрибута style внутри тега <body>. А как при создании сайта сделать фон с помощью синтаксиса CSS? Это выглядело бы так:

 

body{

background-image: url(my-image.jpg);

background-position: top center;

background-repeat: no-repeat;

background-attachment: fixed;

}.

Всё тоже самое, но код находится в фигурных скобках, а строки закрываются точкой с запятой. Этот код и нужно расположить между тегами <style> </style>, о которых шла речь выше, или в отдельном файле с расширением CSS.

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

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

Заполните поле
Заполните поле
Пожалуйста, введите корректный адрес email.