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

У цій статті вам розкажуть про програми, за допомогою яких можна легко і швидко (як правило) трасувати картинку. Але я, на відміну від її авторів, таки зачеплю таких мастодонтів графіки, як Corel та Adobe.

Ви знайдете чудовий урокз трасування в Corel Draw.

Adobe Photoshop призначений переважно для роботи з фото, а не веб-дизайном. А ось його побратим Adobe Illustratorсаме по цій частині. Цей твір розповість, як за його допомогою перевести растр у вектор. До речі, на сайті досить цікаві статті, варто погортати. - Ще докладніше по темі.

Ну а сьогодні, на мою думку, найцікавіше. Про те, як полегшити процес без встановлення додаткових коштів. (Для тих, хто в танку - я терпіти не можу забивати комп!).

Є такий іноземний чудовий он-лайн редактор Vector Magic. Власне, у них і повноцінна програмаїсти (якщо не шкода пару сотень доларів). Дуже докладно і доступно розповість вам про те, як використовувати сервіс. Навіть якщо з його допомогою вам не вдасться досягти оптимального результату, він відчутно полегшить вам подальшу обробку у фотошопі. Єдиний недолік сервісу полягає в тому, що він не зовсім безкоштовний. Щоб скачати отриманий результат, треба зареєструватися (регія проста і швидка, виконується перед скачуванням). Реєстрація дає вам 2 безкоштовних скачування. Ніби на пробу. Ну а далі вже потрібна платна передплата. Але і цю фігню можна обділити, якщо міняти ip, чистити кукіс і міняти мейли. Якщо картинка невелика (хоча й розміри тут не зупинять), то копіпаст скріна у фотошоп немає проблем.

За матеріалами: http://www.liveinternet.ru/users/3091338/post106993510/

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

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

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

• Вибирайте інструмент Magic Wand Tool
• Налаштуйте в опціях Tolerance 20 чи 30.
• Там же клацніть по іконці Add to Selection. Детально про їхню роботу я писав у статті, де йшлося про інструменти вектора, але у виділенні ці опції працюють так само.
• За бажання можете використовувати швидкі клавіші. Затиснута клавіша SHIFTнаділить Magic Wand Toolвластивістю Add to Selection, а курсорі з'явиться плюсик.

Мені чесно кажучи все одно як ви виділите логотип, хоч у ручне ласо, хоч через 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при найгіршій якості.
Перекладемо у вектор. Відмінний результат, не вистачає лише кетчупу. Саме досить задоволеному замовнику, обробка під гранж або вінтаж!
І все-таки я трохи маніпулюю правдою. Справа в тому, що все це є резонним для Ілюстратора, який створює вектор на основі картинки. Фотошоп не створює вектора на основі картинки, він створює контури на основі виділення. Логічно, чим якісніше і рівні виділення, тим рівні вийдуть криві. І інструмент Чарівна паличка, яким ми виділяли ці області, вже не підійде для виділення таких моторошних зображень. Так, ви зможете зробити якісні виділення, задіяти всі інструменти виділення, зумієте навіть збільшити їх і створити на основі них більш-менш рівний контур, який все одно буде не ідеальним. Йти таким шляхом просто втрата часу. Єдиний робочий варіант - відмалювати логотип з нуля у Фотошопі, про що я розповім у наступній статті.

З особи:
"можеш підказати як робиться цей ефект або було б чудово якби був докладний урок =)"

Отже, обговоримо. Спочатку про поняття.
Растрове зображення – це, грубо кажучи, сітка різнокольорових пікселів, матриця. Наприклад, фотографія.
Векторне зображення - це геометричні примітиви (крапки, лінії, багатокутники), що складаються в картинку.
Трасування (від англ. слова "Trace" - слід, відбиток, контур) - перетворення растрового зображення на векторне.
Трасування - процес довгий та трудомісткий. Розгляньте його на прикладі даних уроків від demiart.ru:
http://photoshop.demiart.ru/vector.shtml
http://photoshop.demiart.ru/vector_car.shtml
Для початку потрібно задати картинці мінімальну палітру, визначити межі кольорів та почати малювання. Ось саме відмальовка і є найбільш нудний етап роботи. Однак, трасування часто використовується веб-майстрів, і, зрозуміло, вони не можуть витрачати свій дорогоцінний час. Тому поговоримо про деякі хитрощі.
У цій статті вам розкажуть про програми, за допомогою яких можна легко та швидко (як правило) трасувати картинку. Але я, на відміну від її авторів, все-таки торкнуся таких мастодонтів графіки, як Corel та Adobe.
ви знайдете чудовий урок з трасування в Corel Draw.
Adobe Photoshop призначений переважно для роботи з фото, а не веб-дизайном. А ось його побратим Adobe Illustrator якраз по цій частині. розповість, як за його допомогою перевести растр у вектор. До речі, на сайті досить цікаві статті, варто погортати. - ще докладніше на тему.
Ну а тепер, на мою думку, найцікавіше. Про те, як полегшити процес без встановлення додаткових засобів. (Для тих, хто в танку – я терпіти не можу забивати комп!).
Є такий іноземний чудовий он-лайн редактор Vector Magic. Власне, у них і повноцінна програма є (якщо не шкода кількох сотень доларів). дуже докладно та доступно розповість вам про те, як застосовувати сервіс. Навіть якщо з його допомогою вам не вдасться досягти оптимального результату, він значно полегшить вам подальшу обробку у фотошопі. Єдиний недолік сервісу полягає в тому, що він не зовсім безкоштовний. Щоб скачати отриманий результат, треба зареєструватися (регія проста і швидка, виконується перед скачуванням). Реєстрація дає вам 2 безкоштовні завантаження. Ніби на пробу. Ну а далі вже потрібна пробна передплата. Але і цю фігню можна обійти, якщо міняти ip, чистити кукіс і міняти мейли. Якщо картинка невелика (хоча й розміри тут не зупинять), то копіпаст скрина у фотошоп немає проблем.

Також можу додати, що зараз Shutterstock (і Bigstock заразом) досить жорстко ставляться до приймання автотрейсу. Але монохромний автотрейс, оброблений і очищений від будь-якого сміття, приймають нормально.

А зараз, якщо ви готові, передаю слово Наталії. Приступаємо до уроку Adobe Illustrator.

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

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

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

Етап 1

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

Зображення краще обводити гелевою ручкою або лінером (у цьому прикладі використано найпростішу дешеву гелеву ручку чорного кольору). Кулькова ручка сильніше маже, складніше малює по олівцю і може давати відблиск на фото. Оптимальні кольоридля обведення – чорний, коричневий, синій, темно-зелений, фіолетовий. Даємо зображенню підсохнути, щоб не змастити гумкою ручку, при видаленні слідів олівця.

Етап 2

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

Етап 3

Підготовка фото. Так як ми використовували не сканер, а фото, треба привести його у прийнятний вигляд. Обрізаємо зайві ділянки, якщо вони є і залишаємо лише область із малюнком. Далі необхідно використовувати будь-який фоторедактор, в якому є налаштування яскравість/контрастність/насиченість і наводимо за допомогою них нашу фотографію приблизно так:

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

Етап 4

Трасування. Відкриваємо зображення в ілюстраторі. Я використовую ілюстратор CS6, тому вікно програми та деякі настройки можуть відрізнятися, якщо ви використовуєте іншу версію.

Виділяємо картинку мишкою і йдемо в меню "Об'єкт" > "Трасування" > "Створити".
Якщо з'являється таке вікно:

Тиснемо «Ок»і в нас розпочинається процес трасування.

Отримуємо картинку.

Виглядає не дуже. Контури у багатьох місцях перериваються. Щоб це виправити, потрібно відкрити розширені параметри трасування. Для цього на верхній панелінатискаємо на цю кнопку:

Щоб усунути розриви в контурах нам потрібно збільшити значення параметра «Ізогелія»у меню, що з'явилося.

Наприклад, якщо збільшити значення до 170 виходить вже така картинка!

Виглядає набагато краще.

За потреби змінюємо інші параметри.

Також вибираємо метод трасування – стик чи контури з накладенням. Я віддаю перевагу варіанту 2, т.к. при першому можуть виникати дефекти у вигляді світлих проміжків між контуром або заливкою.

На просторах рунету я знайшов зображення логотипу. Чи можна перевести її з растру у вектор у Фотошопі, причому автоматично? Ні, не можна. На жаль, поки тенденції вектора у Фотошопі такі, все, що в цьому напрямку було зроблено, залишилося незмінно ще 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 за найгіршої якості.

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

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