Podręcznik użytkownika Anuluj

Praca z grafiką internetową

Narzędzia internetowe programu Photoshop ułatwiają tworzenie fragmentów kompozycji strony internetowej oraz wystawienie pełnych stron internetowych w predefiniowanych lub dostosowanych formatach.

  • Warstwy i plasterki mogą służyć do projektowania stron internetowych i elementów ich interfejsu. (Zobacz Warstwy i Podział stron internetowych na plasterki).

  • Kompozycje warstw mogą być używane w różnych kompozycjach stron lub do eksportowania wersji strony. (Zobacz Kompozycje warstw).

  • Tworzony tekst najazdowy lub grafiki przycisków mogą być importowane do programów Dreamweaver lub Flash.

  • Animacje internetowe można tworzyć za pomocą panelu Animacja, a następnie eksportować w formie animowanych plików GIF lub plików QuickTime. Zobacz Tworzenie animacji poklatkowych.

  • Tworząc internetową galerię zdjęć w programie Adobe Bridge, można szybko przekształcić zestaw obrazów w interaktywną stronę internetową. Program zawiera szeroki wybór szablonów o profesjonalnym wyglądzie.

Nagranie wideo przedstawiające projektowanie stron internetowych przy użyciu programów Photoshop i Dreamweaver można obejrzeć na stronie Ulepszanie obrazu na stronę internetową przez otwarcie programu Photoshop w programie Dreamweaver.

Tworzenie obrazów reagujących na najazd

Najazd to przycisk lub obraz na stronie internetowej, który powoduje zmianę w momencie umieszczenia nad nim kursora myszy. Aby utworzyć najazd, potrzebne są przynajmniej dwa obrazy: obraz wstępny dla stanu zwykłego i drugi obraz dla stanu zmienionego.

Program Photoshop posiada kilka użytecznych narzędzi do tworzenia obrazów najazdu:

  • Obrazy wstępne i zmienione mogą być tworzone przy pomocy warstw. Utwórz zawartość na jednej warstwie, powiel te warstwę i edytuj ją, tworząc podobną zawartość i zachowując wyrównanie pomiędzy warstwami. Podczas tworzenia efekty najazdu, można zmienić styl warstwy, jej widoczność lub położenie, wprowadzić zmiany dotyczące koloru lub tonów lub zastosować efekty filtrów. Zobacz Powielanie warstw.

  • Style warstw mogą być też używane do stosowania na warstwie podstawowej efektów, takich jak kolorowe nakładki, cienie, poświaty lub płaskorzeźba. Aby utworzyć parę najazdu, włącz lub wyłącz styl warstwy i zapisz obraz w każdym ze stanów. Zobacz Efekty i style warstw.

  • Używając predefiniowanych stylów przycisków z panelu Style, można szybko tworzyć przyciski najazdów ze stanami zwykłym, najazdu myszy i wciśnięcia. Rysuj podstawowe kształty przy pomocy narzędzia Prostokąt i stosuj style (np. Faza zwykła) do automatycznego przekształcania prostokąta w przycisk. Skopiuj warstwę i zastosuj inne predefiniowane style (np. Faza najazd myszy) i utwórz dodatkowe stany przycisku. Zapisz każdą warstwę jako oddzielny obraz i utwórz ostateczny zestaw przycisku najazdu.

  • Użyj okna Zapisz dla Internetu i urządzeń do zapisywania obrazów najazdów w formacie zgodnym z Internetem i w postaci plików o zoptymalizowanej wielkości. 

Uwaga:

Po zapisaniu obrazów najazdów, zastosuj konwencję nadawania nazw do rozróżnienia obrazu podstawowego (bez stanu najazdu) i drugiego obrazu stan najazdu).

Po utworzeniu obrazu najazdu określonego w programie Photoshop użyj programu Dreamweaver w celu umieszczenia obrazów na stronie internetowej i automatycznego dodania kodu JavaScript dla operacji najazdu.

Eksportowanie do formatu Zoomify

Obrazy o wysokiej rozdzielczości mogą być wysyłane do Internetu, jeśli jego użytkownicy mają możliwość tworzenia panoramy i powiększania wyświetlającego więcej szczegółów. Obraz zwykłej wielkości jest wczytywany mniej więcej tyle samo czasu, ile plik JPEG podobnej wielkości. Program Photoshop eksportuje pliki JPEG i plik HTML, które mogą być pobierane na serwer WWW.

  1. Wybierz polecenie Plik > Eksportuj > Zoomify i określ opcje eksportu.

    Szablon

    Ustaw tło i nawigację dla obrazu wyświetlanego w przeglądarce

    Lokalizacja wyjściowa

    Określa nazwę i położenie pliku.

    Opcje układania obrazu

    Określa jakość obrazu.

    Opcje przeglądarki

    Określa szerokość i wysokość pikseli dla obrazu podstawowego w przeglądarce odbiorcy.

  2. Wyślij pliki HTML i obrazy do serwera internetowego.

Posługiwanie się wartościami kolorów w kodzie szesnastkowym

Program Photoshop może wyświetlać wartości szesnastkowe kolorów obrazu lub kopiować taką wartość szesnastkową koloru dla pliku HTML.

Wyświetlanie szesnastkowych wartości kolorów na panelu Informacje

  1. Wybierz polecenie Okno > Informacje lub kliknij zakładkę panelu Informacje w celu wyświetlenia tego panelu.
  2. Wybierz polecenie Opcje panelu z menu panelu. Wybrać opcję Kolor Web z menu Tryb w sekcji Pierwszy odczyt koloru lub Drugi odczyt koloru. Kliknąć na przycisku OK.
  3. Umieścić wskaźnik na kolorze, dla którego mają zostać wyświetlone wartości szesnastkowe.

Kopiowanie koloru jako wartości szesnastkowej

Program Photoshop kopiuje kolory jako atrybut HTML COLOR zawierający wartość szesnastkową (color=#xxyyzz) lub jako samodzielną wartość szesnastkową.

  1. Wykonaj jedną z następujących czynności:
    • Z włączonym narzędziem Kroplomierz przesuń wskaźnik nad kolor, który ma zostać skopiowany. Kliknij prawym przyciskiem myszy (Windows) lub kliknij, przytrzymując klawisz Control (Mac OS), i wybierz polecenie Kopiuj kolor jako HTML lub Kopiuj kod szesnastkowy koloru.

    • Określ kolor narzędzia przy użyciu panelu Kolor lub Próbki albo za pomocą próbnika kolorów Adobe. Z menu panelu Kolor wybierz polecenie Kopiuj kolor jako HTML lub Kopiuj kod szesnastkowy koloru.

    • W oknie dialogowym Zapisz dla Internetu kliknij próbkę koloru lub wybierz polecenie Otoczka > Inna. W Próbniku kolorów Adobe, kliknij wartość szesnastkową prawym przyciskiem myszy i wybierz polecenie Kopiuj.

  2. Otwórz interesujący cię plik w aplikacji do edycji HTML i wybierz polecenie Edycja >Wklej.

Pomoc dostępna szybciej i łatwiej

Nowy użytkownik?