Растровое в векторное. Как из растрового изображения сделать векторное? Преобразуем фотографию в вектор
16 Февраль, 2011 13 Январь, 2017
Перевод из растра в вектор в Фотошопе
Пока моя заметка о масках в Фотошопе не остыла, срочно хочу осветить вопрос перевода растра в вектор. Два дня назад, я зашел в свой хронофагский Google Analytic и что же я увидел. Оказывается некоторые попадают на мой сайт по запросу «растр в вектор», а между тем, на моем сайте нет ни одной толковой заметки на данную тему. Люди же мучают Google на перевод растра в вектор в Corel Draw, Illustrator и даже Adobe Photoshop . Начнем с Фотошопа.
В конце концов, первоначальный рисунок будет визуально эквивалентным, но изменение размера даст совсем другой качественный результат. Если вы увеличите растровое изображение, оно потеряет качество. С другой стороны, если мы увеличим векторное изображение, оно будет пересчитано из математических уравнений, хранящихся в памяти: качество будет оставаться оптимальным.
Демонстрация на примере: внизу, слева - векторное изображение, справа - пикселированное изображение. Начальное качество идентично, но мы понимаем, что, если мы изменим размер 2 изображений, первый из них прекрасно охватывает модификации, а второй - очень отчетливо.
Из растра в вектор. Зачем это нужно?
Фотошоп — растровая программа. Вектор в нем присутствует в виде векторных контуров. Как таковых, векторных объектов в Фотошопе нет. Но есть есть векторные контуры, которые могут быть преобразованы в векторную маску. Маска накладывается на эффект или объект и получается вектор в фотошопе. Содержимое такого объекта все равно растровое, но может преобразовываться в вектор при сохранении в некоторые форматы.
Утилита сначала: создать или изменить векторный путь
Это основная функция инструмента пера. Но возникает следующий вопрос: а затем, какова цель этого векторного сюжета? По своей природе векторный график, созданный с помощью инструмента пера, является временным, временным.
Создать текст вдоль векторного пути
После выбора текстового инструмента перетащите указатель мыши по пути, щелкните по нему, а затем введите текст. Последний следует за строкой графика, как в примере, противоположном. Дополнительное преимущество, если вы измените начальный векторный график, текст автоматически будет следовать за новым графиком!Например, мы можем создать заливку и натянуть на неё векторную маску. В Фотошопе есть целая группа инструментов, которые делают такое бесплатно и автоматически, это группа векторных примитивов. Подробнее читайте мою статью или . Итак контур будет векторным. Заливка внутри растровой. 
Применение предопределенной формы вдоль векторного пути
Однако будьте осторожны, в отличие от текста вдоль пути, если вы измените исходный путь, предопределенные формы не будут следовать этому новому пути. Только когда контур или фон применяются к векторному пути, он становится видимым элементом изображения.
Панель инструментов пера позволяет. Или создать форму непосредственно во время проектирования векторного пути, выбрав «фигуру», а не «график» в раскрывающемся меню справа от значка пера или преобразовать векторный график в свою форму после его создания щелчком на кнопку «Форма» в области «Создать» панели параметров. Чтобы изменить фон или контур существующей формы, выберите инструмент вектора формы: панель параметров отобразит уже примененные характеристики и позволит вам их изменить.
Фотошоп не работает с вектором на полную мощь. Лишь использует его преимущества там да тут. Но даже в Фотошопе растровые объекты можно превратить в векторные. Зачем это нужно если есть Иллюстратор? Ну как вам сказать. При активной работе с графикой возникают разные ситуации. Иногда проще на месте перевести выделение в контур, нежели уходить с головой в Иллюстратор и заниматься там трассированием. Чтобы прополоть грядку клубники на даче не нужно вызывать комбайн. В конце концов не все хотят, или умеют пользоваться Иллюстратором, не всем он нужен, не все могут его себе поставить, а перевести в вектор закорючку нужно здесь и сейчас. Усаживаться с тремя томами по Иллюстратору на пару недель для этого вовсе необязательно.
Обратите внимание, что текст его векторного характера можно преобразовать в форму. Затем вы можете изменить для удобства форму букв текста с помощью векторных инструментов и особенно с помощью инструмента для пера. Однако будьте осторожны, чтобы текстовый слой был преобразован в слой формы, и вы больше не можете изменять текст, как с текстовым слоем.
Преобразование сюжета в выделение
Вы также можете сделать это на панели «Треки»: просмотрите всплывающее меню «Установить выбор» на уровне трассировки или щелкните по пунктируемому кругу в нижней части панели «Треки». Перо инструмент особенно полезен для очень точной обрезки.
Преобразование пути к векторной маске
Опять же, процедура такая же, это вторая кнопка в области «Создать» на панели инструментов пера.Перевод растра в вектор в Фотошопе
Что именно способен перевести в вектор Фотошоп? Что угодно, если вы заранее выделите этот объект инструментами группы 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 Мы создали слой заливки, которому сразу присваивается векторная маска в виде нашего контура.
Одним из наиболее очевидных преимуществ рендеринга «растрового векторного изображения» является тот факт, что его можно повторно использовать в измерении, которое наилучшим образом подходит для нас без потери качества. Эта процедура будет необходима, если вы хотите возобновить небольшое изображение или изображение низкого качества, для получения идентичного, но со значительно более высоким качеством и размерами; однако сценарии использования бесчисленны.
Ну, векторный формат позволяет вам работать с довольно простыми изображениями, поэтому не думайте, что вы можете ручаться за цифровую фотографию. Кроме того, работа требует немного знакомства, но мы здесь для этого. Призыв к пирогу начинается. Вот страница загрузки.
Доработка векторного контура
Пользуясь материалами, которые я описал в статьях и усложним рисунок. Я взял инструмент Pen Tool , выделил маску слоя заливки. В настройках Pen Tool выставил Subtract и дорисовал некоторые элементы нашей бабочке. Вырезал узоры на крыльях, а ножки и усики сделал толще.
Для начала мы выбираем образ для работы. Мы уйдем с чем-то простым, если чем больше изображение будет сформулировано, тем больше внимание, точность и время, которое мы посвятим нашей работе. Предположим, мы хотим повторно использовать его, но с разными цветами и большими размерами, не используя простой масштаб, который приведет к снижению качества.
Сделайте это законным и ответственным, мы не берем на себя ответственность за неправильное использование изложенных здесь понятий. Убедитесь, что вы выбрали инструмент «Выбрать и конвертировать объекты», который по умолчанию активен при его открытии. Убедитесь, что вы выбрали уровень, просто переименованный из палитры «Слои», подтверждение поступает из строки состояния.
Создание произвольной фигуры Custom Shapes
Вы всегда можете сохранить полученный объект в произвольные фигуры Custom Shapes . Некоторое время назад я упоминал о том как это можно сделать в статье . Выделите слой с бабочкой и нажмите Edit > Define Custom Shape Наша бабочка появилась в фигурах инструмента Custom Shapes Tool .
На этом этапе наша исходная база опиралась на базовый уровень изображения, теперь мы собираемся заблокировать этот уровень, чтобы предотвратить любые изменения в нем, такие как случайные сдвиги, которые не дадут вам недостатка на этапе рисования. Чтобы сделать это, нажмите на замок на предыдущем изображении, слева от имени слоя в строке состояния.
Теперь он должен выглядеть закрытым, и если вы попытаетесь переместить логотип на рабочую область, вы не должны этого делать. Этот урок возник из идеи моей жены, которая хотела создать формы на бумаге, чтобы вырезать, он попросил о моей помощи. Излишне говорить, что конечный результат был более чем удовлетворительным без учета времени, сохраненного по сравнению с классическим отслеживанием изображений.
А вот то, что у нас получилось в итоге:
Перевод растровой фотографии в вектор в Фотошопе совершенно бессмысленное занятие. Но иногда подобные техники могут пригодиться для побочных работ с графикой и не только.
Мораль, из этого краткого опыта родится учебник, который вы найдете на этой странице, надеюсь, вы будете полезны. Начните загрузку изображения со ссылкой в конце страницы. После того как вы загрузили изображение, выберите его и выберите «Векторный битмап» в меню «Трассировка».
Теперь давайте подготовиться к преобразованию изображения. Всегда с выбранным изображением в «Множественном сканировании», как показано: «Сканирование: 2», «Монохромный», «Однородность» и «Стек». Если вы предпочитаете, чтобы время от времени контролировать конечный результат, нажмите кнопку «Предварительный просмотр».
Перевод из растра в вектор фотографии в фотошопе
Фотошоп не создан для перевода растровой графики в вектор. В нем, однако, присутствуют несколько спец-эффектов, которые визуально создают подобие векторного изображения. А при помощи описанной мною техники можно и из них сделать векторное изображение в Фотошопе. Возьмем для примера обычную фотографию, сделанную моим знакомым фотографом. 
Ну, вы только что превратили этот ужасный образ из качества, чтобы сказать скандальный новый образ с приятными и чистыми формами. Теперь выберите только что созданное векторное изображение и переместите его в сторону, как показано на рисунке. Выберите старое изображение и удалите его навсегда с помощью кнопки «Удалить».
Мы получили изображение, состоящее из «группы» из двух форм. Нажмите кнопку «Разделить выбранную группу», выберите светло-серый фон, а затем переместите его, чтобы стереть его. Выберите оставшиеся фигуры и откройте окно «Выровнять и распределить объекты». В разделе «Выравнивание по отношению к:» выберите «Страница», затем нажмите на два значка, показанные на рисунке. Вы просто сосредоточили рисунок на странице. Теперь нажмите кнопку 5, чтобы центрировать страницу.
Одним из упомянутых мною эффектов является Filter > Artistic > Cutout Оставляю настройки на вашей совести. Изображение должно получиться максимально реалистичным, но сильно сглаженным. На этом можно было бы остановиться, изображение уже выглядит «векторно», но оно по прежнему растровое.
Теперь нужно создать векторные области равные количеству цветов на фотографии. Выберите палочку Magic Wand Tool и убедитесь, что в настройках не отмечена галочка Contiguous . Выделите первую область и проделайте весь, описанный мною выше, путь. Из выделения создайте контур, из контура залитую векторную маску и так далее.
Этот онлайн-сервис вначале описывался как бесплатный, но в данный момент за него нужно платить. В бесплатном варианте есть ограничение на количество обрабатываемых изображений и на результат лепиться логотип сервиса.
Нашел вчера замечательный онлайн-инструмент для перевода растровых изображений в векторные . Такой замечательный, что чесно говоря и рассказывать о нем, даже Вам Уважаемый Читатель, жалко:(
Только безграничная преданность идеалам блогера заставила меня превозмочь жадность и настучать (какое многогранное слово) этот пост:)
Для тех кто не знает в чем отличия между растровыми и векторными изображениями - небольшая справка:
Все графические форматы поделены на два типа - растровые и векторные. Каждый имеет свои преимущества и недостатки. Растровые рисунки более приближены к реальному изображению, с ними легче работать. Можно сказать, что они представляют из себя снимок реального изображения с фиксированной точностью. Векторные же - это воплощение чистой художественной абстракции. По своей природе они близки к рисункам художников. Векторные рисунки компактны и универсальны. Представляя из себя по сути идею, того что должно быть изображено, они без потерь проходят любые трансформации, в отличие от растровых которые теряют качество практически при любом изменении. Одним из замечательных свойств векторных рисунков есть то что их можно увеличивать до огромнейших размеров без потери качества изображения.
James Diebel и Jacob Norda из Стенфордского университета сделали онлайн-сервис VectorMagic который может очень даже испортить настроение разработчикам платных средств (Adobe Live Trace и Corel PowerTRACE ) для перекодировки рисунков bitmap в векторный формат. Не верите - посмотрите результаты сравнения вышеупомянутых программ с VectorMagic.
Сервис работает достаточно быстро (делаем небольшую скидку на сложность преобразования) а результаты просто шокирующие. Я испытал VectorMagic с несколькими изображениями, и результаты оказались самыми лучшими. VectorMagic имеет хорошую систему автоматического определения характеристик изображения и подстраивает параметры трансформации, так что пользователю в принципе не нужно знать ничего особенного о самом процессе.
В качестве исходных изображений можно использовать изображения в формате JPG, GIF, PNG, BMP и TIFF . На выходе в зависимости от желания можно получить рисунок в трех разных вариантах качества векторизации и в трех разных форматах: EPS, SVG и PNG . После завершения процесса векторизации допускается переход на повторение процесса с другим качеством (как большим, так и меньшим) и небольшое редактирование.
Рассмотрим перевод изображения на примере:
1. Идем на сайт VectorMagic и загружаем рисунок. Для загрузки изображения используйте кнопки “Обзор ” и “Upload “:
2. После загрузки веб-приложения появиться окошко с предположением о том, чем является наш рисунок - фотографией (художественным рисунком), логотипом с размытыми краями или четким логотипом. Можно согласится с программой, а можно выбрать все вручную. Проявим немного самостоятельности и выберем определим рисунок как фотографию:
… после чего нажмем на кнопочку “Next ” в правом нижнем угле окна.
3. На следующей странице выбираем качество выходного изображения. Я выбрал самое лучшее:
Жмем “Next ” и переходим к следующему пункту.
4. Здесь нужно будет немного подождать. По окончанию процесса перевода видим два изображения - слева наше растровое, а справа - полученное в результате перевода (векторное):
Справа размещены кнопки для быстрой переконвертации изображения с средним и меньшим качеством, а также кнопка для перехода в онлайн-редактор рисунка. Кстати - конвертация в другом качестве может принести неожиданные результаты. Сравните - изображение в высоком, среднем и низком качестве (именно в таком порядке):
Мне кажется что в среднем качестве выглядит получше. Поэтому всегда лучше поэксперементировать.
Некоторые из результатов моих экспериментов (нажмите для увеличения):
Вот и все… Разве что будет наверное нелишним упомянуто то что это онлайн-приложение сделано в формате flash , поэтому если у вас нет плагина Flash player - пришло время его установить.
