Generowanie zasobów obrazów z warstw

Z zawartości warstwy lub grupy warstw w pliku PSD można wygenerować zasoby — obrazy JPEG, PNG, GIF lub SVG. Zasoby są generowane automatycznie po dopisaniu rozszerzenia obsługiwanego formatu obrazu do nazwy warstwy lub grupy warstw. Opcjonalnie można ustawić parametry jakości i rozmiaru generowanych zasobów obrazów.

Generowanie zasobów obrazów z pliku PSD jest szczególnie przydatne w przypadku projektowania stron internetowych dla wielu urządzeń.

Informacje o tworzeniu i eksportowaniu grafiki na strony internetowe można znaleźć w artykule Eksportowanie plików z programu Photoshop w różnych formatach.

Aby dokładniej zapoznać się z działaniem generatora zasobów obrazów, użyjemy prostego pliku PSD (pobierz za pomocą tego łącza) z następującą hierarchią warstw:

Hierarchia warstw tego pliku obejmuje dwie grupy warstw: Rounded_rectangles (Prostokąty zaokrąglone) i Ellipses (Elipsy). Każda z tych grup warstw zawiera pięć warstw.

Aby wygenerować zasoby obrazów z tego pliku PSD, wykonaj następujące czynności:

1. Po otwarciu pliku PSD wybierz opcję Plik > Automatyzacja > Wtyczki generatorów > Zasoby obrazów.
2. Dopisz rozszerzenie odpowiedniego formatu plików (.jpg, .png, .gif, lub .svg) do nazw warstw lub grup warstw, z których chcesz wygenerować zasoby obrazów. Na przykład zmień nazwy grup warstw Rounded_rectangles i Ellipses na Rounded_rectangles.jpg i Ellipses.png; zmień też nazwę warstwy Ellipse_4 na Ellipse_4.gif.

Program Photoshop wygeneruje zasoby obrazów i zapisze je w podfolderze razem ze źródłowym plikiem PSD. Jeśli źródłowy plik PSD nie jest jeszcze zapisany, program Photoshop zapisuje generowane zasoby w nowym folderze na pulpicie.

Generowanie zasobów do plików w chmurze

Jeśli korzystasz z pliku w chmurze, zasoby są zapisywane w katalogu „Photoshop Cloud Associates”:

• Windows: C:\Użytkownicy\nazwa użytkownika\Dokumenty\Adobe\Photoshop Cloud Associates
• macOS: /Użytkownicy/nazwa użytkownika/Dokumenty/Adobe/Photoshop Cloud Associates

Generowanie wielu zasobów z warstwy lub grupy warstw

Aby wygenerować wiele zasobów z warstwy lub grupy warstw, oddziel nazwy zasobów przecinkami. Następująca nazwa warstwy powoduje na przykład wygenerowanie trzech zasobów:

Ellipse_4.jpg, Ellipse_4b.png, Ellipse_4c.png

Zapisywanie zasobów w podfolderze

Zasoby obrazów wygenerowane z poszczególnych warstw i grup warstw można zapisywać w podfolderach folderu zasobów dokumentu. Nazwę podfolderu należy uwzględnić w nazwie warstwy albo grupy warstwy, na przykład:

[podfolder]/Ellipse_4.jpg 

Przypadek użycia — projektowanie strony internetowej

Generowanie zasobów obrazów z pliku PSD jest szczególnie przydatne w przypadku projektowania stron internetowych dla wielu urządzeń. Rozważmy następujący projekt strony internetowej i jego strukturę warstw:

Wydzielimy ikonę w górnym wierszu siatki obrazów Global Hotspots (Ważne miejsca na świecie) jako zasoby obrazów:

• Dopisz rozszerzenia formatów plików do odpowiednich nazw warstw.

Zmienianie nazw odpowiednich warstw/grup warstw

Program Photoshop wygeneruje zasoby obrazów i zapisze je w tej samej lokalizacji co źródłowy plik PSD.

Określanie parametrów jakości i rozmiaru

Zasoby JPEG są domyślnie generowane z jakością 90%. Zasoby PNG są domyślnie generowane jako obrazy 32-bitowe. Zasoby GIF są generowane z podstawową przezroczystością (kanałem alfa).

Zmieniając nazwy warstw i grup warstw w celu wygenerowania zasobów, można dostosować jakość i rozmiar.

Parametry zasobów JPEG

• Dodaj odpowiednią jakość wyjściową jako przyrostek nazwy zasobu: .jpg(1–10) lub .jpg(1–100%). Na przykład:
  • Ellipse_4.jpg5
  • Ellipse_4.jpg50%
• Dodaj odpowiedni rozmiar obrazu wyjściowego jako przedrostek nazwy zasobu (odpowiednio do obsługiwanych formatów: px, in, cm i mm). Program Photoshop przeskaluje obraz w odpowiedni sposób. Na przykład:
  • 200% Ellipse_4.jpg
  • 300 x 200 Rounded_rectangle_3.jpg
  • 10in x 200mm Rounded_rectangle_3.jpg
    

Uwaga: Należy dodać znak spacji między przedrostkiem a nazwą zasobu. Podając rozmiar w pikselach, można pominąć jednostkę. Przykład: 300 x 200.

Parametry zasobów PNG

• Dodaj odpowiednią jakość wyjściową jako przyrostek nazwy zasobu: 8, 24 lub 32. Na przykład:
  • Ellipse_4.png24
• Dodaj odpowiedni rozmiar obrazu wyjściowego jako przedrostek nazwy zasobu (odpowiednio do obsługiwanych formatów: px, in, cm i mm). Program Photoshop przeskaluje obraz w odpowiedni sposób. Na przykład:
  • 42% Ellipse_4.png
  • 300mm x 20cm Rounded_rectangle_3.png
  • 10in x 50cm Rounded_rectangle_3.png

Uwaga: Należy dodać znak spacji między przedrostkiem a nazwą zasobu. Podając rozmiar w pikselach, można pominąć jednostkę. Przykład: 300 x 200.

Parametry zasobów GIF

• Dodaj odpowiedni rozmiar obrazu wyjściowego jako przedrostek nazwy zasobu (odpowiednio do obsługiwanych formatów: px, in, cm i mm). Na przykład:
  • 42% Ellipse_4.gif
  • 300mm x 20cm Rounded_rectangle_3.gif
  • 20in x 50cm Rounded_rectangle_3.gif

Uwaga: Należy dodać znak spacji między przedrostkiem a nazwą zasobu. Podając rozmiar w pikselach, można pominąć jednostkę. Przykład: 300 x 200.

W przypadku zasobów GIF parametry jakości nie są dostępne.

Tworzenie złożonych nazw warstw

Nadając warstwie nazwę na potrzeby generowania zasobu, można określić wiele nazw zasobów przy użyciu parametrów. Na przykład:

120% Delicious.jpg, 42% Delicious.png24, 100x100 Delicious_2.jpg90%, 250% Delicious.gif

Program Photoshop wygeneruje z tej warstwy następujące zasoby:

• Delicious.jpg (obraz JPG o jakości 8 powiększony do 120%)
• Delicious.png (24-bitowy obraz PNG zmniejszony do 42%)
• Delicious_2.jpg (obraz JPG o jakości 90% i wymiarach bezwzględnych 100x100 pikseli)
• Delicious.gif (obraz GIF powiększony do 250%)

Przykłady skalowania bezwzględnego

Dobre przykłady skalowania bezwzględnego

• 100x80 foo.png (proste skalowanie bezwzględne)
• 80 x 100px foo.png (odstępy między długościami)
• 4in x100 foo.png (jednostki w połączeniu z brakiem jednostek)
• 90mm x120cm foo.png (różne jednostki)
• 100x? foo.png (symbol wieloznaczny)
• ?x60in foo.png (symbol wieloznaczny na początku)

Złe przykłady skalowania bezwzględnego

• 100x100foo.png (brak spacji przed nazwą pliku)
• 80x100 60% foo.png (połączenie skalowania względnego i bezwzględnego)
• 50% 80x100 foo.png (połączenie skalowania względnego i bezwzględnego)
• 20in cm x50cm foo.png (wiele jednostek)
• 30nm x20 nano.png (nieprawidłowa jednostka)

Formatowanie i rozdzielanie wielu plików

Dobre przykłady

• Warstwa 1.png (dozwolony odstęp w nazwie pliku — rozpoznawane jako jeden plik o nazwie „Warstwa Layer 1.png”)
• Warstwa 1.png,Warstwa 2.jpg (przecinek jako separator)
• Warstwa 1.png, Warstwa 2.jpg (przecinek ze spacjami jako separator)
• Warstwa 1.png+Warstwa 2.jpg (znak plus jako separator)
• Warstwa 1.png + Warstwa 2.jpg (znak plus ze spacjami jako separator)

Cała składnia razem

100% smaku, 42% Warstwa 1.png24 + 100x100 Warstwa.jpg-90% , 250% Quux/Foo Bar Baz.gif — generuje trzy pliki, przy czym ciąg „100% smaku” jest ignorowany, gdyż nie jest nazwą pliku:

• Warstwa 1.png w skali 42% jako 24-bitowy plik PNG
• Warstwa.jpg w rozmiarze bezwzględnym 100x100 pikseli, jako plik JPG o jakości 90%
• Foo Bar Baz.gif w podfolderze Quux w skali 250% jako plik GIF

Określanie ustawień domyślnych zasobów

Można określić ustawienia generowanych zasobów dotyczące całego dokumentu. Wykonaj następujące czynności:

1. Utwórz pustą warstwę w dokumencie.
2. Zacznij nazwę warstwy od słowa kluczowego default. Następnie wpisz ustawienia, które chcesz zastosować do wszystkich zasobów obrazów wygenerowanych z dokumentu. Na przykład:
   

Wszystkie zasoby obrazów zostaną wygenerowane w podfolderze o nazwie hi-res. Na przykład [folder_zasobów]/hi-res/Smakołyk.jpg.

Wszystkie zasoby obrazów zostaną wygenerowane w podfolderze o nazwie hi-res. Dodatkowo do nazw zasobów zostanie dodany przyrostek @2x. Na przykład [folder_zasobów]/hi-res/Smakołyk@2x.jpg.

Wszystkie zasoby obrazów zostaną zmniejszone o 50% i zapisane w podfolderze lo-res w folderze zasobów dokumentu

Generuje dwa zasoby obrazów z jednej warstwy:

• W podfolderze hi-res generowany jest zasób obrazu, którego nazwa kończy się tekstem @2x.
• W podfolderze lo-res generowany jest zasób obrazu zmniejszony o 50%
  .

Wyłączanie generowania zasobów obrazów dla wszystkich dokumentów

Funkcję generowania zasobów obrazów można wyłączyć globalnie dla wszystkich dokumentów programu Photoshop w oknie Preferencje.

1. Wybierz opcję Edycja > Preferencje > Wtyczki.
2. Usuń zaznaczenie opcji Włącz Generator.
3. Kliknij przycisk OK.

Menu Wtyczki generatorów

W wersjach programu sprzed lipca 2024 r. (wersji 25.11 na komputer) wtyczki generatorów były dostępne w menu Plik > Generuj.

Obecnie wtyczki generatorów, w tym domyślna wtyczka Zasoby obrazów, znajdują się w menu Plik > Automatyzacja > Wtyczki generatorów.Ta zmiana została wprowadzona w celu poprawienia czytelności nazwy menu i odróżnienia jej od nowych funkcji generowania, takich jak Generowanie obrazu.

Często zadawane pytania