Создание фона для сайта - основные онлайн-сервисы

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

Сделать фон для сайта довольно просто. Главное - решить, что именно вы хотите видеть в качестве фона - однотонную заливку или какое-то конкретное изображение. Фон в виде заливки создается при помощи такого CSS-свойства, как background-color. Через двоеточие указывается код нужного цвета в формате RGB или его непосредственное название на английском языке, к примеру, black, red, yellow и т.д. Все это делается в главном файле CSS вашего сайта. Если вы хотите поставить на фон какое-то изображение, то следует использовать другое CSS-свойство - background-image. Через двоеточие следует указать абсолютный или относительный путь к нужной картинке (сама картинка должна быть загружена в директорию вашего сайта).

Чаще всего для задания фона используют не обычные картинки, обладающие произвольным содержанием и размером, а изображения с симметричным (мозаичным) рисунком. При соединении вместе большого количества копий таких картинок получается единое графическое полотно, в котором не будут видны швы (границы) между отдельными изображениями. Это позволяет задать красивый бесшовный фон практически для любого сайта (независимо от размера структурных блоков и параметров монитора, с которого пользователь просматривает страницы ресурса). Чтобы установленная в качестве фона картинка заполняла собой все фоновое пространство по горизонтали и вертикали, следует использовать такое CSS-свойство, как background-repeat. Если хотите, чтобы картинка копировалась лишь по горизонтали, то пропишите background-repeat: x. Если хотите только вертикального копирования, то пропишите background-repeat: y.

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

Ниже мы кратко рассмотрим три популярных сервиса для создания симметричных фонов.

1. Stripe generator. По названию можно понять, что данный сервис предназначен для генерации полосатых фонов. При создании картинки можно работать сразу с несколькими параметрами. Stripe size задает ширину основной полоски в пикселях. Spacing задает расстояние между полосками. Stripe color - это основной цвет, background color - цвет пространства между полосками, stripe orientation - угол наклона полосок (можно выбрать один из нескольких доступных вариантов). Кроме того, можно выбрать стиль полосок, добавить тень и сделать кое-что еще. Все изменения отслеживаются в реальном времени в окошке предпросмотра. Чтобы скачать созданный фон, нажмите на большую кнопку «download».

2. Stripemania. При помощи данного сервиса можно также создавать полосатые фоновые картинки. Опций здесь чуть поменьше, чем у предыдущего сервиса, но возможностей столько же. Параметры stripe width и spacing width позволяют задать ширину полосок и расстояние между ними в пикселях. Параметр stripe orientation отвечает за угол наклона полосок. Здесь доступно только 4 варианта - 45, 135, 90 и 180 градусов. Background color позволяет задать фоновый цвет (цвет пространства между полосками), а stripe color - основной цвет полосок. Здесь можно задать сразу три разных цвета для трех идущих подряд полосок (можно включить градиентный переход между выбранными цветами). Также есть окошко, в котором показывается превью созданной картинки и кнопка «download».

3. Tartanmaker. Это один из самых необычных сервисов для создания фона. Здесь можно генерировать довольно необычные полосатые узоры в стиле ретро. Сам узор состоит из полосок трех типов. Вы можете регулировать ширину каждой полоски (band 1, band 2, band 3), а также цвет. Параметр orientation позволяет задать угол наклона (0 или 45 градусов). Параметр yarn size позволяет изменить пропорции полосок, то есть их размеры относительно друг друга. Именно за счет этой опции можно быстро и кардинально поменять картинку. В правой части страницы располагается окошко предпросмотра и кнопка «download».