Всем привет, с Вами автор блога matrixblog.ru. Сегодня мы рассмотрим такую тему, как создание фона для сайта и паттерны.
Начнем с того, что для создания фона для сайта можно использовать как прикладные, так и онлайн графические редакторы. Полноценный фон можно создать даже в таких редакторах, как Spiro или Flower.
Формально, есть два подхода при создании графического фона:
Можно заранее создать холст заданного размера с изображением, который потом будет использоваться в виде фона на сайте. Данный вариант может пригодиться, когда нужно сделать изображение с большим количеством различных элементов. Проблема заключается в том, что подобный рисунок может весить много килобайт, что повлияет на скорость загрузки интернет страницы и сайта в целом.
Более распространённым вариантом является создание паттернов. Паттерны представляют из себя изображения небольшого размера, которые можно клонировать при создании фона для сайта, без видимости швов. В этом случае, есть некоторые моменты.
При создании графических паттернов, важно сделать так, что бы все узоры располагались симметрично. Естественно, что пока создаваемый паттерн содержит простые узоры, то симметричность легко создать, более трудно сделать идеальный паттерн, если изображение будет содержать градиент или тени. Но, не всё так плохо, любой графический паттерн можно дополнительного обрезать в прикладном или онлайн графическом редакторе.
Учитывая всё вышесказанное, я решил сделать онлайн приложение для создания графических паттернов, которое, кроме всего прочего, позволяет сразу создать сплошной фон. Как фон, так и сам паттерн можно сохранить и потом редактировать под себя.
Patterno – онлайн создание графических паттернов
Большинство онлайн инструментов для создания графических паттернов очень похожи. Есть более шаблонные примеры, а есть и интересные предложения. Как результат моих практик в области программирования на языке JavaScript с вкраплениями jQuery, я решил создать собственный онлайн генератор графический паттернов, который позволит быстро и удобно создать фон для будущего сайта.
Учитывая скудность вариантов и мою фантазию, я решил назвать своё детище Patteno - онлайн генератор для создания графических паттернов и фона.
В целом, данное приложение позволяет создать два вида рисунков:
- Линии – благодаря ползункам и панели управления, можно сформировать изображение, состоящее из различных линий заданного оформления.
- Фигуры – в данном случае, пользователю предлагается набор фигур в виде цветочков, которые можно использовать как узоры для будущего фона.
Благодаря магии программного кода, можно сохранить как сам паттерн, так и фон в целом. Кроме всего прочего, создаваемый графический паттерн и его стиль, можно сразу сделать фоном страницы, и увидеть, как всё будет выглядеть.
Давайте приступим к более детальному обзору приложения Patterno.
Patterno – графические паттерны в виде линий
Первая вкладка главной панели (Линии)предлагает небольшую панель управления, в которую я добавил ряд элементов для настройки внешнего вида рисунка:
- Размер линий – регулируем толщину линий.
- Расстояние – устанавливаем расстояние между линиями.
- Размер тени – позволяет задать параметры тени, автоматически будет меняться размер и смазывание.
- Угол поворота – в данном случае, можно регулировать угол поворота линий.
- Стиль фона – в зависимости от выбранного стиля (две кнопки), можно задать сплошной цвет или градиент, которым будет заполнен фон для сайта или сам холст паттерна.
- Стиль линий – как и прежде, тут можно выбрать цвет или параметры градиента для самих линий.
Важной особенность онлайн приложения Patterno для создания паттернов, является тот факт, что все действия автоматически отображаются в окне просмотра справа.
Patterno – графические паттерны в виде цветков
Вторая кладка (фигуры) содержит практически идентичную панель управления, что и для линий. Тут я добавил кнопки с изображениями фигур, которыми можно заполнить фон будущего сайта. Кнопка с изображением кубика позволяет создавать графический паттерн или будущий фон для сайта, состоящий из случайного набора фигур.
Как и прежде, можно регулировать размеры фигур, расстояние между ними и тень.
Обратите внимание, что кода мы переключаемся в режим градиента для фигур, то в холсте появляются сразу две фигуры разного размера и заданного цвета.
Возле верхних вкладок главной панели, находятся кнопки для перехода на графические редакторы Spiro и Flower. Под областью просмотра есть кнопки, которые позволяют сделать фоном сайта, созданный графический паттерн, сохранить сам пример или весь фон.
Подводя итоги…
В заключение, хотелось бы сказать, что я создал данный онлайн инструмент для создания паттернов буквально за день. Конечно, мне помогли наработки предыдущих работ.
В целом, мне было интересно, как быстро я смогу сделать что-то более практичное и визуально приемлемое, чем простая панель управления. Сами стили оформления я прописал через JavaScript. Должен сказать, что jQuery меня, как всегда, радует.
В планах сделать приложение, которое будет рассчитано на более широкую аудиторию.
Спасибо за внимание. Автор блога Владимир Баталий