Z zawartości warstwy lub grupy warstw w pliku PSD można wygenerować zasoby — obrazy JPEG, PNG lub GIF. 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ń.

Wideo: Generowanie zasobów internetowych w programie Photoshop CC

Wideo: Generowanie zasobów internetowych w programie Photoshop CC
W tym materiale wideo omówiono sposoby generowania obrazów o różnych rozmiarach i rozdzielczościach do innych projektów przy użyciu generatora zasobów programu Photoshop CC.
Chris Converse

Informacje o tworzeniu i generowaniu grafiki stron internetowych przy użyciu narzędzia Adobe Generator można uzyskać w artykule Wyodrębnianie zasobów na potrzeby stron internetowych.

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 > Generuj > Zasoby obrazów.
  2. Dopisz rozszerzenie odpowiedniego formatu plików (.jpg, .png lub .gif) 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 > Generowanie > Zasoby obrazów.

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]/Elipsa_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
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%)

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 zastępowane są 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 > Generowanie 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.

Często zadawane pytania

Czy jest konieczne określenie niepowtarzalnych nazw zasobów?

Nazwy zasobów muszą być niepowtarzalne na poziomie dokumentu.

Jaki jest domyślny poziom jakości generowanych zasobów?

Zasoby JPG 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).

Czy program Photoshop generuje zasoby obrazów z warstw z przezroczystością i innymi efektami?

Tak. Przezroczystość i inne efekty zastosowane do warstwy są odzwierciedlane w zasobach generowanych z danej warstwy. Efekty te mogą jednak zostać spłaszczone w generowanych zasobach.

Jak są generowane zasoby obrazów w przypadku warstw wychodzących poza obszar roboczy?

Zasoby są przycinane do obramowania dokumentu. Jeśli obraz nie jest wewnątrz obramowania dokumentu, Generator nie tworzy skojarzonych z nim zasobów obrazu.

Czy przecinek jest jedynym dozwolonym separatorem nazw zasobów obrazów?

Oprócz przecinka (,) można oddzielać nazwy zasobów obrazów symbolem plus (+). Na przykład:

42% Rounded_rectangle_1.png24 + 100x100 Rounded_rectangle_1.jpg90%

Ten sam wynik da następujący zapis:

42% Rounded_rectangle_1.png24, 100x100 Rounded_rectangle_1.jpg90%

Wideo: Tworzenie projektu Edge Reflow za pomocą narzędzia Photoshop Generator

Wideo: Tworzenie projektu Edge Reflow za pomocą narzędzia Photoshop Generator
W tym materiale wideo przedstawiono tworzenie układu strony internetowej dostosowującego się do rozmiaru ekranu o średnicy od 320 do ponad 1000 pikseli.
Chris Converse

Ta zawartość jest licencjonowana na warunkach licencji Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Posty z serwisów Twitter™ i Facebook nie są objęte licencją Creative Commons.

Informacje prawne   |   Zasady prywatności online