Как да конвертирате снимка във векторно изображение. Как да конвертирате растерно изображение в криви

Всички графични файлове са разделени на два глобални типа - растерни и векторни. Понякога трябва да конвертирате от растер в черно-бял вектор. Например за проследяване на черно-бели икони, QR кодове, баркодове, картинки с растерни надписи, разписки или снимки в блог.

Каква е разликата между растерен файл и векторен файл?

Растерна графика

Растерният файл представлява последователност от цветни квадратчета (пиксели). Броят на точките във файла се определя от неговите хоризонтални и вертикални размери. Например файл с размери 640x480 съдържа 307 200 пиксела. Растерен файл може да бъде представен като мозайка. Не можете да разтегнете растерно изображение без загуба на качество.

Популярни растерни формати: JPEG, GIF, PNG, TIFF, WEBP, BPG.

Векторна графика

Векторната графика представлява много различни геометрични форми, описани с математически формули. Наслагването на тези форми една върху друга образува изображение. Например обикновен квадрат се описва от четири равни сегмента, всеки от които е свързан в краищата си с краищата на другите два под ъгъл от 90 градуса.

Популярни векторни формати: SVG, EPS, WMF, PDF.

От растер към вектор

Алгоритъм за векторизация

Проследяването се извършва на няколко етапа:

Векторизаторът сканира изображението и намира всички области с пиксели, оцветени в един и същи цвят.
Границите се приближават до сегменти с дебелина 1 пиксел.
Построена е триангулация с линейно ограничение.

Базиран на Potrace конвертор

Понякога трябва автоматично да конвертирате изображенията, които потребителите качват, от растерен във векторен формат.

Има много прост и безплатен начин за реализиране на такова преобразуване с помощта на векторния редактор Inkscape. Inkscape използва Potrace за векторизиране на изображения.

След трасиране изображението може да бъде само черно-бяло. На potrace пише, че поддръжката на цветовете може да бъде внедрена в бъдеще.

Пример за конвертиране от PNG в SVG. Функцията potrace приема само файлове с разширение PNM като вход, така че преди да проследите PNG, трябва да конвертирате:

Exec("конвертиране на изображение.png изображение.pnm"); exec("potrace image.pnm -s -o image.svg");
Този метод е внедрен и можете да видите качеството на проследяване на всяко изображение. Пример за векторизация на размазан баркод. И това е пример за проследено лого. Ето как конверторът се справя със снимки.

Как да направите изходната картина цветна

В допълнение към ръчното редактиране има друга опция за оцветяване на черно-бяла картина на изхода. Но картината трябва да е слабоцветна. Решението е подходящо за проследяване на цветни икони, лога и бутони във вектор.

Можете да маркирате отделни цветове с помощта на ppmcolormask (част от пакета Netpbm):

Котка img.gif | giftopnm | ppmcolormask #641b1b | следа
След това очертайте всяка част поотделно и ги наложете една върху друга в края.

От вектор към растер

Растеризирането на векторна рисунка е много по-лесно. Върху векторното изображение се наслагва мрежа с клетки с определен размер и изображението се дискретизира, след което се кодира според изходния формат.

Един пример за конвертиране на SVG в PNG с помощта на Imagick.

С този код можете да конвертирате SVG файлове в PNG24:

$svg = file_get_contents("image.svg"); $image = нов Imagick(); $image->setBackgroundColor(нов ImagickPixel("прозрачен")); $image->readImageBlob($svg); $image->setImageFormat("png24"); $image->writeImage("image.png"); $изображение->изчистване(); $image->destroy();
Тук можете да видите резултатите от конвертирането на вашите изображения от SVG в PNG.

Резюме

Можете да конвертирате от растер във вектор на уебсайта си с помощта на potrace.
Potrace поддържа само черно-бяла векторизация.
Можете да конвертирате от вектор в растер с помощта на Imagick.

Каква е разликата между растерен файл и векторен файл?

Растерна графика

Популярни растерни формати: JPEG, GIF, PNG, TIFF, WEBP, BPG.

Векторна графика

Популярни векторни формати: SVG, EPS, WMF, PDF.

От растер към вектор

Алгоритъм за векторизация

Проследяването се извършва на няколко етапа:

Векторизаторът сканира изображението и намира всички области с пиксели, оцветени в един и същи цвят.
Границите се приближават до сегменти с дебелина 1 пиксел.
Построена е триангулация с линейно ограничение.

Базиран на Potrace конвертор

Как да направите изходната картина цветна

Можете да маркирате отделни цветове с помощта на ppmcolormask (част от пакета Netpbm):

От вектор към растер

Един пример за конвертиране на SVG в PNG с помощта на Imagick.

С този код можете да конвертирате SVG файлове в PNG24:

Резюме

Можете да конвертирате от растер във вектор на уебсайта си с помощта на potrace.
Potrace поддържа само черно-бяла векторизация.
Можете да конвертирате от вектор в растер с помощта на Imagick.

Концепцията за векторни изображения не означава абсолютно нищо за по-голямата част от обикновените потребители на компютри. Дизайнерите от своя страна са все по-склонни да използват този тип графики за своите проекти.

Преди, за да работите със SVG изображения, трябваше да инсталирате едно от специализираните десктоп решения като Adobe Illustrator или Inkscape на вашия компютър. Сега подобни инструменти са достъпни онлайн, без да е необходимо изтегляне.

Като изпълните съответната заявка в Google, можете да се запознаете с огромен брой различни онлайн векторни редактори. Но по-голямата част от тези решения предлагат доста оскъдни възможности и най-често не ви позволяват да работите със сериозни проекти. Ще разгледаме най-добрите услуги за създаване и редактиране на SVG изображения директно в браузъра.

Разбира се, онлайн инструментите не могат напълно да заменят съответните настолни приложения, но за повечето потребители предлаганият набор от функции ще бъде повече от достатъчен.

Метод 1: Vectr

Внимателен векторен редактор от създателите на познатата услуга Pixlr. Този инструмент ще бъде полезен както за начинаещи, така и за опитни потребители в работата със SVG.

Въпреки изобилието от функции, ще бъде доста трудно да се изгубите в интерфейса Vectr. За начинаещи са предоставени подробни уроци и обширни инструкции за всеки от компонентите на услугата. Инструментите на редактора включват всичко необходимо за създаване на SVG изображение: форми, икони, рамки, сенки, четки, поддръжка за работа със слоеве и др. Можете да нарисувате изображение от нулата или да качите свое собствено.

Възможностите за експорт също включват една от най-отличителните характеристики на Vectr: поддръжка за директни връзки към SVG проекта в редактора. Много ресурси не ви позволяват директно изтегляне на векторни изображения, но въпреки това позволяват дистанционното им показване. В този случай Vectr може да се използва като истински SVG хостинг, което други услуги не позволяват.

Трябва да се отбележи, че редакторът не винаги обработва правилно сложни графики. Поради тази причина някои проекти може да се отворят във Vectr с грешки или визуални артефакти.

Метод 2: Скицник

Лесен и удобен уеб редактор за създаване на SVG изображения, базиран на платформата HTML5. Като се има предвид наборът от налични инструменти, може да се твърди, че услугата е предназначена изключително за рисуване. Със Sketchpad можете да създавате красиви, добре проектирани картини, но това е всичко.

Инструментът има широка гама от персонализирани четки с различни форми и типове, набор от форми, шрифтове и стикери за наслагване. Редакторът ви позволява напълно да манипулирате слоевете - да контролирате тяхното разположение и режими на смесване. Е, като бонус, приложението е напълно преведено на руски, така че не би трябвало да имате никакви затруднения с овладяването му.

Метод 3: Метод Draw

Това уеб приложение е предназначено за основни операции с векторни файлове. Външно инструментът прилича на настолен Adobe Illustrator, но по отношение на функционалността тук всичко е много по-просто. Method Draw обаче има и някои функции.

В допълнение към работата с SVG изображения, редакторът ви позволява да импортирате растерни изображения и да създавате векторни въз основа на тях. Това може да стане чрез ръчно очертаване на контури с химикалка. Приложението съдържа всички необходими инструменти за композиране на векторни рисунки. Има разширена библиотека от форми, пълноцветна палитра и поддръжка за клавишни комбинации.

Method Draw определено не е подходящ за създаване на сериозни векторни проекти - причината за това е липсата на подходящи функции. Но благодарение на липсата на ненужни елементи и добре организираното работно пространство, услугата може да бъде отлична за бързо редактиране или фина настройка на прости SVG изображения.

Метод 4: Gravit Designer

Безплатен уеб-базиран векторен графичен редактор за напреднали потребители. Много дизайнери поставят Gravit наравно с пълноценни десктоп решения, като Adobe Illustrator. Факт е, че този инструмент е междуплатформен, тоест е напълно достъпен във всички компютърни операционни системи, както и като уеб приложение.

Gravit Designer е в процес на активно развитие и редовно получава нови функции, които вече са достатъчни за оформлението на сложни проекти.

Редакторът ви предлага всички видове инструменти за рисуване на пътеки, форми, пътеки, текстови наслагвания, запълвания, както и различни персонализирани ефекти. Има богата библиотека от фигури, тематични картинки и икони. Всеки елемент в пространството Gravit има списък със свойства, които могат да бъдат променяни.

Цялото това разнообразие е „опаковано“ в стилен и интуитивен интерфейс, така че всеки инструмент е достъпен само с няколко кликвания.

Като се има предвид, че услугата е предназначена за пълноценна работа с векторни графики, тя може безопасно да се препоръча дори на професионални дизайнери. С Gravit можете да редактирате SVG графики, независимо от платформата, на която го правите. Засега това твърдение се отнася само за настолни операционни системи, но скоро този редактор ще се появи на мобилни устройства.

Метод 5: Janvas

Популярен инструмент за създаване на векторна графика сред уеб разработчиците. Услугата съдържа редица инструменти за рисуване с много адаптивни свойства. Основната характеристика на Janvas е възможността за създаване на интерактивни SVG изображения, анимирани с помощта на CSS. А във връзка с JavaScript, услугата дори ви позволява да създавате цели уеб приложения.

В умели ръце този редактор е наистина мощен инструмент, докато начинаещ, поради изобилието от всякакви функции, най-вероятно просто няма да разбере какво е какво.

Да, инструментът, за съжаление, не е безплатен. Но това е професионално решение, което не е полезно за всички.

Метод 6: DrawSVG

Най-удобната онлайн услуга, която позволява на уеб администраторите да създават висококачествени SVG елементи за своите сайтове възможно най-лесно. Редакторът съдържа впечатляваща библиотека от форми, икони, запълвания, градиенти и шрифтове.

С помощта на DrawSVG можете да проектирате векторни обекти от всякакъв тип и свойства, да променяте техните параметри и да ги изобразявате като отделни изображения. Възможно е да се вграждат мултимедийни файлове на трети страни в SVG: видео и аудио от компютър или мрежови източници.

Този редактор, за разлика от повечето други, не се чувства като порт на браузъра на десктоп приложение. Отляво са основните инструменти за рисуване, а отгоре са контролите. Основното пространство е заето от платното за работа с графики.

Най-простият начин за проследяване на произведение на изкуството е да отворите или поставите файла в Adobe Illustrator и автоматично да го проследите с помощта на командата Trace Image: Illustrator Help. Използване на инструмента за проследяване на изображения - CS6

*Още по-просто):
С помощта на софтуер предоставеното от вас изображение/картина/чертеж/снимка се конвертира във вектор за 1(!) евро ->Изображение към вектор

=== Онлайн услуги ===

Първият е платен, въпреки че две изображения за начало могат да бъдат създадени безплатно.

На английски, въпреки че не е трудно за разбиране. Има два варианта за използване – онлайн или закупуване на компютърна програма. Цената за онлайн използване (неограничено) е $7,95, десктоп програмата струва $295,00. Има възможност за поръчка на ръчно трасиране.
Разбира се, можете да намерите по-евтини в порталите за свободна практика, но изборът е на всеки.

точност

По-горе са някои сравнителни изображения на Vector Magic, Adobe Live Trace (CS6) и Corel
Corel PowerTRACE (X6). Обърнете внимание на внимателната обработка на формите от Vector.

Лекота на използване

Не е необходимо да инсталирате и да знаете много опции и настройки, за да постигнете приемлив резултат.

Просто трябва да отговорите на няколко прости въпроса и това е. Ако резултатът не е задоволителен, има ръководство за „отстраняване на неизправности“, където можете лесно да намерите отговора и да разрешите проблема.

Можете да опитвате отново и отново, докато получите задоволителен резултат.

Като цяло можете да прехвърлите тази работа във Vector и да изпълнявате повече творчески задачи.

Преводът е свободен, но смисълът е нещо такова.

Изходни изображения във формат JPG, GIF, PNG, BMP и TIFF. Резултатът е в три опции за качество и в три формата: EPS, SVG и PNG. След завършване е възможно повторение с различно желано качество и известна редакция.

На следващо място, напълно БЕЗПЛАТНО .

Напълно на английски, но всичко е ясно при употреба. Малко повече настройка и ръчна работа, но си заслужава.

Поддържани изходни формати:

PNG преносими мрежови графики
TGA Truevision Targa изображение
PBM преносим формат на растерно изображение
PNM Преносим формат anymap
PGM преносим формат на сивата карта
PPM Преносим формат pixmap
BMP Microsoft Windows растерно изображение

Изходни формати:

svg мащабируема векторна графика
eps Encapsulated PostScript
ai Adobe Illustrator
dxf DXF формат (без сплайни)
p2e pstoedit фронтенд формат
sk Скица
фиг. XFIG 3.2
emf подобрен формат на метафайл
mif Frame Maker MIF формат
er Elastic Reality Shape файл
epd epd формат
pdf PDF формат
cgm Метафайл за компютърна графика
dr2d IFF DR2D? формат

ви позволява да конвертирате изображения в . Можете да качите файл или да предоставите връзка към изображението. Възможно е и прилагане на цифрови ефекти.

В случай на конвертиране на растерни изображения (PNG или JPG) във формат SVG, формите и обектите ще бъдат преобразувани в черно-бели векторни графики, които са мащабирани без загуба на качество. Такива изображения могат да бъдат оцветени с помощта на безплатни програми за работа с векторни изображения (и др.). Фотографите в повечето случаи няма да постигнат желания резултат при конвертиране на растерно изображение във формат SVG.

Ако преобразувате всяко векторно изображение (например eps или ai формат) във формат SVG, конверторът ще се опита да запази всички векторни и цветни данни и също така ще гарантира, че двата файла са възможно най-сходни.

Конверторът на мащабируеми векторни графики (SVG) ви позволява да конвертирате файлове с повече от 130 формата. Указания за преобразуване:

3FR към SVG, AFF към SVG, AI към SVG, ANI към SVG, ART към SVG, ARW към SVG, AVI към SVG, AVS към SVG, BMP към SVG, CDR към SVG, CGM към SVG, CIN към SVG, CMYK към SVG, CMYKA към SVG, CR2 към SVG, CRW към SVG, CUR към SVG, CUT към SVG, DCM към SVG, DCR към SVG, DCX към SVG, DDS към SVG, DFONT към SVG, DIA към SVG, DNG към SVG, DPX към SVG, DXF към SVG, EPDF към SVG, EPI към SVG, EPS към SVG, EPSF към SVG, EPSI към SVG, EPT към SVG, EPT2 към SVG, EPT3 към SVG, ERF към SVG, EXR към SVG, ФАКС към SVG, FIG към SVG, FITS към SVG, FPX към SVG, FRACTAL към SVG, FTS към SVG, G3 към SVG, GIF към SVG, GIF87 към SVG, GREY към SVG, GRB към SVG, HDR към SVG, HRZ към SVG, ICB към SVG, ICO към SVG, ICON към SVG, IPL към SVG, JBG към SVG, JBIG към SVG, JNG към SVG, JP2 към SVG, JPC към SVG, JPE към SVG, JPEG към SVG, JPG към SVG, JPX към SVG, K25 към SVG, KDC към SVG, M2V към SVG, M4V към SVG, MAT към SVG, MIFF към SVG, MNG към SVG, MONO към SVG, MOV към SVG, MP4 към SVG, MPC към SVG, MPEG към SVG, MPG към SVG, MRW към SVG, MSL към SVG, MSVG към SVG, MTV към SVG, MVG към SVG, NEF към SVG, NRW към SVG, ORF към SVG, OTB към SVG, OTF към SVG, PAL към SVG, PALM към SVG, PAM към SVG, PBM към SVG, PCD към SVG, PCDS към SVG, PCL към SVG, PCT към SVG, PCX към SVG, PDB към SVG, PDF към SVG, PDFA към SVG, PEF към SVG, PES към SVG, PFA към SVG, PFB към SVG, PFM към SVG, PGM към SVG, PICON към SVG, PICT към SVG, PIX към SVG, PJPEG към SVG, PLASMA към SVG, PNG към SVG, PNG24 към SVG, PNG32 към SVG, PNG8 към SVG, PNM към SVG, PPM към SVG, PS към SVG, PSD към SVG, PTIF към SVG, PWP към SVG, RAF към SVG, RAS към SVG, RGB към SVG, RGBA към SVG, RLA към SVG, RLE към SVG, SCT към SVG, SFW към SVG, SGI към SVG, SK към SVG, SK1 към SVG, SR2 към SVG, SRF към SVG, SUN към SVG, SVG към SVG, SVGZ към SVG, TGA към SVG, TIF към SVG, TIFF към SVG, TIM към SVG, TTC към SVG, TTF към SVG, TXT към SVG, VDA към SVG, VICAR към SVG, VID към SVG, VIFF към SVG, VST към SVG, WBMP към SVG, WEBP към SVG, WMF към SVG, WMZ към SVG, WPG към SVG, X към SVG, X3F към SVG, XAML към SVG, XBM към SVG, XC към SVG, XCF към SVG, XFIG към SVG, XPM към SVG, XV към SVG, XWD към SVG, YCBCR към SVG, YCBCRA към SVG, YUV към SVG

Изграден върху отворени решения като Autotrace, ImageMagick и различни графични компоненти на Linux.

Формати за конвертиране:

SVG - мащабируеми векторни графични файлове
AI - файлове на Adobe Illustrator (базирани на postscript)
CGM - компютърни графични метафайлови файлове
WMF - Метафайлови файлове на Windows
SK - Sketch/Skencil файлове
PDF - формат на преносим документ
EPS - PostScript
PLT - HPGL за рязане на плотерни файлове

и също: P2E, FIG, EMF, MIF, ER, DXF, EPD, CGM, oDR2D

В интернет намерих изображение на логото. Възможно ли е да се конвертира от растер във вектор във Photoshop и то автоматично? Не, не можеш. Уви, докато векторните тенденции във Photoshop са както следва, всичко, което беше направено в тази посока, остана непроменено преди 5 версии. Оттогава той не е докосван, не е променян и нищо ново не е добавено към вектора. Имате ли нужда от векторни инструменти във Photoshop? Ето ги, искате ли още? Каквото и да сте забравили за Photoshop, майстор илюстратор. Приблизително тази линия на мисли мотивира разработчиците, които въведоха най-простите векторни операции във Photoshop. Сега да се заемем с работата.

Растерът се преобразува във вектор чрез области за избор. Първо създаваме селекция, след това преобразуваме линиите за селекция във векторни пътеки, след което запълваме векторните пътеки със слоеве за запълване, като по този начин създаваме векторна маска. За да разберете всичко това не на нивото на армейските команди - щракнете тук, щракнете там, струва си да научите как да работите с инструменти за векторно рисуване, да разберете как векторните контури могат да взаимодействат помежду си и да научите как да създадете векторна маска . Но не се притеснявайте, не е нужно да сядате да я четете до края на седмицата; вече ще разберете как да конвертирате растер във вектор във Photoshop, ако прочетете статията до края.

Осветяване на лого

Бих искал специално да отбележа, че за да бъде преводът във вектор с високо качество, самото изображение трябва да е голямо по размер. Това е вярно в случая на трасиране в Illustrator, но за Photoshop е още по-важно. Изображението ми е широко 1500 пиксела, когато приключим с конвертирането му във вектор, ще покажа как Photoshop преобразува малко изображение и ще сравним резултатите.

Изберете инструмента Magic Wand Tool

Задайте опциите за толеранс на 20 или 30.

Там кликнете върху иконата Add to Selection. Писах подробно за тяхната работа в статията Add, Subtract, Intersect и Exlude във Photoshop, където говорихме за векторни инструменти, но при избора тези опции работят по същия начин.

Честно казано, не ме интересува как избирате логото, независимо дали използвате ръчно ласо или използвате цветовата гама. Просто в тази ситуация, по-специално в това изображение, най-лесният начин да направите това е с инструмента Magic Wand Tool.

Преобразуване на селекцията във векторна пътека

Не преминавайте от инструмента Magic Wand Tool.

Щракнете с десния бутон върху областта за избор.

От появилото се меню изберете Make Work Path.

В прозореца, който се появява, задайте толеранса на 1.0, толкова по-гладки, стилизирани и неточни ще бъдат нашите контури.

На илюстрацията по-долу избрах инструмента за избор на път и избрах пътя, така че да можете да го видите.

Запазване на път в палитрата Path

Тази операция не е задължителна, но се препоръчва.

Превключете към палитрата Path. Ако не можете да го намерите, щракнете върху Прозорец > Път

Щракнете двукратно върху пътя в палитрата.

В прозореца, който се показва, въведете име и щракнете върху OK.

Създаване на векторна маска

Процесът на създаване на векторна маска е перфектно описан в моята статия Векторна маска във Photoshop. Ние ще извършим този процес бързо и без подробности.

Уверете се, че вашият развъдник е избран в палитрата Path

Изберете Layer > New Fill Layer > Solid Color от менюто

В прозореца, който се показва, изберете цвят и щракнете върху OK

Това е всичко. Всичко щеше да е по-точно, ако не беше hronofag.ru Не забравяйте, че ви казах, че колкото по-малко е изображението, толкова по-лошо ще се преведе. Обзалагам се, че имате някакво мръсно сканиране в ръцете си, напъхано в Word, което клиентът изисква да бъде преобразувано във вектор? познах? В този случай изображението се компресира с JPG компресия, намалява се, след това се увеличава, след това отново се намалява до размера на аватара и върху него също се разлива кетчуп. Възможно ли е ефективно да конвертирате такава снимка във вектор във Photoshop?

Първо, разгледайте нашето лого. Въпреки отличната разделителна способност и ясните ръбове, Photoshop не успя да създаде добри и равномерни контури. Илюстраторът го прави 100 пъти по-добре, но статията не е за илюстратора. Както можете да видите, контурите не са гладки навсякъде, дори в правоъгълните части на логото. И кръговете са напълно наклонени.

Сега ще намаля изображението 2 пъти, след това още 2 пъти и ще ви покажа резултата от преобразуването му във вектор.

Ето ясен пример за това как размерът на растерното изображение влияе върху качеството на трасирането. И това въпреки факта, че изображението е с много високо качество въпреки размера. Е, ще намаля качеството. Нека запазим изображението в JPG с най-лошото качество.

Нека го преобразуваме във вектор. Отличен резултат, липсва само кетчуп. Точно за доволен клиент, гръндж или винтидж обработка!

И все пак леко манипулирам истината. Факт е, че всичко това е разумно за Illustrator, който създава вектор въз основа на картина. Photoshop не създава вектор въз основа на изображение, той създава контури въз основа на селекция. Логично, колкото по-добър и плавен е изборът, толкова по-плавни ще бъдат кривите. И инструментът Magic Wand, който използвахме за избиране на тези области, вече няма да е подходящ за избиране на такива страховити изображения. Да, вие ще можете да правите висококачествени селекции, като използвате всички инструменти за селекция, дори ще можете да ги увеличавате и да създавате повече или по-малко равномерен контур въз основа на тях, който пак няма да е перфектен. Тръгването по този начин е просто загуба на време. Единственият работещ вариант е да нарисувате логото от нулата във Photoshop.