Първи стъпки във векторната графика: Adobe Illustrator и Inkscape

Лого, иконка, илюстрация за детска книжка, инфографика, табела на магазин: всички те обикновено започват като векторна графика. Векторът е един от основните инструменти на графичния дизайнер, а две от програмите за него са платеният Adobe Illustrator и безплатният Inkscape. Тук обясняваме принципа, който е еднакъв и в двете, и първите упражнения, с които си струва да започнете.

Вектор и растер: каква е разликата

Снимката от телефона е растерно изображение: мрежа от пиксели с фиксиран брой. Увеличите ли я достатъчно, виждате квадратчетата. Векторното изображение не пази пиксели, а описание на формите: точки, линии и криви между тях, с цветове на запълването и на контура. Програмата изчислява формите наново при всеки размер.

Описанието на Inkscape го казва точно: векторната графика позволява остри разпечатки и изображения с неограничена резолюция и не е обвързана с фиксиран брой пиксели като растерната. Затова едно лого, нарисувано веднъж, става и за визитка, и за билборд.

Растерът остава незаменим за снимки и рисуване с мека четка. Векторът е за всичко, което има чисти форми и трябва да се мащабира.

SVG: отвореният векторен формат

SVG (Scalable Vector Graphics) е стандартът на W3C за двуизмерна графика. Според консорциума той се състои от формат на файла, базиран на XML, и програмен интерфейс. Тъй като XML е текст, SVG файловете могат да се създават и редактират и с текстов редактор, а W3C изтъква независимостта от резолюцията като силна страна, включително за печат.

За дизайнера това има две практически последици. SVG се отваря директно в браузърите, затова е естественият формат за иконки и логота в сайтове. И front-end разработчикът може да промени цвета или да анимира част от него с CSS и JavaScript, без да ви моли за нов файл.

Illustrator или Inkscape

Adobe Illustrator е комерсиалната векторна програма на Adobe и работи заедно с останалите ѝ програми. Плановете на страницата на Adobe са годишни абонаменти с месечно плащане; на страницата с плановете Adobe предлага 7-дневен безплатен пробен период за настолната версия, за iPad и за уеб.

Inkscape е свободен векторен редактор с отворен код за Linux, Windows и macOS, разпространяван под лиценза GPL. Ползва се за художествени и технически илюстрации: карикатури, клипарт, логота, типография, диаграми и блок-схеми. Основният му формат е SVG, а може да отваря и записва и SVG, AI, EPS, PDF, PS и PNG.

Принципите са едни и същи и уменията се пренасят. За учене от нулата Inkscape е напълно достатъчен и не струва нищо. Ако клиентите или екипът, с който работите, разменят файлове във формата на Illustrator (AI), ще ви трябва и той, затова е добре да го пробвате, когато основите вече са ви ясни.

Писалката: инструментът, който трябва да овладеете

Всичко във векторната програма се свежда до пътища (paths): поредица от възли (anchor points), свързани с отсечки или криви. Кривите се управляват от дръжки, които излизат от възлите. Овладеете ли писалката, можете да нарисувате всяка форма.

Ръководството на Inkscape описва поведението на инструмента Писалка (Bezier, клавиш B), което е почти същото в Illustrator:

• щракване създава остър възел без дръжки; поредица от щраквания дава начупена линия от прави отсечки;
• щракване и плъзгане създава гладък възел с две срещуположни дръжки, т.е. крива;
• Shift по време на плъзгане завърта само едната дръжка;
• Ctrl ограничава посоката на отсечката или дръжката до фиксирани ъгли.

Правилото на опитните: слагайте възли възможно най-рядко, в крайните точки на кривите, а не по средата им. Малко възли дават гладки форми, които лесно се редактират.

Пет упражнения за първата седмица

1. Прости форми и цвят. Нарисувайте правоъгълници и елипси и сменете запълването и контура им. В Inkscape панелът „Запълване и контур“ се отваря с Shift+Ctrl+F.
2. Булеви операции. Съберете, извадете и пресечете две форми, за да получите нова. В Inkscape те са в менюто Path; Разликата и Изключването работят с точно два обекта, а резултатът взема стила на долния обект.
3. Прерисуване. Сложете снимка на чаша или листо на долен слой и я прерисувайте с писалката.
4. Иконка в мрежа. Нарисувайте проста иконка в квадрат 24 на 24 единици и я запишете като SVG.
5. Текст в криви. Напишете дума, превърнете я в пътища и променете една буква на ръка: това е първата стъпка към логото.

Накъде след първите упражнения

Векторната графика е основата, но дизайнът е повече от програмата: композиция, типография, цвят и разбиране на клиента. За професията вижте какво работи графичният дизайнер и кой вид дизайнер да станете. Как едно лого или една илюстрация минават от заданието до предаването на файловете, обясняваме в дизайнерския проект от А до Я.