PerfectVector
Autor: Irene Kim10 min czytania

Od bitmapy do grafiki wektorowej w Moho: wektoryzować czy zachować obraz rastrowy?

Wybierz wbudowaną wektoryzację, grafikę rastrową z warstwami lub import SVG w Moho. Sprawdź obszary kolorów, otwory i ruchome części, zanim zbudujesz na podstawie swojej grafiki układ sterowania animacją.

Na tej stronie

Moho może przekształcić bitmapę w grafikę wektorową za pomocą Draw > Trace Image, ale konwersja jest opcjonalna. Możesz też animować zaimportowaną grafikę rastrową, zachować plik PSD z warstwami lub zaimportować SVG przygotowany w innym programie. Wybierz sposób pracy zależnie od tego, co ma się poruszać i co chcesz edytować.

Wektoryzacja odtwarza widoczne kształty. Nie rozstrzyga, które kształty należą do dłoni, nie odtwarza ramienia ukrytego za tułowiem ani nie tworzy gotowego układu sterowania animacją. To rozróżnienie ma większe znaczenie niż sama ostrość zaimportowanego obrazu.

Wybierz sposób pracy z grafiką
  • Zachowaj grafikę rastrową, gdy malarska faktura jest częścią projektu, a istniejące części nadają się do Twojej animacji.
  • Wypróbuj wbudowaną wektoryzację w Moho, gdy chcesz przekształcić prosty obraz bezpośrednio w aplikacji do animacji.
  • Zaimportuj istniejący SVG, gdy masz już przydatną, edytowalną grafikę wektorową.
  • Przeprowadź wektoryzację w innym programie, gdy chcesz przygotować rysunek rastrowy jako SVG i sprawdzić go przed przeniesieniem do Moho.
  • Narysuj ruchome części od nowa, gdy wynik wektoryzacji nie zapewnia struktury potrzebnej do Twojej animacji.

Zacznij od ruchu, a nie od rozszerzenia pliku

Przed wektoryzacją zapisz prostą czynność, którą grafika ma wykonać. Czy ołówek ma unieść się nad książką? Czy ramię postaci ma się zgiąć? Czy kamera ma po prostu zbliżyć się do malowanego tła? Każde z tych zadań wymaga innego przygotowania.

Grafika i planowana czynnośćSposób rozpoczęcia pracyCo jeszcze trzeba sprawdzić
Malowana postać z celowo rozdzielonymi częściamiPSD z warstwami lub osobne obrazy rastroweGranice części, miejsca nakładania się, rozdzielczość przy największym zbliżeniu
Płaski rysunek wymagający miejscowych zmian kształtówWbudowane Trace Image lub wektoryzacja w innym programieRozmieszczenie ścieżek, obszary kolorów, zamknięte szczeliny
Istniejący rekwizyt wektorowyImport oryginalnego SVGWygląd, grupowanie, kolejność nakładania się elementów i edytowalne węzły po imporcie
Postać wymagająca znacznych zmian pozyNarysowanie lub uporządkowanie potrzebnych częściNiewidoczne fragmenty grafiki, stawy, punkty odniesienia warstw, powiązania z kośćmi i deformacja
Malowane tło, które jest tylko przesuwane lub umiarkowanie skalowaneZachowanie obrazu rastrowegoCzy zawiera wystarczająco dużo szczegółów do planowanego kadrowania

Aktualna dokumentacja funkcji Moho opisuje import PSD z warstwami oraz siatki do animowania obrazów i grafiki wektorowej. Bitmapa nie jest więc niedokończonym plikiem wektorowym, który trzeba przekonwertować, zanim będzie można go animować. Omówienie zaawansowanego importu i tworzenia układu sterowania animacją w tym artykule dotyczy Moho Pro 14; zanim skorzystasz z metody przeznaczonej dla wersji Pro, sprawdź funkcje dostępne w Twojej edycji.

Zanim przekonwertujesz PSD z warstwami na SVG, przeczytaj o ograniczeniach zachowywania warstw PSD. Zachowaj źródło z warstwami, gdy animacja wymaga rozdzielonych części; wektoryzacja widocznego obrazu po połączeniu warstw tworzy inny zasób.

Jeśli porównujesz aplikacje do animacji, poradnik wektoryzacji w Adobe Animate opisuje odrębne polecenia Trace Bitmap dostępne w tym programie. Nie przenoś tych nazw menu ani ustawień do Moho.

Użyj wbudowanego Trace Image do pierwszej próby

Aktualny rozdział Moho 14 Trace Image opisuje następującą kolejność: zaimportuj rysunek do warstwy Image, zaznacz ją, a następnie wybierz Draw > Trace Image. Po zaakceptowaniu wyniku wektoryzacji Moho dodaje warstwę wektorową i wyłącza widoczność oryginalnej warstwy Image. Bitmapa pozostaje zachowana jako obraz referencyjny.

Wybierz tryb odpowiedni do grafiki, którą chcesz utworzyć:

TrybUdokumentowane ustawienia i przeznaczenie
Black and whiteThreshold, Detail reduction i Fatten Lines do wektoryzacji monochromatycznej
Color, tylko w wersji ProNumber of Colors, Detail reduction i Outlines do kolorowej grafiki wektorowej
Photo Edges, tylko w wersji ProThreshold do tworzenia obrysów w miejscach wykrytych krawędzi

Dostosuj ustawienia na małej próbce, zanim zdecydujesz się na dalszą pracę. Detail reduction zmniejsza liczbę węzłów kosztem podobieństwa; większa liczba kolorów może zachować różnice, które później trzeba będzie uporządkować. Photo Edges tworzy obrysy krawędzi, więc nie oczekuj takich samych obszarów z wypełnieniem jak przy wektoryzacji w kolorze.

Zacznij od jednej reprezentatywnej części lub jednego rekwizytu. Cała cieniowana postać łączy zbyt wiele zagadnień naraz: rysy twarzy, faktura, nakładające się kończyny i drobne szczegóły mogą wymagać odmiennego podejścia.

Po wektoryzacji sprawdź nową grafikę, zamiast oceniać ją wyłącznie po wyglądzie. Sprawdź sylwetkę, przestrzenie między kształtami i liczbę osobnych elementów, które trzeba będzie poruszać razem. Jeśli powieka lub łokieć wymagają precyzyjnie poprowadzonej krzywej, ponowne narysowanie tego obszaru może dać Ci większą kontrolę niż zachowanie każdego węzła powstałego podczas wektoryzacji.

Rozróżniaj też Trace Image od używania obrazu jako wzorca do ręcznego obrysowywania. Automatyczna wektoryzacja tworzy grafikę wektorową na podstawie pikseli. Obraz referencyjny pozwala Ci samodzielnie narysować zamierzoną strukturę. Żadna z tych metod nie zastępuje planowania ruchu grafiki.

Zachowaj warstwy PSD, gdy malowana grafika jest przydatna

Plik źródłowy z warstwami pozwala zachować efekty pracy, które w przeciwnym razie trzeba byłoby odtworzyć. Jeśli osoba tworząca ilustrację już rozdzieliła dłoń, przedramię, tułów i ubranie, zachowaj ten plik źródłowy. Spłaszczony PNG traci ten podział, a wektoryzacja PNG nie odzyska oryginalnej zawartości warstw.

Przy pracy z grafiką rastrową przygotuj ją pod kątem planowanego ruchu:

  1. Nazwij części tak, aby można było je rozpoznać po imporcie.
  2. Zadbaj o to, aby części w miejscach połączeń nakładały się na siebie wystarczająco dla planowanych póz.
  3. Zachowaj fakturę i cieniowanie razem z częścią, z którą mają się poruszać.
  4. Sprawdź grafikę przy największym planowanym zbliżeniu kamery.
  5. Przetestuj niewielki ruch, zanim przygotujesz całą postać.

Są to czynności sprawdzające przygotowanie grafiki, a nie obietnica, że dowolny PSD zostanie zaimportowany jako gotowa postać do animacji. Obsługa PSD w Moho umożliwia import grafiki z warstwami; nadal musisz ją uporządkować i zbudować układ sterowania animacją. Przy obrocie odsłaniającym bok głowy możesz potrzebować innego rysunku lub dodatkowej geometrii zamiast bardziej szczegółowej wektoryzacji widoku z przodu.

Importuj SVG zgodnie z aktualnymi wskazówkami Moho

Według oficjalnej strony funkcji Moho 14 wprowadziło ulepszony import SVG, w tym obsługę warstw, gradientów i masek. Starsze internetowe podręczniki Moho, które wymieniają tylko Illustrator i EPS, nie opisują tej obecnej możliwości.

Jeśli masz już SVG, zachowaj oryginalny plik wektorowy. Wykonanie zrzutu ekranu i ponowna wektoryzacja dodają kolejny etap odtwarzania. Jeśli Twoim źródłem jest płaski PNG lub JPEG i chcesz przygotować jego kształty poza Moho, konwerter obrazu na grafikę wektorową PerfectVector może utworzyć SVG, który sprawdzisz przed importem. Porównaj wynik ze źródłem, a następnie zdecyduj, jak uporządkować jego kształty na potrzeby animacji.

Grupa SVG jest kontenerem na elementy; nie jest szkieletem sterującym animacją. Model grupowania w specyfikacji SVG wyjaśnia tę strukturę. Plik może zawierać wiele edytowalnych ścieżek, nie mając przy tym użytecznych, nazwanych części. Jeśli wszystko zaznacza się razem, skorzystaj z diagnostyki obiektów SVG i rozgrupowywania, zanim uznasz, że plik jest bitmapą.

Sprawdź rekwizyt, zanim uznasz go za grafikę gotową do animacji

Poniższy przykład wykorzystuje istniejący wynik konwersji w PerfectVector ilustracji przedstawiającej przedmioty szkolne, przygotowanej według wytycznych zespołu. Zawiera globus, książki i ołówek. Analiza pliku wykazała 33 ścieżki, 12 jednolitych kolorów wypełnienia i brak osadzonych obrazów. Nie wykazała też żadnych grup SVG, które porządkowałyby te ścieżki w nazwane rekwizyty.

Dwa szczegóły sprawiają, że jest to przydatny przykład przygotowania grafiki:

  • Jeden kolor występuje w różnych obiektach. Pięć ścieżek z tym samym żółtym wypełnieniem obejmuje części zarówno książki, jak i ołówka. Zaznaczenie tego koloru nie zaznacza całego ołówka, a przesunięcie zaznaczenia przesunęłoby także część książki.
  • Szczelina wyglądająca na białą nadal jest kształtem z wypełnieniem. Wąski obszar między globusem a jego zewnętrznym wspornikiem jest nieprzezroczystym obszarem o kolorze zbliżonym do białego. Zewnętrzne tło jest przezroczyste, ale ten zamknięty obszar nie. Na innym tle ta różnica ma znaczenie.
Kontrola przygotowania SVG
Oryginalna ilustracja szkolnego globusa, jej rzeczywista konwersja do SVG na tle szachownicy oraz pięć wyodrębnionych żółtych ścieżek należących zarówno do książki, jak i ołówka
Rzeczywiste źródło i wynik z PerfectVector, z wyodrębnionym zaznaczeniem istniejących żółtych ścieżek. Kontrola ujawnia elementy wydzielone według koloru i nieprzezroczystą zamkniętą szczelinę. Nie przedstawia importu do Moho, porównania z wbudowaną wektoryzacją, układu sterowania ani testu animacji.

W ujęciu, w którym unosi się tylko ołówek, znajdź każdą należącą do niego ścieżkę: obrys, gumkę, obrączkę, żółty korpus, cieniowanie, drewno i końcówkę. Pozostaw książki i globus poza tym zaznaczeniem. Następnie sprawdź wszystko, co ołówek wcześniej zasłaniał; jego przesunięcie może odsłonić obszar, którego oryginalny obraz nigdy nie przedstawiał.

W przypadku obracającego się globusa grafika kuli i nieruchoma podstawa wymagają innego planu. Płaska mapa narysowana na kole nie jest odtworzonym globusem 3D. Zdecyduj, jak narysować lub animować zamierzony obrót, zanim poświęcisz czas na grupowanie ścieżek.

Szczelina o kolorze zbliżonym do białego również wymaga świadomej decyzji. Zachowaj ją, jeśli ma być namalowanym obszarem. Jeśli powinno przez nią prześwitywać tło sceny, edytuj ten obszar i sprawdź otaczające go krawędzie na kopii. Nie usuwaj wszystkich jasnych wypełnień: strony książki i drewno ołówka mają własne jasne kolory.

Przeprowadź mały test importu i ruchu

Obsługa SVG jest punktem wyjścia do testu w programie docelowym, a nie dowodem, że ten konkretny rekwizyt będzie zachowywał się poprawnie w Moho. Użyj kopii pliku i sprawdź:

Co sprawdzićNa co zwrócić uwagę
WyglądSylwetka, wypełnienia, gradienty, maski i kolejność nakładania się elementów w porównaniu ze źródłem
StrukturaKtóre części można zaznaczać i jak uporządkowane są zaimportowane warstwy
RozdzielenieCzy poruszanie jedną wybraną częścią przesuwa także niezwiązane z nią elementy grafiki
PrzezroczystośćZamknięte otwory i jasne obszary na rzeczywistym tle sceny
Punkt odniesienia warstwy i powiązania z kośćmiCzy część porusza się wokół zamierzonego stawu lub punktu obrotu
DeformacjaCzy niewielkie planowane zgięcie lub obrót zniekształcają krawędzie albo ujawniają brakujące fragmenty grafiki

Przetestuj jedną przydatną czynność, zanim zbudujesz złożony układ sterowania animacją. W przypadku rekwizytu unieś ołówek i sprawdź odsłonięty obszar. W przypadku postaci przetestuj jeden staw z zamierzonym powiązaniem z kośćmi. Popraw strukturę w tym małym zakresie, a następnie rozszerz pracę.

Jeśli test w programie docelowym się nie powiedzie, zwiększenie szczegółowości wektoryzacji nie musi być rozwiązaniem. Uporządkuj części, uzupełnij brakujący obszar, narysuj krzywą od nowa lub zachowaj obraz rastrowy tam, gdzie zapewnia oczekiwany wygląd. Karta oceny jakości wektoryzacji traktuje zachowanie w programie docelowym jako osobną kontrolę, niezależną od podglądu wyglądającego poprawnie.

FAQ

Czy Moho może przekształcić bitmapę w grafikę wektorową? Tak. Zaimportuj bitmapę do warstwy Image i użyj Draw > Trace Image. Sprawdź wynikową grafikę wektorową i uporządkuj części, które chcesz animować; wektoryzacja nie tworzy gotowego układu sterowania animacją.

Czy muszę zwektoryzować PSD, zanim zacznę animować go w Moho? Nie. Moho obsługuje grafikę PSD z warstwami, więc praca z grafiką rastrową może być odpowiednia, gdy chcesz zachować malarskie szczegóły. Nadal musisz przygotować części i przetestować układ sterowania pod kątem zamierzonego ruchu.

Czy Moho 14 może importować pliki SVG? Tak. Moho 14 wprowadziło ulepszony import SVG z obsługą warstw, gradientów i masek. Sprawdź wygląd i strukturę własnego pliku po imporcie, zanim oprzesz na nim animację.

Czy wektoryzacja rozdzieli postać na ręce, nogi i głowę? Nie zakładaj, że tak się stanie. Wektoryzacja podąża za widocznymi obszarami, przez co może podzielić jedną część ciała na wiele ścieżek lub połączyć niezwiązane części według koloru. Uporządkuj części lub narysuj je od nowa pod kątem potrzebnego ruchu.

Źródła

  1. Lost Marble — Moho features — Opisuje pracę z PSD z warstwami, siatki dla obrazów i grafiki wektorowej oraz ulepszony import SVG w Moho 14.
  2. Lost Marble — Moho 14 Trace Image — Opisuje wbudowane polecenie wektoryzacji, tryby konwersji, ustawienia i zachowanie bitmapy jako obrazu referencyjnego.
  3. W3C — SVG document structure and groups — Definiuje grupy jako kontenery na grafikę, a nie metadane części animacji lub układu sterowania.

Jeśli Twój rysunek rastrowy wymaga edytowalnych kształtów przed animacją, przekonwertuj jedną reprezentatywną część za pomocą PerfectVector. Porównaj jej kontury i zamknięte szczeliny ze źródłem, uporządkuj części, które mają się poruszać, a następnie przetestuj ten SVG w Moho, zanim przygotujesz resztę.

Więcej z bloga

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