Трассировка фотографии в иллюстраторе. Почему картинка "портится" после трейса и как этого не допустить

Функция «Трассировка изображений» в Adobe Illustrator - это самый быстрый способ конвертировать изображение в векторный формат для высококачественной печати любого размера.С введением улучшенной функции Image Trace

Adobe Illustrator CS6 и последующими обновлениями открылся целый мир возможностей для пользователей графического программного обеспечения, которые хотят иметь возможность отслеживать штриховые рисунки и фотографии и превращать их в векторные изображения. Теперь пользователи могут относительно легко преобразовывать растровые изображения в векторы и файлы PNG в файлы SVG, используя Illustrator.

Illustrator часто используется для преобразования изображений, от сканированных или от рисованных в пиксельный программе рисования, например, в Adobe Photoshop , в четкие векторные линии. Есть два способа отследить изображения в Illustrator CC . Вы можете вручную проследить их, используя слои шаблона и инструменты рисования, или использовать функцию «Трассировка изображения»

Итак, начнём.

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

Вот как легко преобразовать растровое изображение в векторное, используя инструмент Image Trace в Adobe Illustrator:

Шаг первый.
Открыв изображение в Adobe Illustrator , выберите « Окно » > « Трассировка изображения» .Это вызовет панель Image Trace.

Шаг второй
С выбранным изображением установите флажок Предварительный просмотр . Это даст вам живой взгляд на ваше изображение в векторном формате. Не беспокойтесь, если он не выглядит великолепно.
Шаг третий
Выберите раскрывающееся меню « Режим » и выберите режим, наиболее подходящий для вашего дизайна.

Шаг четвертый
Затем настройте ползунок « Цвета », « Серый » или « Порог ». Этот ползунок будет меняться в зависимости от выбранного вами режима, однако функциональность между тремя ползунками остается схожей.
Цвета - максимальное количество цветов, используемых для трассировки.
Грейс - точность оттенков серого от 0 до 100.
Порог - Пиксели темнее порогового значения преобразуются в черный.

Если это слишком низко, это может сделать ваше изображение слишком простым. И если это слишком высоко, это может сделать ваше изображение слишком сложным. Однако все зависит от вашего уникального имиджа.

Шаг пятый
Переключите меню « Дополнительно » вниз, чтобы открыть дополнительные параметры.

Шаг шестой
Настройте ползунок « Пути ».

Оно установи количество путей в вашем дизайне. Меньшее количество путей означает более простую конструкцию, но если слишком мало путей, это может исказить ваше изображение или сделать его квадратным. И наоборот, слишком много путей могут сделать края вашего дизайна очень грубыми. Опять же, все зависит от вашего уникального имиджа - так что лучше всего найти счастливую среду.

Шаг седьмой
Настройте ползунок « Углы ».

Это контролирует количество углов в вашем дизайне. Меньшее количество углов сделает изгибы вашего дизайна более округленными, а большее количество углов сделает изгибы вашего дизайна более четкими.

Шаг восьмой.
Настройте ползунок Шума .

В сегодняшней статье я расскажу о своем способе трассировки (перевода растрового изображения в векторный формат), а также объясню, почему я предпочитаю не применять векторизацию к своим работам.

Современные версии программ векторной графики, такие, как Adobe Illustrator, стали настолько умными, что порой трассированное векторное изображение сложно отличить от базового растрового. Таким образом, бумажный рисунок приобретает одно из наиболее выгодных свойств векторной графики - масштабируемость без потери качества. Однако, когда речь заходит о детализированных рисунках большого формата, возможности программной трассировки могут показать весьма посредственный результат. Периодически я получаю запросы на создание принтов именно в вектроном формате, но в 100% случаев я отклоняю подобные предложения. Единственное исключение, которое я делаю, это трассировка тушевых набросков для Creative Market. В последнее время я эпизодически пополняю свою коллекцию новыми наборами.

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

Как же превратить растровое изображение в векторную форму?

Вот рисунок, на примере которого я продемонстрирую свой процесс. Эти наброски "живут" на листе бумаги форматом А4, который был отсканирован в разрешении 600 dpi, а затем немного откедактирован в Adobe Photoshop (Яркость-Контрастность и удаление визуального мусора с помощью непрозрачной кисти белого цвета). Оговорюсь, что это не строгая необходимость - сканировать все рисунки в разрешении 600 точек на дюйм. 300 dpi будет вполне достаточно. Тем более, с разрешением 300 dpi снижается вероятность, что Ваш компьютер задумается и наотрез откажется работать дальше.

Я помещаю это изображение в Adobe Illustrator (я использую именно эту программу, потому что она своего рода эталон в своей отрасли, да и по части трассировки очень хороша).
Это - панель Image Trace (ее можно найти в меню Window ). У меня на скриншоте эта панель находится в развернутом виде, с открытыми расширенными настройками. Я специально пометила красными точками самые важные для нас настройки, поскольку, если у Вы не знакомы с этой программой, так будет легче и проще ориентироваться в том, о чем я пишу.

Строго говоря, нам ни к чему знать в деталях, за что отвечает каждая из настроек, поскольку по-настоящиму важными являются лишь несколько из них. Я расскажу о них, и дальше можно будет браться за дело, если Вы планируете попробовать оттрассировать какое-то свое изображение вместе со мной.

Первая опция, это Preset. Тут множество вариантов, от High Fidelity Photo до Black and White Logo, в зависимости от того, что нужно превратить в вектор. Поскольку наш пример - тушевый набросок, лучшим вариантом будет выбрать Sketched Art .

Следующая важная настройка - Threshold . Говоря просто, чем ближе слайдер к правому краю (more), тем темнее будет векторный результат, тем интенсивнее будут все тени в Вашей работе. И наоборот, если речь о близости слайдера к левому краю (less).

Paths , Corners и Noise .
Paths - чем выше этот процент, тем больше будет точек в вектрном изображении. Corners - чем ниже это значение, тем более сглаженным будет результат. Noise - чем выше значение, тем больше деталей исчезнет, т.к. они будут восприниматься программой как вредный мусор. Эти три функции требуют постоянного эксперимента, потому что невозможно для любой работы, даже выполненной в одной и той же технике, найти абсолютно подходящую, идеальную комбинацию. Только индивидуальный подход.

И наконец, я очень рекомендую включать чекбокс Ignore White при трассировке черно-белых тушевых иллюстраций. Таким образом Иллюстратор понимает, что не нужно тратить ресурсы на белое пространство, и получается только черная тушь в векторном формате.

Как только я выбираю Sketched Art preset, программа начинает колдовать над миоим изображением. На данном этапе я еще ничего не настраивала, только Preset и Ignore White.

Я не в восторге от получившегося результата, потерялось много деталей. Поэтому я начинаю подкручивать те опции, о которых рассказала пару абзацев назад:
- Threshold было решено оставить по умолчанию, на 128, потому что сдвиг в ту или иную сторону нарушал светотеневой баланс моего изображения,
- значение Paths увеличено аж до 90%
- Corners - небольшое увеличение, лишь на 6%
- Noise - слайдер ушел почти до упора влево.

Наконец, последний шаг, который нужно сделать, чтоб изображение стало действительно векторным, это нажать кнопку Expand на верхней панели инструментов.

А можно ли лучше?

Только что мы рассмотрели быстрый путь трассировки изображения со сравнительно большим количеством деталей (ведь у нас тут целых три наброска на одном листе бумаги). Если у Вас похожая ситуация с количеством объектов, Вы можете использовать подобный алгоритм действий, или же, если позволяет время и хочется достичь лучшего результата, применить другую стратегию, и трассировать каждый рисунок по отдельности. В моем случае это значит, что я выделяю поодиночке каждый набросок, и повторяю уже знакомые Вам шаги.

Давайте сравним два результата. Слева тот, что получился в результате трассировки сразу трех набросков, а слева - тот, что я отдельно выделила в Фотошопе и затем оттрасировала по предложенному ранее принципу, настроив все опции конкретно под этот рисунок мороженого.
Мне кажется, что вариант справа сохранил гораздо больше деталей и выглядит более похожим на оригинальную тушевую работу. Как видно, Иллюстратор показывает лучший разультат, когда не перегружается большим количеством объектов, которые нужно обработать.

Таким образом, главное преимущество трассировки каждого небольшого рисунка по отдельности - возможность получить более высокое качество изображения и проконтроллировать этот процесс, что дает уверенность в том, что сделано все от себя зависящее для отличного результата.

Плюсы и минусы трассировки тушевой графики, или всегда ли можно положиться на возможности программы

А теперь я хотела бы вернуться к вопросу, почему я не трассирую масштабные детализированные работы. Вот мой принт (читатели наверняка его помнят), который я сейчас попробую превратить в образец векторной графики. Это большой рисунок, формат бумаги А3, со множеством крошечных деталей, выполненных линерами 0.03 и 0.05 мм. Я помещаю эту картинку в Иллюстратор.

Выбираю Sketched Art preset...

И получается нечто совершенно разочаровывающее, лишенное деталей и какой-либо внятности. Плохая новость в том, что как бы я ни пыталась выправить это изображение, оно не станет похожим на оригинал. Можно достичь лишь небольших, практически незаметных, изменений к лучшему.

Вот почему я не перевожу свои принты и сложные иллюстрации в вектор. Я также не рисую в векторных программах с нуля, не обрисовываю эскизы. Таким образом, думаю, становится понятно, почему я говорю "нет" каждому, кто интересуется "принтом как этот, только векторным" :)
Как правило, в свои наборы графики на Creative Market я вкладываю растровые варианты, сделанные именно с оригинальных рисунков, а не растровые версии векторного изображения. Все дело в том, насколько оцифрованная версия сохраняет связь со своим источником, важно, чтобы она была "живой". Я хочу, чтобы даже от небольших превью моих рисунков создавалось ощущение, будто эти работы помнят мое прикосновение.

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

Вот, собственно, и всё, что я хотела рассказать сегодня. Спасибо за внимание!

14.06.2012

Сегодня мы рассмотрим новый механизм трассировки в Adobe Illustrator CS6 и поговорим о его новых функциях. Для начала мы отрисуем фотографию, набросок и текстуру, а затем сравним результаты, полученные в Adobe Illustrator CS5 и Adobe Illustrator CS6. Итак, начнем!

Шаг 1

В Adobe Illustrator CS6 параметры трассировки теперь в новой палитре — Трассировка Изображений (Окно > Трассировка).

Появление этой палитры позволит нам во время трассировки использовать другие палитры и инструменты. В Adobe Illustrator CS5, а также более ранних версиях программы, таких возможностей не было. Параметры трассировки задавались в диалоговом окне Настройки Трассировки. И нельзя было работать с другими объектами и интерфейсами.

Шаг 2

Также есть изменения в пресетах.

В Adobe Illustrator CS6 появился новый пресет «Силуэты», который позволяет быстро создать векторный силуэт.

После применения команды Разобрать (Expand) мы получим векторный объект с оптимальным количеством опорных точек.

Шаг 3

Давайте сравним качество трассировки в Adobe Illustrator CS5 и Adobe Illustrator CS6 после применения пресета Фотография высокого качества (High Fidelity Photo).

Заметьте, что в Adobe Illustrator CS6 в списке Палитра есть несколько вариантов на выбор. Этот параметр задается, если для изображения выбран режим — Цветное или Серая шкала. Как видите, новый механизм трассировки в Adobe Illustrator CS6 дает лучшие результаты.

В Adobe Illustrator появилась новая функция, которая позволяет мгновенно увидеть исходное изображение. Нажмите и держите «глазик» возле опции Просмотр.

Шаг 4

Есть некоторые изменения в настойке Максимальное число цветов. Этот параметр задает количество цветов, из которых будет состоять конечное изображение. В Adobe Illustrator CS5 максимальное количество цветов можно задать числом, а в Adobe Illustrator CS6 — в процентах с высокой точностью.

Шаг 5

Раскрыв в палитре Трассировка вкладку Дополнительно можно задать дополнительные настройки. В Adobe Illustrator CS6 появилась возможность выбрать метод трассировки. Метод Стыкования контуров (Abutting) создает вырезанные контуры. Контуры объектов стыкуются.

Метод Наложение контуров (Overlapping) создает контуры один над другим, контуры объектов накладываются.

Шаг 6

Опция Подгонка контура определяет точность трассировки исходного растрового изображения. В Adobe Illustrator CS5 чем меньше значение, тем точнее контур, чем больше значение, тем грубее контур. В Adobe Illustrator CS6 все наоборот: чем больше число,тем точнее контур мы получим.

Опция Минимальна Площадь в Adobe Illustrator CS5 соответствует опции Шум в Adobe Illustrator CS6. Эта опция определяет размер самых маленьких деталей исходного изображения, которые будут учитываться при трассировке.

Опция Минимальный Угол в Abode Illustrator CS5 соответствует опции Углы в Adobe Illustrator CS6 и задается в процентах. Чем больше число мы установим, тем больше углов будет в конечном изображении.

В Adobe Illustrator CS6 нет таких настроек трассировки как Размытие и Изменение разрешения. В Adobe Illustrator CS5 настройка Размытие служит для уменьшения количества мелких деталей и смягчения границ результирующего изображения. Настройка Изменение разрешения позволяет ускорить процесс трассировки больших изображений и уменьшить потерю качества конечного изображения.

Шаг 7

Посмотрим как новый механизм трассировки работает с набросками. Примените пресет Черно-белая картинка. Трассировка наброска в Adobe Illustrator CS5 дает хорошие результаты.

Если мы применим этот же пресет в Adobe Illustrator CS6 большинство мелких деталей исчезнет.

К сожалению, чтобы добиться в Adobe Illustrator CS6 таких же результатов как в Adobe Illustrator CS5 нужно менять параметры трассировки вручную.

Шаг 8

Попробуем выполнить трассировку текстуры. Применим тот же пресет Черно-белая картинка. Как видите, результат трассировки в Adobe Illustrator CS5 выглядит лучше чем в Adobe Illustrator CS6.

Vector Magic действительно оправдывает своё название. На мой взгляд, ни трассировка Corel Draw ни Adobe Illustrator и в подметки ему не годятся. (Большое спасибо пользователю нашего ресурса Mechanik за эту полезную ссылку).

Итак, подробнее. Это бесплатный онлайн-сервис для трассировки изображений, т.е. на входе имеем растр, а на выходе получаем вектор. Это детище James Diebel и Jacob Norda из исследовательской Лаборатории Искусственного Интеллекта Стэндфордского Университета. Они попытались создать ресурс настолько простым, насколько это возможно, с четким и понятным интерфейсом, требующим минимум затрат. Насколько им это удалось, судить вам.

Для работы с сервисом вам понадобится Adobe Flash Player 9 - увы, без него ничего не выйдет. Вторая проблема, с которой столкнулась я – это нежелание браузера Opera работать с этим сайтом. Вероятно, при желании его можно было настроить, но желания не было. Internet Explorer (так же как и FireFox) сработали как надо.

Первая страница ресурса дает нам намного информации о проекте, векторе, трассировке и о том, чем хуже все ранее использовавшиеся трассировщики. Но основное – окошко, где мы выбираем необходимое изображение для трассировки (со своего компьютера). Процесс загрузки занимает некоторое время. Закачивать можно форматы JPG, GIF, PNG, BMP и TIFF.

После загрузки выскакивает табличка: «Скорее всего, в вашем изображение будет смешивание цветов на границах элементов. Это важно, потому как от корректности выбора настроек будет зависеть результат. Подтверждайте выбор настроек нажатием кнопки Next, и если необходимо, пробуйте несколько других настроек.» Это сервис пытается автоматически определить тип вашего изображения (чтобы улучшить качество трассировки). Чуть ниже вы узнаете, как проконтролировать правильность выбранного типа.

Очередной нюанс: желательно чтобы разрешение вашего изображения не превышало 1 мегапиксель. По этому поводу вновь выскочит окошко со следующим содержанием: «загружаемое изображение довольно велико будет уменьшено до 1 мегапикселя. Это мера предосторожности необходима, чтобы не перегружать сервер. К сожалению это может привести к потере мелких элементов изображения и к появлению смешивания цветов на границах объектов. Вы можете либо продолжить работу, либо загрузить другой файл.»

Несмотря на предупреждения, я всё таки продолжила.

Далее вам предложат выбрать тип вашего изображения

1. Фотография (сложное графическое изображение созданное с помощью фотокамеры).
2. Изображение со смешением цветов на границах объектов (это изображение со сглаженными цветовыми переходами (anti-aliased) - самая подходящая категория для логотипов и другой простой графики).
3. Изображение без смешения цветов на границах объектов (not anti-aliased).

В самом низу (в четвертом квадрате) – вы увидите увеличенный участок вашего изображения. Используйте его, чтобы наглядно сравнить его со всеми тремя вариантами и выбрать наиболее подходящий. Чтобы перейти дальше, нажимаем Next.

Выбор качества вашего изображения

1. Высокое
   не имеет компрессионых артефактов или других шумов;
   цвет объектов однороден;
   нет блюра;
   Если выбран этот пункт, трассировка происходит более тщательно, по контурам объектов, по этому шум может испортить результат.
2. Среднее
   есть артефакты и шум;
   цвет почти однородный с небольшими изменениями;
   местами блюр;
   (Предлагается по умолчанию)
3. Низкое
   много артефактов и шума;
   цвет неоднороден со значительными изменениями;
   сильный блюр;
   Шум и блюра по возможности не включается в процесс трассировки из-за чего возможна потеря некоторых деталей.
4. Деталь вашего изображения для сравнения.

Выбираем наиболее подходящий вариант и жмем Next.

Сколько цветов в вашем изображении?

(этого пункта не будет, если в первом пункте вы выбрали фотографию)

1. Да, мало, около 12 цветов
   Выбор этого пункта может уменьшить погрешность от шума или блюра.
2. Нет, в моём изображении много цветов
   Эта опция может оставить погрешности от шума и блюра.

Делаем выбор и жмем Next.

Анализ цвета

В правой половине экрана предлагаются палитры трассировки, основанные на цветовой гамме вашего изображения. По умолчанию предлагается самая удачная (по мнению сервиса) палитра. Ниже приведены другие, от черно-белой до максимально возможной для вашего изображения. Есть возможность пополнять выбранную палитру за сет других, брать пипеткой цвета с оригинала, создавать свои варианты цветов, но всё же в пределах существующего цветового ряда.Еще несколько советов:

• В левой части – ваша картинка. Её можно "зумить" и "скролить".
• Что бы выбрать пипеткой цвет, надо кликать, удерживая Ctrl.
• Постарайтесь не делать двойной клик на палитре, из-за этого автоматически начинается трассировка.

Трассировка

Трассировка занимает некоторое время - прогресс этого процесса отображается на полоске и в процентах. После того, как процесс завершен, вы можете проверить и скачать результат трассировки.

Форматы, предлагаемые для скачивания: EPS, SVG, PNG. Результат опять же можно "скролить" и "зумить". Режим просмотра результата можно изменить, воспользовавшись кнопками:

• Split – помогает увидеть оба изображения (растровый оригинал и трассировку) рядом друг с другом;
• Single – просмотр результата трассировки;
• Bitmap – удерживая эту кнопку, мы видим растровый оригинал, отпуская – векторный результат;

Если результат вас не впечатлил, и вы хотите что-то изменить в настройках, пожалуйста. Справа предлагается такая возможность. Указаны возможные недочеты и рекомендации по их устранению. Ниже каждого указания есть кнопка, начинающая трассировку с измененными условиями. При каждом изменении трассировка начинается заново.

Цветовые границы недостаточно гладкие?

Выберите более низкое качество изображения в настройках, чтобы добиться более гладких границ.

Шум портит результат на множестве небольших участков?

Выберите палитру с меньшим количеством цветов или более низкое качество изображения в настройках.

Потерялись цвета?

Выберите палитру с большим количеством цветов.

Куда делись мелкие детали?

Выберите в настройках более высокое качество изображения.

Небольшие погрешности и ошибки, точки и обрезанные линии?

Вы можете исправить это сейчас, вместо редактирования уже скачанного файла.

Редактирование изображения онлайн

Эта функция существует для того, чтоб дать возможность редактировать ошибки на отдельных участках трассированного изображения. Это позволяет добиться наиболее идеального результата почти для каждого изображения. Сегментация – это вид? в котором изображение раздроблено на части, которые потом сглаживаются в процессе создания итогового результата трассировки. То есть в окне мы видим как бы пиксели, из которых состоит изображение и редактируем именно такой вид.

На поле изображения есть кнопки, а справа - их небольшое описание.

Undo и Redo: Соответственно отменяет и возвращает осуществленные действия и манипуляции. Ограничений на возвратные действия мне обнаружить не удалось.

Reset: Видимо отменяет все изменения.

Bitmap и Vector: При удержании первой видим растровый оригинал, при удержании второй – векторный результат.

Finder: Иногда маленькие детали не обнаруживаются автоматически. Finder помогает их разыскать. Каждый такой участок надо отредактировать так, чтобы он был полностью отделен от остальной массы промежутком.

Pan: Скролит изображение.

Zap: Иногда, всё же следы от фильтров и смешения цветов обрабатываются трассировщиком и выглядят они, как части деталей, отличающихся от общего цвета. Zap разбивает деталь на сегменты, а потом соединяет, закрашивая в тот цвет на который вы кликнете.

Fill: Заливка, просто кликаем на выбранную деталь.

Pixel: Карандаш, рисующий тем цветом, что указан в окошке цвета.

Color: Пипетка для выбора цвета. Выбранный цвет отражается в окошке ниже.

Все создаваемые изменения сохраняются на сервере при условии нажатия кнопок Next и Finish. Изменения не сохраняются, если в процессе редактирования вы перегружаете страницу.

Вот, вроде, как и все указания по использованию. Могу добавить только то, что я трассировала не сложную картинку с минимумом цветов и с довольно хорошим качеством. Скачанный файл (я скачивала EPS) выглядит именно так, как на превью. Всё трассированно корректно без лишних точек и угловатостей, а все детали иллюстрации сгруппированы и располагаются на одном слое.

PS: Стоит отметить, что, к сожалению, теперь использование Vector Magic стало платным.