Często zachodzi potrzeba konwersji obrazu rastrowego na wektor. Możesz to zrobić za pomocą programu CorelDraw i innych programów specjalnych. Jednak korzystanie z usług online, na przykład bohatera naszej dzisiejszej recenzji, będzie znacznie prostsze i wygodniejsze.
Image Vectorizer to bezpłatna usługa tłumaczeń rastrowych na wektorowe. Na wyjściu otrzymasz plik SVG. Obsługuje ładowanie obrazów w następujących formatach: JPG (JPEG), PNG i BMP. Istnieje limit rozmiaru pobieranego pliku - nie powinien on przekraczać 1 MB. Oczywiście niewiele, ale wystarczy na małe zdjęcia.
Jak działa konwersja rastra na wektor
Grafika wektorowa to zestaw krzywych, punktów, linii, które są reprezentowane przez wyrażenia matematyczne. Grafika rastrowa to zestaw pikseli o wartościach koloru i jasności. Konwerter online znajduje sekcje o takich samych parametrach jasności i koloru i przedstawia je w postaci linii, krzywych i okręgów.
W rezultacie obraz rastrowy formatu SVG może być nieskończenie powiększany bez utraty jakości.
Tłumaczymy raster na wektor
Usługa online zaczyna działać natychmiast po pobraniu oryginalnego obrazu.
Po lewej stronie ekranu widać plik źródłowy z zestawem kolorów, po prawej stronie - wynik:
Za pomocą dostępnych narzędzi możesz:
- Wyłącz obecność niektórych kolorów
- Ustaw całkowitą liczbę kolorów w pliku SVG
- Ustaw Tolerancję (Tolerancja) i Rozmycie (Rozmycie)
Zmieniając parametry i klikając przycisk „Aktualizuj”, natychmiast widzisz wynik końcowy. Aby nie cierpieć przez długi czas z ustawieniami, możesz również użyć gotowego zestawu ustawień wstępnych:
- Fotografia (wiele / kilka kolorów)
- Rysunek (wiele / kilka kolorów)
- Clipart (czarno-biały, wiele / kilka kolorów)
Klikając przyciski + i - po prawej stronie okna, możesz zwiększyć lub zmniejszyć wartości Kolor, Szczegół, Szerokość ramki. Tam możesz połączyć wszystkie warstwy z kolorami w jedną warstwę.
Po uzyskaniu zadowalającego wyniku wywołaj przycisk „Pobierz” i pobierz na dysk obraz wektorowy formatu SVG. Wszystko za darmo.
Usługa ma również taką funkcję, jak generator kodu G. Nie mogę sobie wyobrazić, dlaczego jest to potrzebne. Jeśli ktoś wie - napisz w komentarzach.
Koncepcja obrazów wektorowych dla większości zwykłych użytkowników komputerów PC nic nie mówi. Z kolei projektanci są coraz bardziej skłonni do używania właśnie tego rodzaju grafiki do swoich projektów.
W przeszłości, aby pracować z obrazami SVG, trzeba było zainstalować na komputerze jedno ze specjalistycznych rozwiązań komputerowych, takich jak Adobe Illustrator lub Inkscape. Teraz podobne narzędzia są dostępne online, bez konieczności pobierania.
Wypełniając odpowiednie zapytanie do Google, możesz zapoznać się z ogromną liczbą różnych wektorowych edytorów online. Jednak zdecydowana większość takich rozwiązań oferuje raczej ograniczone możliwości i najczęściej nie pozwala na pracę z poważnymi projektami. Rozważymy najlepsze usługi do tworzenia i edycji obrazów SVG bezpośrednio w przeglądarce.
Oczywiście narzędzia online nie mogą całkowicie zastąpić odpowiednich aplikacji komputerowych, ale dla większości użytkowników proponowany zestaw funkcji będzie więcej niż wystarczający.
Metoda 1: Vectr
Przemyślany edytor wektorów od twórców znanej usługi Pixlr. To narzędzie będzie przydatne zarówno dla początkujących, jak i doświadczonych użytkowników pracujących z SVG.
Pomimo mnóstwa funkcji, zagubienie się w interfejsie Vectra będzie dość trudne. Dla początkujących szczegółowe lekcje i instrukcje wolumetryczne są dostępne dla każdego z elementów usługi. Wśród narzędzi edytora jest wszystko do tworzenia obrazu SVG: kształty, ikony, ramki, cienie, pędzle, obsługa pracy z warstwami itp. Możesz narysować obraz od zera lub załadować własny.
Możliwości eksportu obejmują również jedną z najbardziej charakterystycznych cech Vectr - obsługę bezpośrednich łączy do projektu SVG w edytorze. Wiele zasobów nie pozwala na bezpośrednie przesyłanie obrazów wektorowych do siebie, ale umożliwia ich zdalne wyświetlanie. W takim przypadku Vectra może być używany jako prawdziwy hosting SVG, na co nie zezwalają inne usługi.
Należy zauważyć, że edytor nie zawsze poprawnie obsługuje złożoną grafikę. Z tego powodu niektóre projekty mogą otwierać się w Vectr z błędami lub artefaktami wizualnymi.
Metoda 2: Sketchpad
Prosty i wygodny edytor internetowy do tworzenia obrazów SVG w oparciu o platformę HTML5. Biorąc pod uwagę zestaw dostępnych narzędzi, można argumentować, że usługa jest przeznaczona wyłącznie do rysowania. Dzięki Sketchpad możesz tworzyć piękne, starannie wykonane obrazy, ale nie więcej.
Narzędzie ma szeroką gamę niestandardowych pędzli o różnych kształtach i typach, zestaw kształtów, czcionek i naklejek do nakładki. Edytor pozwala na pełną manipulację warstwami - aby kontrolować ich tryb umieszczania i mieszania. Cóż, i jako bonus, aplikacja jest w pełni przetłumaczona na rosyjski, więc nie powinieneś mieć żadnych trudności z jej rozwojem.
Metoda 3: Metoda losowania
Ta aplikacja internetowa jest przeznaczona do podstawowych operacji na plikach wektorowych. Zewnętrznie narzędzie przypomina stacjonarny program Adobe Illustrator, ale pod względem funkcjonalności wszystko jest tutaj znacznie prostsze. Istnieją jednak pewne funkcje w Method Draw.
Oprócz pracy z obrazami SVG, edytor pozwala importować obrazy bitmapowe i tworzyć na ich podstawie wektorowe. Można to zrobić na podstawie ręcznego śledzenia konturów za pomocą pióra. Aplikacja zawiera wszystkie niezbędne narzędzia do tworzenia rysunków wektorowych. Istnieje rozszerzona biblioteka kształtów, paleta kolorów i obsługa skrótów klawiaturowych.
Metoda Draw zdecydowanie nie nadaje się do tworzenia poważnych projektów wektorowych - przyczyną tego jest brak odpowiednich funkcji. Jednak ze względu na brak zbędnych elementów i dobrze zorganizowany obszar roboczy usługa może być używana do szybkiej edycji lub precyzyjnego udoskonalania prostych obrazów SVG.
Metoda 4: Projektant Gravit
Darmowy edytor grafiki internetowej dla zaawansowanych użytkowników. Wielu projektantów stawia Gravit na równi z pełnoprawnymi rozwiązaniami biurowymi, takimi jak ten sam Adobe Illustrator. Faktem jest, że to narzędzie jest wieloplatformowe, to znaczy, jest w pełni dostępne na wszystkich systemach operacyjnych komputera, a także jako aplikacja internetowa.
Gravit Designer jest ciągle rozwijany i regularnie otrzymuje nowe funkcje, które są już wystarczające do budowania złożonych projektów.
Edytor oferuje wszelkiego rodzaju narzędzia do rysowania konturów, kształtów, ścieżek, nakładki tekstowej, wypełnień, a także różnych efektów niestandardowych. Istnieje obszerna biblioteka postaci, zdjęć tematycznych i ikon. Każdy element w przestrzeni Gravit ma listę właściwości, które można zmienić.
Cała ta różnorodność jest „zapakowana” w stylowy i intuicyjny interfejs, dzięki czemu każde narzędzie jest dostępne za pomocą kilku kliknięć.
Biorąc pod uwagę, że usługa jest przeznaczona do pełnej pracy z grafiką wektorową, można ją bezpiecznie polecić nawet profesjonalnym projektantom. Dzięki Gravit możesz edytować rysunki SVG niezależnie od platformy, na której to robisz. Do tej pory to stwierdzenie dotyczy tylko komputerów stacjonarnych, ale wkrótce ten edytor pojawi się na urządzeniach mobilnych.
Metoda 5: Janvas
Popularne narzędzie do tworzenia grafiki wektorowej wśród twórców stron internetowych. Usługa zawiera wiele narzędzi do rysowania o wysoce konfigurowalnych właściwościach. Główną cechą Janvas jest możliwość tworzenia interaktywnych obrazów SVG animowanych za pomocą CSS. W połączeniu z JavaScript usługa umożliwia tworzenie całych aplikacji internetowych.
W wyszkolonych rękach ten edytor jest naprawdę potężnym narzędziem, a początkujący, ze względu na bogactwo różnych funkcji, najprawdopodobniej po prostu nie zrozumie, co jest.
Tak, narzędzie niestety nie jest darmowe. Ale to profesjonalne rozwiązanie, które nie jest przydatne dla wszystkich.
Metoda 6: DrawSVG
Najwygodniejsza usługa online, która pozwala webmasterom łatwo tworzyć wysokiej jakości elementy SVG dla swoich witryn. Edytor zawiera imponującą bibliotekę kształtów, ikon, wypełnień, gradientów i czcionek.
Za pomocą DrawSVG możesz projektować dowolne obiekty i właściwości wektorowe, zmieniać ich parametry i renderować jako osobne obrazy. Możliwe jest osadzanie plików multimedialnych innych firm w SVG: wideo i audio z komputera lub źródeł sieciowych.
Ten edytor, w przeciwieństwie do większości innych, nie wygląda jak port przeglądarki aplikacji komputerowej. Po lewej stronie znajdują się podstawowe narzędzia do rysowania, a na górze kontrolki. Główną przestrzeń zajmuje płótno do pracy z grafiką.
Załóżmy, że mamy jakiś obraz bitmapowy i chcemy uzyskać go w postaci wektorowej (lub krzywych). Co musimy w tym celu zrobić? Przede wszystkim potrzebujesz Adobe Illustrator.
Wersja nie ma znaczenia.
Procedura
Otwórz naszą mapę bitową w programie Adobe Illustrator. Aby to zrobić, możesz kliknąć zdjęcie prawym przyciskiem myszy i wybrać polecenie Otwórz za pomocą ...\u003e Adobe Illustrator z menu rozwijanego lub uruchomić program Illustrator i przeciągnąć obraz na obszar roboczy.
Obraz źródłowy
Na pasku narzędzi wybierz narzędzie „ Wybór„(Czarna strzałka) i ta strzałka kliknij nasz obraz. W takim przypadku liczba powinna się wyróżniać. Aby to sprawdzić, możesz spróbować przesunąć go nieco, przytrzymując lewy przycisk myszy, gdy kursor znajduje się nad rysunkiem (używając zasady przeciągania i upuszczania).
Nad obszarem roboczym znajduje się przycisk „ Szybki ślad»I kliknij strzałkę obok niej. Pokazuje wszystkie opcje dostępne dla tej akcji. Potrzebujemy przedmiotu „ Opcje śledzenia ...„. Po kliknięciu otworzy się okno z parametrami.
W prawej części okna opcji wybierz „ Zobacz„. Pomoże to uzyskać lepszy wynik i dowiedzieć się, za co odpowiedzialny jest każdy z parametrów.
1) zrób to w nauce, to znaczy, będziesz musiał przeczytać w etykietach narzędzi, który parametr wpływa na to, co i ustawić niezbędne wartości;
2) sam eksperymentuj z parametrami, stosując tak zwaną „naukową metodę poke”.
Wolę drugą metodę: po pierwsze, nie zawsze rosyjskie tłumaczenie słowa całkowicie oddaje znaczenie właściwe dla oryginału, a po drugie, często zapamiętuje się je szybciej i łatwiej. Zmień parametr. Spójrz na to, na co wpływa (wizualnie). Połącz kilka parametrów. I tak dalej, aż do osiągnięcia mniej lub bardziej akceptowalnego wyniku.
Powstały obraz wektorowy.
Gdy zdjęcie już wygląda jak prawda, w oknie parametrów śledzenia kliknij „ Śledzenie„I w menu nad przyciskiem obszaru roboczego” Do demontażu„. W ten sposób otrzymujemy oryginalny obraz, ale już na krzywych.
Jeśli wynik nie jest zadowalający, możesz go udoskonalić. Aby to zrobić, użyj narzędzia „ Wybór»Konieczne jest wybranie wszystkich utworzonych krzywych (naciśnij lewy przycisk myszy i trzymając go, zakreśl całą figurę). Przechodzimy do pozycji menu „ Obiekt» > « Transformacja» > « Skalowanie»I zmień rozmiar obrazu, aby był wystarczająco duży do łatwej edycji. Następnie wybierz narzędzie „ Bezpośredni wybór„(Biała strzałka). Tą białą strzałką klikamy kolejno każdy węzeł i dopasowujemy splajny, jeśli to konieczne: przy wybieraniu wierzchołka pojawia się obok niego wąs, pociągając go w celu zmiany krzywizny splajnu.
Wynik w trybie siatki
Możesz także uzyskać lepszy wynik, jeśli początkowo zrobisz duży obraz dobrej jakości. Dlatego jeśli nie będzie chęci spędzania czasu w podshamanivanie węzłów splajnów w przyszłości, użyj wysokiej jakości obrazów jako surowców do śledzenia!
Na otwartych przestrzeniach znalazłem obraz logo. Czy w Photoshopie można to automatycznie przetłumaczyć z rastra na wektor? Nie, nie możesz. Niestety, podczas gdy trendy wektorowe w Photoshopie są takie, wszystko, co zostało zrobione w tym kierunku, niezmiennie pozostało jeszcze 5 wersji z powrotem. Od tego czasu nie został przeniesiony, nie zmienił się i do wektora nie dodano niczego nowego. Czy potrzebujesz narzędzi wektorowych w Photoshopie? Tutaj chcą więcej? Czego zapomnisz w Photoshopie, naucz się programu Illustrator. W przybliżeniu ten tok myślenia był napędzany przez programistów, którzy zaimplementowali najprostsze operacje wektorowe w Photoshopie. Przejdźmy teraz do rzeczy.
Translacja rastra na wektor odbywa się przez obszar wyboru. Najpierw tworzymy zaznaczenie, następnie tłumaczymy linie wyboru na ścieżki wektorowe, a następnie wypełniamy ścieżki wektorowe warstwami wypełnienia, tworząc w ten sposób maskę wektorową. Aby zrozumieć to wszystko na poziomie zespołów wojskowych - kliknij tutaj, kliknij tutaj, powinieneś nauczyć się pracy z narzędziami do rysowania wektorowego, zrozumieć, w jaki sposób ścieżki wektorowe mogą ze sobą współdziałać i nauczyć się, jak tworzyć maskę wektorową. Ale nie martw się, nie musisz siadać i czytać do weekendu, już zrozumiesz, jak przekonwertować raster na wektor w Photoshopie, jeśli przeczytasz ten artykuł do końca.
Podświetlanie logo
Szczególnie zauważam, że tłumaczenie na wektor jest wysokiej jakości, sam obraz musi być duży. Dotyczy to śledzenia w programie Illustrator, a dla Photoshopa jest jeszcze ważniejsze. Mój obraz ma 1500 pikseli szerokości, kiedy skończymy tłumaczenie na wektor, pokażę jak Photoshop tłumaczy małe obrazy i porównamy wyniki.
- Wybierz narzędzie Magiczna różdżka
- Ustaw Tolerancję 20 lub 30 w opcjach.
- W tym samym miejscu kliknij ikonę Dodaj do zaznaczenia. Szczegółowo napisałem o ich pracy w artykule Dodawanie, odejmowanie, przecinanie i wykluczanie w Photoshopie, w którym mówiłem o narzędziach wektorowych, ale zaznaczanie tych opcji działa w ten sam sposób.
Szczerze mówiąc, nie dbam o to, jak wybierasz logo, przynajmniej w manualnym lasso, nawet poprzez gamę kolorów. Właśnie w tej sytuacji, szczególnie na tym obrazie, najłatwiej to zrobić za pomocą narzędzia Magiczna różdżka.
Przetłumacz zaznaczenie na kontur wektorowy
Nie przełączaj się z narzędzia Magiczna różdżka.
- Kliknij obszar wyboru prawym przyciskiem myszy.
- Z wyświetlonego menu wybierz opcję Utwórz ścieżkę roboczą.
- W wyświetlonym oknie ustaw tolerancję na 1.0 Im wyższa wartość tolerancji, tym bardziej gładkie, stylizowane i niedokładne są nasze kontury.
Na poniższej ilustracji wybrałem Narzędzie wyboru ścieżki i wybrałem ścieżkę, abyś mógł ją zobaczyć.
Zapisywanie ścieżki w palecie Ścieżka
Ta operacja jest opcjonalna, ale pożądana.
- W wyświetlonym oknie wprowadź nazwę i kliknij przycisk OK.
Przejdź do palety Ścieżka. Jeśli nie możesz go znaleźć, kliknij Okno\u003e Ścieżka
Kliknij dwukrotnie ścieżkę na palecie.
Utwórz maskę wektorową
Proces tworzenia maski wektorowej jest dobrze opisany w moim artykule Maska wektorowa w Photoshopie. Proces ten przeprowadzamy szybko i bez szczegółów.
Upewnij się, że ścieżka jest zaznaczona na palecie Ścieżka.
Wybierz polecenie Warstwa\u003e Nowa warstwa wypełnienia\u003e Jednolity kolor z menu.
W wyświetlonym oknie wybierz kolor i kliknij przycisk OK
To wszystko. Dokładniej wszystko byłoby, gdyby nie hronofag.ru Pamiętaj, mówiłem ci, że im mniejszy obraz, tym gorzej będzie tłumaczyć. Gotowy się założyć, że masz jakiś brudny skan utknięty w słowie, które klient chce przetłumaczyć na wektor? Zgadłem, prawda? W tym samym czasie obraz jest kompresowany przez kompresję JPG, zmniejszany, a następnie powiększany, a następnie ponownie zmniejszany do rozmiaru awatara, a na nim zrzucany jest inny keczup. Czy możliwe jest jakościowe przetłumaczenie takiego zdjęcia na Photoshopa w wektorze?
Aby rozpocząć, spójrz na nasze logo. Pomimo doskonałej rozdzielczości, wyraźnych krawędzi, Photoshop nie mógł tworzyć dobrych, a nawet konturów. Illustrator robi to 100 razy lepiej, ale artykuł nie dotyczy ilustratora. Jak widać, kontury nie zawsze są gładkie, nawet w prostokątnych częściach logo. A koła są całkowicie ukośne.
Teraz zmniejszę obraz 2 razy, a następnie jeszcze 2 razy i pokażę wynik tłumaczenia na wektor.
Oto dobry przykład tego, jak rozmiar obrazu bitmapowego wpływa na jakość śledzenia. I to pomimo faktu, że obraz jest bardzo wysokiej jakości pomimo wielkości. Cóż, pozwól mi obniżyć jakość. Zapisz obraz w JPG w najgorszej jakości.
Tłumaczymy na wektor. Doskonały wynik, brakuje tylko keczupu. W sam raz dla zadowolonego klienta, obróbki grunge lub vintage!
I wciąż lekko manipuluję prawdą. Faktem jest, że wszystko to jest uzasadnione dla programu Illustrator, który tworzy wektor na podstawie obrazu. Photoshop nie tworzy wektora na podstawie obrazu, tworzy kontury na podstawie zaznaczenia. Logicznie, im lepszy i płynniejszy wybór, tym gładsze będą krzywe. Narzędzie Magiczna różdżka, za pomocą którego wybraliśmy te obszary, nie nadaje się już do wyróżniania tak przerażających obrazów. Tak, będziesz mógł dokonywać selekcji wysokiej jakości, korzystać ze wszystkich narzędzi selekcji, będziesz nawet mógł je zwiększać i tworzyć na ich podstawie bardziej lub mniej równomierny zarys, co nadal nie będzie idealne. Podążanie tą drogą jest po prostu stratą czasu. Jedyną działającą opcją jest narysowanie logo od podstaw w Photoshopie.
