PerfectVector
Autor: Irene Kim10 min czytania

Adobe Animate Image Trace: zamień bitmapę w edytowalną grafikę

Użyj Adobe Animate Image Trace, aby przekształcić bitmapę w edytowalną grafikę wektorową, dostosować ścieżki, narożniki, szum, wypełnienia i nakładanie kształtów, a następnie dopracować wynik.

Na tej stronie

Adobe Animate może przekształcić JPEG, PNG, PSD lub inny obraz rastrowy w edytowalną grafikę wektorową przez wektoryzację. W obecnym interfejsie zaznacz umieszczoną bitmapę i użyj Object > Trace Bitmap lub Modify > Bitmap > Trace Bitmap, wybierz ustawienie wstępne lub własne ustawienia, sprawdź podgląd, a następnie przyjrzyj się nowym kształtom.

Adobe nazywa tę funkcję w dokumentacji Image Trace, natomiast polecenie ma nazwę Trace Bitmap. Jeśli szukasz którejś z tych nazw, obie odnoszą się do tego sposobu pracy w Animate. Jeśli pracujesz w After Effects, skorzystaj z poradnika porównującego maski Auto-Trace z warstwami kształtów SVG, aby wybrać odpowiedni rodzaj obiektu do animacji.

Praktyczny skrót
  1. Zaimportuj lub umieść najczystszy obraz rastrowy, jaki masz.
  2. Zaznacz go i otwórz Trace Bitmap.
  3. Zacznij od ustawienia wstępnego dopasowanego do grafiki, a nie od tego, które zachowuje najwięcej szczegółów.
  4. Sprawdzaj w podglądzie zmiany trybu koloru, ścieżek, narożników, szumu, metody, wypełnień i obrysów.
  5. Zatwierdź wektoryzację i sprawdź powstałe edytowalne kształty.
  6. Usuń drobne plamki, połącz przypadkowe fragmenty i uprość tylko zbędne punkty.
  7. Porównaj grafikę w jej docelowym rozmiarze animacji lub eksportu, zanim usuniesz rastrowy obraz odniesienia.

Co robi Image Trace w Adobe Animate

W aktualnej dokumentacji Animate Image Trace documentation Adobe podaje, że funkcja przekształca obrazy rastrowe, takie jak JPEG, PNG i PSD, w grafikę wektorową, którą można modyfikować. Może też zwektoryzować zeskanowany szkic ołówkiem, aby można było na jego podstawie stworzyć nowy rysunek.

Ta konwersja odtwarza widoczne piksele jako kształty. Nie odzyskuje warstw oryginalnego autora, ustawień pędzla, edytowalnego tekstu, symboli, rigu ani ukrytej geometrii. Jeśli szukasz innego sposobu przygotowania grafiki do animacji, poradnik konwersji bitmapy na grafikę wektorową w Moho wyjaśnia, kiedy zachować grafikę rastrową z warstwami, użyć wbudowanej wektoryzacji lub przygotować części SVG do rigu.

Obraz źródłowyPrawdopodobny wynikLepszy wybór, gdy wynik nie spełnia oczekiwań
Płaska ikona lub ilustracja z ograniczoną liczbą kolorówOddzielne obszary wektorowe z wypełnieniemDopracuj kształty po wektoryzacji
Rysunek liniowy lub logo o wysokim kontraścieCzarno-białe wypełnienia lub obrysyNarysuj ponownie kluczowe linie, jeśli wektoryzacja je podwaja
Szkic ołówkiemEdytowalna interpretacja widocznych kresekNajpierw obrysuj szkic tuszem lub oczyść skan, aby ograniczyć szum
FotografiaWiele kolorowych kształtów lub uproszczony wynik z posteryzacjąZachowaj obraz rastrowy, chyba że celowo chcesz go wystylizować
Bardzo mały lub rozmyty obrazNierówne, połączone lub pozornie wymyślone krawędzieZnajdź większy obraz źródłowy lub narysuj grafikę ponownie

Wektoryzacja bitmapy krok po kroku

1. Przygotuj źródłowy obraz rastrowy

Przytnij niepotrzebne marginesy i użyj oryginału o najwyższej dostępnej jakości. W przypadku płaskiej ilustracji przed wektoryzacją usuń obwódki powstałe wskutek kompresji i przypadkowe piksele tła. W przypadku skanu dostosuj kontrast między papierem a kreskami, nie usuwając zamierzonych szczegółów.

Zachowaj oryginał obok wyniku wektoryzacji, aż zakończysz sprawdzanie. Wynik może wyglądać schludnie, a jednocześnie zmieniać światło wewnątrz litery, rys twarzy lub niewielki kontur.

Poradnik Adobe Imported bitmaps guide opisuje, jak Animate obsługuje zasoby bitmapowe. Import bitmapy i jej wektoryzacja to dwie oddzielne decyzje: umieszczenie obrazu zachowuje piksele, a Trace Bitmap tworzy nową grafikę wektorową.

2. Otwórz Trace Bitmap

Zaznacz umieszczony obraz rastrowy. Adobe opisuje następujące sposoby:

  • wybierz Object > Trace Bitmap z menu kontekstowego;
  • użyj kontrolki Bitmap w panelu Properties i wybierz Edit;
  • wybierz Modify > Bitmap > Trace Bitmap.

Włącz Preview podczas dostosowywania opcji. Adobe zaznacza, że rozdzielczość umieszczonego obrazu wpływa na szybkość wektoryzacji, więc przetworzenie bardzo dużego obrazu źródłowego może trwać dłużej, nawet jeśli jego dodatkowe szczegóły nie poprawiają grafiki w docelowym rozmiarze.

3. Wybierz ustawienie wstępne jako punkt wyjścia

Animate zawiera ustawienia wstępne do ogólnych zastosowań, takich jak wektoryzacja fotografii z wysoką lub niską wiernością odwzorowania, uzyskiwanie grafiki w odcieniach szarości czy wektoryzacja czarno-białego logo. Ustawienie wstępne nie jest oceną jakości. To zestaw ustawień początkowych.

Użyj najprostszego ustawienia wstępnego, które zachowuje szczegóły faktycznie potrzebne w grafice. Logo z trzema jednolitymi kolorami nie powinno zamienić się w przypominający fotografię stos drobnych obszarów. Nie oczekuj też, że fotografia o miękkich przejściach stanie się prostą, edytowalną ilustracją tylko dlatego, że wektoryzacja dobiegła końca.

4. Świadomie wybierz tryb i paletę

Podstawowe kontrolki to Preset, Mode, Palette i Colors. Tryb koloru określa, czy wynik będzie kolorowy, w skali szarości czy czarno-biały. Dostępne kontrolki palety i kolorów wpływają następnie na liczbę obszarów tworzonych przez Animate.

Większa liczba kolorów może zachować drobne zmiany tonalne, ale może też tworzyć fragmenty trudne do edycji lub animacji. Ograniczaj paletę, aż każda pozostała różnica będzie miała swoje uzasadnienie.

Kontrolki wektoryzacji
Poglądowy schemat kontrolek wektoryzacji pokazujący dopasowanie ścieżek do krawędzi pikseli, uwydatnianie narożników, usuwanie szumu, sąsiadujące i nakładające się obszary kolorów oraz dopracowaną, edytowalną grafikę ptaka
Kontrolki pozwalają wyważyć wierność odwzorowania i złożoność. Dostosuj je do zamierzonej grafiki, a następnie oceń edytowalne kształty, nie tylko sam podgląd.

Poznaj zaawansowane kontrolki

Aktualne definicje Adobe są wystarczająco precyzyjne, aby pomóc w pierwszym podejściu:

Paths

Paths określa, jak ściśle zwektoryzowany kształt podąża za oryginalną krawędzią pikseli. Według Adobe niższe wartości dają ściślejsze dopasowanie, a wyższe — luźniejsze.

Ściślejsze dopasowanie nie jest automatycznie lepsze. Może zachować nierówności powstałe wskutek kompresji i drżenie ręcznie rysowanej linii, których gotowa grafika nie potrzebuje. Luźniejsze dopasowanie może wygładzić wynik, ale też usunąć część zamierzonych szczegółów.

Corners

Corners określa, z jaką intensywnością ostre załamania są przekształcane w punkty narożne. Wyższe wartości tworzą więcej narożników. Zwiększ tę wartość w przypadku kanciastych emblematów lub liter o blokowych kształtach; zmniejsz ją, gdy zaokrąglone, organiczne kształty stają się zbyt kanciaste.

Noise

Noise określa powierzchnię obszaru w pikselach, który Animate może pominąć podczas wektoryzacji. Wyższe wartości usuwają większe spośród małych obszarów. Przydaje się to do usuwania kurzu i drobnych plamek powstałych wskutek kompresji, ale może też wymazać piegi, kropki tekstury i niewielkie światła wewnątrz liter, które chcesz zachować.

Method

Adobe opisuje dwie metody:

  • Abutting tworzy ścieżki wyciętych kształtów, których sąsiednie krawędzie się stykają.
  • Overlapping tworzy ścieżki ułożone jedna na drugiej, które lekko nakładają się na sąsiednie kształty.

Wynik Abutting może być łatwiejszy do odczytania jako płaska mozaika. Nakładanie może zapobiegać cienkim szczelinom w niektórych sytuacjach podczas kompozytowania, ale tworzy zasłoniętą geometrię. Wybierz metodę w zależności od tego, jak zamierzasz edytować i animować grafikę.

Wypełnienia, obrysy i biel

W trybie czarno-białym Animate może tworzyć obszary z wypełnieniem, a dostatecznie wąskie elementy traktować jako obrysy. Opcja Ignore White pozwala pominąć białe obszary, co przydaje się, gdy białe tło papieru nie powinno stać się dużym kształtem.

Sprawdź rzeczywisty wynik. Cienka czarna linia może zostać zwektoryzowana jako dwie krawędzie wypełnionego paska, choć oczekujesz jednej linii środkowej. Jeśli zależy Ci na pojedynczym edytowalnym obrysie, narysuj go ponownie lub użyj metody opartej na wyznaczaniu linii środkowej.

Dopracuj zwektoryzowaną grafikę przed animacją

Nie zaczynaj animować od razu po pierwszym podglądzie. Zaznacz wynik wektoryzacji i sprawdź go:

  • usuń pojedyncze plamki i niewidoczne pozostałości;
  • sprawdź otwory oraz światła wewnątrz liter lub kształtów;
  • upewnij się, że sąsiadujące kolory stykają się zgodnie z zamierzeniem;
  • usuń przypadkowe prostokąty tła;
  • połącz fragmenty, które powinny zachowywać się jak jeden obiekt;
  • uprość zbędne węzły bez zmieniania konturu;
  • rozdziel części, które zamierzasz animować niezależnie;
  • przekształć grafikę wielokrotnego użytku w symbole dopiero po dopracowaniu kształtów.

Oglądaj grafikę zarówno w docelowym rozmiarze wyświetlania, jak i w powiększeniu pozwalającym zobaczyć węzły. Drobny błąd może nie mieć znaczenia w ruchu, natomiast nadmiernie szczegółowy wynik wektoryzacji może niepotrzebnie spowalniać edycję.

Wyeksportuj grafikę lub zachowaj ją w Animate

Jeśli wektoryzacja jest częścią projektu Animate, zachowaj edytowalny plik główny projektu z oryginalną bitmapą i dopracowaną grafiką wektorową na oddzielnych, nazwanych warstwach. Dzięki temu będziesz mieć punkt odniesienia, gdy późniejsza edycja ujawni problem z wiernością odwzorowania.

Jeśli potrzebujesz przekazać SVG do dalszej pracy, skorzystaj z udokumentowanej przez Adobe procedury SVG export workflow i sprawdź wyeksportowany plik w aplikacji, do której ma trafić. Eksport klatki nie odtworzy warstw źródłowych ani edytowalnego tekstu, których nie było w wyniku wektoryzacji. W przypadku Synfig porównaj bezpośredni import SVG i eksport SIF z Inkscape, a następnie przed animowaniem sprawdź ruchome części oraz początki układów współrzędnych grup. W przypadku projektów Toon Boom poradnik wektoryzacji i importu SVG w Harmony wyjaśnia natywne kontury rysunków, obwiednie bitmap oraz wybór ustawień rysunku i palety przy imporcie do Harmony 25.

Adobe obecnie informuje, że Animate jest w trybie utrzymania: aplikacja pozostaje dostępna i otrzymuje wsparcie, aktualizacje zabezpieczeń oraz poprawki błędów, ale Adobe nie planuje nowych funkcji. Nie wyklucza to korzystania z Image Trace w dotychczasowych procesach pracy, ale ma znaczenie przy wyborze nowego, długoterminowego procesu produkcji.

Kiedy zamiast tego użyć oddzielnego narzędzia do wektoryzacji

Wbudowana wektoryzacja Animate sprawdza się, gdy grafika będzie dopracowywana i animowana w tym samym dokumencie. Szersze porównanie Image Trace i narzędzia do wektoryzacji opartego na AI wyjaśnia związane z tym kompromisy. Oddzielne narzędzie do wektoryzacji może być lepszym wyborem, gdy chcesz przeprowadzić konwersję poza Animate, porównać kilka obrazów źródłowych lub przygotować główny plik SVG do wielokrotnego użytku przed rozpoczęciem animacji.

Proces konwersji obrazu na grafikę wektorową w PerfectVector odtwarza obsługiwane obrazy rastrowe jako edytowalne kształty wektorowe w przeglądarce. Porównaj jego podgląd z wynikiem wektoryzacji tego samego obrazu źródłowego w Animate. Oceń:

  • wierność widocznego konturu i wewnętrznych kształtów;
  • liczbę węzłów przy równoważnym poziomie szczegółowości;
  • użyteczność rozdzielenia kolorów;
  • czas potrzebny na dopracowanie pliku;
  • zachowanie po imporcie do Animate.

Użyj wyniku, który wymaga mniej poprawek. Żadna z tych metod nie jest w stanie odtworzyć oryginalnego kroju pisma, ukrytej warstwy ani dokładnej krzywej, których bitmapa niskiej jakości już nie zawiera.

Najczęściej zadawane pytania

Czy Adobe Animate ma Image Trace? Tak. Na stronie pomocy Adobe funkcja nosi nazwę Image Trace, a obecne polecenia obejmują Object > Trace Bitmap i Modify > Bitmap > Trace Bitmap.

Czy Adobe Animate może zamienić PNG w grafikę wektorową? Tak. Trace Bitmap odtwarza widoczne piksele PNG jako grafikę wektorową, którą można modyfikować. Nie odzyskuje oryginalnych warstw, edytowalnego tekstu, symboli ani ukrytych szczegółów.

Co robią Paths, Corners i Noise w Animate Image Trace? Paths zmienia ścisłość dopasowania kształtów do krawędzi pikseli, Corners zmienia intensywność przekształcania załamań w punkty narożne, a Noise określa wielkość obszarów pikseli pomijanych podczas wektoryzacji.

Czy w Animate użyć Abutting, czy Overlapping? Użyj Abutting, aby uzyskać sąsiadujące ścieżki wyciętych kształtów, które stykają się na wspólnej krawędzi. Użyj Overlapping, aby uzyskać kształty ułożone jeden na drugim, które lekko zasłaniają swoich sąsiadów. Sprawdź wynik pod kątem tego, jak zamierzasz go edytować i animować.

Czy Adobe Animate zostało wycofane? Nie. Adobe informuje, że Animate jest w trybie utrzymania, pozostaje dostępne i nadal będzie otrzymywać wsparcie, aktualizacje zabezpieczeń oraz poprawki błędów, ale nowe funkcje nie są planowane.

Źródła

  1. Adobe — Image Trace in Animate — Obecne polecenia wektoryzacji, ustawienia wstępne, działanie podglądu, tryby i definicje zaawansowanych kontrolek.
  2. Adobe — Imported bitmaps in Animate — Aktualne informacje dotyczące importowania i obsługi bitmap.
  3. Adobe — Exporting SVG files from Animate — Aktualna procedura eksportu SVG i informacje dotyczące przekazywania plików do dalszej pracy.
  4. Adobe — Capture FAQ — Aktualne oświadczenie Adobe, że Animate jest dostępne w trybie utrzymania ze wsparciem i poprawkami, ale bez planowanych nowych funkcji.
  5. PerfectVector — Image to Vector — Aktualny proces wektoryzacji w przeglądarce, podgląd, wynik i zakres możliwości produktu.

Jeśli chcesz uzyskać drugi wynik do porównania, zanim poświęcisz czas na dopracowanie grafiki, zwektoryzuj tę samą bitmapę w przeglądarce, sprawdź oba zestawy ścieżek i zachowaj wersję, która wiernie oddaje grafikę przy mniejszej liczbie poprawek.

Więcej z bloga

Zamień obraz w
czyste, edytowalne ścieżki wektorowe