{"@context":"https://schema.org","@graph":[{"@type":"WebSite","@id":"https://openarts.ru/#website","url":"https://openarts.ru/","name":"OpenArts","publisher":{"@id":"https://openarts.ru/#person"},"potentialAction":{"@type":"SearchAction","target":"https://openarts.ru/?s={search_term_string}","query-input":"required name=search_term_string"}},{"@type":"WebPage","@id":"https://openarts.ru/inkscape-striped-background/#webpage","url":"https://openarts.ru/inkscape-striped-background/","inLanguage":"ru-RU","name":"\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u043e\u043b\u043e\u0441\u0430\u0442\u043e\u0433\u043e \u0444\u043e\u043d\u0430 \u0434\u043b\u044f \u0432\u0435\u0431\u0430 | OpenArts","isPartOf":{"@id":"https://openarts.ru/#website"},"image":{"@type":"ImageObject","@id":"https://openarts.ru/inkscape-striped-background/#primaryimage","url":"https://openarts.ru/media/inkscape-striped-background-00.png","caption":""},"primaryImageOfPage":{"@id":"https://openarts.ru/inkscape-striped-background/#primaryimage"},"datePublished":"2015-06-16T07:00:47+00:00","dateModified":"2017-10-06T20:02:16+00:00","description":"\u0412 \u044d\u0442\u043e\u043c \u0443\u0440\u043e\u043a\u0435 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Inkscape \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e \u0444\u043e\u043d\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0431\u0435\u043a\u0433\u0440\u0430\u0443\u043d\u0434\u0430 \u0434\u043b\u044f \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446.","breadcrumb":{"@id":"https://openarts.ru/inkscape-striped-background/#breadcrumb"}},{"@type":"BreadcrumbList","@id":"https://openarts.ru/inkscape-striped-background/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"item":{"@type":"WebPage","@id":"https://openarts.ru/","url":"https://openarts.ru/","name":""}},{"@type":"ListItem","position":2,"item":{"@type":"WebPage","@id":"https://openarts.ru/tutorials/","url":"https://openarts.ru/tutorials/","name":"\u0423\u0440\u043e\u043a\u0438"}},{"@type":"ListItem","position":3,"item":{"@type":"WebPage","@id":"https://openarts.ru/tutorials/inkscape/","url":"https://openarts.ru/tutorials/inkscape/","name":"\u0423\u0440\u043e\u043a\u0438 Inkscape"}},{"@type":"ListItem","position":4,"item":{"@type":"WebPage","@id":"https://openarts.ru/inkscape-striped-background/","url":"https://openarts.ru/inkscape-striped-background/","name":"\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u043e\u043b\u043e\u0441\u0430\u0442\u043e\u0433\u043e \u0444\u043e\u043d\u0430 \u0434\u043b\u044f \u0432\u0435\u0431\u0430"}}]},{"@type":"Article","@id":"https://openarts.ru/inkscape-striped-background/#article","isPartOf":{"@id":"https://openarts.ru/inkscape-striped-background/#webpage"},"author":{"@id":"https://openarts.ru/author/zhart/#author","name":"zhart"},"publisher":{"@id":"https://openarts.ru/#person"},"headline":"\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u043e\u043b\u043e\u0441\u0430\u0442\u043e\u0433\u043e \u0444\u043e\u043d\u0430 \u0434\u043b\u044f \u0432\u0435\u0431\u0430","datePublished":"2015-06-16T07:00:47+00:00","dateModified":"2017-10-06T20:02:16+00:00","commentCount":0,"mainEntityOfPage":"https://openarts.ru/inkscape-striped-background/#webpage","image":{"@id":"https://openarts.ru/inkscape-striped-background/#primaryimage"},"keywords":"inkscape,\u0432\u0435\u0431-\u0434\u0438\u0437\u0430\u0439\u043d,\u0442\u0435\u043a\u0441\u0442\u0443\u0440\u044b","articleSection":"\u0423\u0440\u043e\u043a\u0438 Inkscape"},{"@type":"Person","@id":"https://openarts.ru/author/zhart/#author","name":"zhart","image":{"@type":"ImageObject","@id":"https://openarts.ru/#personlogo","url":"https://secure.gravatar.com/avatar/48486e993558dbe6edce1f9dd6d1687e?s=96&d=wavatar&r=g","caption":"zhart"},"sameAs":[]}]}

Создание полосатого фона для веба

В этом уроке мы будем использовать Inkscape для создания простого фона, который можно использовать, например, в качестве бекграунда для веб-страниц. А используя полупрозрачность в созданном изображении, мы можем как угодно и сколько угодно менять цвет фона без замены исходного изображения.

Создание полосатого фона для веба в Inkscape

Подготовка Inkscape

1

Мы создадим повторяющийся (бесшовный) фон размером 200x200px. Размер холста можно задать при помощи диалога свойств документа Document Properties (Shift+Ctrl+D).

Размер холста в диалоге свойств документа в Inkscape
2

Не закрывая диалога свойств документа, откройте вкладку настройки сетки (Grids) и включите сетку со следующими настройками:

Сетка в диалоге свойств документа в Inkscape
3

Перед началом рисования на панели привязок (Snapping) включите привязку к узлам и к сетке (см. рисунок ниже). На этом подготовительные работы закончены.

Включение привязки к узлам сетки в Inkscape

Рисуем линии

1

Теперь, используя инструмент для рисования кривых (Shift+F6 или B), нарисуйте диагональную секцию, как это сделано на рисунке ниже. Включенная ранее привязка к сетке должна сильно облегчить эту операцию.

Создание диагональной секции в Inkscape
2

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

Создание бесшовной текстуры в Inkscape
3

Ну вы поняли идею, да? Продолжайте в том же духе.

Создание геометрического узора в Inkscape
4

Когда вы нарисуете все секции, выделите их и удалите обводку, но при этом задайте черную заливку со значением непрозрачности 6%. Все это можно сделать при помощи диалога Заливка и обводка (Fill and Stroke, Shift+Ctrl+F).

Удаление обводки и создание заливки в Inkscape
5

В итоге должны получиться светло-серые линии. Для удобства вы можете объединить их в единый контур — не снимая выделения, нажмите Ctrl+K.

На этом этапе можно остановиться, а можно добавить еще более светлые тонкие диагональные линии, как на рисунке ниже.

Финальное изображение созданной в Inkscape бесшовной текстуры
6

Теперь осталось только экспортировать (Ctrl+Shift+E) наше изображение в png-формат и использовать его в качестве фона. Напоминаю, что изображение получилось полупрозрачным, и можно менять его цвет без замены изображения, просто задав блоку при помощи CSS-стилей любой желаемый цвет.


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

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

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