PSD do SVG bez utraty warstw: co zostaje zachowane

Nie da się przekształcić każdej warstwy Photoshopa w równoważną warstwę SVG. PSD może łączyć warstwy kształtów, edytowalny tekst, maski, efekty, obiekty inteligentne i zwykłe piksele. SVG może przedstawiać ścieżki, tekst, grupy i obrazy, ale te obiekty nie odpowiadają bezpośrednio modelowi dokumentu Photoshopa. Najbezpieczniej jest zachować zawartość wektorową przez natywny eksport, a następnie poddać wektoryzacji tylko tę grafikę rastrową, która nie ma źródła wektorowego nadającego się do ponownego użycia.

Szybki wybór metody

• Jeśli PSD zawiera już poprawne ścieżki kształtów, zachowaj je lub przenieś do edytora grafiki wektorowej.
• Zachowaj edytowalny tekst jako tekst tylko wtedy, gdy środowisko docelowe ma odpowiedni font i niezawodnie obsługuje tekst SVG. W przeciwnym razie zamień tekst na kontury w kopii do przekazania.
• Traktuj maski, efekty, obiekty inteligentne i warstwy pikselowe jako elementy widocznego wyglądu, a nie przenośną strukturę warstw.
• Jeśli potrzebujesz tylko spłaszczonej grafiki w postaci edytowalnych kształtów, sprawdź zapisany obraz scalony i poddaj go wektoryzacji.
• Otwórz końcowy SVG i sprawdź jego obiekty. Rozszerzenie .svg nie dowodzi, że warstwy zostały zachowane ani że piksele stały się ścieżkami.

Warstwa PSD nie jest warstwą SVG

Panel warstw Photoshopa opisuje sposób edycji dokumentu. SVG opisuje to, co rysuje mechanizm renderujący. To dwa różne zadania.

Obecna procedura tworzenia zasobów graficznych Adobe pozwala generować zasoby SVG z nazwanych warstw lub grup warstw. Ta sama dokumentacja mówi, że zasób utworzony z grupy warstw jest spłaszczany, nawet jeśli grupa zawiera kształty i edytowalny tekst. Innymi słowy, wybranie SVG jako formatu wyjściowego nie przekształca hierarchii Photoshopa w równoważną hierarchię SVG.

Sprawdź zawartość pliku przed konwersją

Zanim cokolwiek zmienisz, utwórz kopię PSD. Następnie przejrzyj panele warstw, ścieżek, właściwości i obiektów inteligentnych.

1. Ukryj warstwy pikselowe. Jeśli przydatna grafika pozostanie widoczna, być może masz już kształty wektorowe, które warto zachować.
2. Zaznacz każdą warstwę tekstową. Zapisz rodzinę i grubość fontu, zanim zamienisz tekst na kontury lub go przeniesiesz.
3. Otwórz obiekty inteligentne. Podlinkowany plik Illustratora lub inne źródło wektorowe będzie lepsze niż wektoryzacja jego wyrenderowanego podglądu.
4. Włączaj i wyłączaj maski oraz efekty. Zdecyduj, czy liczy się edytowalna konstrukcja, czy tylko końcowy wygląd.
5. Sprawdź zapisany obraz scalony. Jeśli plik otwiera się inaczej na innym komputerze, ponownie zapisz zweryfikowaną kopię, zanim skorzystasz z metody opartej na spłaszczeniu.

Adobe opisuje również eksportowanie wybranych warstw do osobnych plików. Osobne eksporty mogą zachować przydatny podział na zasoby, ale nadal nie tworzą jednego SVG, który działa jak oryginalny stos warstw PSD.

Wybierz metodę według typu obiektu

Metoda 1: zachowaj zawartość wektorową

Wybierz tę metodę dla warstw kształtów, ścieżek utworzonych piórem, prostego edytowalnego tekstu i obiektów inteligentnych, których oryginalne źródło wektorowe nadal istnieje.

Przenoś lub eksportuj po jednym logicznie wydzielonym elemencie, a następnie otwieraj go w Illustratorze, Inkscape lub innym edytorze SVG. Sprawdź, czy wynik zawiera ścieżki i grupy, a nie jeden prostokątny obraz. Jeśli tekst musi pozostać edytowalny, otwórz SVG na innym komputerze, na którym nie ma Twojego dokumentu Photoshopa, i sprawdź, czy ładuje się właściwy font. W przypadku logo i plików produkcyjnych zachowaj wersję źródłową z edytowalnym tekstem, a do przekazania przygotuj kopię z tekstem zamienionym na kontury.

Nie spłaszczaj dobrego źródła wektorowego tylko po to, by przepuścić je przez narzędzie do wektoryzacji. Wektoryzacja odtwarza wyrenderowany wygląd, więc może dodawać węzły, zmieniać krzywe i przekształcać tekst w przybliżone kontury. Natywna geometria jest lepszym punktem wyjścia.

Metoda 2: spłaszcz widoczną grafikę, a potem poddaj ją wektoryzacji

Skorzystaj z wektoryzacji, gdy potrzebny projekt istnieje wyłącznie jako piksele lub gdy zapisany wygląd PSD jest najlepszym zachowanym źródłem. Logo z jednolitymi wypełnieniami, emblematy, ikony, liternictwo i ilustracje z wyraźnymi granicami kolorów zwykle dobrze nadają się do tej metody. Zdjęcia, subtelne gradienty, tekstury pędzla i miękkie cienie zwykle nie.

Przed wektoryzacją:

1. Ukryj wszystko, co nie powinno znaleźć się w grafice wektorowej.
2. Umieść grafikę na tle lub zachowaj przezroczystość zgodnie z wymaganiami pliku do przekazania.
3. Sprawdź małe światła wewnątrz liter, otwory i drobne liternictwo w docelowym rozmiarze.
4. Zapisz kopię z włączoną zgodnością lub wyeksportuj wysokiej jakości PNG, jeśli PSD nie zawiera wiarygodnego obrazu scalonego.
5. Zachowaj oryginalny PSD. Wynik wektoryzacji to nowy plik do przekazania, a nie zamiennik dokumentu.

SVG może zgodnie ze specyfikacją zawierać osadzony obraz rastrowy w ramach modelu osadzonej zawartości SVG 2. Konwerter zmieniający wyłącznie format może więc umieścić spłaszczone piksele PSD wewnątrz SVG bez ich wektoryzacji. Powiększanie i sprawdzanie typu obiektu pozwala wykryć taki pozornie wektorowy wynik.

Jak to wygląda w PerfectVector

PerfectVector otwiera obsługiwany plik PSD lub PSB, korzystając ze scalonego obrazu zapisanego w nim w celu zapewnienia zgodności. Przeglądarka przygotowuje ten widoczny obraz lokalnie i prosi Cię o jego sprawdzenie przed wektoryzacją. Nie przesyła oryginalnego dokumentu Photoshopa ani nie deklaruje odtwarzania warstw, masek, edytowalnego tekstu, efektów, ścieżek, obszarów roboczych czy obiektów inteligentnych. Proces konwersji z Photoshopa do SVG odtwarza przygotowane piksele jako ścieżki SVG.

To oznacza, że jest to metoda oparta na wektoryzacji, a nie zachowaniu warstw. Skorzystaj z niej, gdy zapisany obraz scalony ma właściwy wygląd, a edytowalna geometria ścieżek jest bardziej przydatna niż oryginalna konstrukcja w Photoshopie. Po konwersji sprawdź sylwetkę, obszary kolorów, kształty liter, przestrzeń negatywną i strukturę węzłów. Jeśli PSD zawiera już poprawne źródła wektorowe, przenieś je bezpośrednio.

Sprawdź, co zostało zachowane w SVG

Otwórz ponownie pobrany SVG w edytorze grafiki wektorowej, zamiast polegać na pierwszym podglądzie.

• Zaznacz jeden obszar koloru. Powinien zachowywać się jak ścieżka lub kształt, a nie jak część jednego prostokątnego obrazu.
• Otwórz panel warstw lub obiektów. Szukaj struktury grup, którą da się wygodnie edytować, zamiast oczekiwać nazw warstw z PSD.
• Powiększ krzywe i światła wewnątrz liter. Sprawdź, czy nie ma spłaszczeń, przypadkowo zamkniętych otworów i poszarpanych krawędzi.
• Zmień jeden kolor wypełnienia. Prawdziwa ścieżka powinna zmienić kolor bez wpływu na sąsiednie obszary.
• Poszukaj w kodzie źródłowym elementu <image>, jeśli którykolwiek obszar nadal pokazuje piksele przy powiększeniu.
• Zaimportuj SVG do środowiska, w którym będzie faktycznie używany, i sprawdź tam rozmiar, fonty, maski oraz efekty.

Jeśli wszystkie widoczne elementy zachowują się jak jeden obiekt, skorzystaj z diagnostyki problemów z rozgrupowaniem SVG, zanim zastosujesz destrukcyjne operacje na ścieżkach. Plik może zawierać jedną ścieżkę złożoną lub osadzony obraz zamiast grupy.

Kiedy PSD powinien pozostać plikiem PSD

Zachowaj dokument Photoshopa jako wersję źródłową, gdy nadal potrzebujesz edytowalnego tekstu, warstw dopasowania, masek, obiektów inteligentnych, obszarów roboczych, tekstur fotograficznych lub efektów. SVG to dobry format do przekazywania skalowalnych kształtów graficznych, ale nie zastępuje dokumentu Photoshopa.

Na koniec możesz mieć dwa pliki: PSD jako edytowalne źródło i SVG jako plik produkcyjny. To dobry sposób przekazania projektu. Te dwa pliki zachowują różne możliwości edycji.

Najczęściej zadawane pytania

Czy można przekonwertować PSD do SVG z zachowaniem wszystkich warstw? Nie w sposób niezawodny. Niektóre kształty i tekst można przenieść do SVG, ale maski Photoshopa, efekty, obiekty inteligentne, warstwy dopasowania, nazwy warstw i warstwy pikselowe nie mają w SVG dokładnych odpowiedników. Najpierw zachowaj natywne obiekty wektorowe, a resztę traktuj jako wyrenderowany wygląd.

Dlaczego wynik konwersji PSD do SVG ma tylko jedną warstwę? Konwerter prawdopodobnie użył spłaszczonego obrazu scalonego lub osadził jeden obraz rastrowy. Jeden obiekt SVG może być też ścieżką złożoną albo grupą, więc sprawdź typ obiektu, zanim uznasz, że plik nadal jest rastrowy.

Czy zapisanie pliku Photoshopa jako SVG wektoryzuje piksele? Nie. SVG może zawierać obrazy rastrowe. Eksport do tego formatu może umieścić piksele w kontenerze SVG bez ich wektoryzacji. Sprawdź, czy elementy grafiki można zaznaczać jako ścieżki i czy pozostają edytowalne na poziomie obiektów.

Czy przed eksportem SVG z Photoshopa należy zamienić tekst na kontury? Zamień tekst na kontury w kopii do przekazania, gdy wygląd musi pozostać niezmienny, a edycja tekstu nie jest już potrzebna. Zachowaj wersję źródłową z edytowalnym tekstem, jeśli treść lub wersja językowa może się zmienić. Zamiana na kontury nie zachowuje możliwości zmiany fontu; przekształca litery w ścieżki.

Czy PerfectVector może odzyskać warstwy Photoshopa z PSD? Nie. PerfectVector korzysta ze scalonego obrazu zapisanego w obsługiwanym pliku w celu zapewnienia zgodności i wektoryzuje ten widoczny obraz do ścieżek. Nie odtwarza oryginalnego stosu warstw Photoshopa ani funkcji edytowalnego dokumentu.

Źródła

1. Adobe — Create image assets from layers — Opisuje generowanie zasobów SVG i spłaszczanie zasobów tworzonych z grup warstw.
2. Adobe — Export layers as files — Opisuje obecny sposób eksportowania poszczególnych warstw.
3. Adobe — Draw shapes and paths in Photoshop — Definiuje narzędzia Photoshopa do tworzenia kształtów, pracy piórem i tworzenia ścieżek.
4. W3C — SVG embedded content — Wyjaśnia, dlaczego SVG może nadal zawierać dane obrazu rastrowego.
5. PerfectVector — Photoshop to SVG — Opisuje obsługiwaną metodę opartą na zapisanym obrazie scalonym i jej ograniczenia w odzyskiwaniu warstw.

---

Jeśli zapisany obraz scalony jest źródłem, którego potrzebujesz, sprawdź go w konwerterze z Photoshopa do SVG, poddaj go wektoryzacji, a następnie ponownie otwórz SVG i upewnij się, że ważne obszary są ścieżkami.