Photoshop: cięcie grafiki na potrzeby WWW

Budowa graficzna stron WWW jest nieraz tak skonstruowana, że wymaga od grafika doskonałej umiejętności cięcia grafiki. Od tego bowiem będzie zależeć cała struktura tabel witryny, a przynajmniej element, który chcemy pociąć.

Pocięta grafika to nic innego jak kilka obrazków wspólnie tworzących całość, czyli pierwotnie stworzoną grafikę. Jej zastosowanie jest różne, spotyka się coraz więcej przykładów jej użycia na stronach WWW; tworzenie layoutu (szaty graficznej) całej strony w programie graficznym wymaga późniejszego cięcia grafiki na poszczególne jej elementy. Dodatkowo Adobe Photoshop posiada funkcję, dzięki której program sam tworzy kod HTML i wstawia na stronę pocięte obrazki, jako całość. Poza tym dla nowicjuszy języka HTML, dzięki pociętej grafice łatwiej jest robić wiele odsyłaczy, niż ma to miejsce w przypadku mapowania linków na jednym obrazku.

Warto także umieszczać wszelkiego rodzaju zdjęcia, rysunki czy po prostu duże pliki graficzne pocięte na stronie WWW. Dlaczego? Ma to swoje plusy. Często błędnie mylimy to, że dzięki pociętej grafice strony będą załadowane szybciej. Każda strona zawierająca, lub składająca się z całości z pociętej grafiki będzie szybciej się ładować (a nie załaduje), ponieważ przeglądarka będzie miała za zadanie otworzyć po kolei każdy plik pociętej grafiki. Wiadomo, że im będzie on mniejszy załaduje go szybciej, a użytkownik będzie mógł zobaczyć, że na stronie „coś się dzieje” i raczej jej nie opuści i poczeka aż załaduje się całość. Warto jednak zaznaczyć, że suma całkowitego czasu oczekiwania w dwóch przypadkach będzie identyczna.

Do pocięcia naszej grafiki w programie Photoshop potrzebne nam będą dwa polecenia: Slice Tool, które da nam możliwość stworzenia tabel, które posłużą za linię dla nazwijmy to nożyczek oraz Save for Web…, które Adobe wprowadził wraz z wersją 5.5, a które posiada możliwość zapisu naszej pracy, z uprzednio pocięta grafiką jako pełnej strony HTML, a przy okazji bardzo dobrej optymalizacji wszystkich plików.

W cięciu grafiki nie ma nic nadzwyczajnego. Przygotowaną grafikę wystarczy… pociąć :). Oto plik graficzny, który posłuży nam za przykład. Uprzednio specjalnie lekko zmodyfikowany (opcja Brightless/Contrast), aby zademonstrować ciekawy efekt:

Należy pamiętać, że tak jak potniemy linie, tak otrzymamy stworzoną przez Photoshop strukturę tabel w kodzie HTML. Uwzględnijmy to i przemyślimy, jaką opcję zastosować i która będzie korzystniejsza dla strony. Zatem z paska narzędzi wybieramy Slice Tool i nakładamy omówione wyżej linie.

Oczywiście technika cięcia całego layoutu jest nieporównywalnie skomplikowana i wymaga czasu, ale przyjmiemy, że pocięliśmy grafikę. Teraz z polecenia File klikamy na Save For Web… Tu odbywa się kompresja grafiki, następnie zapisujemy efekt jako stronę HTML z plikami graficznymi: Co da nam wynik:

I taki kod HTML. Jeśli chcemy z niego korzystać online, musimy nanieść wiele poprawek, np. błędne jest ustawienie kodowania strony, nie ma znaczników META i tak możnaby wymieniać. Program sam tworzy katalog na pliki graficzne.

Oczywiście „gołym okiem” nic nie zobaczymy, ale aby pokazać Wam jak jest to wykonane zmodyfikuję lekko kod HTML, który utworzył Photoshop, dając CellPadding=5 i Border=1. Na rysunku niżej widać, na czym dokładnie to polega:

Teraz mamy już element naszej strony WWW i możemy po lekkich modyfikacjach kodu np. pisać na wybranej części obrazka. Modyfikujemy nasz kod: zmieniamy rysunek3.gif jako tło dolnego rzędu, a jemu przypisujemy wymiary tego samego rysunku, by utrzymać ten sam rozmiar całej tabeli. Oto efekt:

Tu jest coś napisane, jakiś przykładowy tekst

To tylko mały przykład jak wiele zastosowań może mieć cięcie grafiki i jak bardzo jest one użyteczne. Oczywiście istnieją dodatkowe opcje cięcia grafiki, np. skalowalne na elementy o ustalonej szerokości. Mam nadzieję, że jest ono dla Was proste.

Warto także wspomnieć o konkurencji Photoshop. W Paint Shop Pro funkcja cięcia grafiki doszła do programu w wersji 7 i jest oczywiście dostępna w najnowszych wydaniach. Służy do tego krok: File->Export->Image Slicer. Inne firmy nie pozostały w tyle i także zaopatrzyły swoje programy w opcję cięcia grafiki. Są to m.in. Fireworks czy Splitz.

Wszystkie omówione programy to jak wiemy płatny software. Ale znajdzie się kilka narzędzi dla grafików amatorów, którzy także chcą użyć opcji cięcia grafiki. W przypadku programów bezpłatnych mechanizm samego cięcia jest dość podobny. Program mając wskazany plik graficzny sam, bądź przy udziale użytkownika układa siatkę, która posłuży za „linię dla nożyczek”, poczym zapisze wynik jako stronę HTML z pociętą już grafiką. Przykłady takich programów: PictureClip v2.5, a także PictureDicer znajdziecie w dziale Pliki/Programy graficzne.