Pawel Zakrzewski - Adobe Certified Expert | Adobe Community Expert

Artykuł pochodzi z magazynu PSD

Trudno chyba wyobrazić sobie stronę WWW, gdzie nie byłoby żadnych elementów graficznych. Oczywiście są takie, jednak wyłamują się one z kanonu typowych stron WWW i nie będziemy się nimi zajmować. Typowe strony nie tylko zawierają wiele różnorodnych elementów graficznych, często same są wspaniałym projektem graficznym przekształconym w stronę WWW.

Naturalnie w wielu tych pracach wspiera nas nieodłączny przyjaciel – Adobe Photoshop. Na łamach tego tutoriala chciałbym przedstawić sposoby wykorzystania programu Adobe Photoshop, jako narzędzia do budowy elementów strony WWW.

Optymalizacja grafiki pod kątem Internetu

Proces przygotowania zdjęć i innych elementów graficznych do użycia w Internecie zwany jest często optymalizacją. Cóż to takiego jest ta optymalizacja? W skrócie, to zestaw działań mających na celu uzyskanie pliku graficznego o najmniejszej możliwej wadze (czas ładowania) przy zachowaniu jego najlepszej możliwej jakości (dobry wygląd). Naturalnie, samo stwierdzenie nie jest całkiem trudne do realizacji,  jednak w wielu sytuacjach wymaga naprawdę elastycznego podejścia do własnej pracy.

Zanim jednak przejdziemy do konkretnych przykładów, spróbujmy prześledzić ogólne zasady przygotowania grafiki pod kątem Internetu.

Ogólne zasady przygotowania grafiki do użycia w Internecie

Prezentujemy grafikę w skali 1:1. Unikamy więc skalowania obrazów w programie typu Adobe Dreamweaver czy Flash. Programy te jak i przeglądarka internetowa bardzo źle skalują grafikę i w znacznym stopniu ingerują w jej jakość. Prezentacja grafiki w skali 1:1 pozwala zachować dobrą jakość zaś z drugiej strony wymaga często tworzenia osobnych miniaturek np. podczas tworzenia galerii.

Wszystkie projekty tworzymy zawsze w rozdzielczości zwanej ekranową – 72ppi. Pozwoli to na najlepsze dopasowanie grafiki do prezentacji na monitorze. Unikamy wyższej rozdzielczości aby zachować możliwie najlżejsze pliki.

Unikamy modelu CMYK, takie praca doskonale nadają się do druku, jednak nie do prezentacji w Internecie. Projekty tworzone z myślą o prezentacji w Internecie tworzymy w modelu RGB lub palecie indeksowanych kolorów o ile nasz projekt z założenia wymaga mniejszej liczby użytych barw.

Optymalizacja grafiki pod kątem Internetu oznacza nie tylko odpowiednie dobranie stopnia kompresji ale także użycia odpowiedniego formatu graficznego. Jakie są ogólne zasady przygotowania różnorodnych formatów plików graficznych w Internecie? Tu także odpowiedź jest stosunkowo prosta. Wszędzie tam, gdzie używamy zdjęcia stosujemy format JPEG, wszędzie tam, gdzie w naszej pracy występuje mała ilość kolorów korzystamy z formatu GIF.

Tam, gdzie zależy nam na jakości, przezroczystości możemy pokusić się o użycie formatu PNG, jednak w swojej pracy nie stosuję go zbyt często. Format ten daje nam bardzo ciekawe możliwości wykorzystania przezroczystości do budowy różnych wersji kolorystycznych strony. Co ważne w starszych wersjach przeglądarki Internet Explorer przezroczystość ta nie jest jednak poprawnie interpretowana. Oczywiście są triki, które zmuszają Explorera do poprawnej interpretacji przezroczystości, jednak to już nieco bardziej zaawansowane działania.

Porównanie formatów graficznych

• JPEG – miliony stratna określenie dwóch zakresów kompresji w pliku tzw. Selective JPEG fotografie i prace z dużą ilością kolorów i  płynnymi przejściami
• GIF – do 256 bezstratna LZW + możliwa dodatkowa stratna możliwość użycia przezroczystości i animacji logotypy, znaczki, proste ikony, flagi, ozdobniki, bulle ty z małą ilością kolorów i bez przejść tonalnych
• PNG – w zależności od głębi bitowej od 256 do milionów bezstratna LZW lub brak maska przezroczystości, różne głębie bitowe: 8, 16, 24, 32 bity dla różnych zastosowań prace o wysokiej jakości, grafiki  z przezroczystością. Doskonały do użycia w programie Flash

Sam proces optymalizacji grafiki nie jest trudnym zadaniem. Za pomocą polecenia File>Save for Web & Devices otwieramy duże okno dialogowe, które umożliwia precyzyjne dobranie parametrów optymalizacji.

Okno Save for Web & Devices pozwala na podgląd pracy w kilku oknach roboczych jednocześnie. To bardzo wygodna sprawa. W górnej części okna zlokalizowane są cztery zakładki: Original, Optimized, 2-Up oraz 4-Up, które umożliwiają przełączenie podglądu pracy widocznej w oknie .

Zazwyczaj, najlepiej sprawdza się podgląd 2-Up, pozwala on bowiem szybko porównać oryginalną pracę (po lewej) z obrazem optymalizowanym widocznym po prawej stronie okna.

Oczywiście, jeśli chcielibyśmy mieć więcej możliwości podglądu można skorzystać z podglądu 4-Up, który pozwala podzielić ekran na cztery niezależne podglądy. Jednak moim zdaniem, nie jest to wygodne rozwiązanie. Nie tylko sam podgląd działa nam wolniej, ale także praca z widokiem dzielonym na cztery okna zajmuje nam więcej czasu. Początkowo bardzo lubiłem ten podgląd, jednak wraz z nabraniem doświadczenia preferuje widok dzielony na dwa okna robocze.

Kluczem do okna Save for Web & Devices jest zestaw narzędzi zlokalizowanych po prawej stronie okna. W tym miejscu wybieramy odpowiedni format graficzny  oraz określamy docelową liczbę kolorów podczas zapisu plików GIF  lub stopień kompresji w przypadku plików JPEG.

Wprowadzone zmiany porównujemy z oryginałem widocznym po lewej stronie. Jeśli wygląd obrazu oraz jego waga odpowiadają naszym potrzebom za pomocą przycisku Save zapisujemy kopię naszej pracy w wybranej lokalizacji.

Warto zwrócić uwagę, że pliki GIF oferują nam dodatkową kompresję stratną. Jednak w większości przypadków efekty jej działania nie dają dobrych wyników.

W dolnej części okna Save For Web & devices mamy możliwość wskazania wielkości finalnej grafiki. Warto zwrócić uwagę, że program automatycznie dostosowuje rozdzielczość pracy do 72 ppi zaś w polach W i H określamy jedynie docelowy jej rozmiar.

Przygotowanie grafiki do użycia w programie Dreamweaver – dopasowanie wielkości

W sytuacji, gdy chcielibyśmy zamieścić dowolny plik graficzny na stronie WWW, zanim jeszcze wywołamy polecenie Save For Web & Devices, warto zwrócić uwagę na jej rozmiary.

W większości przypadków grafika na stronie internetowej powinna być doskonale dopasowana do jej układu. O ile użycie grafiki zbyt małej nie powoduje negatywnych konsekwencji dla zachowania układu strony, wykorzystanie zbyt dużej grafiki może doprowadzić do całkowitego zniszczenia przygotowanego układu. To ważne, nawet kilka pikseli szerokości może doprowadzić do dramatycznych zmian w układzie strony. Jak zatem optymalnie przygotować grafikę na stronę?

Osobiście, staram się zawsze korzystać z obrazków o tej samej wielkości. Oczywiście nie zawsze jest to możliwe. W sytuacji, gdy część fotografii przygotowana jest w układzie poziomym, inne zaś w pionowym trudno jest odnaleźć jeden wspólny rozmiar dobry do ich prezentacji. Jeśli jest to możliwe, staram się kadrować wszystkie obrazy tak by utworzyć kolekcję prac poziomych ponieważ takie nieco lepiej wyglądają na stronie.

Szybkie kadrowanie i dopasowanie wielkości z użyciem narzędzia Crop Tool

Najwygodniejszym sposobem kadrowania i dopasowania wielkości jest użycie narzędzia Crop Tool. Niezwykle często wykorzystujemy je do usuwania zbędnych obszarów naszej pracy, prawdopodobnie rzadziej w celu przygotowania grafiki o określonym rozmiarze do zastosowań internetowych.

Ustawiamy opcje narzędzia Crop Tool

Podstawą wygodnego użycia narzędzia Crop Tool jest dobre określenie jego opcji. W tym celu, zaznaczamy narzędzie Crop w palecie narzędziowej (C), a następnie w górnym pasku opcji wprowadzamy odpowiednio: Width – docelowa szerokość obrazu, Height – docelowa wysokość obrazu oraz Resolution – docelowa rozdzielczość czyli zawsze w przypadku Internetu jest to 72 piksele na cal.

Warto w tym miejscu zwrócić uwagę na fakt, by ZAWSZE wprowadzać odpowiednie jednostki dla narzędzia Crop.

Zwykle nasz program (Photoshop) korzysta z innych jednostek, dlatego w polach Width oraz Height prowadzamy wielkość używając pikseli. Przykładowo, chcąc przygotować obrazek o wielkości 400×200 pikseli o rozdzielczości 72ppi powinniśmy wprowadzić następujące dane:

• Width: 400px
• Height: 200px
• Resolution: 72 Pixels/inch

Teraz nie pozostaje nam nic innego jak ręcznie określić właściwy kadr. Co niezwykle wygodne, za pomocą uchwytów kontrolnych możemy łatwo dopasować wielkość kadru lub nawet przesunąć go w inne położenie. Co ważne, o ile to konieczne, możemy także obracać obszar zaznaczenia by lepiej dostosować go do naszych potrzeb. W rezultacie kadrowania zawsze powstanie poziomy obraz o określonych wcześniej parametrach.

Uwaga, należy zwrócić uwagę, by kształt zaznaczenia (choćby niewielki fragment) nie wychodził poza obszar grafiki. W przeciwnym wypadu taki obszar wypełniony zostanie aktualnym kolorem tła (Background Color) ustalonym w Photoshopie.

Jeśli wybrany kadr odpowiada naszym oczekiwaniom za pomocą dwukrotnego kliknięcia lub klawisza Enter potwierdzamy zamierzone kadrowanie, a następnie używając polecenie Save For Web & Devices zapisujemy optymalizowany obraz w docelowej lokalizacji.

Smar Object – tak, ale w Dreamweaverze CS4

Jedną z niezwykle przydatnych nowości programu Adobe Dreamweaver CS4 jest rewelacyjna współpraca z Photoshopem. Dziś do budowy strony WWW możemy z powodzeniem wykorzystać wielowarstwowe, robocze pliki PSD bez obawy o poprawność przygotowania strony. Jak to możliwe? W tabelce w pierwszej części artykułu wskazałem na najpopularniejsze formaty wykorzystywane w Internecie. Zabrakło tam formatu PSD i nie jest to błąd. Pliki PSD nie są bowiem widoczne dla przeglądarek i w tej postaci nie można ich wykorzystać w codziennej pracy Webmastera.

Jest jednak zupełnie inny sposób użycia formatu PSD do zastosowań internetowych. Jeśli do budowy strony WWW wykorzystamy plik PSD Photoshopa, zostanie on automatycznie skonwertowany na postać JPEG, GIF lub PNG w zależności od naszych potrzeb za pomocą wygodnego okna Image Preview.

W rezultacie na stronie WWW powstanie nam tzw. Smart Object, który wyświetla grafikę zrozumiałą dla wszystkich przeglądarek. Jeśli jednak w oryginalnym pliku PSD wprowadzimy dodatkowe zmiany, Dreamweaver CS4 powiadomi nas o tym fakcie. Czerwony kolor ikony Smart Objectu wskazuje na wprowadzone modyfikacje oryginalnej grafiki. Teraz wystarczy wybrać polecenie Update i grafika na stronie zostanie zaktualizowana bez konieczności użycia polecenia Save For Web & devices oraz spłaszczania warstw.

Każda zmiana oryginalnego PSD jest natychmiast widoczna w Dreamweaverze CS4. W rezultacie do budowy ciekawej grafiki nagłówkowej niezwykle często korzystam z formatu PSD. Pozwala mi to łatwo i szybko aktualizować grafikę wprowadzając jedynie stosowne zmiany w źródłowym pliku PSD Photoshopa. Osobiście bardzo często korzystam z tych możliwości.

Co ważne, nie musimy wcale aktualizować grafiki na stronie. Jeśli pozostawimy obraz w oryginalnej postaci, na stronie wciąż pozostanie starsza wersja obrazu. Tylko ca nam to daje?

Kopiuj i wklej

Tak to nie sen, dziś a precyzyjnie rzecz ujmując od wersji Adobe Dreamweaver CS3 możliwe jest kopiowanie plików graficznych z Photoshopa i wklejanie ich bezpośrednio w wybrane miejsce na stronie WWW.

W takim przypadku, Dreamweaver wyświetli okno dialogowe Image Preview, gdzie możemy precyzyjnie określić format graficzny oraz jego stopień kompresji. Co ważne w zakładce Image, możemy nawet określić wielkość wklejonej grafiki i jej rozdzielczość. Wklejony plik graficzny zostanie zapisany w wybranej podczas wklejania lokalizacji. To także całkiem wygodne działanie, pozwala bowiem optymalizować grafikę bez konieczności żmudnego kadrowania, ustalania wielkości i zapisu w Photoshopie. Ot tylko kopiuj i wklej. Jakie to proste!