Главная Сервисы Генераторы фона
Генераторы фона

Генераторы фона

248
0

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

Сервис №1 — Patternizer

background Онлайн генератор

Данный сервис довольно прост, он обладает минимальным функционалом и набором инструментов для редактирования.

Панель с параметрами для настройки находится слева, а справа мы видим сам фон, который будем редактировать. С помощью элементов, расположенных в верхней части, мы можем сохранить изображение, создать новый шаблон или сделать дубликат уже существующего, а также войти в учетную запись – своё творение можно отправить друзьям через Twitter или Facebook, нажав на кнопку «Share».

На панели с инструментами есть две вкладки – Settings и Code. На второй мы видим CSS код для вставки на сайт – вручную его редактировать нельзя:

background css код

Настраиваемые параметры на панели редактирования:

  • Rotation – положение линий.
  • Opacity – уровень прозрачности.
  • Width — ширина.
  • Gap – промежуток между линиями.
  • Offset – смещение линий.

Поставив галочку у значения «Plaid» можно продублировать линии только с противоположной стороны – изображение становится клетчатым.

На вкладке «Stripes» можно добавлять и удалять линии, а на вкладке «Library» есть три готовых стиля, которые вы можете использовать. Каждая линия, то есть «Stripe», редактируется отдельно и накладывается на другую линию в зависимости от своего положения на панели – за счет этого и создается фон. Сохранить результат на компьютер можно только в формате PNG.

Адрес — patternizer.com/vh4

Сервис №2 — Creatr backgrounds

Создание фона онлайн

 

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

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

background редактор

  • Size – размеры фона.
  • Background – настройки цвета.
  • Tittle – настройки текста (шрифт, цвет и размер).
  • Border – настройки размера и цвета рамки (обрамления).
  • Corner – настройка формы углов рамки.

Как видим, настроек действительно очень много, есть даже те параметры, которых не было в предыдущем сервисе – например, можно изменять положение градиента и добавлять текст. Однако существенным минусом является то, что всё корректируется вручную, и чтобы посмотреть изменения, необходимо каждый раз нажимать на кнопку «Create Image» — это просто неудобно.

Адрес — creatr.cc/backgrounds

Сервис №3 — Css-gradient

background css gradients

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

В поле «Directions» можно менять направление градиента, а в поле «Colors» его цвета.

Изначально представлено только два стандартных значения – «Start color» и «End color». По желанию вы можете добавить еще  позиции, нажав на значок «+».

Обратите внимание на то, что при клике на поле с кодом, где выбирается цвет градиента, не появляется графическое окно с палитрой. То есть, вы должны самостоятельно выставлять нужные вам значения и должны хотя-бы примерно представлять цветной диапазон HTML таблиц Hex и RGBA. Впрочем, можно воспользоваться вторым пунктом, а именно «Named» — появится список со всеми доступными цветами.

В пункте «Options for legacy browsers» настраиваются следующие параметры:

  • Background color – тип фона, цвет.
  • Align – выравнивание.
  • Gradient Size – размер градиента.

В пункте «Extended IE/Opera compatibility» можно включить/отключить совместимость вашего фона с браузерами Opera, и Internet Explorer.

В самом конце сайта есть таблица совместимости с браузерами:

Совместимость с браузерами

Адрес — display-inline.fr/projects/css-gradient

Сервис №4 — Bgpatterns

Онлайн редактор фона

При переходе на сайт перед нами сразу появляется фон со случайно подобранным стилем – как видим, на нем есть очень красивые элементы. Панель для редактирования находится справа – она состоит из небольших иконок:

  • New pattern — Создать новый фон.
  • Colors — Настройки цвета.
  • Add image -Добавить изображение.
  • Set overlapping order — Убрать элементы.
  • Download pattern — Загрузить фон.
  • Toggle full screen mode — Развернуть редактор на весь экран.
  • Share – поделиться изображением, «расшарить».
  • Menu — описание элементов управления, информация о сайте.

Для того, чтобы добавить или удалить элемент, необходимо пройти на вкладку «Add image» — там есть 7 категорий, в каждой из которых вы найдете небольшие изображения. Кликнув по кнопке «Add custom image», можно загрузить картинку из памяти вашего компьютера.

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

Чтобы процесс редактирования был более удобным, вы можете использовать комбинации клавиш для каких-то действий – это избавит вас от необходимости открывать панель с инструментами:

Сочетание горячих клавиш

Адрес — bgpatterns.com

Оставте Ваш комментарий

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