Фінальний результат 
Як відомо, Векторні ілюстрації в даний час дуже популярні у веб-графіці. Професійні дизайнери можуть створювати такі ілюстрації за лічені години. Якщо Ви новачок або любитель, уроки веб-графіки, безумовно, будуть дуже корисні для Вас. Мета цього уроку – пролити світло на процес створення обраного зображення. Крок за кроком продемонструю весь процес і за допомогою моїх коментарів поясню всі етапи.
Щоб створити справді класне зображення, Ви повинні вибрати потрібну програмуі дотримуватися певних правил. Якщо Ви хочете намалювати Векторну ілюстрацію, то повинні мати на увазі, що для цього використовуються такі редактори як Adobe Illustratorабо CorelDraw. Разом з тим, Photoshopмає в своєму розпорядженні достатні засоби для розробки векторних ілюстрацій. Я наочно покажу це у своєму уроці, як перевести малюнок у вектор. Я вибрав скетч кота як основу для ілюстрації. Я вирішив зобразити синього кота з рожевими квітами у лапах.
Крок 1
Почнемо зі створення фону. Намалюємо форму за допомогою інструмента виділення () (у режимі Shape Layers(Шар Фігура)). Налаштування - (Непрозорість заливки) = 0% . Тепер використовуємо накладання градієнта: ((Стиль шару - Накладання градієнта)) для заповнення створеної фігури. Всі налаштування за замовчуванням, вам тільки потрібно змінювати кут (я вказуватиму ступінь) і градієнт. Додаємо Stroke(Обведення) ( (Стиль шару - Обведення)). Використовуємо всі параметри за замовчуванням, крім ширини в 1 рх та кольори.
Інструменти для роботи з вектором Photoshop з'явилися досить давно, але використовувати їх у роботі почали порівняно недавно. Це з тим, що дуже тривалий час вони були “сирими” тощо. вектор у фотошопі не є профільним інструментом для роботи, його не допрацьовували. Але все змінилося з виходом Photoshop CC.
Навіщо потрібен вектор у фотошопі
Спочатку хочу розповісти чому я використовую вектор у фотошопі. Є безліч векторних редакторів, що зарекомендували себе. Найпоширеніші це Illustrator, CorelDraw, Xara. Найчастіше я займаюся веб-дизайном, а значить моя робота не є кінцевим результатом. Тобто. перш ніж стати сайтом, інтерфейсом, додатком макет потрапить верстальнику. Більшість верстальників досконало володіють Photoshop, але дуже поверхово знайомі з Illustrator. Тому бажання "запхати" все в один файл цілком логічно. Здорово коли верстальник отримує один PSD в якому міститься повний макет та ще й з можливістю редагування елементів. Змінити колір кнопки, змінити радіус форми меню, збільшити або зменшити блок без втрати якості - за 2 кліки та 1 хвилину! Вектор у фотошопі дозволяє це зробити без особливих навичок.
Особливості роботи з вектором у фотошопі
Якщо ви раніше працювали в будь-якому векторному редакторі, то багато здасться знайомим. Але багато до чого доведеться звикати. Вся робота у фотошопі будується з шарами, це торкнулося всіх векторних інструментів.
1. Щоб легко редагувати вектор у фотошопі, необхідно кожну фігуру розташовувати в окремому шарі.
2. Операції з “злиття”, “віднімання”, “накладення” краще застосовувати лише до двох об'єктів.
3. Після операції "злиття", "віднімання", "накладання" контури вихідних об'єктів залишаються доступними до редагування.
4. До всіх векторних об'єктів можна легко використовувати растрові стилі. Це дуже зручно.
5. До векторних об'єктів можна застосовувати прозорість та накладати на них фільтри.
6. Окремі шари та групи шарів із векторними об'єктами можна легко клонувати всередині документа або копіювати в інший документ PSD.
7. Підписуйте кожен шар і групуйте шари - це заощадить масу часу.
Основні примітиви
Як і в будь-якому векторному редакторі, вектор у фотошопі має готові примітиви. Основні примітиви:
"Прямокутник", "Прямокутник з округленими кутами", "Еліпс", "Многокутник", "Лінія", " Довільна фігура”. У кожної фігури (у будь-який момент часу) можна задати товщину/тип/колір обведення та заливання. Для специфічних примітивів є додаткові властивості. Наприклад, у багатокутника можна задати кількість кутів, а у прямокутника з круглими кутами можна задати радіус заокруглення.
Основні інструменти
Щоб намалювати довільний вектор або редагувати існуючий (в т.ч. і контур примітивів) необхідно використовувати інструменти “Перо” (малюємо довільний контур), “Перо+” (додаємо нові опорні точки в готовий контур), “Перо-“ (видаляємо опорні точки з готового контуру), "Вільне перо" (малюємо довільний контур від руки), "Кут" (міняємо вигини кривих контуру, задаємо типи з'єднань між опорними точками). 
Для ілюстрації процесу коротке відео з якого ви дізнаєтесь:
1. Як створити примітив
2. Як намалювати довільну векторну фігуру
3. Як правити контур примітиву
4. Як правити контур довільної векторної фігури
Основні операції з вектором у фотошопі
Усього доступно 4 операції: "Об'єднання фігур", "Відняти передню фігуру", "Об'єднати фігури в накладенні", "Відняти фігури в накладенні". Всі ці операції доступні через головне верхнє меню Шари > Об'єднати фігури, або через панель інструментів “Властивості” (верхнє меню Вікно > Властивості).
Увага! Перш ніж розпочати якісь операції з об'єднання векторних фігур переконайтеся, що шари цих фігур виділені в панелі інструментів "Шари" (включити її F7 або Вікно > Шари).
Коротке відео, що ілюструє основні операції "об'єднання фігур" у фотошопі.
Змінюємо колір, розмір та застосовуємо стилі
Ось ми дійшли до найцікавішого. Вектор у фотошопі дозволяє змінити розмір як у більшу, так і в меншу сторону без втрати якості. Для цього виберіть потрібні шари в панелі інструментів “шари”, натисніть Ctrl+T (або Command+T якщо у вас MAC)та перетягуючи маркери виділеного контуру мишкою відрегулюйте розмір. Щоб розмір змінювався пропорційно необхідно затискати клавішу Shift. 
Коротке відео:
1. Змінюємо розмір векторної фігури
2. Змінюємо колір заливки векторної фігури
3. Додаємо стиль до векторної фігури
Завантажити приклад PSD (безкоштовно)
Що б вам простіше було розібратися як використовувати вектор у фотошопі і подивитися як на практиці можна застосовувати ці інструменти, я викладаю файл Інфографіки виконаний мною повністю з використанням векторних інструментів.
Задати питання
Якщо у вас щось не виходить або виникли питання, пишіть у коментарях і я допоможу вам розібратися. Також ви можете подивитися відео за допомогою векторних інструментів.
Незважаючи на те, що Photoshop редактор растрової графіки, в наборі його інструментів передбачені і деякі векторні інструменти. Векторні інструменти призначені насамперед для створення кривих, що редагуються, - контурів. Для того, щоб освіжити вашу пам'ять, нагадаємо, що відмінність між растрової та векторної графіки полягає у способі зберігання та опису графічної інформації. Векторні малюнки зберігаються у вигляді математично описаних кривих, які не втрачають як при масштабуванні, у будь-який момент підлягають нескладному і гнучкому редагуванню. Спочатку розглянемо принцип побудови векторних кривих.
Векторні контури будуються на відрізках, які мають ключові вузли та котрольні точки. Ключові вузли обмежують відрізок з двох сторін, а котрольні точки дозволяють керувати вигином кривих.
Для створення кривих використовуються інструменти групи Pen. Інструмент Pen Toolпризначений для створення кривих за ключовими вузлами. Принцип дії цього інструмента полягає у наведенні ключових точок відрізка контуру. Якщо при вказівці контрольної точки, не відпускаючи кнопку миші, рухати її, то у ключової точки з'явиться відрізок, що містить контрольну точку. Далі рухи мишею вже безпосередньо впливають на контрольну точку, і, у свою чергу, на вигин відрізка. Наступний клацання лівою кнопкою миші встановить наступну контрольну точку, і т.д.
Інструмент Pen tool може працювати у двох режимах – створення кривих та створення так званих форм – замкнутих векторних областей. Перемикання між цими режимами здійснюється кнопками – режим створення контуру, – режим створення форми. Якщо ви працюєте в режимі створення форм, то контур, що створюється, буде вважатися завжди замкнутим і, як наслідок, залитим обраним вами кольором. Фізично на панелі Layers створюється шар-маска на основі векторного малюнка. Сам шар заливається вибраним вами кольором (колір вибираєте на палітрі властивостей).
Принцип роботи з векторною маскою трохи відрізняється від принципу роботи з растрової маскою, відрізняються лише засоби. Якщо у разі роботи з растрової маскою ви змінювали її за допомогою інструментів малювання, то в даному випадку зміна форми маски відбувається за допомогою векторного інструментарію.
Для того, щоб перетворити векторну маску на растрову, потрібно викликати контекстне меню векторної маски і вибрати пункт Rasterize Mask. В результаті ви отримаєте звичайну маску шару. В іншому робота з маскою шару у векторному варіанті не відрізняється від роботи у растровому варіанті.
Векторні малюнки зручні тим, що будь-якої миті дуже зручно можна змінити форму кривих цього малюнка. І тому існує ряд інструментів. Наприклад інструмент (додавання ключових точок – вузлів) – додає ключові точки на кривій там, де ви клацніть. Інструмент може видаляти зайві точки на контурі при клацанні на точці, що видаляється. Насправді переключатимуться на ці інструменти зовсім не обов'язково. Зверніть увагу на перемикач Auto Add/Deleteна панелі властивостей. Якщо цей режим увімкнено (встановлено прапорець), то інструмент Pen Tool автоматично буде перемикатися на інструмент додавання точки (коли ви його помістите над контуром) та інструмент видалення точки (коли ви помістите його над вже існуючою точкою). Якщо режим вимкнути, то видалення та додавання точок буде можливим лише при використанні відповідних інструментів.
Управління вигином кривих здійснюється через контрольні точки. Для вибору контрольної точки використовується інструмент Direct Selection Tool. Вибравши вузол для редагування (клацання цим інструментом по редагованому вузлу). Потім рухаючи контрольні точки, ви впливаєте на вигин кривої в області обраного вузла. Також за допомогою цього інструменту можна переміщати вибрані вузли. Інструмент Path Selectional Toolпризначений для роботи з кривою в цілому, як з об'єктом – для переміщення та трансформації. Для векторних об'єктів застосовується режим Free Transform, такий самий як і для растрових областей.
Важливим інструментом роботи із ключовими вузлами є інструмент під назвою Convert Point Tool. Сенс цього інструменту полягає у перетворенні типу вузла. У векторній графіці Photoshop розрізняють два типи ключових вузлів. згладжені (smooth)і кутові (corner). Сенс згладжених ключових вузлів полягає в тому, що контрольні точки двох кривих, що сходяться в одному вузлі Завжди знаходяться на одній віртуальній лінії.
Інший тип вузла, як ми казали, називається кутовим. Сенс цього у тому, що віртульні лінії, що проходять через контрольну точку одного з відрізків та загальний ключовий вузол обох відрізків, можуть сходитися під будь-яким кутом.
Інструмент перетворення типів працює наступним чином - якщо вузол згладжений (а за замовчуванням вузли створюються згладженими), то клацання інструментом перетворення вимітить тип вузла на кутовий. Якщо після натискання кнопки миші не відпускати її, а просто потягнути, ви зможете керувати вигином відрізка в конкретному вузлі.
Почали ми з того, що виділили два режими роботи інструменту Pen Tool. Перший - режим створення форм, а другий - режим створення контурів. Зупинимося докладніше в режимі роботи з контурами.
У цьому випадку ваш контур не буде автоматично заливатись і утворювати векторну маску шару та шар. В даному випадку ваш контур буде виключно віртуальним і таким, що не має відношення до шарів. p align="justify"> Для роботи з такими контурами існує палітра під назвою Path. У цій палітрі зосереджено всі операції з контурами.
У палітрі Path контури (шляхи) розміщуються як шари на палітрі Layers, причому одному векторному шарі може бути кілька незв'язаних між собою векторних контурів. У нижньому рядку панелі Path знаходяться піктограми керування контурами. До болю знайомі піктограми зі смітником і чистим листочком, свого призначення не змінили й у цій палітрі, тобто. відповідно це видалення векторного шару та створення порожнього векторного шару.
Досі ми замислювалися для чого в такому абсолютно растровому редакторіяк Photoshop потрібні ці векторні інструменти. Простий приклад використання векторів у Photoshop – це знову-таки робота з виділеннями. Як ви бачите з малюнка, ряд піктограм панелі Path призначений для перетворення контуру (шляху) у контур виділення та навпаки. Насправді після отримання деяких навичок роботи з контурами ви зрозумієте, що набагато легше буває підлаштувати векторний контур під форму області, що виділяється чим, навіть скористатися досить гнучкою швидкою маскою. Тому якщо ви хочете підредагувати виділення, ви завжди можете перетворити його в шлях (контур), потім підредагувати його і знову перетворити на виділення. Якщо ви хочете застосувати традиційні для контурів виділення операції типу Stroke і Fill, то вони теж у вашому розпорядженні.
Логічні операції працюють дещо несподівано. Ви можете створювати шляхи в будь-якому з логічних режимів, будь то додавання або віднімання. На цьому етапі ви жодних дій не помітите. Але не тіштеся тим, що ви знайшли баг у практично бездоганній програмі. Насправді Photoshop запам'ятовує в якому режимі ви створювали контур (контора пише ...) і як тільки ви накажете програмі створити контур виділення з вашої мішанини шляхів, то Photoshop все пригадає і зробить всі операції, які ви прописали йому при створенні шляхів. Діалогове вікно створення контуру виділення зі шляху дозволяє задати найважливіші налаштування щодо контурів виділення (але це тільки в тому випадку, якщо ви скористаєтеся командою Make Selection меню панелі Path).
Зверніть увагу, що ви можете задати радіус розтушування (Feather), увімкнути або вимкнути згладжування Anti-Aliased. У розділі Operation ви можете встановити логічний режим для виділення, що створюється знову. Опції цього розділу стають доступними лише в тому випадку, якщо один контур виділення вже існує. Відповідно, якщо ви оберете операцію New Selection то створюване виділення замістить собою вже існуюче виділення; опція Add to Selection додасть до виділення виділення створюване з контуру; Substruct from Selection - віднімає створюваний контур із існуючого виділення.
Інструмент Free Form Toolдозволяє створювати векторний контур у режимі простого малювання, на кшталт пензля. Затискаєте ліву кнопку миші і просто ведете мишку малюючи необхідний вам контур. Цей інструмент має одну головну особливість, яка уподібнює цей векторний інструмент Magnetic Lasso - це опція Magnetic. Принцип роботи такий же, інструмент шукає контрастні межі та прокладає контур тільки там. А в іншому контур створюваний цим інструментом не відрізняється від звичайного контуру.
- Переглядів: 58428
Векторні малюнки дуже популярні, але їх створення потребує неабиякого терпіння та посидючості для новачка. Програма Photoshop використовується для підготовки таких ілюстрацій - з її допомогою можна перевести фотографію у векторне зображення. У цій статті ми розповімо, чим відрізняється такий малюнок від растрового та як зробити векторне зображення у Фотошопі.
Векторне
Коли ви створите новий документ у Photoshop, напишіть на білому аркуші будь-яке слово , підібравши зручний розмір (використання функцій "Текст" - значок з літерою "Т" на панелі інструментів).
Збільште масштаб інструментом "Лупа" - ви побачите, що літери складаються з пікселів. Насправді вигляд задається формулами, тільки відображення програми виконується пікселями.
Повертаємо нормальний розмір, клацнувши двічі на значок з боку. Зменшуємо розміри так: «Редагування» - «Трансформування» - «Масштабування». При зменшенні розмірів якість букв зберігається. У такий же спосіб збільшуємо текст максимально, якість так само залишається гарною, оскільки формули працюють за будь-якого масштабу добре.
Растрове
Щоб перевести векторне зображення у Фотошопі у растрове, зменшимо готову картинку. Потім проходимо на вкладку «Шари», там вибираємо «Раструвати» – «Текст». У нас вийшли літери, які дійсно складаються з пікселів.
При збільшенні растрової картинки / тексту за допомогою функцій "Редагування" - "Трансформування" - "Масштабування", якість сильно погіршується. При повтореннях процедури якість щоразу стає все гіршою – літери стають розпливчастими.
У таких ілюстрацій зі збільшенням за алгоритмом програми заповнюються кольором нові пікселі. Це відбувається менш акуратно, ніж під час роботи формул.
Створення векторної графіки
Зробити малюнок можна за допомогою будь-якої фотографії. Якщо ви не знали, як перевести у вектор у Фотошопі фото, перетворити його, дотримуйтесь наступного алгоритму дій:
- Відкрийте фотографію/ілюстрацію. Створіть новий шар.
- За допомогою інструмента «Перо» обведіть контури одного з елементів (наприклад, обличчя). Щоб не заважало тло, поставте меншу прозорість, до 20–30%. Виберіть колір заливки та контуру.
- Далі так само промалюйте контури інших деталей, залийте їх потрібним кольором.
- Для накладання кольору на обличчі моделі можна використовувати «Фільтри». Зайдіть в "Галерею фільтрів", зробіть там "Постеризацію" на кілька рівнів, зручно на 3 рівні. Photoshop вам підкаже, як накладаються тіні, вам залишається описати їх контури. Можна додатково знебарвити, зробити фото чорно-білим, налаштувати різкість, щоб чіткіше бачити рівні. При заливці вибирайте все світліший/темніший колір для шарів. У вас утворюються переходи кольорів.
Терпіння, акуратність, неквапливість – і ваша робота буде готова. При хорошому навичці ви будете виготовляти прості малюнки досить швидко, А перевести будь-яку картинку у вектор не складе проблеми.
Підсумком кропіткої роботи стане картинка "в кривих"
Як у Фотошопі зробити векторне зображення людини на основі фотознімка? На це вам знадобиться багато шарів кольору, а отже робота займе досить багато часу. Але сам процес не такий складний, як здається, і при достатньому терпінні ви цілком справитеся із завданням і отримаєте пристойний вектор.
Комп'ютерна графіка – дуже широке поняття. Комусь при згадці цього терміну на думку спадуть тривимірні шедеври від студій Pixar та Dreamworks, інші подумають про цифрову фотографію, треті вирішать, що йдеться про оформлення комп'ютерних ігор. Але також обов'язково знайдеться чимало тих, хто зв'яже це словосполучення з векторною графікою. Незважаючи на надзвичайну популярність векторної графіки, багато користувачів абсолютно незнайомі з особливістю векторних малюнків. Що ж криється за словами «векторна графіка» і чому вона така популярна?
Звичайний растровий малюнок є деяким масивом точок. Цей масив може візуалізуватись з максимальною точністю або приблизною. У першому випадку інформація про точковий малюнок передається без втрат, але займає багато пам'яті. У другому випадку графічне зображенняможе бути передана з умовною точністю. Напрошується пряма аналогія зі звуком, який стискується без відчутних втрат у формат MP3. Для графіки подібний формат - JPG. При помірному і не дуже високому ступені стиснення вихідний масив точок цілком вгадується. Алгоритми візуалізації растрової графіки можуть відрізнятися, але їх суть однакова — картинка має жорстку прив'язку до піксельної матриці.
Для візуалізації векторного зображення використовується зовсім інший підхід. Кожен векторний малюнок створюється за допомогою геометричних фігур та кривих. Використання математики при описі малюнка дає величезну перевагу: при масштабуванні векторних елементів вихідна картинка нітрохи не втрачає якості. Растровий малюнок при зміні розмірів поводиться інакше — лінії об'єктів на зображенні при збільшенні обростають помітним «гребінцем». Ці артефакти присутні на зображенні спочатку, оскільки растровий малюнок апріорі не може містити безперервних елементів — ліній, геометричних форм тощо. Все це в растрі виглядає як матриця пікселів, яка тим помітніша, чим сильніше збільшений растровий малюнок.
Не позбавлені недоліків та векторні формати. Необхідність використання простих елементів для побудови малюнка часто стає серйозною перешкодою інтерпретації складної картинки. Наприклад, перевести звичайний пейзажний знімок у векторний формат дуже важко, оскільки об'єктів на ньому багато і їхня геометрія дуже складна.
У промисловій поліграфії векторні формати однаково добре виглядають під час друку зображень будь-яких розмірів — великих та маленьких. Растрові картинки зі збільшенням як перетворюються на мозаїку, а й можуть містити артефакти компресії. Крім цього, векторні формати зручно використовувати у програмуванні, оскільки вони легко описуються математичними виразами.
Професійні дизайнери використовують для створення векторної графіки інструменти, перевірені роками, наприклад, Adobe Illustrator та CorelDraw. Але любителю, якому потрібно швидко створити логотип для друку на футболці або технічну ілюстрацію, не потрібно вдаватися до таких громіздких і дорогих додатків. Можна обійтися безкоштовними, а іноді навіть онлайновими інструментами. З їхньою допомогою можна перевести растрове зображення у векторне, зробити малюнок нескладного дизайну, згенерувати візерунок гільйоша і так далі.
⇡ «Малюнки Google» – найпростіший векторний редактор, який завжди під рукою
Найвідоміший, найпростіший і найдоступніший онлайновий векторний редактор — це «Малюнки» у сервісі «Google Диск». Ця веб-програма входить до складу онлайнового офісу від Google і більше орієнтована на спільну роботу та додавання графічних елементів до офісних документів інших типів, ніж на створення векторної графіки. Проте все ж деякі базові засобидо роботи з нею тут є.
За допомогою веб-програми «Малюнки» можна створювати різні фігури, стрілки, виноски, графічні елементи формул, додавати прямі лінії, криві, ламані, стрілки та каракулі. Також доступне додавання текстових елементів, імпорт растрових зображень. Векторні малюнки можна імпортувати, але редагувати — ні (доступний лише перегляд).
⇡ Autotracer — безкоштовний конвертер растрових картинок у вектор.
Коли йдеться про складні векторні малюнки, іноді буває простіше не створювати їх з нуля, а векторизувати растрове зображення, тобто перетворити його на векторний формат. Цей процес також називають трасуванням.
Відповідні засоби є практично в будь-якому векторному редакторі, але векторизація може бути ще більш простою завдяки онлайновим інструментам. Можна знайти не один веб-сервіс, який пропонує такі послуги. Наприклад, дуже зручний у роботі безкоштовний ресурс Autotracer. З його допомогою можна перетворити файли PNG, BMP, JPEG та GIF у векторний формат та зберегти у формат SVG, EPS, PDF, DXF.
Сервіс повністю безкоштовний, але є одне обмеження: розмір вихідного файлу не повинен перевищувати одного мегабайта. Перед перетворенням можна задати деякі налаштування: визначитися з кількістю кольорів, які будуть залишені на растровому зображенні перед векторизацією, а також позбутися зашумленості, вказати, у яких випадках лінії будуть прийняті за криві. Сам процес відбувається дуже швидко, тому, якщо якість кінцевого малюнка невідповідна, завжди можна поекспериментувати з налаштуваннями та спробувати знову.
⇡ Vector Paint — векторний редактор у Chrome, який може працювати і без браузера
Vector Paint - це веб-додаток для Google Chrome, Створене на HTML5, проте працювати воно може і без браузера. Воно відноситься до нового покоління додатків, представлених на початку вересня цього року. Запускати такі програми можна прямо з робочого столу. відкритий браузер, Так само як і доступ до Інтернету, для їх використання не потрібні.
Vector Paint містить досить велику колекцію різних попередньо встановлених форм, які можна використовувати в проектах: тут і годинник, і хмаринки, і стрілочки, і тварини, і нотки, і багато іншого. Форми можна створювати і вручну, використовуючи прямі та ламані лінії, інструмент для малювання довільних форм, прямокутник, еліпс. Для кожного елемента є можливість вибрати колір, товщину та тип обведення, а також колір заливки, зробити його частково прозорим, додати один із безлічі ефектів (спотворення, тіні, текстури, псевдо-3D та інше). Передбачені й інструменти для керування елементами у проекті: їх можна переміщати на передній план або переносити назад. Для більш точної розміщення елементів є численні засоби вирівнювання, також можна включити відображення лінійки.
За замовчуванням робота ведеться одному шарі, але за необхідності можна додати можливість роботи з кількома шарами. Ця можливість реалізована як доповнення. Для його встановлення не потрібно нічого завантажувати, досить просто вибрати плагін в однойменному меню. Робота з шарами включає можливості об'єднання вибраних шарів, приховування деяких із них, перенесення вибраних елементів на окремий шар.
У Vector Paint передбачені й інші доповнення, які можуть бути легко додані в додаток. Це розширені можливості для роботи з текстом (додаткові шрифти, налаштування інтервалів, окремих елементів написів), додавання маркерів, використання зображень для створення малюнків, що повторюються, на формах. З меню Plugins також включаються Додаткові параметриобведення та заливання.
Готові проекти зберігаються в форматі SVG, а також можуть бути експортовані в PNG та JPEG.
⇡ SVG-Edit — векторний векторний редактор
SVG-Edit - це векторний редактор, створений на основі JavaScriptякий може працювати в будь-якому браузері. Його можна використовувати у вигляді онлайнового сервісу (у цьому випадку для доступу використовується демоадреса), а також як веб-додаток (у цьому випадку потрібно завантажити архів із файлами SVG-Edit, розпакувати його та запустити файл програми у будь-якому браузері).
SVG-Edit повноцінно працює з файлами SVG, даючи можливість як зберігати проекти у цьому форматі, так і відкривати такі файли та вносити до них зміни. Окрім цього, файл SVG може бути імпортований у проект як окремий елемент.
Для створення елементів векторної графіки SVG-Edit можуть використовуватися ламані лінії, прямокутники, квадрати, еліпси, круги, багатокутники, контури, текст. Є можливість виконувати заливку елементів кольором, а також використовувати градієнти, у тому числі радіальні. Підтримується робота з шарами, показ сітки та відображення елементів у вигляді каркасу. Існують засоби для зміни розташування елементів (вище, нижче), для швидкого клонування виділених векторних форм, для їх угруповання. Багато команд доступні з контекстного меню(як у звичайних редакторах для робочого столу). Достатньо багато уваги приділено інструментам для вирівнювання на полотні: можна рівняти елементи по відношенню до виділених об'єктів, до найбільшого або до найменшого об'єкта.
У програмі велика бібліотека готових форм (та сама, яка використовується в Vector Paint), але, крім цього, реалізований доступ до величезної безкоштовної бібліотеки елементів векторної графіки IAN Image Library. Для роботи з нею буде потрібна реєстрація, але потім можна прямо з редактора переглядати колекції зразків векторної графіки і відразу ж додавати їх до поточного або нового проекту.
⇡ Chittram - простий онлайновий редактор
Chittram – це ще один векторний редактор, який може працювати як веб-додаток. На відміну від SVG-Edit, він реалізований як повноцінний онлайновий сервіс із можливістю збереження проектів на сервері. Для перегляду та редагування створених раніше проектів використовується обліковий запис Google.
Можливості Chittram скромніші, ніж у SVG-Edit, зате цей редактор напевно здасться більш доброзичливим для користувачів-початківців. У додатку є можливість використовувати растрове зображення як підкладку, але вибрати картинку з жорсткого дискане можна лише вказати посилання на файл. Імпорту локальних векторних зображень теж немає, проте можна додавати в проект файли з галереї користувачів веб-сервісу та редагувати їх. На сайті реалізовано пошук у галереї по ключовим словам, а також за мітками.
Для створення власних проектів можна використовувати стандартний набір інструментів: прямі лінії, криві, криві Безьє, багатокутники, кола, овали, прямокутники та квадрати. Доступно також створення тексту. Для кожного елемента є можливість задати розмір обведення, колір заливки, колір та напрямок градієнта, відсоток прозорості. Для більш точного малювання можна використовувати сітку, на яку налаштовується величина клітини. Також можна керувати розміром полотна та його орієнтацією.
Якщо у проекті використовується кілька форм, зручно відобразити панель, на якій представлено список усіх елементів. Вона служить для перейменування та швидкого виділення об'єктів. Така сама панель використовується для роботи із шарами.
⇡ Inkscape — повноцінна альтернатива комерційним пакетам
Векторний редактор Inkscape має багато переваг. По-перше, він кросплатформовий (може запускатися в середовищі Windows, Linux, Mac). По-друге, він підтримує велику кількість популярних векторних форматів, серед яких SVG, SVGZ, EMF, DXF, EPS, PostScript, WMF та інші.
У редакторі є й стандартні для будь-якого векторного редактора засоби створення графіки: форми, криві, текст, заливка, повноцінна підтримка шарів. Inkscape дає можливість виконувати різні дії з контурами, робити обведення, а також застосовувати булеві операції (об'єднувати, перетинати елементи, виключати один з одного тощо). У розпорядженні користувача велика бібліотека фільтрів та спеціальний редактор, за допомогою якого можна створювати власні ефекти. У програмі реалізована підтримка графічних планшетів, завдяки чому в ній можна малювати вручну, керуючи нахилом і силою натискання пера.
Варто звернути увагу на інтегровані засоби для векторизації растрових зображень. Щоб при трасуванні фотографій враховувалися важливі об'єкти на передньому плані, задіюється алгоритм SIOX (Simple Interactive Object Extraction), що допомагає автоматично визначити такі об'єкти.
⇡ ZebraTRACE — безкоштовне створення гільйошей
Будь-які грошові банкноти, а також документи державної ваги (дипломи, грамоти, посвідчення тощо) легко дізнатися з першого погляду. Цю «впізнаваність» дизайну документа надають тонкі візерунки, що повторюються, які проходять по всьому основному малюнку. Такі лінії називаються гільошем.
Гільоші можна малювати вручну у векторному редакторі, проте без спеціальних доповнень і навичок створення подібних візерунків цей процес може затягнутися. Безкоштовна утиліта ZebraTRACE допомагає у вирішенні таких завдань.
Ця програма трасує зображення та поєднує їх із візерунком гільйоша. ZebraTRACE використовує параметричну генерацію гільйошу. Кожен тип візерунка, який можна створити за допомогою програми, визначається математичною формулою. Так що за наявності бажання та вільного часу для експериментів користувач може отримати унікальні малюнки.
Створювати нові гільоші дуже просто. Спробуйте внести незначні зміни у формулу генерації візерунка, наприклад, змінивши значення коефіцієнта з 2 на 3, і малюнок зміниться. Для тих, хто не бажає займатися творчістю з ZebraTRACE, до програми включено півтора десятки попередніх налаштувань із формулами, що дозволяють отримати найпоширеніші гільоші.
⇡ Висновок
Безкоштовні інструменти для роботи з векторною графікою зустрічаються не так часто, як хотілося б, проте вони є. Тішить і те, що з розвитком стандарту HTML5 та інших веб-технологій стало можливим використання браузера як редактор векторної графіки — раніше про це можна було тільки мріяти. Для нескладних проектів подібні інструменти економлять багато часу, а якщо взяти на озброєння Inkscape, взагалі можна відмовитися від придбання векторного редактора для потреб дизайну.
