Про те, як зробити векторне зображення у Фотошопі, запитують досить часто. Як відомо, Photoshop – програма для обробки растрової графіки та для роботи з вектором не призначена. З векторною графікою працюють спеціальні графічні редактори. Але якщо дуже потрібно, а часу вивчити нову програмуні, то з допомогою деяких маніпуляцій можна перевести картинку вектор.
Що таке растрове та векторне зображення і чим вони відрізняються
Растрове зображення являє собою сітку пікселів (точок). Усім нам звичне цифрове фото якраз і є растровим зображенням. Векторне зображення складається не з пікселів, а з геометричних примітивів: прямих, прямокутників та інших фігур.
Якщо зменшити, а потім значно збільшити растрове зображення, його якість буде безповоротно зіпсовано. Оскільки кожен піксель є точку певного кольору, а всі разом ці точки складають картинку. При зменшенні зображення викидаються зайві пікселі, тому не можна повернути його початковий вигляд.
Масштабування векторного зображення дозволяє змінювати розмір без втрати якості. Це можливо завдяки математичним перерахункам розмірів геометричних фігур, у тому числі складається зображення.
Растрове зображення дозволяє достовірно передати візуальну інформацію, такої векторної переваги немає. Зображення векторної графіки можуть стати в нагоді для візуалізації логотипів і контурних малюнків. Фотографічної краси ви від них не отримаєте. Або це будуть дуже складні зображення, що складаються з величезної кількості примітивів, що фактично замінюють пікселі.
Простий приклад, як растр перекласти у вектор
Отже, вектор складається із геометричних фігур. Photoshop має інструменти для створення контурів. Контур є геометрична фігура. Щоб створити векторне зображення у Фотошопі, потрібно створити контур зображення. Допоможуть нам у цьому інструменти групи "Виділення"/Select: "Прямокутне виділення"/Rectangular Marquee Tool, "Еліптичне виділення"/Elliptical Select Tool,** «Чарівна паличка»/Magic Wand Tool , **«Швидке виділення»/Quick Selection Toolі "Перо"/Pen tool.
Щоб вектор вийшов акуратним, варто вибирати растрове зображення максимально хорошої якості, інакше промальовування контурів потрібно буде робити вручну.
Відкриваємо растрове зображення у фотошопі (найпоширеніший формат растрового зображення – JPG). Дуже легко піддаються обробці логотипи, контурні малюнки, ескізи. Щоб отримати векторний ескіз портрета, спочатку можна перетворити портрет на ескіз за допомогою "Галереї фільтрів"або використовувати готовий поп-арт. Про те, як працювати з «Галерея фільтрів»та швидко створювати поп-арт із фото, ми розповідали у попередніх статтях. Для цього ми візьмемо готовий поп-арт-портрет. Навмисне ми підготували його з фото не найкращого дозволу. Тому векторний варіант покаже нам помітну різницю.
Щоб працювати з контурами, вам потрібно викликати закладку «Контури»/Pathна палітру шарів. Для цього зайдіть у меню "Вікно"/Windowта позначте пункт «Контури»/Path. Закладка з'явиться на панелі шарів.
Зображення має 4 кольори (фон не рахуємо). Беремо інструмент "Чарівна паличка"/Magic Wand Toolта виділяємо перший колір. Щоб виділити всі ділянки, розосереджені острівцями за зображенням, утримуйте Shift.
Коли перший колір виділено, вибираємо інструмент "Лассо"/Lassoабо "Прямокутна область"/Rectangular Marquee Toolі, не знімаючи виділення, клацаємо правою кнопкою миші. У контекстному менюобираємо "Утворити робочий контур"/Make Work Path.
У діалоговому вікні вказуємо максимальне згладжування «Допуск»/Tolerance(від 1 до 10; що нижче цифра, то краще повторяться контури). Тиснемо Ok.
На закладці «Контур»з'явиться перший контур. На зображенні він буде помітний у вигляді кривих із крапками. Їх можна вирівняти та підігнати за допомогою інструмента "Виділення вузла"/Direct Selection Tool. Цим інструментом виділяємо крапку або коригуємо криву, переміщуючи вусик точки, або посуваємо саму дугу.
На закладці «Контур»змінюємо назву контуру. Для цього клацаємо подвійним клацанням і в діалоговому вікні змінюємо ім'я.
Виконуємо всі описані кроки з іншими кольорами. У результаті отримуємо чотири контури для кожного кольору.
Отримавши контури, залишається створити вектор. Переходимо на закладку «Шари»/Layerна палітрі шарів, створюємо новий шар Shift+Ctrl+N. Основний колір задаємо той, у який пофарбуємо перший контур.
Повертаємось на закладку «Контур», Стаємо на перший контур. У головному меню у пункті «Шари»/Layersобираємо "Новий колір заливка"/New Fill Layer - «Колір»/Solid Color. У вікні тиснемо Ok.
Тепер, перейшовши на закладку «Шари»/Layers, Ви побачите на новому шарі перший векторний шар.
У наступному діалоговому вікні, як завжди, вказуємо ім'я файлу та шлях.
На цьому все. Спосіб досить простий.
Якщо вам доведеться часто працювати з векторними зображеннями, можливо, ця стаття надихне вас на вивчення нових графічних редакторів. У будь-якому випадку ви дізналися ще один корисний метод. Бажаємо вам чудових робіт.
Ще більше про Photoshop - на курсах.
Інструменти для роботи з вектором 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 (безкоштовно)
Що б вам простіше було розібратися як використовувати вектор у фотошопі і подивитися як на практиці можна застосовувати ці інструменти, я викладаю файл Інфографіки виконаний мною повністю з використанням векторних інструментів.
Задати питання
Якщо у вас щось не виходить або виникли питання, пишіть у коментарях і я допоможу вам розібратися. Також ви можете подивитися відео за допомогою векторних інструментів.
Поки моя замітка про маски у Фотошопі не охолонула, терміново хочу висвітлити питання переведення растру у вектор. Два дні тому, я зайшов у свою хронофагську Google Analyticі що я побачив. Виявляється деякі потрапляють на мій сайт на запит «розстрій у вектор», а тим часом, на моєму сайті немає жодної тлумачної нотатки на цю тему. Люди ж мучать Googleна переклад растру у вектор у Corel Draw, Illustratorі навіть Adobe Photoshop . Почнемо із Фотошопу.
З растру у векторному. Навіщо це потрібно?
Фотошоп – растрова програма. Вектор у ньому є у вигляді векторних контурів. Як таких, векторних об'єктів у Фотошопі немає. Але є векторні контури, які можуть бути перетворені на векторну маску. Маска накладається на ефект чи об'єкт і виходить вектор у фотошопі. Вміст такого об'єкта все одно растрове, але може перетворюватися на вектор при збереженні в деякі формати.
Наприклад, ми можемо створити заливку та натягнути на неї векторну маску. У Фотошопі є ціла група інструментів, які роблять таке безкоштовно та автоматично, це група векторних примітивів. Докладніше читайте мою статтю Векторні примітиви у Фотошопі або . Отже, контур буде векторним. Заливка всередині растрової. 
Фотошоп не працює з вектором на повну силу. Лише використовує його переваги там та тут. Але навіть у Фотошопі растрові об'єкти можна перетворити на векторні. Навіщо це потрібно, якщо є Ілюстратор? Ну, як вам сказати. За активної роботи з графікою виникають різні ситуації. Іноді простіше дома перевести виділення в контур, ніж йти з головою в Ілюстратор і займатися там трасуванням. Щоб прополоти грядку полуниці на дачі, не потрібно викликати комбайн. Зрештою, не всі хочуть, або вміють користуватися Ілюстратором, не всім він потрібен, не всі можуть його собі поставити, а перевести у вектор закорючку треба тут і зараз. Сідати з трьома томами за Ілюстратором на кілька тижнів для цього зовсім необов'язково.
Переклад растру у вектор у Фотошопі
Що саме здатний перекласти у вектор Фотошоп? Що завгодно, якщо ви заздалегідь виділіть цей об'єкт інструментами групи Select. Фотошоп конвертує у контур будь-яке виділення. Про інструменти виділення можна прочитати у статті Примітиви виділення у Фотошопі. Наведу робочий приклад. Багато років тому до мене звернувся дуже непростий замовник, який зажадав непростого сайту. Для сайту необхідно було виконати різний арт, і я вирішив намалювати його у фотошопі. Під час малювання я перевів його у вектор, і зараз я розповім як. 
Ось одне з подібних зображень, яке я малював пензлем із твердими краями на планшеті. Я обвів оригінальну Вітрувіанську людину, видозмінив її і намалював своє, відмінне від оригіналу, обличчя. Ідея векторизувати арт прийшла випадково. Але реалізувавши її, я отримав можливість як завгодно масштабувати людину. Більше того, раніше рвані краї та нерівності після векторизації згладилися.
Знаходимо зображення для трасування
Я підшукав у Google Картинки метелика. Її ми й переведемо у вектор. Врахуйте, що чим більше зображення, тим вищий наш векторний об'єкт. Це справедливо і для Фотошопу, і для Ілюстратора. Під великим зображенням я розумію картинку від 1000 пікселів завширшки і більше. Мій метелик, наприклад, від 2000 пікселів. 
Виділяємо об'єкт
Виберіть із меню Toolзвичайнісіньку чарівну паличку Magic Wand Toolі клацніть по білій області. Так ми створили область виділення, але виділити потрібно метелика.
Зайдіть у Select > Inverseабо клацніть по робочій області і з меню виберіть Select Inverse. Сенс у тому, що створене виділення треба інвертувати, щоб виділити метелика. Чесно кажучи мені абсолютно байдуже як ви будете створювати ваше виділення. Хоч вручну обводьте ласо, це не має жодного значення.
Створюємо векторний контур
У нас є виділена область, тепер конвертуємо її у векторний контур path. Виберіть будь-який інструмент виділення на зразок Lasso Tool, Rectangular Marquee Toolабо Magic Wand Tool. Клацніть по області виділення правою кнопкою миші і в меню виберіть Make Work Path. У меню встановіть ступінь згладжування Toleranceза смаком. Залежність проста. Що цифра, то вище згладжування. Чим нижча цифра, тим нижча згладжування. Високе згладжування означає нижчу кількість векторних вузликів і більш неточне проходження растрового контуру. У випадку з моєю Вітрувіанською людиною саме такого ефекту я й домагався.
Отже, на панелі Pathу нас з'явився робочий контур. Якщо у вас немає палітри Pathвідкрийте її Windows > PathРобоча область палітри Pathсхожа на робочий стіл або тимчасовий притулок. На ній можуть з'являтися різні контури, але якщо ви подбаєте про послідовне збереження, вони зникнуть. Зробіть подвійний клік за контуром Work Pathта збережіть контур окремо. Контури в області Pathпрацюють так само як шари на палітрі Layers. Якщо контур виділено, він активний і з ним можна працювати.
Інструменти для роботи з контурами у фотошопі Path Selection Toolі Direct Selection Tool. Ми маємо контур, але немає об'єкта. Якщо ви читали серію моїх нотаток про вектор у фотошопі, ви вже знаєте, що вектор у фотошопі представлений у вигляді векторної маски для якогось ефекту або графіки. Ще вектор може бути у вигляді розумного шару, що посилається на імпортований фаїл Ілюстратора, але це залишимо для іншої нотатки. Виділіть контур інструментом Path Selection Toolабо на панелі контурів Path. Натисніть Layer > New Fill Layer > Solid ColorМи створили шар заливки, якому одразу надається векторна маска у вигляді нашого контуру.
Доопрацювання векторного контуру
Користуючись матеріалами, які я описав у статтях Векторні інструменти малювання у Фотошопі та Add, Subtract, Intersect та Exlude у Фотошопі ускладнимо малюнок. Я взяв інструмент Pen Tool, виділив маску шару заливки. В налаштуваннях Pen Toolвиставив Subtractі домалював деякі елементи нашому метелику. Вирізав візерунки на крилах, а ніжки та вусики зробив товщі.
Створення довільної фігури Custom Shapes
Ви завжди можете зберегти отриманий об'єкт у довільні постаті Custom Shapes. Якийсь час тому я згадував про те, як це можна зробити у статті Custom Shape Tool у Фотошопі. Виділіть шар із метеликом та натисніть Edit > Define Custom ShapeНаш метелик з'явився у фігурах інструменту Custom Shapes Tool.
А ось те, що в нас вийшло в результаті:
Переклад растрової фотографії у вектор у Фотошопі абсолютно безглузде заняття. Але іноді подібні техніки можуть стати в нагоді для побічних робіт з графікою і не тільки.
Переклад із растру у векторні фотографії у фотошопі
Фотошоп не створений для перекладу растрової графіки на вектор. У ньому, однак, є кілька спецефектів, які візуально створюють подобу векторного зображення. А за допомогою описаної мною техніки можна і з них зробити векторне зображення у Фотошопі. Візьмемо для прикладу звичайну фотографію, зроблену моїм знайомим фотографом. 
Одним із згаданих мною ефектів є Filter > Artistic > CutoutЗалишаю налаштування на вашому совісті. Зображення має вийти максимально реалістичним, але дуже згладженим. На цьому можна було б зупинитися, зображення вже виглядає «векторно», але воно, як і раніше, растрове.
Тепер потрібно створити векторні області, що рівні кількості кольорів на фотографії. Виберіть паличку Magic Wand Toolі переконайтеся, що в налаштуваннях не зазначено галочки Contiguous. Виділіть першу область і проробіть весь, описаний мною вище, шлях. З виділення створіть контур, із контуру залиту векторну маску і так далі.
Усього фотографія перетворена на векторні області. Останню білу область ми не будемо перетворювати на вектор. Просто малюйте великий білий квадрат інструментом Rectangle Toolі помістіть його під усі шари. Після легкого чищення та доробки контурів фотографія виглядає так, як на малюнку нижче. І ще раз, подібна робота не призначена для Фотошопу і є скоріше збоченням. Але це можна зробити, і в різних ситуаціях подібні прийоми можуть стати в нагоді. Обробка фотографії зайняла у мене 10 хвилин, так що подібна робота не забирає багато часу. І пам'ятайте, чим більшого розміру фотографію ви розкладете таким чином на шари, тим краще і еластичніше контур зможе обігнути області виділення. Тим менш незграбною і грубою вийде наш вектор у Фотошопі. Різні налаштування Toleranseпід час створення контуру теж дадуть різний результат. Вдалих експериментів!
Фінальний результат 
Як відомо, Векторні ілюстрації в даний час дуже популярні у веб-графіці. Професійні дизайнери можуть створювати такі ілюстрації за лічені години. Якщо Ви новачок або любитель, уроки веб-графіки, безумовно, будуть дуже корисні для Вас. Мета цього уроку – пролити світло на процес створення обраного зображення. Крок за кроком продемонструю весь процес і за допомогою моїх коментарів поясню всі етапи.
Щоб створити справді класне зображення, Ви повинні вибрати потрібну програмуі дотримуватися певних правил. Якщо Ви хочете намалювати Векторну ілюстрацію, то повинні мати на увазі, що для цього використовуються такі редактори як Adobe Illustratorабо CorelDraw. Разом з тим, Photoshopмає в своєму розпорядженні достатні засоби для розробки векторних ілюстрацій. Я наочно покажу це у своєму уроці, як перевести малюнок у вектор. Я вибрав скетч кота як основу для ілюстрації. Я вирішив зобразити синього кота з рожевими квітами у лапах.
Крок 1
Почнемо зі створення фону. Намалюємо форму за допомогою інструмента виділення () (у режимі Shape Layers(Шар Фігура)). Налаштування - (Непрозорість заливки) = 0% . Тепер використовуємо накладання градієнта: ((Стиль шару - Накладання градієнта)) для заповнення створеної фігури. Всі налаштування за замовчуванням, вам тільки потрібно змінювати кут (я вказуватиму ступінь) і градієнт. Додаємо Stroke(Обведення) ( (Стиль шару - Обведення)). Використовуємо всі параметри за замовчуванням, крім ширини в 1 рх та кольори.
Векторні малюнки все частіше використовують у різних друкованих інструментах, для створення красивих малюнків з дерева, пластику, металу, паперу та інших матеріалів. Сьогодні ми розберемося, як можна зробити векторний малюноксвоїми руками, використовуючи програму фотошоп. Витративши зовсім небагато часу, ми отримаємо якісний векторний малюнок, і зможемо без жодних проблем використовувати його надалі.
Як малюнок перекласти у векторний?
Насамперед, слід зазначити, що перевести малюнок у векторний формат можна лише малюнки, зображені на білому тлі. Якщо ж фон не білий, то спочатку потрібно прибрати все зайве і очистити фон.
1. За допомогою інструментів виділення вибираємо лише той елемент, який ми бажаємо перевести у векторний малюнок, і копіюємо його на новий шар, під назвою «фігура». Після чого створюємо ще один шар та повністю заливаємо його білим кольором, цей шар можна назвати «фон». Тепер шар «фон» переміщуємо під шар «фігура» і об'єднуємо їх. Отриману картинку називаємо «Основа». Копіюємо шар «Основа» двічі і називаємо їх «Основа_1» та «Основа_2». Відключаємо їхню видимість.
2. Почнемо наші операції з переведення малюнка у векторний формат. Насамперед, застосуємо для шару «Основа», корекцію «Ізогелія», щоб отримати малюнок у чорно-білому форматі. Не завжди при першій корекції виходить потрібний нам малюнок, тому можемо зробити кілька копій шарів та робити корекцію з різними значеннями, Поки не отримаємо те що потрібно.
Ось ми і отримали найнормальніший ефект.
3. Далі ми застосовуємо до отриманої картинки фільтр «Дифузія», щоб усунути зубчасті краї. Шлях до включення фільтра: Фільтр - Стилізація - Дифузія (Filter-Stylize-Difuse). У вікні вибираємо «Anisotropic».
4. Наступним кроком буде згладжування країв, щоб вони стали чіткішими, для цього натискаємо «Зображення - Корекція - Рівні» (Image-Adjustment-Levels). У відкритому вікніпереміщуємо лівий та правий повзунок ближче до центру. Щоб побачити результат корекції, найкраще збільшити малюнок до 300% перед тим як відкривати рівні.
5. Повторюємо пункти 3 та 4 у тій самій черговості.
6. Відключаємо видимість нашого основного шару та включаємо шар «Основа_1». Виконуємо дію «Зображення – Корекція – Ізогелія» (Image-Adjustment-Threshold). Параметр встановлюємо лише на рівні 138.
7. Виконуємо з цим шаром операції зазначені у пунктах 3,4 та 5.
8. Створюємо новий шар та заливаємо його чорним кольором. Називаємо його "Фон". Встановлюємо його нижче за шар «Основа». У шарі "Основа_1" змінюємо режим на "Різниця" (Difference).
Ось що у нас виходить:
9. Вийшла картинка трохи страшна, але ми це зараз поправимо. Шар «Основа» робимо активним і додаємо шар-маску. Після чого за допомогою гумки можемо прибрати зайві ділянки на обличчі та тілі дівчини.
10. Ось ми й одержали малюнок, тепер його потрібно перевести у векторний. Використовуємо «Чарівну паличку», виділяємо всю чорну область малюнка, і на зображенні натискаємо праву клавішу миші, у меню вибираємо «Утворити робочий контур». Встановлюємо значення 1,0.
