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

Як малюнок перевести у векторний?

Насамперед, слід зазначити, що перевести малюнок у векторний формат можна лише малюнки, зображені на білому тлі. Якщо ж фон не білий, то спочатку потрібно прибрати все зайве і очистити фон.

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.

На просторах рунету я знайшов зображення логотипу. Чи можна перевести її з растру у вектор у Фотошопі, причому автоматично? Ні, не можна. На жаль, поки тенденції вектора у Фотошопі такі, все, що в цьому напрямку було зроблено, залишилося незмінно ще 5 версій тому. З того часу воно не рушало, не змінювалося і нічого нового у векторі не додавали. Вам потрібні були векторні інструменти у фотошопі? Ось вони хочете більше? Що взагалі ви забули у Фотошопі, опановуйте Ілюстратор. Приблизно такий перебіг думки рухав розробниками, які впроваджували найпростіші векторні операції у Фотошоп. А зараз перейдемо до справи.

Переведення растру у вектор здійснюється через області виділення. Спочатку ми створюємо виділення, потім лінії виділення переводимо у векторні контури, потім заливаємо векторні контури шарами заливки, створюючи таким чином векторну маску. Для того, щоб розібратися в цьому не на рівні армійських команд — клікни сюди, клікни туди, варто навчитися працювати з інструментами малювання вектора, зрозуміти як векторні контури можуть взаємодіяти один з одним, і дізнатися як створити векторну маску. Але не переживайте, вам не обов'язково сідати за читання до вихідних, ви і так зрозумієте, як перевести растр у вектор у Фотошопі, якщо дочитаєте статтю до кінця.

Виділення логотипу

Особливо зазначу, щоб переведення у вектор вийшов якісний, сама картинка має бути великого розміру. Це справедливо у випадку трасування в Ілюстраторі, а для Фотошопу це ще важливіше. Моє зображення має 1500 пікселів завширшки, коли ми закінчимо переведення у вектор, я покажу, як Фотошоп переводить маленькі зображення і ми порівняємо результати.

• Вибирайте інструмент Magic Wand Tool

• Налаштуйте опції Tolerance 20 або 30.

• Там же клацніть по іконці Add to Selection. Докладно про їхню роботу я писав у статті Add, Subtract, Intersect та Exlude у Фотошопі де йшлося про інструменти вектора, але у виділенні ці опції працюють так само.

Мені чесно кажучи все одно, як ви виділіть логотип, хоч у ручне ласо, хоч через Color Range. Просто в цій ситуації, саме на цьому зображенні найпростіше це зробити інструментом Magic Wand Tool.

Перекладаємо виділення у векторний контур

Не перемикайтеся з інструмента Magic Wand Tool.

• Правою кнопкою миші клацніть по області виділення.

• З меню виберіть Make Work Path.

• У вікні налаштуйте толерантність на 1,0 Чим вище значення толерантності, тим більш плавними, стилізованими і неточними будуть наші контури.

На наведеній нижче ілюстрації я вибрав інструмент Path Selection Tool і виділив контур, щоб він був вам видно.

Збереження контуру на панелі Path

Ця операція не є обов'язковою, але бажаною.

Перейдіть на панель Path. Якщо ви не можете її знайти, натисніть Window > Path

Клацніть двічі по контурі на панелі.

• У вікні, введіть ім'я і натисніть ОК.

Створення векторної маски

Процес створення векторної маски чудово описаний у моїй статті Векторна маска у фотошопі. Здійснимо цей процес швидко та без деталей.

Переконайтеся, що ваш будок виділено на панелі Path

Виберіть із меню Layer > New Fill Layer > Solid Color

У вікні виберіть колір і клацніть ОК

От і все. Точніше було б все, якщо б це не був. Пам'ятаєте я казав вам, що чим менше зображення, тим гірше воно переведеться. Готовий посперечатися на руках у вас якийсь брудний скан, засунутий у Ворд, який замовник вимагає перевести у вектор? Я вгадав? При цьому зображення пережато JPG стисненням, зменшено, потім збільшено, потім знову зменшено до розмірів аватарки і ще на нього пролили кетчуп. Чи можна якісно перевести у Фотошопі у вектор таку картинку?

Спочатку погляньте на наш логотип. Незважаючи на відмінну роздільну здатність, чіткі краї Фотошоп не зумів створити хороші та рівні контури. Ілюстратор робить це у 100 разів краще, але стаття не про ілюстратор. Як бачите контури не всюди рівні, навіть у прямокутних частинах логотипу. А кола зовсім косі.

Тепер я зменшу зображення вдвічі, потім ще вдвічі і покажу вам результат перекладу у вектор.

Ось вам і наочний приклад того, як розмір растрового зображення впливає на якість трасування. І це при тому, що зображення дуже якісне не дивлячись на розмір. Ну, зменшу якість. Збережемо картинку в JPG за найгіршої якості.

Перекладемо у вектор. Відмінний результат, не вистачає лише кетчупу. Саме досить задоволеному замовнику, обробка під гранж або вінтаж!

І все ж таки я злегка маніпулюю правдою. Справа в тому, що все це є резонним для Ілюстратора, який створює вектор на основі картинки. Фотошоп не створює вектор на основі зображення, він створює контури на основі виділення. Логічно, чим якісніше і рівні виділення, тим рівні вийдуть криві. І інструмент Чарівна паличка, яким ми виділяли ці області, вже не підійде для виділення таких моторошних зображень. Так, ви зможете зробити якісні виділення, задіяли всі інструменти виділення, зумієте навіть збільшити їх і створити на основі них більш-менш рівний контур, який все одно буде не ідеальним. Йти таким шляхом просто втрата часу. Єдиний робочий варіант - малювати логотип з нуля у Фотошопі.

Багато початківців любителів дизайну обов'язково стикаються з даною проблемою, адже в деяких моментах необхідно векторне зображення. У цій статті докладно розказано, як зробити векторне зображення.

Для чого використовується переведення з растрового об'єкта в контурний

Одним із прикладів цього випадку є заливка, на яку наноситься векторна маска. Група векторних примітивів - це група інструментів для створення маски без оплати та автоматичному режимі. В даному прикладівиходить, що контур зображення буде векторним, у своїй заливка - растровий.

Однак потрібно розуміти, що "Фотошоп" не працює у повну силуз вектором, використовуючи позитивні сторони там, де можна. При інтенсивній роботі з графікою у фахівців виникають різні завдання, при вирішенні яких зручніше відразу перетворити виділення на контур, а не користуватися для цього завдання ілюстратором. Саме для аналогічних завданьу "Фотошопі" є функція, що дозволяє перетворювати растрові об'єкти на векторні, адже не всі фахівці вважають за краще використовувати ілюстратор.

Як із растрового зображення зробити векторне?

Для цього у "Фотошопі" необхідно виконати певний порядок дій. Для початку необхідно вибрати об'єкт за допомогою набору інструментів Select. Програма здійснює конвертацію будь-якого вибраного та виділеного об'єкта в контур.

Якщо описані способи роботи є для вас складними, то краще для початку ознайомитися з інтерфейсами програм, адже це основа, не знаючи якої, не можна просунутися далі.

Як приклад, можна навести процес зображення людини з картинки. Можна взяти оригінальну картинкуі за допомогою планшета та кисті з твердими краями обвести об'єкт. Після цього можна його видозмінити, наприклад, замінити обличчя. Після того, як це зображення переведено у вектор, з'явиться можливість масштабувати без втрати якості зображення.

Картинки для трасування

Для наочного прикладу береться легке зображення – метелик. При перекладі необхідно враховувати, що чим більша картинка, тим краще вийде векторне зображення. Це правило діє у "Фотошопі", аналогічно і в "Ілюстратор". Великі зображення - ті, що перевищують 1000 пікселів.

Виділення об'єкту

Процес виділення об'єкта варто розпочати з вибору інструментарію. Потрібно застосувати звичайний Magic Wand Tool з набору Tool, після чого натиснути правою кнопкоюмиші один раз у білій частині робочої області. Внаслідок цих маніпуляцій ви зробите робочу область.

Потім потрібно виділити метелика за допомогою набору Select – Select Inverse. У цій процедурі відбувається інвертування для того, щоб виділити зображення. Однак варто помітити, що цей або інший варіант не впливає на кінцевий результат, головне, щоб виділено необхідний об'єкт.

На фото вище можна побачити звані векторні візерунки. Подібна картинка називається фрактал - це об'єкт, який при збільшенні змінюється за певними алгоритмами. Векторна картинка підходить для зображення фрактала, необхідно лише вбити формулу і отримати готовий результат, як зображено вище. Це називається векторним візерунком.

Створення векторного контуру

Це майже остання частина того, як зробити векторне зображення. Варто пам'ятати про головне: програм для створення подібних зображень безліч, спеціалісту потрібно вибрати одну (максимум дві), інакше ваші старання у вивченні відразу будуть марні.

Після того, як ви вибрали область, зробіть її конвертацію у векторний контур. Для цього можна скористатися інструментами виділення, такими як Lasso Tool, Rectangular Marquee Tool, Magic Wand Tool та ін. Далі правою клавішею миші натисніть область виділення, після чого з'явиться меню, в якому слід вибрати Make Work Path. Далі буде меню, в якому встановлюється ступінь згладжування Tolerance. Чим більше згладжування, тим менша кількість векторних вузлів і менш точне повторення растрового контуру.

Після всього вищеописаного Path повинен утворитися робочий контур. Якщо такої палітри немає, її можна знайти за допомогою вікна Windowsта в ньому вибрати Path. Потім необхідно зробити подвійне натискання на Work Path та зберегти його в іншому місці. Контури в цій галузі діють аналогічно шарам на панелі Layers. Виділений контур означає, що він активований і його можна використовувати.

Потім виділіть контур за допомогою Path Selection Tool або панелі Path. Необхідно натиснути кнопку Layer, після чого у вкладці вибрати New Fill Layer, а вже в ній Solid Color. Таким чином, ви створите шар заливки, якому відразу надається векторна маска у вигляді вашого контуру.

Завершення роботи

Для доробки зображення можна використовувати Pen Tool – для виділення маски шару заливки. Потім – налаштувати Pen Tool, а саме виставити Subtract. За допомогою цього можна намалювати на зображенні додаткові елементита візерунки.

Так просто можна зробити векторне зображення. Дана навичка обов'язково допоможе дизайнерам-початківцям.

16.03.2014 27.01.2018

Такий векторний малюнок з фотографії робить за пару хвилин у фотошопі без особливих зусиль. Усього треба застосувати пару фільтрів, функції і коригувальні шари. Як це зробити, читайте інструкцію в цьому уроці.

За допомогою фотошопу ми можемо переробити будь-який малюнок у векторне зображення.

Виберіть фотографію та відкрийте її у фотошопі.

Зробіть копію шару. Оберіть один шар Girl 1 Layer, а другий Girl 2 Layer.

Застосуйте функцію Image - Adjustments - Thresholds(Зображення - Корекція - Ізогелія) для шару Girl 1 Layer.

Встановіть кольори білий і чорний на панелі інструментів.

Застосуйте фільтр Filter - Sketch - Photocopy (Фільтр — Скетч — Фотокопія) для шару Girl 2 Layer.

Режим змішування у шару Girl 2 Layerвстановіть Multiply(Розмноження)і об'єднайте шари.

Вживіть ще раз функцію Threshold (Ізогелія)

Тепер необхідно згладити краї, для цього застосуйте фільтр Stylize - Difusse(Стилізація - Дифузія)

Вектор готовий.

Тепер, щоб його хоч якось перетворити, ви можете його розфарбувати. Для цього просто візьміть пензель чорного кольору та поправте лінії рис обличчя.

Для заливки кольором використовуйте Paint Bucket Tool (Заливка). Це не становитиме для вас проблеми.

Фінальний результат

Як відомо, Векторні ілюстрації в даний час дуже популярні у веб-графіці. Професійні дизайнери можуть створювати такі ілюстрації за лічені години. Якщо Ви є новачком або любителем, уроки веб-графіки, безумовно, будуть вкрай корисні для Вас. Мета цього уроку - пролити світло на створення вибраного зображення. Крок за кроком я продемонструю весь процес та за допомогою моїх коментарів поясню всі етапи.

Щоб створити справді класне зображення, Ви повинні вибрати потрібну програмуі слідувати певним правилам. Якщо Ви хочете намалювати Векторну ілюстрацію, то повинні мати на увазі, що для цього використовуються такі редактори, як Adobe Illustratorабо CorelDraw. Разом з тим, Photoshopмає у своєму розпорядженні достатні засоби для розробки векторних ілюстрацій. Я наочно покажу це у своєму уроці, як перевести малюнок у вектор. Я вибрав скетч кота як основу для ілюстрації. Я вирішив зобразити синього кота з рожевими квітами у лапах.

Крок 1

Почнемо із створення фону. Намалюємо форму за допомогою інструмента виділення () (у режимі Shape Layers(Шар Фігура)). Налаштування - (Непрозорість заливки) = 0% . Тепер використовуємо накладання градієнта: ((Стиль шару - Накладання градієнта)) для заповнення створеної фігури. Всі налаштування за замовчуванням, вам тільки потрібно змінювати кут (я вказуватиму ступінь) і градієнт. Додаємо Stroke(Обведення) ( (Стиль шару - Обведення)). Використовуємо всі налаштування за замовчуванням, крім ширини 1 рх та кольори.