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

Когда вы создаете миниатюру в традиционом растровом виде, то уменьшать ее (так же как и увеличивать) можно лишь в узких пределах, очень скоро становится невозможно понять, что же, собственно, изображено. Ведь растровое изображение состоит из отдельных точек (а точнее - квадратиков), называемых пикселями, которые имеют вполне определенные размеры (1/90 дюйма, как правило). Уменьшая изображение, мы уменьшаем не размер пикселей, а их количество, отчего детали изображения пропадают. При большом увеличении мы видим квадратики, но не видим за ними картины (как в музее, уткнувшись носом в полотно, увидишь одни мазки).

Другое дело векторное изображение. Оно является, по существу, текстовым файлом на языке XML и описывает математически все линии, кривые и цвета, из которых строится картинка. Понятно, что при изменении масштаба, законы построения кривых не меняются, поэтому можно создать рисунок, а затем увеличивать и уменьшать его в огромных пределах без малейшей потери качества изображения.

К сожалению, пока нет единых стандартов векторных файлов, как и нет возможности просматривать их без специальных программ. В мире свободного софта стандартом является файл SVG, но до сих пор не все браузеры понимают его (сами знаете какие). Поэтому приходится уменьшать изображение до нужной величины, а затем конвертировать его в растровое соответствующего размера. А вот в новом KDE 4 вся графика векторная, почему он и смотрится значительно лучше прежнего.

Теперь перейдем к делу. Начнем рисовать векторную электролампочку и с ее помощью прольем немного света на то, как работать с замечательной, но не самой интуитивной програмой Inkscape.

Создаем новый файл. Файл - > Создать ≈ открывается длиннейший список опций. Выбираем из него icon_48x48 , это распространенный для миниатюр стандарт. Мы могли бы создать файл любого размера, а затем уменьшить его, но к чему лишние движения?

Вот перед нами окно Inkscape с новым пустым файлом.

Рис. 1

Прежде чем что-либо рисовать, нужно сделать две вещи:

Первое. Пройти Файл - > Свойства документа , откроется одноименное окно с несколькими вкладками. Нам нужна вкладка Прилипание (рисунок 2).

Рис. 2

Требуется убрать галочку из отмеченного маркером квадратика, тем самым отключив прилипание. Когда имеешь дело с тонкой работой, прилипание мешает.

Второе. Настроить сетку для удобства рисования. Мои долгие мучения с настройкой сетки показали, что настраивать ее нужно при больших увеличениях, порядка 10 000%, иначе настроить можно только случайно.

Для настройки в том же окне Свойства документа открываем вкладку Сетки (рисунок 3)

Рис. 3

Вверху окна читаем: Прямоугольная сетка и дальше Создать . Жмем.

Открывается сетка по умолчанию, которая нам не подходит. У нас файл 48х48 пикселей, так что число основных линий сетки должно быть кратно 12, 6 или 4, чтобы легко видеть середину холста. Поэтому выставляем Основная линия сетки каждые: 12 линий. А Интервалы по X и Y оставляем 1 пиксель. Настраиваем цвета обычных и основных линий сетки, чтобы она выглядела как миллиметровка (кто помнит, что это такое). Если сетка немедленно не появляется, или появляется не такая как надо, то внизу окошка есть длинная клавиша Удалить . Удалив неудачную сетку, следует еще увеличить масштаб и создать новую сетку. Масштаб проще всего изменять клавишами + и - , а можно в самом нижнем правом углу основного окна Inkscape, там есть специальное окошечко (помечено на рисунке 1 стрелкой).

Когда сетка создана, ее можно убирать и снова накладывать из меню Вид - > Сетка . Хорошо бы сохранить файл под именем lamp.svg, чтобы программа запомнила текущую сетку. Вобще, по ходу работы рекомендую время от времени сохранять файл. Дело в том, что Inkscape использует ограниченное количество памяти машины, и иногда становится заметны заминки, вызванные ее нехваткой.

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

Панель инструментов занимает левую рамку окна Inkscape и любой инструмент может быть вызван нажатием клавиши Fn , где n ≈ порядковый номер инструмента, начиная сверху. Можно просто кликнуть на розовом шарике, нетрудно догадаться, что он рисует круги. Вернее, он рисует эллипсы, но, если удерживать клавишу CTRL , то круги.

Прежде чем пытаться рисовать круг, пройдите обязательно в меню Справка - > Учебник - > Фигуры . Вы не пожалеете ≈ ведь учебник Inkscape интерактивный. Прямо в открывшемся окне учебника можно тренироваться рисовать, изменять, преображать фигуры и прочие элементы. Все это сопровождается подробными инструкциями на русском языке. Вы никогда самостоятельно не откроете и десятой части возможностей программы, если пренебрежете Учебником .

Но вот вы начали рисовать круг и от успуга роняете мышь ≈ ваш круг получается красным с жирной черной каймой, да еще, возможно, с вырезанным сегментом.

Рис. 4

Об этом учебник не предупреждал. Не бросайтесь удалять страшный круг и искать настройки инструмента. Дело в том, что в программе Inkscape сначала рисуют элемент, а потом изменяют его. Это несколько необычно, так как в большинстве программ, да и просто в жизни, инструмент сначала настраивают, а уж потом им пользуются. Здесь все наоборот: пока нет объекта, нет и настроек (также было и с сеткой ≈ сначала мы ее создали, а потом настраивали).

Нарисованный круг выделен по умолчанию, но если нет, то надо выделить его при помощи инструмента F1 ≈ стрелки. Не поленитесь прочитать первые два раздела учебника, иначе мне придется переписывать их в этой статье. Когда объект (круг) выделен, то можно легко превратить чудовище в красавицу. Для начала разберемся с потерянным сегментом. Посмотрите на панель выше рабочего окна: на рисунке 4 я обвел зеленым цветом интересующий нас отрезок (он виден только при выбранном инструменте F5).

Там три варианта рисования эллипсов, почему-то по умолчанию выбран сегментированный. Переключитесь на третий (последний) вариант и круг обретет законченность. Хорошо; теперь займемся цветами.

Пройдем с меню Объект - > Заливка и обводка . Если объект выделен, то можно без труда менять его очертания и цвета. Начнем с красного круга. Переходим на вкладку Заливка (рисунок 5).

Рис. 5

Мы видим, что сейчас выбрана плоская заливка цвета ff0000 (чисто красного) по системе RGB с непрозрачностью 100% (две добавочные шестнадцатеричные цифры ff в конце номера). Сам номер вписан в окошке, помеченном синей стрелой.

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

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

Теперь нам предстоит сделать из круга грушу, поэтому смело берем инструмент Shift+F6 , который называется Рисовать кривые Безье и прямые линии . Что такое кривые Безье, вы выясните самостоятельно, а пользоваться ими очень просто: нажимаем левую кнопку мыши ≈ ставим точку, переносим инструмент на другое место, нажимаем, ставим точку. Когда мы хотим остановиться и не ставить больше точек, то делаем двойной щелчок или нажимаем ENTER . Главное в этом деле минимализм ≈ не ставить больше точек, чем нужно, в крайнем случае их всегда можно добавить. (Впрочем, удалить лишние тоже не трудно). Как только мы нажали ENTER , как волосяная линия, тянувшаяся за инструментом, превращается в контур с текущей обводкой (рисунок 6).

Рис. 6

Теперь берем инструмент F2 и начинаем редактировать узлы контура и сами контуры, превращая их в кривые Безье. Тут нужно немного потренироваться, набить руку и почитать Учебник , раздел Продвинутый курс . Без такого чтения вы никогда не узнаете всех секретов обращения с кривыми Безье.

В итоге должно получиться нечто похожее на рисунок 7.

Рис. 7

Следующим шагом будет удаление ставшей ненужной нижней части окружности. Для этого сперва нужно объединить два контура ≈ окружность и новую кривую ≈ в один контур. Для этого, удерживая клавишу SHIFT , поочередно кликаем инструментом F2 на окружности и на кривой. Затем переходим в меню Контуры - > Объединить . Получается как на рисунке 8.

Рис. 8

Обратите внимание на два помеченных красным узла на контуре. Сейчас нам предстоит добавить над каждым из них еще по одному узлу. Это делается двойным кликом инструмента F2 . Результат на рисунке 9.

Рис. 9

Теперь нужно выделить тем же инструментом самый нижний узел на окружности и удалить его при помощи клавиши DEL . Очертания контура при этом немного изменятся.

Затем, при нажатой клавише SHIFT выбрать два узла, которые показаны желтым на рисунке 10. После того, как вы их выберете, они у вас тоже пожелтеют.

Рис. 10

Затем поднимите взгляд на панель над рабочим окном и найдите пиктограмму Разбить контур , показанную на рисунке 11.

Рис. 11

Нажмите на пиктограмму мышью и контур между выделенными узлами исчезнет. Выделите, удерживая клавишу SHIFT , узлы на границе разрыва, как показано на рисунке 12.

Рис. 12

При помощи пиктограммы Соединить контуры по выделенным оконечным узлам (третьей слева на рисунке 11) соедините разрыв. Потом проделайте ту же операцию с другой стороны груши.

Колба нашей будущей лампы готова. Теперь настало время изменить ее черный цвет на более подходящий.

Выделяем объект инструментом F1 и открываем окно Объект - > Заливка и обводка . Во вкладке Обводка выбираем линейный градиент (рисунок 13).

Рис. 13

Объект окрашивается в какой-то градиент, но он нам не подходит. Поэтому нажимаем клавишу Изменить . Откроется окно Редактор градиентов , рисунок 14.

Рис. 14

Редактор градиентов позволяет изменять цвета конечных точек градиента, которые называются stop 3153 и stop 3155 (номера могут быть любые). Вызвать их можно, нажав на указатели, которые я пометил зеленым кружком. Подсветив верхнюю конечную точку, нужно задать ей нужный цвет. Это можно сделать пятью способами: либо при помощи одной из четырех вкладок, на которые указывает синяя стрела, либо просто написав нужный шестнадцатеричный номер в окне, которое я обвел красным. Я выбрал цвет 729fcfff. Первые шесть цифр: номера красного, зеленого и синего, последнее (ff) говорит о полной непрозрачности.

Потом мы переходим на вторую конечную точку градиента и назначаем цвет ей, в моем случае это 3465a4ff. Левая часть контура груши становится светлее, чем правая, и цвета эти плавно переходят друг в друга. Это и есть градиент. Берем инструмент F2 и на экране появляется линия направления (рычаг) градиента. Сейчас она горизонтальна, на левом конце ее квадратик, на правом ≈ кружок. Мышью двигаем квадратик вверх, а кружок вниз, как показано на рисунке 15.

Рис. 15

Градиент пойдет по диагонали холста, что придаст эффект освещенности верхней части лампы.

Теперь займемся заливкой нашей колбы. В том же окне Заливка и обводка , перейдем во вкладку Заливка и выберем Радиальный градиент . Я брал для конечных точек цвета: ffffff56 и 729fcfe3. Обратите внимание на две последние цифры в этих номерах. Это уже не ff, а значит цвета эти обладают некоторой прозрачностью, что придаст колбе стеклянный вид.

Рис. 16

Следующим шагом будет выделить нашу колбу инструметом F1 , и продублировать ее. Это можно сделать Правка -> Продублировать или, проще, сочетанием клавиш CTRL+d . Дублирование создает копию объекта и размещает ее прямо поверх него, так что изменений почти не видно, разве что заливка стекла стала менее прозрачной. Вместо дублирования можно было скопировать объект CTRL+с , а затем вставить на то же самое место Правка - > Вставить на место (CTRL+ALT+v) .

Дубль нашей колбы, находящийся сверху, уже выделен, если вы не снимали выделения. Открываем окно Объект - > Заливка и обводка . Первым делом убираем заливку полностью, нажав на крестик Х вo вкладке Заливка (рисунок 5). Затем, перейдя во вкладку Обводка выбираем плоский цвет ffffffff. Нетрудно понять, что это белый. Он полностью перекрывает нижележащий синий цвет основной груши.

Теперь берем мышью за угловую стрелочку рамки выделения и, удерживая клавишу SHIFT , что обеспечит прапорциональность, начинаем уменьшать белую обводку. Когда она окажется внутри синей, подгоним ее поплотнее к синему контуру при помощи инструмента F2 , как на рисунке 17.

Рис. 17

Теперь нужно придать белой обводке другой цвет. Выбираем Линейный градиент . Тот, что будет открыт по умолчанию (от белого до прозрачного) нас как раз устроит. Установим Непрозрачность около 75% (шкала внизу окна Заливка и обводка ). Останется установить рычаги градиента (F2 ) как показано на рисунке 18.

Рис. 18

Колба лампы готова. Настала очередь "начинки" ≈ всяких проволочек, спиралей и прочего.

Для начала рисуем две проволоки, держащие спираль. Обводку их делаем линейным градиентом от темного 9927aff до белого ffffffff. Понятно, что белый конец ≈ верхний, там где проволоки раскалены спиралью (рисунок 19).

Рис. 19

Затем рисуем саму спираль. Ставим четыре точки инструментом SHIFT+F6 и изгибаем кривые Безье. Красим обводку в белый цвет. (Рисунок 20).

Рис. 20

Ничего, что спираль пока плохо видно, впоследствии она проявится.

Теперь рисуем стеклянный постамент, держащий всю конструкцию. Рисуем трехсторонний прямоугольник и изгибаем его верхнюю сторону. Цвет обводки: плоский d0bfacff; Заливка: линейная, от белого ffffffff до белого прозрачного ffffff00. Непрозрачность около 50% ≈ стекло, как-никак. Кроме того, найдите в окне Заливка и обводка строку Повтор: и выберите Отраженный . Это даст как бы двойной градиент от краев к центру. Рычаги градиента чуть сместите, как показано на рисунке 21.

Рис. 21

Далее нужно придать лампочке желтоватый оттенок, так характерный для ламп накаливания. Для этого выделим инструментом F1 внешний синий контур нашего рисунка. Сдублируйте его. Затем удалите обводку и залейте плоским цветом ffc803ff (рисунок 22).

Рис. 22

После этого придайте объекту непрозрачность 25% и опустите на самое дно рисунка. Это можно сделать из меню Объект - > Опустить на задний план , либо просто нажав клавишу END .

Дальше. На круглых предметах обязательно бывают блики. Нарисуем белый овал без обводки с непрозрачностью 36%. Затем второй раз кликнем на нем инструментом F1 . Стрелочки на углах изменятся, теперь они приглашают вращать объект, что мы и сделаем. Потом поставим овал на место, как показано на рисунке 23.

Рис. 23

Осталось приделать лампе цоколь. Рисуем прямоугольник при помощи инструмента SHIFT+F6 и изгибаем его верхнюю и нижнюю стороны (рисунок 24).

Рис. 24

Добавляем вспомогательный слой под текущим слоем (Слой -> Добавить слой ). В этом новом слое нарисуем пунктиром с обводкой шириной 0,2 (Стиль обводки -> Пунктир ) следующие зигзаги, которые помогут нам правильно расставить дополнительные точки (рисунок 25).

Рис. 25

Теперь переходим на основной слой, и, ориентируясь на пунктирные зигзаги, расставляем на боковых сторонах инструментом F2 (двойной щелчок) по две дополнительные точки. Затем эти же инструментом перемещаем новые точки немного глубже, а отрезки контура между ними превращаем в кривые Безье. В результате должно получиться как на рисунке 26.

Рис. 26

Вспомогательный слой удаляем (Слой -> Удалить) . Только смотрите, какой слой удаляете. Смотреть надо или на панели в самом низу основного окна, или в окне Слои , которое можно вызвать из меню Слой -> Слои...

Теперь меняем цвета цоколя. Обводку делаем плоским цветом d59600ff, а заливку - линейным градиентом ffd543ff / ffeca9ff. Применяем также Повтор: Отраженный . После этого опускаем объект на самый задний план (END ).

Осталось нарисовать на цоколе резьбу. Снова воспользуемся инструментом SHIFT+F6 и нарисуем резьбу, как на рисунке 27. Обводку уберем, а фон зальем цветом d59600ff. При этом достаточно нарисовать один объект, а затем скопировать его и вставить в нужное место.

Рис. 27

Теперь сделаем лампе контактную подошву. Для этого достаточно поставить две точки, затем выгнуть их в дугу и окрасить обводку цветом 5a5249ff.

Рис. 28

После этого опускаем объект вниз (END ).

Осталось "навести тень на плетень". Рисуем черный эллипс без обводки, делаем ему размывание на 5% и непрозрачность 15%. Потом опускаем его ниже (PgDown или END ).

Лампочка готова. Убираем сетку, чтобы удобнее было любоваться.

Рис. 29

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

Сохраняем файл в формате SVG для архива. Дальше есть несколько возможностей. Можно экспортировать изображение в растровое посредством меню Файл -> Экспортировать в растр .

Если нужна миниатюра другого размера, скажем, 16х16, то нужно пройти Файл -> Свойства документа и там выбрать новый размер документа (icon_16x16 ). Затем масштабировать рисунок, чтобы он уместился в новый холст и сохранить как копию. Масштабировать можно при помощи инструмента F1 , стрелок и клавиши SHIFT ; но лучше пройти в меню Объект -> Трансформировать . Затем во вкладке Масштаб выбрать новый размер в процентах, поставить галочку около Пропорциональное масштабирование и нажать Применить .

При увеличении, например в десять раз, лучше сначала масштабировать объект на 1000%, а затем изменить в Свойствах объекта размер холста (документа). В противном случае бывает трудно найти крошечный рисунок на большом холсте.

Вот и все на первый раз. В следующей части мы продолжим изучение приемов рисования векторной графики.

Inkscape - это очень популярный векторный графический редактор с открытым исходным кодом, который может работать как в операционной системе Linux, так и в Windows и MacOS. Отличие векторного графического редактора от растрового в том, что рисование выполняется не с помощью пикселей, а с помощью различных фигур и формул. Это дает определенные преимущества, например, изображение можно масштабировать без потери качества.

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

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

sudo apt install inkscape

Для установки в системах Red Hat и CentOS выполните:

sudo yum install inkscape

Если вы хотите установить программу в Windows, то установочный файл можно скачать на официальном сайте. Кроме версии для Linux, Windows и MacOS, можно скачать исходный код и собрать программу самому. Когда установка будет завершена, вы можете найти программу в главном меню:

Как пользоваться Inkscape?

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

1. Интерфейс программы

Сразу после запуска программы вы увидите такое главное окно:

Интерфейс программы достаточно прост и выглядит намного понятнее, чем в том же Gimp. Его можно условно разделить на несколько областей:

• Меню - находится в самом верху окна, с помощью него вы можете выбирать различные опции и параметры работы программы;
• Панель инструментов - находится сразу под меню, здесь расположены часто используемые инструменты, к которым нужно иметь возможность легко получить доступ;
• Инструменты рисования - панель с инструментами рисования находится в левой части окна и расположена вертикально;
• Рабочая область - холст для рисования, расположенный в центре окна;
• Инструменты действий - панель инструментов действий находится справа от рабочей области;
• Нижняя панель и палитра - в самом низу окна расположена панель с несколькими инструментами для настройки параметров фигур и палитрой цветов.

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

• Ctrl+стрелка - для перемещения по листу. Также перемещаться можно с помощью колесика мышки по вертикали и с зажатой кнопкой Shift по горизонтали;
• Клавиши + и - используются для масштабирования документа;
• Ctrl+Z и Ctrl+Shift+Z используется для отмены и повтора последних действий соответственно;
• Shift - выделить несколько фигур.

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

2. Создание фигур

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

Каждая фигура имеет два параметра, которые влияют на ее оформление. Это заливка и обводка. Заливка определяет основной цвет фигуры, а обводка - цвет контура. Обводка и заливка настраиваются в окне, которое можно отрыть на панели инструментов:

На палитре Inkscape вы можете выбрать общий цвет для фигуры, а в окне настройки заливки отдельно цвет для заливки и обводки. Кроме однородного цвета можно использовать градинеты.

3. Группировка объектов

Для удобства перемещения и применения объектов векторный редактор Inkscape поддерживает объединение их в группы. Для этого отметьте несколько объектов с помощью кнопки Shift и в меню "Объект" выберите "Сгруппировать" . Теперь все выбранные объекты находятся в одной группе, вы можете их перемещать и применять операции ко всем ним сразу. Также для группировки можно использовать сочетание клавиш Ctrl+G.

Для расгруппировки используйте пункт разгруппировать. Или нажмите несколько раз клавишу Ctrl+U . В вопросе как пользоваться Inkscape более важна работа с формами и цветами фигур, рассмотрим это подробнее.

4. Действия над фигурами

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

С помощью инструмента "Стрелка" можно не только менять размер, но и переключать передний и задний план, отражать объекты и тонко настраивать их координаты. Обратите внимание, что когда вы меняете инструмент рисования, меняется панель инструментов, на ней отображаются возможности этого инструмента:

Инструмент "Редактировать углы" позволяет различным образом изменить углы и очертания объекта:

Инструмент "Корректировать объекты раскрашиванием или лепкой" позволяет изменить цвет и очертания объектов, например, вы можете сделать их вогнутыми, перемещать в различных направлениях, уменьшать и увеличивать, вращать и даже дублировать объекты. Для применения действий необходимо чтобы объект был выделен.

Инструмент "Измеритель" позволяет изменять длины и углы различных геометрических объектов:

5. Фильтры

С помощью фильтров можно применить различные эффекты к объектам. Все доступные эффекты рассортированы по категориям и доступны из меню "Фильтры" . Среди эффектов есть различные текстуры, изменение дизайна, и многое другое:

6. Сохранение результата

Поскольку в этой статье мы ставим перед собой задачу рассказать об Inkscape для начинающих, разберем как сохранить изображение. Поскольку это векторные изображения, здесь будет использоваться специальный формат - svg. Чтобы сохранить готовое изображение откройте меню "Файл" и выберите "Сохранить" , затем выберите расположение файла:

Каждому любителю живописи, очень полезно иметь под рукой функциональный графический редактор, способный работать с векторной и растровой графикой. Благо, в наше время, существует огромное множество программ для рисования, способных заменить собой целые художественные мастерские. Давайте же познакомимся поближе с одним из лучших представителей данной группы. Представляем вашему вниманию графический редактор Inkscape!

Главными плюсами Inkscape, является его несомненная компактность, высокая функциональность и широкие возможности для работы с векторной графикой. При этом программа имеет открытую лицензию и является абсолютно бесплатной. Очень выгодно уметь пользоваться таким чудесным инструментом.

Правда от одного из плюсов, вытекает логичный минус, доставляющий некоторые неудобства новичкам. Функционал программы очень обширен, и первое время работа в Inkscape бывает не очень продуктивной, по причине отсутствия знаний и навыков. Чтобы скорее преодолеть этап безграмотности и скорее приступить к уверенной практике, рекомендуем ознакомиться со следующими видеороликами.

Уроки Inkscape для начинающих

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

Inkscape — редактор векторной графики.

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

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

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

Inkscape, будучи свободным редактором с открытыми исходниками, работает со свободным форматом векторных файлов — SVG (масштабируемая векторная графика). В настоящее время почти все гаджеты и веб браузеры поддерживают формат SVG, а с приходом HTML 5 размещение SVG файлов в веб контенте станет не сложнее, чем сейчас размещение растровых графических файлов.

Освоение Inkscape сегодня — это интеллектуальная инвестиция в день завтрашний.

О версиях и релизах программы Inkscape

Когда пишутся эти строки, новейшим релизом программы Inkscape является 0.48. Он доступен для Windows, Linux, Mac и других платформ.

Если у вас более ранняя версия, не стоит драматизировать это небольшое отставание. Версии 0.46 и 0.47 программы весьма схожи с 0.48 по своему функционалу, добавлено только несколько очень специальных эффектов, да еще появилась новая панель Прилипание . Так что спокойно работайте на той версии, которая имеется в вашем распоряжении, при очередном апгрейде вы ничуть не отстанете от жизни.

Строение окна программы Inkscape 0.48

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

Рис. 1

Начнем по порядку номеров:

1. Панель меню как в любой программе, тут все понятно.

2. Панель команд . Все команды этой панели доступны из различных меню. Так что эту панель можно смело убирать, если нужно окно побольше.

3. Панель настройки текущего инструмента . Когда выбран некий инструмент (на рисунке 1 это инструмент "Рисовать звезды и многоугольники" ), то на Панели настройки текущего инструмента появляются его настройки. В конце панели черный треугольничек, означающий, что не все настройки поместились в окне. При нажатии на нем можно просмотреть недостающие настройки.

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

Панели 2, 3, 4 и 12 можно перетаскивать мышью за прямоугольные полоски, которые на рисунке 1 окрашены в зеленый цвет, а в самом окне Inkscape выделены двумя рядами слабо заметных точек.

5. Палитра . Цвет можно перетаскивать мышью с Палитры на объект, изменяя этим действием его Заливку . Чтобы изменить цвет Обводки , нужно при перетаскивании удерживать клавишу SHIFT . Текущий цвет некоторых инструментов может быть задан кликом на соответствующем цвете Палитры . В правом конце палитры находится маленький треугольный переключатель. При нажатии на него открывается меню настройки палитры. Можно настроить внешний вид палитры, и выбрать из множества предустановленных палитр. Если все цвета не умещаются в окне, то под Палитрой возникает полоса прокрутки.

6. Строка состояния . Содержит пять областей:

7. Индикатор Заливки и Обводки выделенного объекта . Когда в окне имеется выделенный объект, Индикатор окрашивается в цвета его заливки и обводки. При левом клике на цвете открывается окно Заливка и Обводка , служащее для настройки этих параметров. При правом клике — выпадает меню с полезными опциями, позволяющими иногда обойтись без открытия окна Заливка и Обводка .

8. Секция информации о слоях . Если слоев немного, то вполне можно обойтись этой секцией, не открывая специальное окно Слои .

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

10. Координаты указателя мыши .

11. Индикатор текущего масштаба . Можно вписывать нужный масштаб от руки и нажимать ENTER , а можно пользоваться стрелочками.

12. Панель прилипания . На этой панели собраны регулировки прилипания (линий к объектам, сеткам, узлам и так далее).

Рабочая область окна программы Inkscape называется Холстом . Сверху и слева холста расположены линейки. При наведении указателя мыши на линейку всплывает подсказка, в каких единицах она проградуирована (по умолчанию — в пикселях). Линейки можно перетаскивать мышью, образуя Направляющие .

В середине холста видна рамка нового Документа . Иногда Документ также называют Страницей . Если линейные размеры документа нужно изменить, то следует пройти в меню Файл ⇨ Свойства Документа .

Рисовать можно в любом месте холста, даже за рамкой документа.

Диалоговые окна

Некоторые меню открывают диалоговые окна, например: Заливка и Обводка, Слои, Трансформации и прочие. В Inkscape 0.48 эти окна по умолчанию прикрепляются к правой "раме" окна программы. Кроме того они могут быть скреплены между собой. Это бывает не слишком удобно, так как сильно сужает размер рабочей области окна. Мышью можно передвигать эти окошки и выводить за рамки главного окна. Чтобы глобально отключить функцию прикрепления диалоговых окон, нужно пройти в меню Файл ⇨ Настроить Inkscape ⇨ Окна ⇨ Поведение диалогов .

Ознакомившись со строением и частями рабочего пространства, в следующей главе начнем пользоваться ими. При этом воспользуемся методом "погружения", то есть сразу приступим к созданию векторных изображений.

Глава 2, в которой шведский флаг научит нас пользоваться сетками, прилипанием, и многому другому

Темой сегодняшнего занятия станет флаг Швеции.

По ходу дела мы узнаем:

• Как рассчитать размеры страницы и интервалы сетки
• Как создать документ нужного размера
• Как создать сетку с нужными интервалами между линиями
• Что такое прилипание и как им пользоваться
• Как работать с инструментом для рисования прямоугольников
• Как объединять контуры
• Как изменять цвета заливки и обводки объекта
• Как сохранять готовый документ и как экспортировать его в растровое изображение

Мы уже знаем, что векторная графика — это математическое описание изображения. Математика — наука точная, поэтому прежде чем браться за дело, нужно точно знать размеры будущего документа и его отдельных частей.

Из Википедии узнаём, что флаг Швеции имеет соотношение сторон 32 к 20, причем вертикальная полоса креста начинается с 5/16 слева и имеет ширину 2/16, а горизонтальная полоса расположена посередине и равна по ширине вертикальной.

Значит нам нужно выбрать размер документа или 32х20, или 320х200 пикселей. Для векторной графики это не имеет принципиального значения, но в целях наглядности выберем размер страницы побольше.

Запускаем Inkscape и видим открывшийся по умолчанию документ размера А4. Идем в меню Файл ⇨ Создать и в выпавшем внушительном списке документов не находим нужного. Значит нужно изменить свойства документа.

Меню Файл ⇨ Свойства документа (рисунок 1).

Рис. 1

Красным обведена нужная нам секция Другой размер , в которую мы и вписываем новые размеры документа. (Кнопку Подогнать размер страницы под содержимое не трогаем, так как никакого содержимого пока нет).

Нажав ENTER или переведя указатель мыши в основное окно, мы видим внизу холста небольшой прямоугольник. Это и есть документ с нужными размерами. Чтобы увеличить его и поставить в центре холста, нажимаем клавишу 5 или значок на панели команд.

Пока открыто окно Свойства документа , полезно сразу настроить удобную сетку. Что есть сетка? Будучи подключена в меню Вид ⇨ Сетка , она превращает холст в страницу школьной тетради в клеточку. Только размер этих клеточек мы можем изменять.

Перейдем на вкладку Сетки (рисунок 2).

Рис. 2

Пока эта вкладка пуста, но стоит нам создать новую сетку, как появятся настройки сетки по умолчанию (рисунок 3).

Рис. 3

По умолчанию интервалы между линиями сетки составляют 1 пиксель. Нам это не подходит, слишком мелко. Мы вписываем по 20 пикселей как по X, так и по Y. Почему по 20? На 20 делится как 320, так и 200. По ширине получаются как раз шестнадцатые доли, нужные нам для построения креста. По высоте легко найти середину документа, особенно когда основные линии сетки идут через каждые 5 обычных. Не сетка, а само удобство!

Рис. 4

Шведский флаг состоит из одних прямоугольников. Нам будет удобнее рисовать прямоугольники, если линии будут идти точно по клеточкам сетки — "прилипать" к ней. Поэтому настроим сразу и прилипание на соответствующей вкладке (рисунок 5).

Рис. 5

Откроем вкладку Прилипание . В секции Прилипание к сеткам нужно включить радиокнопку Всегда прилипать . Это будет означать, что узлы изображения будут прилипать к линиям сетки, на каком бы расстоянии от них не находились.

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

Затем на Панели прилипания нужно подключить следующие миниатюры: Прилипание глобально , Прилипать узлам или их рычагами , убедиться, что подключены две кнопки прилипания к сетке и направляющим и удостовериться, что НЕ подключено Прилипание к углам площадки .

По окончании всех настроек окно Свойства документа нужно закрыть.

Пора приступить к рисованию. Первым делом нарисуем фон флага.

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

Благодаря прилипанию, сто́роны (а точнее узлы) прямоугольника точно совпадают с границами документа (а вернее, с линиями сетки). Не будь прилипания, нам пришлось бы вручную добиваться совпадения границ.

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

Рис. 6

Обратите внимание на маленькие квадратики в левом верхнем и правом нижнем углах прямоугольника. Они служат для изменения его размера. Тем же инструментом F4 можно взять за квадратик и, потянув, изменить размер прямоугольника.

А вот кружок в правом верхнем углу предназначен для скругления углов прямоугольника. Подробнее про скругление углов (и многое другое) можно узнать, прочитав великолепный интерактивный Учебник Inkscape на русском языке, который находится в меню Справка ⇨ Учебник . Очень рекомендую.

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

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

Рис. 7

Теперь понятно, почему мы не увидели бы результатов, не будь обводки!

Не откладывая дела в долгий ящик, рисуем горизонтальную полосу креста.

Рис. 8

На этом можно было бы остановиться. Когда мы изменим цвет фона на синий, креста на желтый, а обводку удалим, то флаг будет готов. Но поскольку мы учимся, то будем доводить каждое дело до конца. Пока что у нас не крест, а пересечение двух прямоугольников. Чтобы превратить его в настоящий крест, нужно объединить контуры этих прямоугольников.

Берем инструмент Выделения (F1 ) и при нажатой клавише SHIFT щелкаем на обоих прямоугольниках креста по очереди. Оба они становятся выделенными, что видно в пунктирной обводке на рисунке 9.

Рис. 9

Теперь нужно пройти в меню Контуры ⇨ Сумма и сложить два контура.

Рис. 10

Вот теперь у нас настоящий крест!

Осталось раскрасить документ в национальные цвета Швеции. Та же Википедия сообщает, что синий цвет шведского флага имеет оттенок Red: 0, Green: 90, Blue: 173 по системе RGB. Чтобы точно воспроизвести этот оттенок, нам понадобится окно Заливка и обводка . Прежде всего, нужно выделить нужный прямоугольник (фона) при помощи инструмента F1 , который у нас уже выбран. Для верности глянем в Секцию уведомлений на нижней панели окна программы. Там будет описан выделенный объект: Прямоугольник в слое Layer1 .

Открыть окно Заливка и обводка можно несколькими способами: Из меню Объект ⇨ Заливка и обводка ; щелкнуть на объекте правой кнопкой мыши и открыть строку Заливка и обводка ; нажать на миниатюру на Панели Команд (правда ее не всегда видно из-за размеров окна); горячими клавишами Shift+Ctrl+F (не везде срабатывает). Так или иначе, открываем это окно (рисунок 11).

Рис. 11

Во вкладке Заливка уже нажата кнопка Плоский цвет, нам нужно установить известные нам значения RGB. Их можно просто вписать в соответствующие окошки, или выставить их стрелочками, можно двигать ползунки на шкалах, можно даже вписать шестнадцатеричный номер цвета в окошко RGBA . Шкала А означает прозрачность заливки, полная непрозрачность равна 255, полная прозрачность — нулю.

Фон на глазах меняет цвета и принимает нужный оттенок.

Переходим на вкладку Обводка и нажимаем крестик Х , что означает Обводки нет . Она нам больше не нужна.

Рис. 12

Теперь нужно выделить крест (при этом в Секции уведомлений появится сообщение: Контур 12 узлов... ) В окне Заливка и обводка уже будут новые параметры выделенного объекта. Нам нужно установить желтый цвет R: 255, G: 194, B: 0 при полной непрозрачности. Обводку убрать.

Рис. 13

Сетку снять (Вид ⇨ Сетка ).

Флаг готов. Его рисунок вы видели в начале главы.

Осталось сохранить его. Но прежде пройдем в меню Файл ⇨ Очистить defs . Что это значит? По ходу работы мы использовали временные цвета, не вошедшие в окончательный вариант обводки и так далее. Все они записаны где-то в XML тексте нашего файла, увеличивая его "вес". Конечно в сегодняшнем случае это немного, какие-то байты, но привычку избавляться от балласта нужно вырабатывать с самого начала. Ведь главным козырем векторной графики является малый размер файлов SVG.

Теперь, в том же меню Файл , жмем Сохранить , откроется диалоговое окно, где вы укажете имя файла, скажем, swedish_flag.svg и директорию, куда сохранить его.

А чтобы можно было использовать рисунок в других графических программах или помещать в Сети, его следует экспортировать в растровый формат. Для этого идем Файл ⇨ Экспортировать в растр . Откроется диалог, как на рисунке 14.

Рис. 14

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

Сегодняшний урок подошел к концу, в следующей главе мы займемся более сложным делом.

Глава 3, в которой мы освоим применение направляющих, узнаем как группировать объекты, научимся рисовать звезды и перемещать их по холсту в точно заданную точку

Темой сегодняшнего урока снова станет флаг — на этот раз флаг Евросоюза. В процессе его изображения мы узнаем:

• Как пользоваться направляющими
• Как рисовать пентаграммы
• Как группировать объекты
• Как дублировать объекты
• Как перемещать объекты
• Как располагать объекты по оси Z

Флаг Евросоюза представляет собой 12 золотых звезд на синем фоне.

Рис. 1

Из прошлого урока мы знаем, как важен точный расчет деталей изображения на основе точной информации о изображаемом объекте. Соотношение сторон Еврофлага — 27:18, следовательно размеры документа будут кратны этим величинам. Скажем, 270х180 пикселей.

Цвет звезды по системе RGB: 255, 204, 0

Цвет фона — RGB: 0, 51, 153

Звезды флага являются правильными пятиугольниками (пентаграммами) с большим радиусом R1 , равным 1/18 высоты флага.

В правильной пятиугольной звезде соотношение большого и малого радиусов r2/R1 = 0,382 (рисунок 2).

Рис. 2

Значит, если мы создадим документ с размерами 270х180 пикселей, то большой радиус звезды будет равен 10 пикселям. Создадим сетку с интервалами по X и по Y равными 10 пикселям, обеспечив прилипание узлов к линиям сетки и направляющим.

Создаем документ и сетку самостоятельно, пользуясь знаниями, приобретенными на прошлом уроке.

Теперь необходимо создать Напраляющие , пересекающиеся точно в центре документа.

Для создания горизонтальной направляющей берем мышью верхнюю линейку (расположенную непосредственно над холстом) и перетаскиваем ее приблизительно на середину документа. Полученная тонкая линия и называется Направляющей . При наведении на нее инструмента Выделитель (F1) , она изменит цвет на красный. Пока она красная, делаем на ней двойной клик, и откроется диалоговое окно Направляющая (рисунок 3).

Рис. 3

Рассмотрим подробнее это диалоговое окно:

• По оси Х вписываем абсциссу середины документа: 270/2=135 пикселей. Это выставит центр направляющей (маленький кружок) точно посередине страницы.
• По оси Y впишем 90 пикселей (180/2), так что направляющая разделит документ по высоте строго пополам.
• Угол (в градусах) оставим равным нулю, так как нам нужна горизонтальная направляющая (если выставить 90°, то получим вертикальную направляющую).

Теперь создаем вертикальную направляющую. Для этого берем левую линейку и перетаскиваем на холст. Можно также взять еще одну горизонтальную и при помощи диалогового окна Направляющая придать ей вертикальную ориентацию. В любом случае важно отцентровать ее по осям X и Y.

В результате имеем две направляющие, пересекающиеся точно в центре документа. Как на рисунке 4.

Рис. 4

На рисунке 4 изменен цвет направляющих на зеленый, чтобы они отличались от линий сетки. Это можно сделать в меню: Файл ⇨ Свойства документа ⇨ Направляющие .

Из точки пересечения направляющих и начнем рисовать первую звезду. Увеличим масштаб. Это делается при помощи клавиши +, либо в окошке Индикатор текущего масштаба (Лупа) на нижней раме окна Inkscape.

Возьмем инструмент Рисование звезд (горячая клавиша "*"). На Панели настройки инструмента выберем пиктограмму звезды, количество углов 5 и отношение радиусов 0,382. (Выпадает список всяческих вариантов, среди которых есть пентаграмма).

Начинаем рисовать из точки пересечения направляющих, и ведем инструмент вверх до точки пересечения направляющей с первой же линией сетки. Если мы подключили прилипание к сеткам и к направляющим, то ошибиться довольно трудно. Так как расстояние между линиями сетки составляет 10 пикселей, то и звезда получится с большим радиусом R1 равным 10 пикселям, или 1/18 высоты флага (180/18=10). Уберем заливку звезды, а обводку установим толщиной в 0,25 пикселя.

Рис. 5

Образец звезды у нас есть. Теперь нужно расположить 12 звезд согласно спецификации: по окружности радиусом в 1/3 высоты флага (180/3=60 пикселей) и в порядке цифр на циферблате часов. Эту задачу можно выполнить несколькими способами: можно нарисовать окружность, разделить ее на 12 частей, и в каждой из 12 точек поместить звезду; можно копии нашей звезды из центра документа переместить на точки с вычисленными координатами; можно придумать и другие варианты.

Мы пойдем по самому простому пути.

Сначала установим масштаб порядка 400%.

Затем снимем выделение с уже нарисованной звезды. Для этого достаточно кликнуть на любом пустом месте холста.

Потом снова берем инструмент Рисование звезд и многоугольников (горячая клавиша "*"). Рисуем из точки пересечения направляющих строго вверх правильный двенадцатиугольник. Его верхний угол должен лежать на пересечении вертикальной направляющей и шестой по счету от центра линии сетки. Настройки инструмента можно видеть на рисунке 6.

Рис. 6

Чтобы разместить звездочки по всем двенадцати вершинам многоугольника нужно по-другому настроить прилипание. На Панели прилипания отключаем прилипание к Сеткам, Направляющим (их кнопки обычно не помещаются в окне, чтобы их увидеть нужно нажать черный уголок внизу панели) . Зато подключаем видимые кнопки Прилипать центрами объектов и Прилипать к острым узлам (они показаны на рисунке 7).

Для начала передвинем имеющуюся звезду в вершину, соответствующую 12 часам. Выделим объект инструментом Выделитель (F1) и им же перетащим на место. Следим за подсказками, появляющимися возле указателя (нам нужно, чтобы средняя точка объекта прилипала к острому узлу) как на рисунке 7.

Рис. 7

Вторую звездочку изготовим методом дублирования. При дублировании возникает копия (дубль) выделенного объекта, и располагается точно над образцом, так что обнаружить дубль можно только потаскав его инструментом Выделитель (F1) . Не забудьте потом отменить ненужные перемещения при помощи горячих клавиш Ctrl+z или меню Правка ⇨ Отменить .

Теперь сдублируем звезду. При выделенном объекте нажимаем клавиши CTRL+d (можно выбрать меню Правка ⇨ Продублировать , а можно щелкнуть правой кнопкой мыши на объекте и выбрать Продублировать из всплывшего меню). Дубликат уже выделен и размещается поверх оригинала.

Остается взять его Выделителем (F1) и переместить в следующую вершину (рисунок 8).

Рис. 8

Продолжаем дублировать и перетаскивать, пока все 12 еврозвездочек не встанут по кругу.

Выделим и удалим (при помощи клавиши Del ) двенадцатиугольник — он нам больше не нужен.

Теперь выделим все звезды, кликая по ним инструментом выделения, удерживая при этом клавишу SHIFT , либо нарисуем инструментом Выделитель (F1) квадратную рамку вокруг всех звезд, как мы выделяем несколько значков на рабочем столе (метод "резинки"). Все звезды окажутся выделены. Потом сгруппируем их (Объект ⇨ Сгруппировать) . Для чего группировать? Чтобы залить их желтым цветом и убрать обводку не по одной, а у всех сразу. И вообще, нужно привыкать к порядку.

Открываем окно Объект ⇨ Заливка и обводка и заливаем группу звезд цветом RGB: 0, 51, 153 или, иначе говоря, RGBA: fecc00ff .

Рис. 9

Осталось создать фон. Подключаем прилипание к Кайме холста (кнопка не видна — нажать на черный уголок внизу панели) .

Рис. 10

Инструментом рисуем прямоугольник на весь Документ , он прилипнет к краям Страницы. Заливаем его цветом RGB: 0, 51, 153 (003399ff) .

Рис. 11

Пардон, а где же звезды? Они остались "внизу" под фоном. Всякое изображение на документе находится на своем уровне. Хотя у нас всего один слой, но все равно он как бы слоистый. Это называется расположением по оси Z (воображаемой оси, перпедикулярной плоскости холста). Регулировать положение выделенного объекта на оси Z можно при помощи клавиш:

• HOME — поднять на самый верхний план
• PgUp — поднять
• PgDown — опустить
• END — опустить на задний план

Еще можно делать это из меню Объект (те же самые позиции), или при помощи соответствующих пикограмм на Панели настройки инструмента Выделения (F1) .

У нас два пути: или поднять звезды на самый верх, или опустить фон в самый низ. Поскольку фон проще выделить, так как он на виду, выделяем его и жмем клавишу PgDown . Вот и звезды. (Если бы мы не сгруппировали звезды, то пришлось бы нажимать клавишу PgDown двенадцать раз, по числу звезд, или применить клавишу END .

Рис. 12

Осталось спрятать направляющие и сетку. (Вид ⇨ Сетка/Направляющие) .

Флаг готов. Очищаем defs и сохраняем его. При желании экспортируем в растровый формат PNG .

На сегодня все, а в следующий раз мы оставим детские игры с флажками и вплотную займемся контурами.

Глава 4, посвященная контурам, кривым Безье и градиентам.

Сегодня мы будем изображать забавную помесь утюга со шрифтом. При этом мы узнаем:

• Как импортировать растровое изображение
• Как сделать векторный контур растрового изображения
• Как работать с контурами и кривыми Безье
• Как создавать текстовые объекты и превращать их в контуры
• Как заливать объект градиентом

Наше сегодняшнее изображение выглядит так:

Рис. 1

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

Рис. 2

Создаем документ размером 500x500 px, отключаем прилипание глобально, сетка нам не понадобится.

Теперь берем файл снимка и перетаскиваем мышью на холст. Тут же мы увидим не слишком понятное диалоговое окно (рисунок 3).

Рис. 3

Что это значит? — Существует два способа отражения растровых (не векторных) изображений в программе Inkscape.

Для наших целей подходит второй вариант — Связать фото утюга. Все равно будем удалять его впоследствии.

Итак, фото утюга у нас на холсте. Это называется импортом растровых изображений. Можно воспользоваться меню Файл ⇨ Импортировать . Никакой разницы между двумя этими способами нет.

Теперь будем обводить растровый файл контуром. В Inkscape существуют механизмы автоматической векторизации растровых изображений, но сейчас они нам не нужны. Гораздо быстрее, надежнее и экономичней (в смысле размера файла) обвести фото утюга векторным контуром.

Для этого возьмем инструмент , который откликается на горячие клавиши SHIFT+F6 , и предназначен чтобы Рисовать кривые Безье и прямые линии . Что такое кривые Безье, вы посмотрите в Интернете, а работать с ними очень приятно и интересно.

Увеличиваем масштаб процентов до 250, и начинаем ставить точки (узлы) инструментом SHIFT+F6 . Поставим первую точку левым кликом мыши и тянем паутинную линию до следующего угла или изменения кривизны. Чем больше узлов, тем труднее потом создать красивый контур, и тем больше размер файла. Впрочем, недостающие узлы всегда можно добавить, а лишние — убрать.

Прокручиваем холст по вертикали колесиком мыши, по горизонтали SHIFT+колесико мыши . Дойдя по контуру до начального узла, кликаем на нем, и контур замыкается.

Чтобы увидеть узлы как на рисунке 5, нужно взять инструмент (F2 ) и кликнуть им на контуре.

Рис. 5

Затем еще увеличиваем масштаб и правим неудачно легшие точки (просто перетащив их мышью), лишние удаляем, выделив их кликом мыши и нажав клавишу DEL . Чтобы добавить недостающий узел, нужно дважды кликнуть инструментом F2 .

Потом начинаем гнуть прямые отрезки, превращая их в кривые Безье. Все это делается тем же инструментом F2 . Гнуть можно, взявшись за линию контура и потянув мышью, а можно за рычаги, которые появляются у узлов при изгибании линии. Рычаги могут поворачиваться и изменять свою длину, позволяя очень точно подогнать контур к изображению (рисунок 6).

Рис. 6

Обработав неспешно наружный контур, тем же способом обрабатываем контур внутри ручки утюга.

Оба контура нам надо объединить в один, чтобы между ручкой и корпусом утюга получилась "дыра" как у калача. Для этого нужно выделить наружный и внутренний контуры, удерживая клавишу SHIFT . Как на рисунке 7.

Рис. 7

А затем объединить, пройдя в меню Контур ⇨ Объединить . Вот как выглядит объединенный контур (рисунок 8), после того как удалено растровое фото. (Чтобы удалить, нужно выделить его инструментом F1, а затем нажать клавишу DEL )

Рис. 8

Настало время заняться текстом. Берем инструмент Текст (F8 ) и производим необходимые настройки на Панели настройки инструмента. Здесь выбран шрифт Nimbus Roman #9 L — он с большими красивыми засечками, Размер шрифта : 144 и начертание Жирное (рисунок 9).

Если у вас нет подходящего шрифта, то установите его как заведено в вашей операционной системе. Inkscape найдет системные шрифты при следующем запуске программы.

Где-нибудь под утюгом кликаем инструментом Текст , и печатаем слово "УТЮГ" заглавными буквами. Если вы забыли сделать настройки, то еще не поздно, текст изменится прямо на глазах.

Рис. 9

Затем выделяем текст инструментом F1 и при помощи стрелочек вокруг пунктирного прямоугольника выделения подгоняем размер текстового блока к размеру контура утюга и устанавливаем на нужное место.

Рис. 10

Чтобы иметь возможность видоизменять текст, нужно превратить его в контур. При этом он потеряет свойства текста (возможность редактирования, небольшой "вес"), но приобретет все свойства контуров. Превращение это необратимо, обратно из контуров текст получить никак невозможно (хотя можно отменить это действие).

Итак, в меню Контуры ⇨ Оконтурить объект . Рамка выделения становится меньше, теперь она вплотную к буквам. А применив инструмент F2 можно увидеть узлы новых контуров, как показано на рисунке 11.

Рис. 11

Чтобы было удобнее работать с контурами букв, уберем заливку текста, а обводку поставим 1 пиксель. Затем, удерживая клавишу SHIFT , инструментом F2 выделим все верхние узлы в каждой букве. При этом выделенные узлы окрасятся в синий цвет, как на рисунке 12. Затем при помощи стрелки вверх на клавиатуре поднимем выделенные узлы на некоторое расстояние.

Рис. 12

Всем хорош рисунок 12, да подвели буквы У и Г — лишние узлы оказались, не попавшие в выделение. Но дело это легко поправимо. Разберем на примере буквы Г . Сначала выделим и удалим лишний узел, не пожелавший подняться вверх. Косая перекладина при этом исчезнет. Затем выделим вместе верхние узлы буквы, оставшиеся несоединенными. Нажмем на пиктограмму Соединить контуры по выделенным оконечным узлам новым сегментом . Эта пиктограмма находится на Панели настроек инструмента прямо над холстом, и хорошо видна на рисунке 13.

Рис. 13

Контур между выделенными узлами будет замкнут. Таким же образом поступим с буквой У .

Спрашивается, почему мы просто не перенесли лишние узлы на место? Дело в том, что в таком случае контуры букв У и Г были бы не замкнутым, и это могло попортить нам много крови при дальнейшей обработке изображения. Порядок — это когда все контуры замкнутые.

Исправив контуры, продолжим подъем верхнего ряда узлов. Для этого придется снова все их выделить, но теперь пространство позволяет не кликать на каждом, а, тем же инструментом F2 , обвести все точки длинным прямоугольником, как мы выделяем группу файлов на рабочем столе (так называемый "метод резинки").

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

Рис. 14

Что дальше? Правильно, контуры нужно объединить, причем не просто объединить, а суммировать, чтобы исключить все лишние части текста внутри контура утюга. Выделяем оба контура. Идем Контуры ⇨ Сумма . И перед нами сумма двух контуров (рисунок 15).

Рис. 15

Теперь осталось залить объединенный контур градиентом.

Градиентом называется заливка, в которой один цвет плавно переходит в другой. Нам нужен плавный переход от черного к красному. Открываем окно Заливка и обводка и во вкладке Заливка нажимаем пиктограмму Линейный градиент (рисунок 16).

Рис. 16

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

Но пока мы имеем градиент от черного к прозрачному, хотя у вас может быть и другой , это нам не подходит, мы нажимаем клавишу Изменить и появляется окно Редактор градиентов (рисунок 17).

Рис. 17

В окне Редактор градиентов на самом верху узкая полоса (частично скрытая на рисунке 17) показывает текущий градиент. Ниже идет секция опорных точек градиента (на ней покоится указатель мыши). У нас должно быть две опорных точки: черная и красная. Клик мышью в любом месте секции (а не только на стрелочках в правом ее конце) вызывает список опорных точек (на рис. 17 это stop3794 и stop3796 ).

При помощи мыши подсветим синим первую опорную точку. Черная опорная точка должна иметь черный цвет RGB: 0,0,0 при полной непрозрачности 255.

Подсвечиваем синим вторую опорную точку и выставляем ее красный цвет RGB: 255,0,0, как на рисунке 17. Непрозрачность 255 (обратите особое внимание на шкалу непрозрачности А — про нее часто забывают, а потом удивляются, почему градиент прозрачный).

Перейдем в основное окно, и возьмем инструмент (F2 ). Мы видим следующую картину (рисунок 18).

Рис. 18

Мы получили градиент, идущий от черного к красному справа налево. А нам нужно сверху вниз, да еще с отражением.

Видите рычаг градиента, который я пометил черной стрелкой на рисунке 18? Виден он только при помощи инструмента F2 . На левом конце рычага квадратик (первая опорная точка), а на правом — кружок (вторая опорная точка градиента). За эти квадратик с кружком рычаг градиента можно перетаскивать, разворачивать, удлинять и укорачивать как угодно. Перетащив квадратик в область ручки, а кружок на середину утюга, мы получим что хотели (рисунок 19).

Рис. 19

Рычаг градиента на рисунке 19 я вынес за пределы контура, для лучшей наглядности. Обратите внимание, что рычаг не строго вертикален, а чуть наклонен, чтобы красная линия шла параллельно подошве утюга.

Теперь осталось кликнуть инструментом где-нибудь вне контура и все узлы и рычаги исчезнут.

Очищаем defs.

Сохраняем файл в своем архиве. Работа завершена.

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

Глава 5, в которой мы познакомимся с автоматической векторизацией растровых изображений

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

Мы почти не коснемся вопросов ручной обводки контуров, тема эта довольно подробно раскрыта в статье "Inkscape: Продолжаем освоение свободного редактора векторной графики" , а также в настоящего Путеводителя.

Темой занятия будет автоматическая векторизация при помощи встроенной в Inkscape программы .

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

Первым делом нужно импортировать растровое изображение в Inkscape. Проще всего это сделать, перетащив мышью файл в окно программы.

Затем пройти в меню Контуры ⇨ Векторизовать растр . Появится окно, изображенное на рисунке 1.

Рис. 1

В этом окне три области:

Одиночное сканирование (имеется ввиду однократное) — отмечено зеленым цветом.

Множественное сканирование (сканирует несколько раз, число сканирований указывается в окошке). Результаты этих сканирований укладываются стопкой по оси Z.

Предпросмотр . В этой области, после нажатия клавиши Обновить возникает предварительный результат обработки.

Выбор метода сканирования осуществляется нажатием на одну из радиокнопок, независимо от того, к какой области она относится. Можно выбрать только одну кнопку за раз; если данный метод возможен, то в области Предпросмотра появится изображение.

Если вас устраивает результат предпросмотра, нажимаете кнопку ОК , запустив сам процесс векторизации. При больших размерах растровых файлов он может занимать довольно ощутимое время.

Каким же процессом пользоваться в каждом конкретном случае? Это может показать только эксперимент. Пробуйте разные методы, с разными порогами, пробуйте одиночное и множественное сканирования, не забывайте про вкладку Параметры .

Приведу несколько примеров для пояснения процесса.

1. Простое цветное рисованное изображение с текстом.

Рис.2

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

Рис. 3

Как говорится, найдите пять отличий.

Одно нехорошо, "весит" этот SVG файл почти 4 МЕГАбайта! Ведь это изображение — стопка из 32 отдельных контуров разных цветов. Такого размера файлы никуда не годятся.

Получить хорошие контуры можно и уменьшив число цветов при множественном сканировании в цвете до четырех. На рисунке 4 показан сам оригинал (в верхнем ряду) и четыре разноцветных контура.

Рис. 4

Они были "вытащены" из стопки и поставлены рядом. При этом зеленый контур наиболее удачный, его вполне можно разбить (Контур ⇨ Разбить ) на отдельные контуры, потом дать каждой части соответствующую заливку и обводку, и получится небольшая по весу и очень качественная векторная копия. При этом доля ручного труда минимальна.

2. Простая рисованная эмблема

Возьмем для примера простой одноцветный логотип фирмы Адидас (рисунок 5, вверху).

Рис. 5

Для его векторизации я применил одиночное сканирование с определением краев. Все настройки оставил по умолчанию. Получился неплохой контур, пригодный для заливки и обводки. А если его немного подправить вручную, убрав лишние узлы и спрямив некоторые кривые Безье, да еще заново нарисовав торговый знак ®, то получится логотип по качеству лучше исходного образца.

3. Увеличенный фрагмент фотографии

Приведенный ниже логотип — сильно увеличенный фрагмент фотографии вагона поезда.

Рис. 6

Его векторизовали в два этапа. Сначала применили одиночное сканирование с Сокращением яркости при пороге 0,150. Получился верхний контур на рисунке 7.

Рис. 7

На нем прекрасно виден символ монад — Ян и Инь, зато шрифт не удался совсем. Тогда порог увеличили до 0,650 и вышел контур в середине рисунка 7.

С ним немного поработали вручную, окружности нарисовали инструментом Для рисования кругов и эллипсов (F5 ), Красный Ян чуть-чуть подправили, и получили логотип на твердую "четверку". (Снизу на рисунке 7). Если бы еще подправить буквы, то было бы лучше чем у фирмы.

4. Средней сложности изображение с плохой по качеству фотографии.

Удалось скачать знакомую нашим отцам до боли в легких картинку с папирос Казбек (рисунок 8).

Рис. 8

Фотография, как видите, некачественная, сделанная с какой-то помятой пачки папирос. Однако из нее удалось создать вполне приличный логотип, причем ручная обработка потребовалась только в части шрифта (рисунок 9).

Рис. 9

Было применено множественное сканирование при 6 цветах. Результаты с разобранной стопкой контуров на рисунке 10.

Рис. 10

Из 6 контуров было отобрано 3 (рисунок 11).

Рис. 11

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

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

В следующей главе мы займемся изображением объемных предметов: кубиков и коробочек.