8 Сервісів створення текстури для сайту

Відео: Adobe Photoshop: Безшовні текстури

Що ж ще можна розмістити на фоні сайту, окрім фонових зображень. Можливо, у Вас така ситуація, що Ви не можете знайти якісне фонове зображення. Тоді для Вас буде відмінним виходом з цієї ситуації - використання текстури для сайту. Текстура - це, якщо дуже грубо, маленька картинка, яка повторюється за вертикаллю і з горизонталі. У статті Ви знайдете 8 сервісів, де можна зробити свою унікальну текстуру для сайту.

Також рекомендую почитати

• Сервіси які повинен знати кожен веб-дизайнер
• 7 сайтів для створення GIF анімації онлайн
• CSSMatic - автоматизований сервіс для веб-дизайнерів
• 8 сервісів для оптимізації зображень

Ну що, давайте подивимося що це за сервіси і що вони можуть при створенні текстури для сайту.

1. Patternify

Patternify дозволяє створювати текстури і невеликі іконки малюючи буквально кожен піксель. Ви можете вибрати довільний колір або залишити піксель прозорим. Створене зображення можна зберегти у форматі PNG, а також сервіс генерує код у форматі Base64, для того щоб вставити код зображення прямо в CSS файл, що буває дуже зручно.

2. Gerstnerizer

Відео: [Windows Server 2012 basics] Урок 11, частина 1 - Certification Authority, теорія і установка

За допомогою сервісу Gerstnerizer Ви можете генерувати безбарвні текстури і робить він це за допомогою ліній. Зліва, на панелі інструментів, можна задати товщину ліній, прозорість і кривизну. Трохи нижче можна вибрати одну з вже готових фігур: трикутник, квадрат чи шестикутник. Справа знаходиться вікно попереднього перегляду створеної текстури. Що є цікавою особливістю даного сервісу, він дозволяє зберігати створені текстури для сайту в форматі SVG.

3. Tartanmaker

Якщо Вам подобаються текстури формату хрест-навхрест, тоді цей сервіс для Вас. Виберіть 3 кольори, орієнтацію (діагональ або вертикальну), а потім натисніть "Make it!" і Ви побачите шаблон, який Ви створили. Також вище є посилання на галерею текстур, які створені іншими користувачами. Дані текстури Ви також можете завантажити і використовувати в своїх цілях.

4. Stripe Generator

Чудовий сервіс для створення текстур складаються зі смуг. Ви можете вибрати стільки квітів, скільки захочете. Також є можливість налаштувати розмір смуги, інтервал, орієнтацію і тіні. Також, як і в минулому сервісі, є галерея текстур, створених іншими користувачами сервісу.

5. Colour Lovers Seamless

сервіс Colour Lovers дає змогу створювати текстури для сайту за допомогою готових фігур і ліній. Виберіть фігуру або лінію з лівої колонки і перетягніть її в праве вікно попереднього перегляду. Сервіс автоматично згенерує текстуру. Ви можете застосовувати прості операції до цих елементів, такі як змінювати розмір фігури, обертати фігуру і поставити кількість фігур на текстурі.

6. Patternizer

Patternizer це ще один сервіс створення текстури для сайту, який дуже простий у використанні. Виберіть колір, кут повороту, прозорість, ширину і зміщення, щоб створити свою власну текстуру. Ви отримуєте готову код, який необхідно вставити на свій сайт. Але там потрібно підключити скрипт цього сервісу, щоб використовувати дані текстури. Як його підключити і використовувати згенеровані текстури для сайту читайте тут.

7. GeoPattern

GeoPattern генерує текстуру автоматичні при введенні тексту. Просто відвідати цей сервіс і почніть вводити який-небудь текст і Ви побачите як на тлі починає генеруватися довільна текстура складається з довільних фігур.

8. Transparent Textures

Transparent Textures це сервіс, який дозволяє вибрати текстуру для сайту з уже готової колекції. Зліва Ви можете вибрати з палітри кольорів колір, який у Вас буде використовуватися на тлі під текстурою. Потім клікайте на будь-яку текстуру і Ви побачите як на фон сайту відразу застосовується обрана текстура. Наступним кроком Вам необхідно скопіювати код з лівого віконця (пункт 3 на сайті "Grab the CSS") і вставити в свій файл стилів.

Бонусний сервіс. CSS Gradient Animator

Як бонус до даної статті я хочу розповісти Вам про ще один сервісі, який дозволяє генерувати НЕ текстури, а анімований фон. Сервісом дуже легко користуватися. Вам необхідно вибрати кут, швидкість зміни кольору, а потім додати кілька кольорів, які Ви хочете бачити анімованими на тлі. Відразу на тлі сайту Ви можете бачити готовий приклад, який Ви створили. А справа у вікні генерується код, який Ви можете вставити в свою файл стилів та ефект буде красуватися на Вашому сайті.

Сервіс створює анімацію за допомогою ключових кадрів. Тому рекомендую прочитати спочатку ось цю статтю - CSS3 анімація для початківців, щоб розуміти куди вставити цей код.

висновок

Ну що, Вам сподобалися дані сервіси? Я думаю зараз у Вас не повинно виникнути питань «А що поставити на фон?», Тому як тут 8 сервісів (а ще й бонусний), за допомогою яких можна створити свою унікальну текстуру для сайту.

Успіхів!

З повагою, Юрій Німець