Tworzenie internetowych 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.

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 internetowej galerii zdjęć

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

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.

• Aby przekonwertować pojedynczy obraz, wybierz polecenie Edycja > Konwertuj na profil i wybierz profil sRGB. Zobacz Przypisywanie lub usuwanie profilu kolorów (Illustrator, Photoshop).

• Aby przekonwertować cały folder obrazów, należy użyć Procesora obrazów. Wybierz polecenie Plik > Skrypty > Procesor obrazów. Zobacz Konwertowanie plików za pomocą funkcji Procesor obrazó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.

Opcje galerii zdjęć WWW

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

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

Używa kodowania UTF-8.

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

Są zachowywane metadane.

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 galerii.

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

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

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

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

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

(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.

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.

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

(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).

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

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

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

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.

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

(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).

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

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

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

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),.

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

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

Style internetowej galerii zdjęć

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:

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

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:

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

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

Decyduje o układzie strony głównej.

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

Dostosowywanie stylów internetowej galerii zdjęć

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 (%).

Dostosowanie lub tworzenie stylu internetowej galerii zdjęć

Tokeny stylów internetowych galerii zdjęć

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:

Decyduje o ostatecznym kolorze aktywnego łącza.

Decyduje o nazwie pliku obrazu.

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

Decyduje o kolorze banera.

Decyduje o czcionce w tekście banera.

Decyduje o rozmiarze czcionki w tekście banera.

Decyduje o kolorze tła.

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

Decyduje o rozmiarze czcionki w opisach.

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

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

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

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

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

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

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

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

Decyduje o formacie daty w banerze.

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

Decyduje o informacjach o pliku obrazu.

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

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

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

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

Decyduje o tytule galerii.

Decyduje o rozmiarze pełnowymiarowego obrazu na stronie galerii.

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.

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

Decyduje o łączu do strony galerii.

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.

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

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.

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

Decyduje o kolorze łączy.

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

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

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

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

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

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

Decyduje o łączu do poprzedniej strony galerii.

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

Decyduje o tytule galerii.

Decyduje o tytule galerii.

Decyduje o kolorze tekstu.

Decyduje o wielkości obramowań miniaturek.

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.

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

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.

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ę.

Decyduje o łączu do miniaturki.

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.

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.

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

Decyduje o tytule galerii.

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