Podręcznik użytkownika Anuluj

Tworzenie internetowych galerii zdjęć

Uwaga:

Tworzenie galerii internetowych w programie Photoshop CS5 opisano w rozdziale Tworzenie internetowej galerii zdjęć pomocy programu Adobe Bridge. Aby skorzystać ze starszej, opcjonalnej wersji wtyczki „Internetowa galeria zdjęć” opisanej w poniższych tematach, należy ją najpierw pobrać dla systemu Windows lub macOS.

Informacje o internetowej galerii zdjęć

Internetowa galeria zdjęć jest to witryna internetowa, która zawiera, stronę główną z miniaturkami zdjęć, i po drugie, strony podrzędne z obrazami naturalnej wielkości. Każda ze stron zawiera łącza umożliwiające poruszanie się po witrynie. Kliknięcie łącza w postaci miniaturki obrazu powoduje na przykład wczytanie strony z obrazem naturalnej wielkości. Polecenie Web Photo Gallery (Galeria zdjęć WWW) służy do automatycznego generowania galerii zdjęć WWW na podstawie zestawu obrazków.

Strona główna internetowej galerii zdjęć w programie Photoshop
Strona główna internetowej galerii zdjęć

Program Photoshop udostępnia szereg stylów galerii. Style te można wybrać w oknie Internetowa galeria zdjęć. Zaawansowany użytkownik (znający kod HTML) może także utworzyć nowy styl lub dostosować styl istniejący poprzez edycję zestawu szablonów HTML.

Każdy szablon ze stylami galerii posiada inne opcje. W przypadku stylu zdefiniowanego niektóre opcje mogą być nieaktywne bądź niedostępne.

Tworzenie galerii internetowych w programie Adobe Bridge

Program Adobe Bridge udostępnia poprawione funkcje galerii internetowych. Instrukcje na ten temat można znaleźć w rozdziale Tworzenie internetowej galerii zdjęć w pomocy programu Adobe Bridge, a także w poniższych samouczkach.

Używanie starszej, opcjonalnej wtyczki do programu Photoshop

  1. Pobierz i zainstaluj starszą wersję wtyczki Internetowa galeria zdjęć dla systemu Windows lub macOS.

  2. (Opcjonalnie) Zaznaczyć pliki lub folder z plikami, do których będzie stosowany program Adobe Bridge.

    Obrazy będą wyświetlane w kolejności określonej w programie Bridge. Kolejność tę można zmienić w programie Bridge.

  3. Wykonaj jedną z następujących czynności:

    • W programie Adobe Bridge wybierz polecenie Narzędzia > Photoshop > Web Photo Gallery (Galeria zdjęć WWW).

    • W programie Photoshop wybierz polecenie Plik > Automatyzacja > Web Photo Gallery (Galeria zdjęć WWW).

  4. Wybierz styl galerii z wyskakującego menu Styles (Style). W oknie dialogowym jest widoczny podgląd strony głównej dla wybranego stylu.

  5. (Opcjonalnie) Wprowadź adres e-mail, który będzie pełnił funkcję adresu kontaktowego.

  6. Z menu Use (Użyj) wybierz pliki źródłowe galerii.

    Zaznaczone obrazy z programu Bridge

    Przed otwarciem okna Internetowa galeria zdjęć zostaną użyte zaznaczone obrazy.

    Folder

    Zostaną użyte obrazy, które wybrano za pomocą przycisku Przeglądaj (Windows) lub Wybierz (Mac OS). Zaznacz opcję Uwzględniaj podfoldery, aby dołączyć wszystkie obrazy umieszczone w podfolderach zaznaczonego folderu.

  7. Kliknij opcję Cel, a następnie zaznacz folder, w którym będą przechowywane obrazy i strony HTML galerii. Następnie należy kliknąć na przycisku OK (Windows) lub Wybierz (Mac OS).

  8. Zaznaczyć opcję formatu galerii zdjęć WWW. Wybór poszczególnych zestawów opcji umożliwia menu Options (Opcje). Zobacz Opcje Internetowej galerii zdjęć.

  9. Kliknij przycisk OK. Photoshop umieszcza w folderze docelowym następujące pliki HTML i JPEG:

    • Stronę domową galerii, nazwaną index.htm lub index.html w zależności od wybranej opcji rozszerzenia. Aby obejrzeć galerię, należy otworzyć ten plik w dowolnej przeglądarce internetowej.

    • Obrazki JPEG w podfolderze obrazków.

    • Strony HTML w podfolderze stron.

    • Obrazki miniaturek JPEG w podfolderze miniaturek.

Sprawdzanie zgodności kolorów

Jeśli pewne zdjęcia charakteryzują się rozszerzoną przestrzenią kolorów, taką jak ProPhoto RGB lub Adobe RGB, kolory obrazu mogą się zmieniać, gdy wyświetlane są w galerii internetowej przez przeglądarkę, która nie czyta osadzonych profilów kolorów. Jeśli tak się dzieje, spróbuj przekonwertować profile obrazów na sRGB (których większość przeglądarek używa domyślnie), a następnie zoptymalizować lub dołączyć do Internetowej galerii zdjęć. Przekonwertuj je na sRGB w jeden z następujących sposobów. Operację konwersji najlepiej zastosować do kopii obrazków.

Jeśli jest używany Procesor obrazów, można zapisać pliki w formacie JPEG i w wybranym rozmiarze. Należy upewnić się przy tym, czy wśród opcji dużych obrazków wyłączono opcję Zmień wielkość obrazków.

Ogólne

Opcje dotyczące rozszerzeń plików, kodowania i metadanych.

Rozszerzenie

Można użyć jednego z dwóch rozszerzeń: HTM lub HTML.

Kodowanie UTF-8 dla adresów URL

Używa kodowania UTF-8.

Dodaj atrybuty wysokości i szerokości obrazów

Pozwala określić wymiary obrazów, co skraca czas ich pobierania.

Zachowaj wszystkie metadane

Są zachowywane metadane.

Baner

Opcje tekstowe banera wyświetlanego na każdej ze stron galerii. Należy wprowadzić tekst w każdym z następujących pól:

Nazwa witryny

Nazwa galerii.

Fotograf

Dane osoby lub organizacji będącej twórcą (właścicielem) zdjęć.

Informacje kontaktowe

Pole na informacje kontaktowe dla osób odwiedzających galerię, takie jak numer telefonu lub adres.

Data

Data wyświetlana na każdej ze stron galerii. Domyślnie Photoshop używa bieżącej daty.

Czcionka i Rozmiar czcionki

(Dostępne dla niektórych stylów serwisów) Opcje tekstu baneru.

Duże obrazy

Opcje dotyczące głównych obrazów, które są wyświetlane na każdej ze stron galerii.

Dodaj łącza numeryczne

(Dostępne dla niektórych stylów serwisów) Umieszcza sekwencję liczbową (od 1 do liczby stron w galerii) w orientacji poziomej w górnej części każdej strony galerii. Każdy numer jest łączem do odpowiadającej mu strony.

Zmień rozmiar obrazów

Odpowiada za zmianę rozmiaru obrazów umieszczanych na stronach galerii. Rozmiar można wybrać z menu wysuwanego lub wpisać (w pikselach). W polu Constrain (Zachowaj) należy wybrać wymiary, które mają zostać zachowane podczas skalowania. W polu JPEG Quality (Jakość JPEG) należy wybrać wartość z menu, wpisać wartość z przedziału od 0 do 12 lub odpowiednio ustawić suwak. Im wyższa wartość, tym lepsza jakość obrazu i większy plik obrazu.

Uwaga:

W programie Photoshop jest używana domyślna metoda interpolacji (ustawiona w preferencjach). Aby zapewnić minimalny rozmiar pliku wynikowego należy wybrać metodę Bicubic Sharper (Dwusześcienna - wyostrzanie).

Rozmiar ramki

Określa w pikselach szerokość obramowania wokół obrazu.

Podpisy

(Dostępne dla niektórych stylów serwisów) Określa opcje wyświetlania podpisów pod każdym obrazem. Wybierz opcję Filename (Nazwa pliku), aby wyświetlić nazwę pliku, lub zaznacz opcje Description (Opis), Credits (Autorzy), Title (Tytuł) i Copyright (Prawa autorskie), aby wyświetlić tekst opisu z okna dialogowego File Info (Informacje o pliku).

Czcionka i Rozmiar czcionki

(Dostępne dla niektórych stylów serwisów) Określa czcionkę i rozmiar podpisu.

Miniaturki

Opcje dotyczące głównej strony galerii, między innymi wielkości miniaturek obrazów.

Rozmiar

Szerokość miniaturki. Odpowiednią wartość (w pikselach) można wybrać z menu wysuwanego lub wpisać.

Kolumny i rzędy

Liczba kolumn i rzędów na stronie głównej, w których są wyświetlane miniaturki obrazów. Opcja nie jest stosowana do galerii z poziomym lub pionowym stylem ramek.

Rozmiar ramki

Określa w pikselach szerokość obramowania wokół każdej z miniaturek.

Podpisy

(Dostępne dla niektórych stylów serwisów) Określa opcje wyświetlania podpisów pod każdą miniaturką. Wybierz opcję Filename (Nazwa pliku), aby wyświetlić nazwę pliku, lub zaznacz opcje Description (Opis), Credits (Autorzy), Title (Tytuł) i Copyright (Prawa autorskie), aby wyświetlić tekst opisu z okna dialogowego File Info (Informacje o pliku).

Czcionka i Rozmiar czcionki

(Dostępne dla niektórych stylów serwisów) Określa czcionkę i rozmiar podpisu.

Własne kolory

Opcje dotyczące kolorów różnych elementów galerii. Aby zmienić kolor elementu należy kliknąć na próbce jego koloru i zaznaczyć inny kolor za pomocą Próbnika kolorów. Istnieje możliwość zmiany koloru tła każdej ze stron (opcja Tło) i koloru baneru (opcja Baner).

Zabezpieczenia

Pozwala określić tekst, jaki będzie wyświetlany na każdym obrazie w celu zniechęcenia potencjalnych złodziei.

Zawartość

Wyświetlany tekst. Można zaznaczyć opcję Custom Text (Tekst własny) i wprowadzić własny tekst. Aby był wyświetlany tekst pobierany z okna dialogowego Informacje o pliku, należy zaznaczyć pozycję Filename (Nazwa pliku), Description (Opis), Credits (Autorzy), Title (Tytuł), bądź Copyright (Prawa autorskie),.

Czcionka, Kolor i Położenie

Określa czcionkę, kolor i wyrównanie podpisu.

Obrót

Pozwala określić kąt obrotu tekstu na obrazie.

Użytkownicy programu Photoshop mają do dyspozycji wiele stylów galerii zdjęć WWW. Zaawansowany użytkownik (znający kod HTML) może także utworzyć nowy styl lub dostosować styl istniejący poprzez edycję zestawu szablonów HTML.

Style galerii zdjęć WWW znajdujące się w zasobach programu Photoshop są umieszczone w odrębnych folderach w następujących lokalizacjach:

Windows

Program Files/Adobe/Adobe Photoshop CS5/Presets/Web Photo Gallery

macOS

Adobe Photoshop CS5/Presets/Web Photo Gallery

Nazwa każdego folderu w powyższych lokalizacjach figuruje jako opcja w menu Styles (Style) w oknie dialogowym Web Photo Gallery (Galeria zdjęć WWW). Każdy folder zawiera (używane przez program Photoshop do tworzenia galerii) następujące pliki szablonów:

Caption.htm

Decyduje o położeniu podpisów pod miniaturkami na stronie internetowej.

FrameSet.htm

Decyduje o układzie zestawu ramek do wyświetlania stron.

IndexPage.htm

Decyduje o układzie strony głównej.

SubPage.htm

Decyduje o układzie stron galerii z pełnowymiarowymi obrazami.

Thumbnail.htm Decyduje o układzie miniaturek na stronie głównej.

Każdy plik szablonu zawiera kod HTML i tokeny. Token jest to ciąg tekstu zastępowany przez program Photoshop, gdy ustawi się odpowiadającą mu opcję w oknie dialogowym Internetowa galeria zdjęć. Na przykład, pewien plik szablonu może zawierać token TITLE:

<TITLE>%TITLE%</TITLE>

Podczas generowania galerii program Photoshop wykorzystuje plik szablonu i zamienia token %TITLE% na tekst wpisany w polu Nazwa witryny w oknie dialogowym Web Photo Gallery (Galeria zdjęć WWW).

Aby lepiej zrozumieć dany styl, warto otworzyć i obejrzeć odpowiadające mu szablony HTML za pomocą edytora HTML. Ponieważ dokumenty HTML zawierają tylko znaki ASCII, do ich otwierania, oglądania i tworzenia można używać zwykłego edytora tekstowego, takiego jak Notepad (Windows) lub TextEdit (Mac OS).

Użytkownik może dostosować styl galerii zdjęć WWW poprzez edycję plików szablonów HTML. Aby program Photoshop mógł poprawnie utworzyć galerię, w trakcie wprowadzania zmian w plikach szablonów HTML należy stosować się do następujących instrukcji:

  • Folder stylu musi zawierać następujące pliki: Caption.htm, IndexPage.htm, SubPage.htm, Thumbnail.htm oraz FrameSet.htm.

  • Nazwa folderu stylu może być zmieniana, ale nie można zmienić nazw plików szablonów HTML w folderze.

  • Można wyczyścić plik Caption.htm, a w pliku Thumbnail.htm umieścić kod HTML oraz tokeny określające układ podpisów.

  • Użytkownik może zamienić tokeny w pliku szablonów na odpowiedni tekst lub kod HTML. Jest to alternatywa dla okna dialogowego Web Photo Gallery (Galeria zdjęć WWW), umożliwiająca zmianę różnych opcji bezpośrednio w pliku szablonów. Na przykład, plik szablonów może zawierać element BODY z następującym atrybutem koloru tła użytym jako wartość tokena:

    bgcolor=%BGCOLOR%

    Aby zmienić kolor tła strony na czerwony, należy zmienić tokeny %BGCOLOR% na “FF0000.”

  • Do plików szablonów można dodawać kod HTML i tokeny. Wszystkie tokeny muszą być wpisane dużymi literami i poprzedzone oraz zakończone symbolem procentu (%).

  1. Odszukaj folder stylów Internetowej galerii zdjęć.
  2. Wykonaj jedną z następujących czynności:
    • Aby dostosować styl, należy utworzyć kopię folderu stylów i zapisać ją w tym samym miejscu co już istniejące foldery stylów.

    • Aby utworzyć nowy styl, należy utworzyć folder nowego stylu i zapisać go w tym samym miejscu co już istniejące foldery stylów.

    Nowy lub dostosowany styl (o nazwie tożsamej z jego folderem) zostanie wyświetlony w oknie Web Photo Gallery (Galeria zdjęć WWW) w menu Styles (Style).

  3. Korzystając z edytora HTML, wykonać jedną z następujących czynności:
    • Dostosować plik szablonu HTML.

    • Utworzyć potrzebne pliki szablonu HTML i umieścić je w folderze stylu.

    Tworząc pliki szablonów, należy przestrzegać wytycznych dotyczących dostosowywania, zawartych w części Dostosowywanie stylów internetowej galerii zdjęć

    Uwaga:

    Podczas dostosowywania i tworzenia szablonu stylu galerii każdy z poniższych tokenów należy umieścić w oddzielnym wierszu pliku HTML: %CURRENTINDEX%, %NEXTIMAGE%, %NEXTINDEX%, %PAGE%, %PREVIMAGE% oraz %PREVINDEX%. Podczas generowania stron galerii program Photoshop pomija te wiersze szablonu, które zawierają tokeny zbędne dla funkcjonowania danej strony. Na przykład, generując pierwszą stronę galerii, program Photoshop pomija wiersze szablonu zawierające token %PREVIMAGE%, decydujący o łączu z poprzednią stroną galerii. Zachowanie tokena %PREVIMAGE% w oddzielnym wierszu daje gwarancje, że Photoshop nie pominie innych tokenów w szablonie.

Tokeny plików szablonów HTML (używane w programie Photoshop) służą do definiowania domyślnego stylu internetowej galerii zdjęć. Na podstawie tokenów Photoshop może wygenerować galerię opartą na danych znajdujących się w oknie dialogowym Web Photo Gallery (Galeria zdjęć WWW).

Dostosowując lub tworząc styl galerii, można dodać dowolny token do dowolnego pliku szablonu HTML. Wyjątek stanowią tu tokeny %THUMBNAILS% i %THUMBNAILSROWS%, które mogą się pojawiać wyłącznie w pliku IndexPage.htm. Dodając token należy pamiętać, że konieczne może być również dodanie kodu HTML, który zagwarantuje poprawne użycie tokena.

W plikach szablonów HTML można używać następujących tokenów:

%VLINK%

Decyduje o ostatecznym kolorze aktywnego łącza.

%ALT%

Decyduje o nazwie pliku obrazu.

%ANCHOR%

Umożliwia powrót do miniaturki oglądanego obrazu zamiast do początku indeksu. Dzieje się tak, gdy użytkownik kliknie przycisk Home.

%BANNERCOLOR%

Decyduje o kolorze banera.

%BANNERFONT%

Decyduje o czcionce w tekście banera.

%BANNERFONTSIZE%

Decyduje o rozmiarze czcionki w tekście banera.

%BGCOLOR%

Decyduje o kolorze tła.

%CAPTIONFONT%

Decyduje o czcionce używanej w opisach miniaturek strony głównej.

%CAPTIONFONTSIZE%

Decyduje o rozmiarze czcionki w opisach.

%CAPTIONTITLE%

Wstawia do podpisu tytuł dokumentu pochodzący z informacji o pliku.

%CHARSET%

Decyduje o zestawie znaków na każdej ze stron.

%CONTACTINFO%

Określa informacje kontaktowe dla galerii, na przykład numer telefonu i lokalizację.

%CONTENT_GENRATOR%

Rozwija się do postaci „Internetowa galeria zdjęć Adobe Photoshop CS5”.

%COPYRIGHT%

Wstawia do podpisu informacje dotyczące praw autorskich pochodzące z informacji o pliku.

%CREDITS%

Wstawia do podpisu dane autorów na podstawie informacji o pliku.

%CURRENTINDEX%

Decyduje o łączu do bieżącej strony głównej.

%CURRENTINDEXANCHOR%

Znajduje się w pliku SubPage.htm i wskazuje pierwszą stronę indeksu.

%DATE%

Decyduje o formacie daty w banerze.

%EMAIL%

Określa adres e-mail w informacjach kontaktowych dla galerii.

%FILEINFO%

Decyduje o informacjach o pliku obrazu.

%FILENAME%

Decyduje o nazwie pliku obrazu. Należy używać go wyłącznie dla metadanych pojawiających się jako tekst HTML.

%FILENAME_URL%

Określa nazwę pliku w adresie URL obrazu. Należy używać go wyłącznie dla nazw plików w adresie URL.

%FIRSTPAGE%

Decyduje o łączu do pierwszej strony galerii odnoszącym się do prawej ramki w zestawie ramek.

%FRAMEINDEX%

Decyduje o łączu do strony głównej, które jest wyświetlane w lewej ramce zestawu ramek.

%HEADER%

Decyduje o tytule galerii.

%IMAGEBORDER%

Decyduje o rozmiarze pełnowymiarowego obrazu na stronie galerii.

%IMAGE_HEIGHT%

Uaktywnia pole wyboru Dodaj atrybuty wysokości i szerokości obrazów. Pozwala to przeglądarce użytkowników na pobieranie tych atrybutów, co przyspiesza wczytywanie obrazów.

%IMAGE_HEIGHT_NUMBER%

Ten token jest zastępowany przez (wyłącznie) liczbową wartość odzwierciedlającą szerokość obrazu.

%IMAGEPAGE%

Decyduje o łączu do strony galerii.

%IMAGE_SIZE%

Jeśli pole Zmienianie rozmiarów obrazów jest zaznaczone, w panelu Duże obrazy token ten ma wartość rozmiaru obrazu w pikselach. Jeśli pole nie jest zaznaczone, token zawiera pusty ciąg znaków. Jest to przydatne w przypadku skryptów JavaScript w szablonach, ponieważ może sygnalizować maksymalne i minimalne wartości dla wysokości i szerokości wszystkich obrazów na generowanej witrynie.

%IMAGESRC%

Decyduje o adresach URL pełnowymiarowych obrazów na stronie galerii.

%IMAGE_WIDTH%

Uaktywnia pole wyboru Dodaj atrybuty wysokości i szerokości obrazów. Pozwala to przeglądarce użytkowników na pobieranie tych atrybutów, co przyspiesza wczytywanie obrazów.

%IMAGE_WIDTH_NUMBER%

Ten token jest zastępowany przez (wyłącznie) liczbową wartość odzwierciedlającą szerokość obrazu.

%LINK%

Decyduje o kolorze łączy.

%NEXTIMAGE%

Decyduje o łączu do następnej strony galerii.

%NEXTIMAGE_CIRCULAR%

Ustawia łącze z dużego podglądu obrazu na następny duży podgląd obrazu.

%NEXTINDEX%

Decyduje o łączu do następnej strony witryny.

%NUMERICLINKS%

Umieszcza na podstronach ponumerowane łącza do wszystkich obrazów w dużym podglądzie.

%PAGE%

Decyduje o bieżącej lokalizacji strony (na przykład strona 1 z 3).

%PHOTOGRAPHER%

Decyduje o danych osoby lub organizacji — twórcy (właściciela) zdjęć w galerii.

%PREVIMAGE%

Decyduje o łączu do poprzedniej strony galerii.

%PREVINDEX%

Decyduje o łączu do poprzedniej strony głównej.

%SUBPAGEHEADER%

Decyduje o tytule galerii.

%SUBPAGETITLE%

Decyduje o tytule galerii.

%TEXT%

Decyduje o kolorze tekstu.

%THUMBBORDER%

Decyduje o wielkości obramowań miniaturek.

%THUMBNAIL_HEIGHT%

Uaktywnia pole wyboru Dodaj atrybuty wysokości i szerokości obrazów. Pozwala to przeglądarce użytkowników na pobieranie tych atrybutów, co przyspiesza wczytywanie obrazów.

%THUMBNAIL_HEIGHT_NUMBER%

Ten token jest zastępowany przez (wyłącznie) liczbową wartość odzwierciedlającą wysokość miniaturki.

%THUMBNAILS%

Ten token jest zmieniany w pliku Thumbnail.htm podczas pracy z miniaturkami w stylu ramkowym. W pliku HTML token ten należy umieścić w oddzielnym wierszu, bez znaków podziału.

%THUMBNAIL_SIZE%

Zawiera wartość miniaturki w pikselach na panelu Miniaturki. Jest to przydatne w przypadku skryptów JavaScript w szablonach, ponieważ może sygnalizować maksymalne i minimalne wartości dla wysokości i szerokości wszystkich obrazów na generowaną stronę.

%THUMBNAILSRC%

Decyduje o łączu do miniaturki.

%THUMBNAILSROWS%

Ten token jest zastępowany rzędami miniaturek z pliku Thumbnail.htm dla stylów bezramkowych. W pliku HTML token ten należy umieścić w oddzielnym wierszu, bez znaków podziału.

%THUMBNAIL_WIDTH%

Uaktywnia pole wyboru Dodaj atrybuty wysokości i szerokości obrazów. Pozwala to przeglądarce użytkowników na pobieranie tych atrybutów, co przyspiesza wczytywanie obrazów.

%THUMBNAIL_WIDTH_NUMBER%

Ten token jest zastępowany przez (wyłącznie) liczbową wartość odzwierciedlającą szerokość miniaturki.

%TITLE%

Decyduje o tytule galerii.

%VLINK%

Decyduje o kolorze łączy do stron już odwiedzonych.

Pomoc dostępna szybciej i łatwiej

Nowy użytkownik?