Karkonoska Państwowa Szkoła Wyższa

Jelenia Góra ul. Lwówecka, tel. 75 645 33 00

Grafika w Photoshop

Praktyczne tworzenie grafiki na strony internetowe

    Grafika na stronach bardzo często jest zbyt duża lub zapisana w nieodpowiednim formacie, co może powodować zbyt długie ładowanie się strony.
    Zbyt długi czas oczekiwania na załadowanie się grafiki na stronie internetowej może zniechęcić odwiedzających oraz negatywnie wpływać na pozycję witryny w wynikach wyszukiwania popularnych wyszukiwarek. Warto zatem zainteresować się formatem grafiki na stronach internetowych i sposobem ich doboru. Oprócz określenia formatu obrazu ważny jest dobór odpowiedniej rozdzielczości obrazu, która ma jeszcze jedną ważną cechę; wpływa bezpośrednio na wielkość obrazu na monitorze. Wynika to z budowy monitora, dla którego liczba pikseli, którą może wyświetlić, jest w zasadzie stała. Na przykład standardowy monitor PC wyświetla 72 piksele na cal wysokości czy szerokości. Obecnie w zasadzie żaden nowoczesny monitor nie posiada już tak niskiej rozdzielczości, jednak w zastosowaniach internetowych stosuje się rozdzielczość 72 ppi jako standard. Co oznacza, że każda bitmapa przygotowana do oglądania na monitorze/wyświetlaczu będzie wyświetlana z tą rozdzielczością. home image     Istotne jest żeby nie umieszczać np. w Internecie obrazów o nadmiarowej rozdzielczości, gdyż zabierają więcej miejsca na serwerze a dodatkowo przeglądarka i tak musi je skalować aby zmieściły sie w oknie, ewentualnie trzeba używać przewijania żeby obejrzeć cały obraz.

Modele kolorów i ich zastosowania

    Spośród modeli barw dostępnych w grafice komputerowej można wymienić następujące grupy kolorów: skala szarości, RGB, CMY, CMYK, HSV, CIE. Najpopularniejszym modelem kolorów stosowanym w grafice komputerowej jest model RGB.
    Model RGB bazuje na założeniu, że dostępne są trzy barwy podstawowe R (czerwony), G (zielony) i B (niebieski). Wszystkie barwy, które można uzyskać za pomocą mieszania tych składowych są reprezentowane przez punkty należące do sześcianu jednostkowego zdefiniowanego w układzie współrzędnych R, G, B.
home image     Model jest pokazany na rysunku. W wierzchołkach sześcianu są reprezentowane barwy R,G,B,C,M,Y oraz czarna K (blacK) i biała W (White). Na przekątnej łączącej wierzchołki K i W znajdują się odcienie szarości. Współrzędne R, G i B zmieniają sie w zakresie od 0 do 255, ponieważ na każdą składową przypada jeden bajt. Wartość 0 oznacza brak światła, a 255 to światło o maksymalnej jasności. Kolor odpowiadajacy wartościom RGB = (255, 0, 0) to czysta czerwień, RGB = (0, 255, 0) to czysty zielony, a RBG = (0, 0, 255) to czysty niebieski.
    Model CMY ma podobne cechy jak model RGB. Jest on również reprezentowany za pomocą jednostkowej kostki sześciennej, z tym, że w układzie współrzędnych C,M,Y. Model ten pokazano na rysunku.
home image     Model ten jest modelem subtraktywnym i wykorzystywany jest głównie w drukarstwie. W praktyce stosowany jest model CMYK, w którym ze względów praktycznych dodatkowo uwzględnia się barwę czarną - dzięki temu uzyskuje się lepszą czerń niż w przypadku uzyskiwania czerni ze składowych C, M i Y. Ten model nosi oznaczenie CMYK.
    Modele RGB i CMY to modele dopełniające i można je zobrazować graficznie w ten sam sposób. Wszystkie kolory opisywane przez model CMY to te same kolory, co opisywane przez model RGB. Jest to zatem ten sam sześcian RGB, tylko widziany od przeciwległego wierzchołka - w modelu CMY współrzędne (0, 0, 0) to kolor biały, a (255, 255, 255) to kolor czarny, czyli odwrotnie niż w modelu RGB.
home image     Z innych modeli znajdujących zastosowanie w Photoshopie należy wymienić; Tryb LAB, Tryb Grayscale oraz Tryb Bitmap.
    Tryb LAB - jest to model powstawania kolorów, całkowicie niezależny od wykorzytywanych urządzeń zewnętrznych (monitor, drukarka). Dzięki oderwaniu definicji kolorów od urządzeń tryb LAB doskonale sprawdza się podczas pracy z kolorem w aplikacjach graficznych, w tym i programy Adobe, które korzystają z przestrzeni LAB do wykonywania przeliczeń w obrazie, co oznacza, że każde przekształcenie odbędzie się właśnie w trybie LAB.
    Tryb Grayscale opisuje nam obraz zapisany w odcieniach szarości, a każda praca zapisana w tym trybie zajmuje mniej miejsca na dysku.
    Tryb Bitmap w programie Photoshop ma zastosowanie do opisu obrazów czarno-białych. W tym przypadku podczas pracy z grafiką nie ma miejsca na odcienie szarości. Dostępny jest jedynie kolor czarny lub jego brak.
    W przypadku Photoshopa informacje o natężeniu składowych poszczególnych modeli kolorów możemy odczytać na palecie kolorów (rysunek).

Rysunek - palety kolorów Photoshopa

Zarządzanie kolorami

    Nierozłącznie związany z tematyką kolorów jest problem wiernego ich odzwierciedlenia na ekranie komputera i później na wydruku. W zasadzie nie takich urządzeń, które gwarantowałyby stuprocentową zgodność kolorów na wszystkich etapach pracy z obrazem. Istotą procesu zarządzania kolorem jest przybliżenie sposobu wyświetlania barw na monitorze do postaci zgodnej z oryginałem naszej pracy. Proces ten składa się z dwóch etapów, tj.:

  • w pierwszym chcielibyśmy, aby monitor przedstawiał kolory najwierniej, jak to tylko możliwe, zgodne z rzeczywistością, którą możemy dostrzec w naturze - jest to kalibracja monitora (wykonana przy użyciu kalibratora).
  • w drugim chcieliśmy zobaczyć na monitorze kolory zgodne z tymi, które uzyskamy w procesie druku CMYK - jest to wykorzystanie odpowiednich profili CMYK.

Formaty plików graficznych

    Do najpopularniejszych formatów zapisu grafiki bitmapowej dla Photoshopa zaliczamy;

  • Photoshop PSD - uniwersalny format zapisu plików programu Photoshop. Pozwala nie tylko zapisywać warstwy, dodatkowe kanały, ścieżki, maski czy przezroczystość, ale jest także doskonale interpretowany przez wszystkie programy firmy Adobe.
  • Format TIFF - został ooracowany z myślą o aplikacjach służących do składu publikacji i obsługiwany jest przez wszystkie programy do edycji grafiki. Pliki zapisane w tym formacie mają rozszerzenie ".tif" lub ".tiff". Format pozwala na zapisywanie obrazów stworzonych w trybie kreskowym, skali szarości oraz w wielu trybach koloru i wielu głębiach bitowych koloru. Może zawierać prewkę (podgląd w niskiej rozdzielczości), ścieżki i kanały alfa, profile koloru, komentarze tekstowe. TIFF umożliwia stosowanie kompresji bezstratnej typu LZW oraz CCITT Group 4. Używany jest obecnie w DTP, grafice trójwymiarowej czy w obrazowaniu medycznym.
  • Format PNG - jest alternatywą dla formatu GIF. Format ten ma zastosowanie do zapisu pojedyńczych plików graficznych, w tym zdjęć. Zaletą jest wysoki poziom kompresji bezstratnej i tworzenie plików niewielkich rozmiarów. Format PNG znajduje różne zastosowania. Przewiduje tryby o niskiej ilości kolorów (paletowe od 2 do 256 oraz tryb skali szarości), przydatne w sytuacjach, gdy nadmiarowa informacja jest niewskazana (tj. gdy ważniejsza od subiektywnej wierności oryginałowi jest treść obrazu).
  • Format JPG, JPEG - Jest to najbardziej popularny format plików graficznych z kompresją stratną, powszechnie stosowany na stronach WWW, w aparatach cyfrowych, skanerach. Jest to standard kompresji statycznych obrazów rastrowych, przeznaczony głównie do przetwarzania obrazów naturalnych (zdjęć satelitarnych, pejzaży, portretów itp.), charakteryzujących się płynnymi przejściami barw oraz brakiem lub małą ilością ostrych krawędzi i drobnych detali. W wyniku kompresji stratnej, część szczegółów obrazu bezpowrotnie jest tracona a kosztem tego otrzymane pliki są mniejsze. Poziom kompresji, a tym samym stopień jakości obrazu, może być regulowany (rysunek niżej). Zastosowanie tej metody jest możliwe, dzięki odrzuceniu przez zmysły najmniej istostnych danych o obrazie, pozostawiając dane o wyższej wartości, potrzebne do rozpoznania informacji.


Rysunek - Różny stopień jakości obrazu jpg