Оптимизация результатов с помощью трассировки изображений
Узнайте, как автоматически преобразовать пиксельные изображения в векторные с помощью модуля «Трассировка изображений» в Illustrator.
Автор статьи: Моника Гаус (Monika Gause)
Моника Гаус — внештатный дизайнер, разработчик технической документации и преподаватель. Она живет в Гамбурге (Германия). Векторная графика играла важную роль в карьере Моники на всех этапах, будь то подготовка макетов, создание мультимедийного контента, веб-дизайн и то, чем она занимается в данный момент — разработка документации. Ей довелось создавать 3D-анимацию для музеев, разрабатывать веб-сайты для малого бизнеса и создавать иллюстрации к бессчетному количеству расходных материалов для офисных нужд. Как преподаватель и ACP на форумах Adobe, Моника принимает активное участие в работе своих клиентов и участников форума, а также помогает им найти решение актуальных проблем.
Функция «Трассировка изображений» в Illustrator позволяет автоматически преобразовать пиксельные изображения в векторные. Эту функцию также часто называют «автоматической трассировкой». Результаты трассировки зависят от типа, качества и размера изображения, а также от настроек, заданных в Illustrator. Чтобы трассировка дала качественные результаты, в первую очередь нужно грамотно выбрать исходное изображение.
Подготовка файлов к трассировке
Потратьте некоторое время на подготовку изображений к трассировке, чтобы модуль трассировки обработал их быстрее и лучше. Помните, что редактировать результаты трассировки намного сложнее.
С помощью приложения для редактирования изображений вам необходимо удалить с исходного изображения все ненужные детали. Удалите пыль и царапины. Если у изображения цветной фон (в том числе почти белая бумага, с легким оттенком), а вам нужно, чтобы он был белым, вам проще будет добиться этого на этапе предварительного редактирования. Если вы хотите превратить портрет в одноцветный трафарет (как, например, хорошо известный всем портрет Че Гевары), вам необходимо четко отделить портрет от фона.
Трассировка однобитовых изображений дает не лучшие результаты, но она отлично работает применимо к черно-белым изображениям с градацией серого. Кроме того, при оптимизации скетчей, мазков кистью, леттеринга и т. п. проследите за тем, чтобы сохранилась небольшая степень сглаживания краев. В этом случае трассировка изображения сработает лучше, и кривые будут более гладкими.
Если высота или ширина изображения больше 1500 пикселей, модуль «Трассировка изображения» отображает предупреждение. Трассировка все равно выполняется, но намного медленнее.
Оптимизированные графические изображения необходимо сохранить без сжатия, вызывающего снижение качества изображения — в таких форматах, как PNG, TIF, PSD. Для фотографий подойдет формат JPEG.
Открытие и трассировка файлов в Illustrator
Трассировка растровых изображений выполняется так же, как и трассировка любых других типов изображений.
Создайте в Illustrator файл нужного размера с нужным цветовым режимом.
Перетащите в него исходное изображение из Mac OS Finder либо из Проводника Windows. Вместо этого вы также можете выбрать «Файл»> «Поместить» и импортировать нужное изображение. При использовании функции автоматической трассировки неважно, вставите ли вы файл или привяжете его. Не устанавливайте флажок «Шаблон» при размещении файла, так как в этом случае файл будет помещен на заблокированный слой.
Выберите исходное изображение и откройте панель «Трассировка изображения» с помощью меню «Окно»> «Трассировка изображения». Вместо этого вы также можете выбрать какой-либо стиль в панели управления (для этого воспользуйтесь небольшим меню, которое находится справа от кнопки «Трассировка») или на панели «Свойства» (для этого нажмите «Трассировка изображения» и выберите нужный стиль в меню).
В этом случае стиль моментально будет применен к изображению и приложение выполнит трассировку. Возможно, вам придется немного подождать, пока Illustrator не завершит процедуру. Все стили можно (и даже нужно) адаптировать под себя в панели «Трассировка изображения». Если вы этого еще не сделали, откройте панель «Трассировка изображения», нажав соответствующую кнопку на панели управления или в разделе «Трассировка изображения» панели «Свойства». Подробнее о том, как выбрать стиль, чтобы получить качественный результат, см. здесь.
Что делать, если команда «Трассировка» неактивна?
Команда «Трассировка» может быть неактивна по нескольким причинам:
- Необходимо выбрать изображение для трассировки. Для этого щелкните его инструментом «Выбор».
- Если это невозможно, проверьте, не заблокирован ли слой, на котором размещается изображение, или само изображение.
- Если все уже разблокировано, проверьте, не применяется ли к изображению обтравочная маска. Если применяется, выберите Объект >Обтравочная маска >Отменить. Затем удалите маску и выберите изображение. Такое может случиться, если изображение скопировано/вставлено из другого приложения через буфер обмена.
Чем трассировка изображения отличается от быстрой трассировки?
В модуле «Трассировка изображений» большинство функций совпадают, но реализованы они по-другому. Параметры исходного изображения, которые находятся в левой части панели «Быстрая трассировка» (например, размытие), интегрированы в этот модуль и применяются автоматически с учетом результатов анализа изображения.
Ограничения
Мы не рекомендуем применять модуль «Трассировка изображений», если вам нужно преобразовать в векторный формат следующие изображения:
- Геометрические фигуры. Логотипы, значки, символы и другие изображения, содержащие четкие геометрические фигуры (например, треугольники, шестигранники или даже прямые линии), рекомендуется трассировать вручную. Люди могут распознать эти фигуры даже на неудачно сжатых изображениях в формате JPEG или на мятой бумаге. Программное обеспечение распознает их как группу пикселей даже на качественном исходном изображении.
- Текст. Чтобы перевести текст в векторный формат, сначала рекомендуется определить его шрифт, например с помощью Adobe Capture или Adobe Photoshop, а затем набрать нужный текст в этом шрифте. Если текст длинный, используйте функцию OCR в Adobe Acrobat, чтобы создать текстовый файл. После того, как вы наберете и отформатируете текст в Illustrator, вы можете его обвести (например, чтобы сделать трафарет или подготовить логотип).
- Фотографии. Как правило, автоматическая трассировка не позволяет преобразовать фото в изображение, которое можно масштабировать без потери качества. Пиксели на изображении можно преобразовать только в фигуры. Они не видны в небольшом формате, но станут видны при увеличении изображения. Точно так же, как и исходные пиксели.
- Градиенты. Функция трассировки не позволяет генерировать градиенты. Они преобразуются в смежные фигуры сплошного цвета.
- Детализированные изображения. При трассировке мелкие детали неизбежно будут утеряны, поскольку вам придется выбирать, что важнее — точность результатов или плавные контуры. В большинстве случаев плавные контуры важнее, чем мелкие детали. Невозможно сделать так, чтобы в одной части изображения контуры были плавными, а в другой сохранились мелкие детали.
Не рассчитывайте, что автоматическая трассировка еле различимого изображения в формате GIF позволит вам получить качественное векторное изображение.
Трассировка изображения
Функция «Трассировка изображения» позволяет преобразовывать растровые изображения (JPEG, PNG, PSD и т. д.) в векторную графику. С помощью этой функции трассировки можно легко создать новый рисунок на основе существующего графического объекта. Например, можно преобразовать набросок, сделанный карандашом на бумаге, в векторное изображение. Чтобы быстро получить желаемый результат, можно выбрать один из стилей трассировки.
A. Исходное изображение B. Результаты трассировки с использованием различных стилей
Трассировка изображения
Попробуйте в приложении!
Мгновенно превращайте нарисованный от руки эскиз в векторную иллюстрацию в Illustrator.
Откройте растровое изображение или разместите его в документе Illustrator.
Выделите исходное изображение и выполните одно из действий, описанных ниже:
- Выберите Объект > Трассировка изображения > Создать , чтобы выполнить трассировку с параметрами по умолчанию. По умолчанию в результате трассировки Illustrator создает черно-белое изображение.
- Нажмите кнопку Трассировка изображения на панели «Управление» или на панели «Свойства» либо нажмите кнопку «Стили трассировки» и выберите стиль ().
- Выберите Окно > Трассировка изображения или переключитесь на рабочее пространство Трассировка . Откройте панель «Трассировка изображения» и выполните одно из следующих действий.
- Выберите один из стандартных стилей с помощью значков в верхней части панели. Дополнительные сведения представлены в разделе Настройка параметров трассировки | Стиль.
- Выберите стиль в меню Стиль .
- Задайте параметры трассировки. Дополнительные сведения представлены в разделе Настройка параметров трассировки.
Примечание.
- На панели «Трассировка изображения» активируйте Предварительный просмотр, чтобы посмотреть результаты изменений.
- Скорость трассировки зависит от разрешения размещенного изображения.
(Необязательно) Скорректируйте результаты трассировки на панели «Трассировка изображения» ( Окно > Трассировка изображения ).
Чтобы преобразовать объект трассировки в контуры и отредактировать векторное изображение вручную, выберите Объект > Трассировка изображения > Разобрать .
Image Trace
Image Trace lets you convert raster images (JPEG, PNG, PSD etc.) to vector artwork. Using this feature, you can easily base a new drawing on an existing piece of artwork by tracing it. For example, you can convert the image of a pencil sketch you’ve drawn on paper into vector artwork using Image Trace. You can choose from a set of tracing presets to get the desired result quickly.
A. Original image B. Tracing results using different presets
Trace an image
Try it in-app!
Turn a hand-drawn sketch into vector artwork instantly in Illustrator.
Open or place a raster image in your Illustrator document.
With the placed image selected, do one of the following:
- Choose Object > Image Trace > Make to trace with default parameters. Illustrator converts the image to black and white tracing result by default.
- Click the Image Trace button in the Control panel or the Properties panel, or select a preset from the Tracing Presets button ().
- Choose Window > Image Trace or switch to the Tracing workspace to open the Image Trace panel, and do one of the following:
- Choose one of the default presets by clicking the icons on top of the panel. For details, see Specify tracing options | Preset.
- Choose a preset from the Preset drop-down menu.
- Specify the tracing options. For details, see Specify tracing options.
- In the Image Trace panel, enable Preview to see the results of your modifications.
- The resolution of your placed image determines the speed of the tracing.
(Optional) Adjust the results of the tracing in the Image Trace panel ( Window > Image Trace ).
To convert the tracing object to paths and to manually editing the vector artwork, choose Object > Image Trace > Expand .
Записки микростокового иллюстратора
Сегодня у нас очень полезный урок Adobe Illustrator от Ольги Ивановой. Мы будем разбираться, как работает такая функция в Иллюстраторе как автотрейс. Причём Оля подошла к вопросу очень основательно. Начнём с подготовки качественного исходника и даже покопаемся в настройках трейса, чтобы получить наиболее приемлемый вариант. Итак, передаю слово Ольге.
Всем привет!
В этой статье хочу рассказать об основных способах перевода рисунка с бумаги в векторное черно-белое изображение. Здесь рассмотрим как можно векторизовать дудлики, сохранить у рисунка вид скетч или «hand-drawn» рисунка. Предупреждаю, урок будет длинным – из разряда «все что вы хотели знать о трейсе, но боялись спросить».
Для примера возьмем вот такой рисунок.
Я покажу варианты векторизации, а также преимущества и недостатки всех методов.
Приведу их в порядке моего освоения и использования.
Использование сканера
Сканирование
Сканер является отличным промежуточным звеном перевода рисунка в digital-иллюстрацию. Причем, если иллюстрация цветная, он и вовсе незаменим. Но в нашем случае, поскольку нам нужен лишь контур рисунка, он является одним из возможных вариантов.
Итак, сканируем рисунок. Получаем следующий JPEG-файл.
Обработка в Photoshop
Хотя в данном случае скан получился достаточно чистым, в большинстве случаев изображение следует дополнительно обработать в редакторе Photoshop. Запускаем Photoshop – Ctrl+O – открываем отсканированный файл.
На панели слева выбираем Crop Image для удаления лишних частей рисунка.
Затем добавим контрастности изображению – вызываем горячими клавишами Сtrl+L или через меню Image > Adjustment > Levels.
Здесь управляя ползунками необходимо добиться максимально чистого контрастного рисунка. У меня вышло следующее.
После чего можно взять ластик и стереть все огрехи и лишние детали. Сохраняем как JPEG файл в самом высоком качестве в разрешении 300dpi. В итоге получается рисунок готовый для трассировки в Illustrator.
Трассировка изображения в Illustrator
В новом документе Illustrator Ctrl+N помещаем наше изображение Shift+Ctrl+P и нажимаем на треугольник справа от кнопки Image Trace.
Иллюстратору потребуется некоторое время для векторизации изображения, после чего нажимаем на кнопку Палитра «Трассировка изображения». Масштаб рисунка рекомендуется сделать больше (Ctrl++ или Z) для контроля за результатами манипуляций с настройками трассировки. В появившемся окне обращаем особое внимание на следующие параметры:
�� Можно выставить рекомендуемые для нашего типа изображения настройки трассировки нажав иконку «Черно-белое» (Black and White). При этом можно посмотреть исходный рисунок нажав на значок «глаз» справа от пункта «Просмотр». Все последующие настройки выставляются автоматически, но лучше ориентироваться на результат трассировки и не бояться экспериментировать.
�� Изогелия (Threshold). Регулирует переход от черного к белому. Иными словами, чем меньше значение, тем более светлый рисунок и более тонкие линии. Высокое значение слайдера – увеличивает полноту и толщину линий.
�� Контуры (Paths). Слайдер отвечает за точность воспроизведения контура: самое левое его значение (низкое) означает, что контуры с оригинального рисунка будут схватываться приблизительно, где-то сглаживая и упрощая рисунок, правое значение слайдера (высокое) – более точное следование рисунку, проявляется, к примеру, в передаче текстуры, неоднородности контура.
�� Углы(Corners). Здесь определяется насколько плавным будет переход в углах (меньше – плавный переход, больше – острые углы).
�� Шум (Noise). Чем выше значение, тем меньше «шумов», искажений в рисунке линий.
�� Игнорировать белый цвет (Ignore White). При трейсе скетча важно захватить лишь темную обводку, чтобы исключить трейс белых участков – активируем check-box.
�� Предварительный просмотр (Preview). Применение измененных настроек при активном поле происходит тут же, после изменения положения любого из слайдеров. Если ваш компьютер не отличается производительностью и надо сделать несколько изменений, после которых увидеть результат трассировки, то лучше деактивировать данное поле и сделать трейс один раз.
Также предлагаю присмотреться к настройкам, выделенным голубым овалом. При применении автоматических настроек Outline контур будет векторизирован не режиме заливки, а в режиме линий – открытых путей. Данный вид трейса будет удобен на простых фигурах, без мелких, сложных элементов. Незаменим, если требуется более сложная последующая обработка — позволяет легче изменять изгиб и толщину линий.
Для наглядного примера, один и тот же рисунок слева выполненный трейсом в режиме заливки, а справа – обводки.
После того как мы добились удовлетворяющего нас результата трассировки необходимо изображение разобрать Обьект – Разобрать (Object > Expand). А также, чтобы все детали рисунка были единым целым, выделить изображение и объединить все на панели Pathfinder > Unite.
Коррекция изображения
Теперь у нас есть векторное изображение. Прежде чем заниматься его раскраской или даже в таком виде предлагать на продажу обычно я несколько дорабатываю рисунок.
Делаю я это преимущественно двумя инструментами:
�� Карандаш (Pencil tool (N))
�� Сглаживание (Smooth Tool)
Для того чтобы воспользоваться всеми преимуществами редактирования контура инструментом Карандаш необходимо его соответственно настроить. Кликаем дважды по иконке Карандаш (Pencil tool) – в открывшемся окне настроек активируем галочку в пункте Edit selected Path. Количество пикселей указанное ниже показывает в пределах скольки пикселей возможна правка контура. Также рекомендую активировать Alt key toggles to Smooth Tool – данная настройка позволит вызывая шорткатом N инструмент карандаш удерживая Alt переключаться на инструмент Сглаживание (Smooth Tool).
Данные настройки позволяют легко редактировать выделенный контур рисунка. Для этого вызываем Карандаш (N) и прорисовываем новую линию там, где это требуется (при этом не забываем, что начало и конец новой линии должны быть в пределах определенных в настройке пикселей, в нашем случае 6 px). Для того чтобы быстро выделять контур достаточно зажать клавишу Ctrl. Чтобы сгладить линии инструментом Smooth Tool – удерживаем Alt.
После того как мы таким образом проработали все неточности и шероховатости – мы сделали это! – рисунок готов!
Подведем итог использованию сканера в качестве инструмента для векторизации изображения.
Плюсы:
�� Получается качественное изображение
�� Сканирование не зависит от освещения и времени суток
�� Можно сканировать лист целиком – качество будет одинаковым.
Минусы:
�� Нужно иметь сканер
�� Более длительный (по сравнению с другими способами) процесс сканирования
�� Требуется «чистка» рисунка в Photoshop
Использование камеры фотоаппарата или телефона
Данный способ подходит тем, у кого нет сканера. В данном методе хорошее освещение – ваше все! Лучше всего для фотографирования подойдет место у хорошо освещенного окна, также я включаю настольную лампу. После этого процесс обработки изображения ничем не отличается от процесса описанного выше при использования сканера:
�� Обработка в Photoshop
�� Трассировка изображения в Illustrator
�� Коррекция изображения
Плюсы:
�� Быстрое сканирование в любое время и в любом месте
Минусы:
�� Нужно обеспечить хорошее освещение
�� В изображении много «мусора»
�� Требуется «чистка» рисунка в Photoshop
Использование приложений-сканеров на телефоне
В настоящее время существует много приложений для телефона, с помощью которых можно выполнить сканирование изображения. У них у всех разные дополнительные функции, часто это позволяет хорошо контролировать сам процесс сканирования и добиваться уже на этом этапе приемлемого вида рисунка. Здесь нужно смотреть, пробовать, выбирать свое приложение.
При использовании данных программ также важно обеспечить хорошее освещение – это избавит вас от «шума» при сканировании рисунка.
Далее можно видеть пример использования таких программ. Одно приложение – результат сканирования мне не понравился (на первом много «шума», нужно будет больше повозиться с рисунком, на втором – результат как от обычной фотографии на камеру).
Результат сканирования вторым приложением гораздо более приемлемый – рисунок четкий, контрастный, «мусор», образованный из-за состава бумаги, легко можно почистить в иллюстраторе.
При использовании приложения-сканера необходимо добиться изображения близкого к тому, что мы видели на фото выше. Следующие шаги будут (описанные в пункте использования сканера):
�� Трассировка изображения в Illustrator
�� Коррекция изображения.
Как видно в данном случае обработка изображения в Photoshop уже не требуется, за счет чего сокращается общее время на подготовку изображения.
Плюсы:
�� Быстрое сканирование в любое время и в любом месте
�� Можно контролировать результат сканирования
�� Не требует доработки в Photoshop
Минусы:
�� Нужно обеспечить хорошее освещение
�� В изображении много «мусора»
Приложение Adobe Capture
Последним, отдельным, пунктом хочу выделить мое открытие последних месяцев – приложение Adobe Capture.
Это бесплатное приложение от Adobe. Оно сразу покорило меня удобством использования и скоростью обработки изображения. Очень удобно быстро сканировать не только рисунки, но и различные текстуры и элементы для будущих кистей. Для входа в приложение следует ввести свой Adobe ID и пароль.
Для использования функции сканирования входим во вкладку «Фигуры». Нажимаем на плюс и ловим нужное изображение. При сканировании можно полностью контролировать контрастность. Это достигается с помощью специального бегунка внизу экрана, он позволяет делать рисунок светлее (левое значение) или темнее (правое положение слайдера).
После того как контрастность нас устроила и мы сделали снимок переходим к последующей коррекции. Во вкладке «Уточнить» можно стереть лишние детали со снимка. Я убрала темную полоску внизу и мелкий мусор на бумаге.
Вкладка «Рамка» работает по принципу Crop в Photoshop – оставляет часть рисунка, ограниченного рамкой. В моем примере воспользоваться рамкой не пришлось.
Далее переходим к закладке «Сглаживание». Работу этой вкладки можно провести аналогию с работой функции в Иллюстраторе «Упростить» (Объект (Object) > Путь (Path) > Упростить (Simplify)) или инструмента Smooth Tool – результатом будут более плавные, кое-где порой сильно сглаженные, линии. В моем случае результат сглаживания мне не понравился и я сохранила рисунок в первом варианте.
Функцией Сглаживания очень удобно пользоваться при сканировании леттеринга: поверхность линий у букв получается гладкой, только при дальнейшей обработки в Иллюстраторе следует особое внимание уделить местам стыков линий – при необходимости исправить сглаженные углы на более острые.
Все отсканированные файлы сохраняются в Библиотеке и тут же появляются в аналогичной вкладке в вашем Иллюстраторе на ПК. На артборд просто перетаскиваем нужный рисунок и – вуаля! – изображение уже векторное, трейса не требует, можно сразу переходить к коррекции изображения.
Плюсы:
�� Быстрое сканирование в любое время и в любом месте
�� Можно контролировать результат сканирования
�� Не требует доработки в Photoshop
�� Сразу получаем векторное изображение
�� Автоматический импорт в Adobe Illustrator
Минусы:
�� Нужно обеспечить хорошее освещение
�� Сканировать лучше отдельные изображения, а не лист целиком
Вот что в итоге вышло у меня.
На этом урок закончен. Плодотворного дня и удачных дудликов! ��
Иванова Ольга специально для блога Записки микростокового иллюстратора