Podręcznik użytkownika Anuluj

Generowanie zasobów obrazów z warstw

Uwaga:

Opcja Zasoby obrazów znajduje się teraz w menu Plik > Automatyzacja > Wtyczki generatorów.

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.

Generowanie zasobów obrazów z warstw lub grup warstw

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:

Generowanie zasobów obrazów w programie Photoshop
Przykładowy plik PSD i hierarchia jego 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.
Uwaga:

W nazwach warstw nie są obsługiwane znaki specjalne : i *.

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.

Nazwy zasobów obrazów w programie Photoshop
Nazwy zasobów obrazów są generowane z nazw warstw i grup warstw.

Uwaga:

Generowanie zasobów obrazów jest włączone dla bieżącego dokumentu. Po włączeniu ta funkcja pozostaje dostępna przy kolejnym otwarciu dokumentu. Aby wyłączyć generowanie zasobów obrazów dla bieżącego dokumentu, usuń zaznaczenie opcji Plik > Automatyzacja > Wtyczki generatorów.

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:

Projekt strony internetowej i jego hierarchia 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 w programie Photoshop

Zmienianie nazw odpowiednich warstw/grup warstw w programie Photoshop

Zmienianie nazw odpowiednich warstw/grup warstw

Uwaga:

Z zawartości danej warstwy lub grupy warstw jest tworzony pojedynczy zasób obrazu. Grupa warstw AdventureCo Logo na powyższym zrzucie ekranu zawiera na przykład warstwę kształtów i warstwę aktywnego tekstu. Te warstwy są spłaszczane podczas generowania zasobu obrazu z grupy warstw.

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

Wygenerowane zasoby obrazów w programie Photoshop
Wygenerowane zasoby obrazów

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.

Uwaga:

Jak widać, żądany rozmiar obrazu wyjściowego można określić przy użyciu połączenia jednostek i pikseli. Na przykład nazwa warstwy 4in x 100 Rounded_rectangle_3.jpg jest poprawna w kontekście generowania zasobów.

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.

Uwaga:

Jak widać, żądany rozmiar obrazu wyjściowego można określić przy użyciu połączenia jednostek i pikseli. Na przykład nazwa warstwy 4in x 100 Rounded_rectangle_3.png jest poprawna w kontekście generowania zasobów.

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.

Uwaga:

Jak widać, żądany rozmiar obrazu wyjściowego można określić przy użyciu połączenia jednostek i pikseli. Na przykład nazwa warstwy 4in x 100 Rounded_rectangle_3.gif jest poprawna w kontekście generowania zasobów.

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:

default hi-res/

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

default hi-res/@2x

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.

default 50% lo-res/

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

default hi-res/@2x + 50% lo-res/

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%
    .
Uwaga:

Domyślne współczynniki skalowania są zastępowane współczynnikami określonymi dla poszczególnych warstw.

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.
Uwaga:

Polecenie Plik > Automatyzacja > Wtyczki generatorów nie jest dostępne, gdy funkcja generowania zasobów obrazów jest wyłączona w oknie Preferencje. Można ponownie włączyć tę funkcję w oknie dialogowym Preferencje.

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

Więcej materiałów tego typu

Pomoc dostępna szybciej i łatwiej

Nowy użytkownik?