Spis treści Przedmowa...................................................................................................................... 7 1. Dobra zabawa ............................................................................................................... 15 Co było dobre dla dziadka… Narysuj mnie! $$$$$$$$$$$$ Grafika: wspaniały smak, zero nadwagi Przestań! To boli! Galeria Żałosnej Grafiki Internetowej Czas na cudowną różnorodność
16 18 20 22 24 25 36
2. Obrazy. ...........................................................................................................................39 Niezbędne podstawy grafiki rastrowej i modelu RGB JPEG GIF — format bezstratny PNG Opisywanie, zagnieżdżanie i optymalizacja obrazów Publikacja obrazów w sieci WWW a prawa autorskie. Hotlinking Przechowywanie obrazów
41 46 54 57 60 63 68
3. Z aparatu do internetu . .................................................................................................75 Warsztat pracy fotografa Praca na plikach w formacie RAW Edytowanie zdjęć: praca ze światłem Dopasuj kolor w grupie, czyli optymalizacja grupowa Czerń i biel zamiast kolorów Tworzenie atrakcyjnego materiału ilustracyjnego Wycinanki i wyodrębnienia Przegląd aplikacji służących do edycji obrazów Internetowe edytory obrazów: Splashup i Picnik Organizacja i obróbka zbiorów zdjęć Obróbka zdjęć: jeszcze raz o procesie przenoszenia fotografii z aparatu do internetu
Spis treści
76 78 84 86 101 105 110 113 133 137 142
3
4. Internet w obrazkach . ................................................................................................ 145 Sztuka tworzenia miniatur o odpowiedniej wielkości Sztuka kreatywnego tworzenia miniatur Powiększające się miniatury Umieszczanie zdjęć na stronach: okraszanie tekstu obrazami Sztuka układania zdjęć na stronach Galerie i pokazy slajdów wygenerowane programowo Aplikacje do tworzenia galerii, działające po stronie serwera Odrobina kodu
145 152 161 163 168 179 186 192
5. Grafika użytkowa........................................................................................................ 195 Skrzynka z narzędziami do obróbki grafiki: kształty, warstwy, gradienty i rozmycie Lśniące przyciski: żelowe, mokre albo szklane Nie tylko przyciski: plakietki i ikony Refleksje na temat refleksów i kilka dodatkowych słów na temat cieni Analiza istniejących projektów W jednej chwili — zrzuty ekranu
196 198 209 218 232 234
6. Wektorowo — początki i języki znaczników. ........................................................... 241 WebCGM Formaty trójwymiarowe Język VML Witaj, SVG!
242 242 247 255
7. Obóz szkoleniowy neofitów SVG ...............................................................................265 Różne specyfikacje SVG — Full, Basic i Tiny Obsługa standardu w przeglądarkach — nieprzystępność czy integracja? Struktura przestrzeni SVG Elementy technologii SVG Ścieżki, wzory i markery Ponowne spotkanie z oknem roboczym i atrybutem viewBox Transformacje Narzędzia technologii SVG Tajniki statycznej grafiki SVG
266 266 273 274 295 307 312 317 323
8. CSS — wyższy poziom wtajemniczenia. ...................................................................329 Magia selektorów Wskazówki i porady dotyczące CSS Plastyczny znacznik div Narzędzia i programy do obsługi plików CSS
4
|
Spis treści
330 339 341 355
9. Projektowanie stron WWW dla laików. ....................................................................365 Zasady projektowania stron WWW Strony WWW są jak ogry, a ogry mają warstwy Projektowanie elastyczne Kolory — jak sprawić, by strona była wesoła, jak sprawić, by była smutna Typografia na stronie WWW Narzędzia projektanta Dodatkowa lektura
366 378 388 394 399 404 407
10. Grafika dynamiczna ....................................................................................................409 Szybkie wprowadzenie do modelu obiektów dokumentu DOM Wyróżnianie kolorem Zmienianie klasy i przezroczystości Programowanie obrazów Akordeon — kompresja przestrzeni
410 419 423 432 436
11. Tworzenie na kanwie. ................................................................................................445 Obsługa obiektu canvas i Microsoft Silverlight w różnych przeglądarkach Podstawy pracy z obiektem canvas Zachowywanie stanu rzeczy Warstwy i przycinanie ścieżek Możliwości obiektu canvas
445 448 463 465 470
12. Dynamiczne zastosowania znacznika canvas i języka SVG ..................................... 481 Osadzanie animacji w kodzie Obsługa SVG za pomocą skryptu Skrypty osadzone Animowany zegar — „Witaj, świecie!” animowanego i interaktywnego kodu SVG Oprogramowanie kanwy — powiększenie
482 489 489 494 505
13. Magia obrazów — różne narzędzia obróbki grafiki . ................................................517 Prezentowanie zdjęć — pokaz slajdów w trzech krokach Obróbka obrazów za pomocą PHP/GD Kto potrzebuje interfejsu? — Magia ImageMagick Programowanie z ImageMagick i IMagick
518 521 536 551
14. Nieco geografii . ...........................................................................................................555 Korzystanie z map w serwisie Google Mapy udostępniane przez serwis Yahoo! Maps Geografia w internecie
556 564 571
Spis treści
|
5
15. Cud, miód i orzeszki — łączenie danych z grafiką . ..................................................583 Wykresy — w dowolny sposób, byle nie statycznie Katalogowanie zdjęć Wykończenie za pomocą różowej poświaty Ostatnie spojrzenie na dane i możliwości ich wizualizacji Identyfikator URI data: Na końcu tęczy
Jeśli zapytamy 20 osób o znaczenie terminu „grafika internetowa”, uzyskamy 20 różnych odpowiedzi. Nic dziwnego, termin ten opisuje bowiem naprawdę rozległy kontekst, w którym mieszczą się określenia takie jak: obrazy, ilustracje, zdjęcia, grafika rastrowa, bitmapy, SVG, Photoshop, EXIF, CSS, projektowanie stron WWW, JPEG, AJAX, GIMP, GIF, wzbogacanie witryn obrazami, animacjami, przyciskami, ikonami i wiele, wiele innych. Gdy myślę o grafice internetowej, niezmiennie przychodzi mi do głowy jedno słowo: zabawa. Od kiedy pamiętam, wszelkie projekty związane z tworzeniem grafiki uważałam za świetną zabawę. Nieważne, czy po raz pierwszy w życiu pisałam w języku FORTRAN program wyświetlający rozkład pomieszczeń w domu, czy za pomocą aplikacji Photoshop z wypiekami na twarzy edytowałam pierwsze zdjęcie, czy starałam się odczytać metadane zapisane w pliku graficznym, czy postępując z instrukcjami typu „krok po kroku”, wykonywałam „lśniący” przycisk bądź swoją pierwszą animację, czy też uczyłam się projektowania stron internetowych w CSS, zawsze świetnie się bawiłam. Tworzenie grafiki powinno być dobrą zabawą niezależnie od tego, na ile użyteczny okaże się efekt naszej pracy. Wbrew pozorom wcale nie trzeba być grafikiem-profesjonalistą ani wykształconym twórcą witryn WWW, żeby czerpać przyjemność z pracy nad wyglądem stron internetowych. Nie uważam się za artystkę i z całą pewnością nie jestem wykwalifikowaną projektantką serwisów WWW, niemniej jednak od wielu lat bardzo lubię zajmować się grafiką internetową. Pomijając odręczne rysowanie obrazów i wymyślanie zupełnie nowych projektów lub sposobów otrzymywania takich czy innych efektów wizualnych, większość ciekawych rezultatów pracy nad wyglądem stron WWW można uzyskać, jeśli korzysta się z poradników i dobrych narzędzi oraz technologii, dla których sporządzona została dokumentacja. Co więcej, jeśli interesuje nas grafika komputerowa, wcale nie musimy wydawać na swoje hobby tysięcy złotych. Ceny oprogramowania są bardzo różne — niektóre aplikacje kosztują naprawdę dużo, innych z kolei możemy używać zupełnie za darmo. Oczywiście większość z nas woli korzystać z darmowych programów niż z ich płatnych odpowiedników. Jeżeli zaś pragniemy nabyć jakieś narzędzie — przed podjęciem ostatecznej decyzji, czy warto to zrobić, czy nie — możemy sprawdzić jego wersję próbną. Niezależnie od tego, czy mamy talent plastyczny i (lub) doświadczenie w pracy z grafiką, czy też nie, oraz jak gruby jest nasz portfel, powinniśmy lubić nowe wyzwania. Każdy, kto chce tworzyć grafikę internetową, musi dowiedzieć się co nieco o technologiach takich jak CSS czy JavaScript, a także o aplikacjach działających po stronie serwera (takich jak ImageMagick czy odpowiednie funkcje w PHP). 7
Sądzę, że nie da się napisać książki, w której zostałyby omówione wszystkie aspekty grafiki internetowej, niemniej jednak starałam się to zrobić, dlatego też oddaję do rąk Czytelnika pracę pełną specyfikacji i rozmaitych pomysłów. W niniejszej książce znalazły się opisy m.in. stratnych formatów zapisu obrazów (na przykład JPEG), metod przygotowywania zdjęć do publikacji w sieci WWW, technik wykonywania elementów witryn internetowych (na przykład błyszczących przycisków i odbić uznawanych za część Web 2.0), aplikacji napisanych w języku PHP, służących do wyświetlania pojedynczych grafik oraz generowania całych ich pokazów, oprogramowania, za pomocą którego fotografie można kopiować z pamięci aparatu na dysk twardy komputera i przygotowywać do umieszczenia na stronach WWW, ciekawych rozwiązań CSS w dziedzinie projektowania wyglądu serwisów internetowych, a także efektów uzyskiwanych dzięki JavaScript (na przykład efektu wygasania kolorów). Większość przykładów zamieszczonych w tej książce będzie zrozumiała nawet dla tych, którzy nie mają żadnego doświadczenia jako programiści, niemniej jednak są i takie, które wymagają pewnego obycia z technologiami PHP i JavaScript. Starałam się, żeby fragmenty tekstu dotyczące programowania nie były zbyt skomplikowane, żeby przyjemnie się je czytało i żeby łatwo wyciągało się z nich potrzebne informacje. Każdy, kto zechce zmierzyć się z przykładami, powinien mieć podstawową wiedzę na temat PHP i JavaScript, z całą pewnością jednak książka ta nie jest adresowana tylko do ekspertów w dziedzinie programowania. Kilka przykładów stworzyłam w oparciu o technologie XML i CSS, ale i te przykłady zostały opisane najprościej, jak to tylko możliwe. Żadne z zagadnień omówionych w tej książce nie wymaga od Czytelnika biegłości w dziedzinach takich jak tworzenie grafiki oraz projektowanie stron internetowych.
Jak korzystać z tej książki Rozdziały składające się na niniejszą książkę z powodzeniem można czytać w zupełnie dowolnej kolejności, co bynajmniej nie świadczy o tym, że ich kolejność jest przypadkowa. W pierwszych rozdziałach zawarłam informacje na temat grafiki statycznej. W kolejnych omówiłam metody korzystania z programów takich jak Photoshop i GIMP oraz techniki posługiwania się językami programowania (PHP i JavaScript) do tworzenia i modyfikowania rozmaitych obrazów. Ponadto książka została skonstruowana tak, by w każdym kolejnym rozdziale pojawiało się coraz więcej zagadnień związanych z technologiami internetowymi. W mojej pracy opisałam kilka różnych technologii i narzędzi internetowych. Niniejsza książka nie zalicza się do grupy lektur, które czyta się szybko od deski do deski. Sądzę, że należy zapoznawać się z krótkimi jej fragmentami, na przykład podrozdziałami, oraz wypróbowywać działanie opisywanych w nich programów i analizować przykłady. Nie warto brać się za czytanie nowego fragmentu książki, jeśli w pełni nie przyswoiło się wiedzy zawartej w części, której treść właśnie się poznało bądź poznaje. Mimo że w tej książce opisałam wiele różnych programów do tworzenia i obróbki grafiki internetowej, stanowi ona przewodnik po bardzo niewielkiej próbce wyjętej z ogromnego zbioru aplikacji interesującego nas typu dostępnych na rynku. Dlatego też w mojej pracy starałam się wspomnieć o tych programach, narzędziach i technologiach, które są dobrymi reprezentantami jakichś szerszych grup, oferują ciekawe i unikalne funkcje oraz których instalacja nie nastręcza większych trudności. Ponadto wszystkie omówione przeze mnie aplikacje mają jedną wspólną cechę: za korzystanie z nich nie trzeba płacić, przynajmniej przez jakiś czas. 8
|
Przedmowa
Wszystkie programy, których nazwy pojawią się w tej książce, są albo darmowe, albo występują w wersji próbnej w pełni funkcjonalnej przez przynajmniej 30 dni.
Układ książki Jak już wspomniałam, rozdziały składające się na tę pracę można czytać w dowolnej kolejności. Mimo to jednak sugerowałabym Czytelnikowi zapoznanie się z rozdziałem 7. przed przystąpieniem do zgłębiania tekstu dalszej części książki. Tymczasem zajmijmy się układem rozdziałów… Rozdział 1. „Dobra zabawa” W tym rozdziale Czytelnik znajdzie wstęp do całej książki, a także moją definicję pojęcia „grafika internetowa”. Ponadto będzie miał okazję zapoznać się z Galerią Żałosnej Grafiki Internetowej, w której znalazło się omówienie takich elementów stron WWW jak „pusty” GIF czy znacznik BLINK. Rozdział 2. „Obrazy” Rozdział ten w dużej części składa się z przekrojowego opisu podstawowych formatów zapisu obrazów. Omówiłam w nim formaty GIF, JPEG i PNG, porównałam stratną kompresję obrazu z bezstratną oraz poruszyłam kwestie zarządzania kolorami i optymalizacji wyglądu grafik. W rozdziale 2. napisałam również parę słów na temat zagadnień związanych z prawami autorskimi, hotlinkingiem i rozmaitymi sposobami przechowywania plików w sieci WWW. W przywołanym rozdziale omówione zostały programy Photoshop, GIMP i ImageMagick. Ze wspomnianych aplikacji można korzystać podczas pracy z przykładami zawartymi w niniejszej książce. Oczywiście używanie ich nie jest obowiązkowe. Rozdział 3. „Z aparatu do internetu” W tym rozdziale opisałam proces kopiowania i obróbki zdjęć. Dokładniej — dość wnikliwie opisałam w nim kilka edytorów obrazów, parę programów do zarządzania zbiorami zdjęć, kilka narzędzi stworzonych z myślą o pracy z plikami typu RAW oraz parę metod modyfikowania wyglądu fotografii przygotowywanych do publikacji w sieci WWW. Oto lista programów opisanych w rozdziale 3.: • UFRaw, • Adobe Camera Raw*, • Adobe DNG Converter, • Adobe Photoshop CS3*, • Adobe Photoshop Elements*, • GIMP, • NET.Paint, • Paint Shop Pro*, • Adobe Lightroom, • Aperture firmy Apple, • Splashup, • Picnik.
Gwiazdkami oznaczone zostały aplikacje płatne. Układ książki
|
9
Rozdział 4. „Internet w obrazkach” Rozdział ten stanowi poniekąd kontynuację rozdziału poprzedniego, ponieważ znalazł się w nim opis różnych sposobów prezentowania zdjęć w sieci WWW. Omówiłam w nim rozwiązania takie jak umieszczanie na stronach miniatur fotografii oraz pokazów slajdów, a także oprogramowanie do tworzenia galerii obrazów. W rozdziale 4. napisałam także kilka słów na temat pokazywania fotografii we właściwej oprawie graficznej (dobór koloru tła, rozmaite efekty wizualne mające wpływ na wygląd obrazów itd.). Narzędzia, z których korzystałam, tworząc przykładowe grafiki do rozdziału 4., to: • Gallery (oprogramowanie działające po stronie serwera, generujące prezentacje obrazów), • Lightbox 2.0 (aplikacja służąca do wyświetlania obrazów na stronach WWW)*, • Aperture* i Lightroom*, • Adobe Photoshop CS3*, • Postcard Viewer*, • Photoshop Elements dla Windows*, • Gallery Constructor (program napisany w języku JavaScript).
Rozdział 5. „Grafika użytkowa” Pisząc ten rozdział, skupiłam się na grafice rastrowej niebędącej fotografiami, czyli na ikonach, logotypach, błyszczących przyciskach i odbiciach. Niektóre z bardziej popularnych efektów zaliczanych do kanonu Web 2.0 (odbicia, błyszczące przyciski, cienie, paski narzędzi) opisałam, podając instrukcje ich tworzenia „krok po kroku”. Dodatkowo w rozdziale 5. zawarłam nieco informacji o aplikacjach służących do tworzenia zrzutów ekranu oraz umieszczania ich w sieci WWW. Programy omówione przeze mnie w rozdziale 5. to: • Adobe Photoshop*, • GIMP, • Skitch, • SnagIt*.
Rozdział 6. „Wektorowo — początki i języki znaczników” Rozdział ten stanowi wprowadzenie do zagadnień grafiki wektorowej i przedstawia niektóre z wczesnych jej formatów oraz te używane dziś. Oczywiście nie mogło wśród nich zabraknąć VRML i VML. Dalszą jego część poświęciłam na przedstawienie podstawowych pojęć języka SVG (Scalable Vector Graphics). Rozdział 7. „Obóz szkoleniowy neofitów SVG” Można stwierdzić, że jest to samouczek języka SVG. Umieściłam w nim przegląd najważniejszych elementów tej technologii ilustrowany bogato przykładami ich wykorzystania. Opisałam też sposoby umieszczania kodu SVG na stronie WWW, włącznie z osadzaniem go bezpośrednio w kodzie HTML. W rozdziale znajdują się opisy możliwości podstawowych kształtów SVG — ścieżek i krzywych. Poza tym pokazałam, jak posługiwać się opcją wypełniania gradientem, jak umieszczać tekst w kodzie SVG, i zaprezentowałam możliwości niektórych edytorów grafiki SVG, starałam się jednocześnie skupić przede wszystkim na technicznej stronie korzystania z możliwości SVG. Aby stworzyć przykłady do tego rozdziału, wykorzystałam następujące aplikacje: 10
|
Przedmowa
• Inkscape, • Sketsa (nieograniczona czasowo, w pełni funkcjonalna wersja testowa), • GIMP.
Rozdział 8. „CSS — wyższy poziom wtajemniczenia” Nie jest to bynajmniej wprowadzenie do zasad funkcjonowania arkuszy stylów. Starałam się raczej pokazać kilka ciekawych, czasem niekonwencjonalnych rozwiązań. Opisałam dokładnie, jak usunąć całkowicie światło strony, podałam metody kontrolowania układu strony i pokazałam ideę pracy z klasami o wielokrotnie złożonych nazwach. Wspomniałam też o możliwościach darmowego programu TopStyle Lite i jego płatnej wersji TopStyle Pro. Opisałam też kilka narzędzi do oceny poprawności kodu CSS oraz dodatków do przeglądarek, które są dostępne za darmo w zasobach sieci. Rozdział 9. „Projektowanie stron WWW dla laików” Czytelnik znajdzie tu kilka uwag dotyczących podstaw projektowania stron WWW, ze szczególnym uwzględnieniem zagadnień dotyczących dostępności strony, jej zgodności z obowiązującymi standardami, zdolności współpracy z urządzeniami przenośnymi, ale przede wszystkim jej czytelności. Skupiłam się zwłaszcza na aspektach właściwego używania kolorów, również tych dotyczących odczuć osób odwiedzających stronę. Przedstawiłam przykłady kilku istniejących stron, które przykuły moją uwagę — nie zawsze z powodów pozytywnych. Rozdział 10. „Grafika dynamiczna” Tę część książki poświęciłam zagadnieniom dynamicznego zmieniania obiektów opisanych w poprzednich rozdziałach. Nie omieszkałam wspomnieć o cieszących się dużą popularnością efektach osiąganych dzięki technologii AJAX — akordeonie i blaknięciu. Praca z przykładami z tego rozdziału nie wymaga instalacji żadnego specjalistycznego oprogramowania. Rozdział 11. „Tworzenie na kanwie” Głównym tematem moich rozważań było zastosowanie znacznika canvas na stronach pisanych z myślą o przeglądarce Safari, zgodnych ze specyfikacją HTML5. Czytelnik znajdzie tu kilka ogólnych uwag dotyczących znacznika canvas, opis jego obiektów, metod wyznaczania ścieżek oraz pracy z obrazami. I znów do pracy wystarczy zwykły edytor tekstu. Rozdział 12. „Dynamiczne zastosowanie znacznika canvas i języka SVG” Starałam się zgłębić możliwości dynamicznej pracy w technologii SVG oraz ze znacznikiem canvas, nie ominęłam przy tym zagadnień oddziaływania skryptem na zawartość strony i tworzenia efektów dynamicznych. Wspomniałam także o animacjach SVG i pracy z mapami bitowymi z użyciem znacznika canvas. Rozdział 13. „Magia obrazów — różne narzędzia obróbki grafiki” Tematem tego rozdziału jest praca z aplikacjami modyfikującymi obrazy, obsługiwanymi z wiersza poleceń, poprzez zewnętrzne programy lub za pomocą skryptów PHP i (lub) JavaScript. Podstawową aplikacją, z jakiej korzystałam, był pakiet narzędzi ImageMagick, ale nie uniknęłam też pracy z systemowymi bibliotekami obróbki obrazów. Przykłady zawierają dość prosty kod PHP i JavaScript, wymagają jednak zainstalowania pakietu ImageMagick i możliwości pracy z wiersza poleceń. Podałam też kilka metod tworzenia nowych obrazów.
Układ książki
|
11
Rozdział 14. „Nieco geografii” To rozdział został poświęcony nowym aplikacjom geograficznym — Mapom Google i Yahoo! Maps. Czytelnik znajdzie w nim przykłady wymagające implementacji kodu i takie, które nie wymagają kontaktu z programowaniem. Umieściłam tu również opisy znaczników związanych z określaniem położenia obiektów na Ziemi oraz przykłady aplikacji PHP i JavaScript związane z zagadnieniami sieciowo-geograficznymi. Rozdział 15. „Cud, miód i orzeszki — łączenie danych z grafiką” Ostatni rozdział książki przedstawia zagadnienia związane z umieszczaniem na stronach WWW danych w formie graficznej. Nie mogło zabraknąć w nim wzmianek o zbieraniu danych w tabelach czy umieszczaniu ich na wykresach. Tu też znajdzie Czytelnik informacje na temat metadanych łącznie z ich wizualizacją wykonywaną za pomocą kodu SVG, znacznika canvas, a nawet kodu PHP i bibliotek graficznych. Praca z przykładami nie wymaga żadnych specjalistycznych narzędzi, choć czasami korzystałam z ogólnodostępnych bibliotek PHP i JavaScript, a to wymaga od Czytelnika pewnego obycia z językami programowania.
Konwencje typograficzne W książce pojawiają się następujące wyróżnienia tekstu. Pogrubienie Wyróżnienie stosowane do zaznaczenia nowych, istotnych terminów. Kursywa Oznacza adresy internetowe, nazwy plików, ich rozszerzenia oraz nazwy funkcji programów. Czcionka monotypiczna
Wyróżnienie stosowane do zaznaczenia poleceń, nazw znaczników, opcji, zmiennych, atrybutów, kluczy, żądań, funkcji, metod, typów, klas, modułów, właściwości, argumentów, wartości, obiektów, zdarzeń, uchwytów zdarzeń, znaczników XML i XHTML, makr i słów kluczowych, które pojawiają się w tekście. Czionka monotypiczna
Wyróżnieniem tym są formatowane wszystkie większe fragmenty kodu oraz listingi. Czcionka monotypiczna pogrubiona
Formatowaniem tym zaznaczałam tekst, który użytkownik powinien wprowadzić własnoręcznie. Czcionka monotypiczna kursywa
Tekst, który ma zostać zastąpiony przez wartości podane przez użytkownika lub wynikające z kontekstu opisu. Taka ikona oznacza wskazówki, porady lub ogólne uwagi.
Taka ikona oznacza ostrzeżenie lub informuje o potrzebie zachowania wzmożonej uwagi.
12
|
Przedmowa
Korzystanie z zawartych w książce przykładów Celem tej książki jest pomoc Czytelnikowi w osiągnięciu założonych przez niego rezultatów. Ogólnie każdy fragment umieszczonego w niej kodu może zostać wykorzystany w programach lub dokumentacji, jaką przyjdzie tworzyć Czytelnikowi. Nikt, kto nie planuje powielenia znaczących partii kodu, nie musi kontaktować się z wydawnictwem, by uzyskać jego zgodę na swoje działania. Przykładowo, umieszczenie kilku fragmentów kodu z tej książki w swojej aplikacji nie wymaga uzyskania zgody wydawnictwa czy autorki. Zgoda taka musi być natomiast uzyskana w przypadku planowania sprzedaży czy innej formy rozprowadzania przykładów umieszczanych na płycie CD-ROM lub serwerze. Udzielanie odpowiedzi poprzez cytowanie fragmentów książki lub fragmentów kodu nie wymaga oddzielnego pozwolenia. Umieszczanie dużych partii kodu w tworzonej przez siebie dokumentacji wymaga zgody wydawnictwa. Będziemy wdzięczni za umieszczenie tej pozycji w bibliografii, choć nie wymagamy tego. Pozycja bibliografii zawiera zazwyczaj tytuł książki, nazwisko autora, nazwę wydawnictwa i numer ISBN.
Podziękowania Dziękuję ludziom, którzy pomagali mi w pracy nad tą książką, w tym mojemu wieloletniemu wydawcy, Simonowi St.Laurentowi, i korektorom technicznym, Loren Webster, Elaine Nelson i Chuqowi Von Rospach. Poza tym pragnę wyrazić swoją wdzięczność dla zespołu odpowiedzialnego za jej wydanie — projektantowi Ronowi Bilodeau, adiustatorce Genevieve d’Entermont, Lucie Haskins odpowiedzialnej za stworzenie indeksu, redaktorowi technicznemu Rachel Monaghan, Karen Montgomery, która zaprojektowała wzór okładki, oraz ilustratorce Jessamyn Read. Chcę również podziękować twórcom oprogramowania i autorom narzędzi i technologii, bez których książka ta w ogóle by nie powstała. Szczególne wyrazy uznania za ciężką pracę kieruję pod adresem twórców w pełni darmowego i otwartego kodu programów, na przykład ImageMagick czy GIMP, oraz innych, o których pisałam na kartach tej książki. Dzięki szczodrości tych ludzi każdy może tworzyć grafikę na potrzeby sieci.
Podziękowania
|
13
14
|
Przedmowa
ROZDZIAŁ 1.
Dobra zabawa
Kto pamięta pierwszą ujrzaną przez siebie stronę internetową, tę pierwszą stronę w swoim życiu? Ja pamiętam. Nie wiem, czy to dziwne, czy może wiele osób przechowuje w pamięci wspomnienie pierwszego zetknięcia się z czymś, co w bardzo krót asie stało się niezwykle popularne i powszechne w ich życiu.
� _,.,,. � .,, Pod koniec roku 1993 lub na początku 1994 pracowałam dla ��ya jako programista kon traktowy. Pewnego razu któryś z moich kolegów-program '-. ���tał mnie, czy miałam �iedzieć, że należę do grona styczność z programem o nazwie Mosaic. Nie mogę ·es � ludzi, którzy jako pierwsi zapoznali się z nowym typ �if.łgramowania, jakim były wtedy przeglądarki internetowe - w czasach, o któryc �� , internet istniał bowiem w swojej �ie strona WWW składała się z białe najbardziej pierwotnej formie. Pierwsza oglądana � go tła, dużego, pogrubionego nagłówka oraz teks� dzielonego na kilka akapitów, w związku z czym trudno powiedzieć, żeby była szczeg� interesująca. Jednakże znajdował się na niej a �syłaczem, który nie był niczym innym, jak pewien przyciągający uwagę elemen
��
�
podkreślonym fragmentem tekstu, m tę ciekawą cechę, że po kliknięciu go otwierała się zupełnie nowa strona znajdująca s odległym komputerze, połączona z tą przeze mnie oglądaną zaledwie adresem okr )'*t przez domenę.
� � �� ��
Druga strona WWW, którą okazała się równie nieskomplikowana jak pierwsza. Skła dała się z czarnego te st zczonego na białym tle, a jedyną dostrzegalną zmianą typograficzną było pojawien na niej tytułów pisanych większą czcionką. Zupełny brak grafiki. Nie było CSS ani techn ii Flash. Nie było nawet FONT ani BLINI<. Mimo to obydwie wspomniane przeze mnie strony są przykładem wielkich możliwości internetu: każda z witryn była dostępna dla wszystkich użytkowników sieci, każdej przypisany został konkretny adres, dzięki któremu można było ją ponownie odwiedzić, a poza tym wyświetlanie witryn na różnych komputerach odbywało się na drodze odpowiedniej koordynacji między serwerem i klientem, co ówcześnie zadziwiało i szokowało.
�
Opisywanie stron WWW pozbawionych jakiejkolwiek grafiki na pierwszy rzut oka wydaje się być szalonym pomysłem, jednakże w tym szaleństwie jest metoda. Pobieżnie omawiając wczesne stadium rozwoju internetu, pragnęłam zwrócić uwagę na to, że grafika bynajmniej nie jest głównym i zasadniczym elementem sieci WWW. Można bowiem - przy użyciu mak symalnie uproszczonych znaczników, a bez korzystania z kaskadowych arkuszy stylów (ang. Cascading Style Sheets - CSS), skalowalnej grafiki wektorowej (ang. Scalable Vector Gra phics - SVG), technologii Flash oraz umieszczania na niej obrazów - stworzyć witrynę w pełni funkcjonalną i spełniającą wszystkie założenia działania sieci.
15
Grafika nie stanowi elementu niezbędnego do prawidłowego funkcjonowania internetu, jak kolwiek niezmiernie wzbogaca sieć, wprowadzając istotne rozróżnienie między witrynami „żywymi", fascynującymi i ciekawymi a takimi, które są zaledwie funkcjonalne. Traktowanie grafiki internetowej bardziej jak wartościowego „pomocnika" oraz zestawu dodatkowych na rzędzi niż niepomijalnej części całej sieci pozwala uwolnić się od restrykcji i wymogów, które przez lata narosły wokół tematu jej tworzenia. Należy zerwać ze stereotypami związanymi z grafiką internetową. Oto kilka z nich: •
•
•
•
Umieszczanie animacji na stronach WWW jest dobre. Ewentualnie: jest złe. Takie same głosy słyszy się na temat technologii Flash, AJAX, efektów wykorzystania skryptów w kodzie witryn, SVG, obiektów canvas itd. Grafikę internetową tworzyć i wykorzystywać powinni tylko profesjonaliści. Należy mieć za sobą lata praktyki i być szczególnie oddanym swojej pracy. Wyrafinowana grafika może być tworzona jedynie za pomocą drogiego sprzętu oraz opro gramowania.
� ' "' Zajmowanie się grafiką internetową to poważna sprawa, b�-� �szyscy wiedzą - two-
Grafika w sieci to zbiór świń o rozmiarach tak wielkich, że zapy ają łącza, oraz zdolnych pożreć na śniadanie każdy sprzęt przenośny. rzenie jej i wykor,ystywanic jest trudne.
Tak wiele stereotypów, tak mało czasu...
m:
��· fl}-
� 1 � z filmu Robin Hood: Książę złodziei
Przypomniała mi się właśnie jedna z moich ulubio · go rolę wcielił się Morgan Freeman) (grał w nim Kevin Costner). Maur o imieniu Azee siedzi na uboczu podczas jakiejś uroczystości o ącej się w wiosce; światło pada na jego ciemną skórę. Mała, sympatyczna dziewczy chodzi do niego niepewnie i pyta: „Czy tarza pytanie „Czy Bóg mnie pomalował?", to Bóg cię pomalował?". Zdziwiony A : Z całą pewnością". „Dlaczego?" - pyta dziew po czym śmieje się przyjaźnie i odpo ą różnorodność". czynka. „Ponieważ Allah uwielbia cu
�� �
��\
Rozmaitość typów grafiki inter1llil.t. w•j - od CSS do obrazków, od animacji Flash do SVG · mi. Grafika może być, między innymi, użyteczna, funk - daje się opisać przeróżn cjonalna, profesjonalna. Od jąc jednak wszystkie te praktyczne rozważania na bok, lubię myśleć o niej jak o czym ' wala na uzyskanie w świecie internetu cudownej różnorodności. Aby zrozumieć podo ejście, trzeba zerwać ze stereotypami. Jedyną prawdziwą regułą, której należy się trzymać, est stwierdzenie, że grafika w żaden sposób nie powinna ograniczać funkcjonalności stron WWW Jeśli uda się spełnić ten postulat, wszystko inne zadziała właściwie.
� .
Do końca tego rozdziału (a w zasadzie do końca książki) skupię się na omawianiu cudownej różnorodności grafiki, którą spotyka się na stronach internetowych. Pokażę, że wszystkie wymienione powyżej stereotypowe tezy można skutecznie obalić i mieć przy tym całkiem niezły ubaw.
Co było dobre dla dziadka... Gdyby zmienić świat w maszynę skrajnie praktyczną i funkcjonalną, zapewne działałby on niezawodnie, ale też okazałby się miejscem nieszczególnie interesującym. Życie w nim przy pominałoby przejście na dietę złożoną z pieczywa bananowo-orzechowo-otrębowego oraz witaminizowanej wody. Oczywiście zapewniają one człowiekowi dostateczną liczbę kalorii,
16
Rozdział 1. Dobra zabawa
niemniej żywienie się wymienionymi produktami przez dłuższy czas nie byłoby niczym zabaw nym. Starcie między praktycyzmem a indywidualnością oraz prawem wyboru i tak ostatecznie kończy się zwycięstwem tych drugich. Czarne samochody były dobre dla Forda, lecz nie dla innych. Czarno-białe telewizory działały świetnie, ale ludzie woleli United Colors of Benetton. Za ideą stworzenia urządzenia iPhone kryje się prawda, że człowiekowi nigdy dość kolorowych guziczków do przyciskania. Pęd ku różnorodności stanowił element napędzający ewolucję każdego wynalazku w przeszłości i nie ma powodu, by w przypadku internetu miało być inaczej. Gdyby wszystkie witryny sieci WWW zawierały prosty tekst, ludzie nie potrzebowaliby tych ulepszeń, które powstały na wskutek istnienia aplikacji internetowych. Jednakże na stronach pojawiła się grafika, w wyniku czego zmieniły się wymiary witryn. Nasze monitory zostały udoskonalone zarówno pod względem rozmiarów, jak i obsługiwanej palety kolorów. Następnie pojawiła się myśl, że wspaniale byłoby uczynić strony WWW interaktywnymi oraz dodać do nich animacje, stworzono więc animowane GIF-y, technologię Flash i efekty, które można uzyskać za pomocą JavaScript. Te jakże atrakcyjne rozwiązania zachęcały rzesze nowych użytkowników sieci do korzystania z coraz szerszej gamy dostępnych aplikacji, co jeszcze bardziej wywindowało oczekiwania ludzi względem internetu, z kolei poskutkowało jeszcze gwałtowniejszym rozwojem technologii leżących u podst· kcjonowania elektronicznego świata. '- • Muzyka. Czy ktoś wspominał o muzyce? Muzyka do ś , muzyka, którą można się wymieniać, którą można tworzyć i publikować w int reszcie muzyka na sprzedaż. Wystarczyło zaledwie parę lat, by iTunes, eMusic i s � sieci Amazon przedefiniowały nie tylko to, w jaki sposób ludzie korzystają z sieci W e także pojęcia kupowania, słuchania i poszukiwania muzyki.
�
�
� � �
�
o
Oczywiście teraz pora wspomnieć o szczyc o · ągnięć technicznych w dziedzinie mediów w bezpośrednio ze stron WWW. Niech się za - przekazie wideo i możliwości ogląda · stanowię. . . Chyba obejrzę sobie dzisiaj#] iemi, wystarczy odwiedzić stronę serwisu Netflix. A może jednak, za pomocą programu "-lt, obejrzę odcinek serialu Max Headroom. ._, Puf! Wymienione przeze mni� ......_ c e stały się częścią sieci. Faktem jest, że żadnej z nich
\, j
�
od czego zależy działanie samego internetu, niemniej bynajmniej nie można uzn ' dostęp do nich bez wątpi · ł się bardzo istotny dla ludzi. Niektórzy twierdzą, że wzrost jakości serwisów interne en to nic innego, jak wynik działania ekonomii sieci, lecz ja stawiałabym w tym wypadk prostu na zabawy z grafiką. "
Rodzi się pytanie, które ze wspomnianych technologii, standardów i mediów są grafiką in ternetową opisywaną w tej książce? Większość ludzi, słysząc słowa „grafika w sieci WWW", myśli o plikach z rozszerzeniem JPEG, GIF lub PNG, ja jednak zajmę się wszystkim, co wpływa na wygląd strony internetowej, co kryje się za elementami tworzącymi wstępną jej strukturę, co wchodzi w skład rodziny zwanej ogólnie grafiką internetową. Omówię między innymi: •
•
•
•
pliki graficzne (co nie było trudne do przewidzenia); atrybuty znaczników wpływające na wygląd strony WWW oraz zarządzający nimi język CSS; grafikę osadzoną bądź zintegrowaną, czyli na przykład VML, VRML, SVG oraz znacznik lub obiekt canvas; efekty działania skryptów, takie jak te często tworzone za pomocą DHTML, a obecnie AJAX;
Co było dobre dla dziadka„.
17
•
•
spakowane, interaktywne animacje otrzymywane na przykład za pomocą oprogramowa nia Flash; szkielety aplikacji oraz biblioteki generujące efekty graficzne będące wynikiem korzystania z którejś z wyżej wymienionych technologii.
Na powyższej liście nie znalazł się standard wideo, a to przede wszystkim dlatego, że przy kłady obrazów ruchomych niełatwo umieszcza się na stronicach książki. Może kiedyś, gdy przyjdzie czas na tworzenie drugiego wydania niniejszej pozycji, popracuję nad pominiętym teraz tematem i dopiszę go do listy, na razie jednak główny temat książki stanowią wszystkie wymienione technologie, standardy i media, z wyjątkiem wideo oraz technologii Flash.
Narysuj mnie! W czasach, gdy pudełka z zapałkami stały się równie popularne, jak widok osoby palącej papierosa w restauracji, na etykietach owych pudełek zaczęto drukować obrazki przedsta wiające psy, klaunów oraz różne inne istoty; obok ilustracji widnia opisek „Narysuj mnie!" - ny były umieszczane (ang. „Draw me!"). Przykładową etykietę widać na rysunku 1.1. P na pudełkach zapałek w wyniku akcji prowadzonych przez rozma koły plastyczne, zachęcające ambitnych domorosłych artystów do przerysowyw za tości etykiet na papier i wysyłania efektów swej pracy w odpowiednie miejsca, niano te amatorskie dzieła. Ludzie prowadzący wspomniane szkoły mało kogo od pomysłu zapisania się na kurs rysunku, z czego jasno wynika, że ostatecznie l następującego wniosku: w każdym człowieku drzemie uśpiony artysta.
�
���
� �� cft�� tf�
�
Rysunek 1.1. Etykieta zapałczana przedstawiajqca rysunek psa i opatrzona dopiskiem „Draw me" - „Narysuj mnie!"
18
Rozdział 1. Dobra zabawa
Jednym ze stereotypów związanych z grafiką internetową jest zakorzenione w ludziach prze świadczenie, że aby ją tworzyć, należy być artystą, projektantem albo nawet absolwentem jakiejś specjalistycznej uczelni. Oczywiście, jeśli ktoś chce zajmować się grafiką, powinien mieć pewne zdolności plastyczne, jednakże nie trzeba pamiętać o tym, do czego już dawno temu doszli nauczyciele z „etykietowych" szkół rysowania: w każdym człowieku drzemie artysta. Do wielu prac związanych z tworzeniem grafiki potrzebny jest profesjonalny artysta, ale nie do wszystkich. Bardzo wiele osiągnąć może na tym polu również osoba bez praktyki, niebędąca znawcą skomplikowanych technologii, lecz gotowa zmierzyć się z nowymi wyzwaniami. Przykładem niech będzie SVG, którą opiszę w dalszej części książki, pozwalająca tworzyć grafikę z wykorzystaniem składni języka XML. Pomysł ten na pierwszy rzut oka wydaje się być dość okropny - w jaki sposób można otrzymać wyrafinowaną grafikę za pomocą prostych znaczników, takich jak ten przedstawiony poniżej?
/>
Jednakże istnieją zupełnie mechaniczne metody umożliwiające zrobienie kopii jakiegoś projektu graficznego, a potem zamianę go (w całości bądź tylko w częściach) �rafikę wektorową SVG. Nie trzeba przy tym korzystać z żadnych programów bardziej sk �owanych niż zwykły edytor tekstu.
n
ii�
X
Znany technolog komputerowy Sam Ruby przy każdym · t swoim blogu umieszcza ikonę stworzoną w SVG. Ikonki te wyglądają całkiem ·e . �am nieco zaskoczona, gdy je ysty. Znalazłam notkę, w której ujrzałam, ponieważ nigdy nie sądziłam, że Sam ma na opisał metodę tworzenia ikon za pomocą narzęd i r ziej skomplikowanego niż vi, czyli popularny edytor tekstowy działający w środow, �nix.
��
o
� � �opiowany do dokumentu SVG. 2. W razie potrzeby można zmienić & Yzmiar. 3. Należy pokryć obszary na o�a1-ym obrazku odpowiednim zestawem figur SVG, takich
Niżej podaję opis metody Sama.
1. Należy otworzyć obrazek, który ma
jak koła i kwadraty.
4. Te fragmenty grafiki, figur, takich jak kol 5. Należy dopasować
�-,
ie pasują do uzyskanego wzoru składającego się z typowych e a obrysować ścieżkami SVG. rokości, kolory i umiejscowienia elementów otrzymanego wzoru.
6. Pora usunąć oryginalny obrazek.
Co prawda Sam nie napisał, skąd wie, gdzie umiejscawiać poszczególne figury i jakie powinny być ich wymiary, niemniej ustalenie tego nie może być niczym trudnym, wystarczy bowiem na zasadzie prób i błędów, za pomocą edytora tekstowego, zmieniać rozmiar danej figury i jej położenie aż do chwili, gdy osiągnie się pożądany efekt. Po uzyskaniu wzoru SVG, będącego odpowiednikiem wzoru z obrazka, wystarczy ów obrazek zwyczajnie usunąć i voilr - projekt gotowy! Całą opisaną procedurę można uprościć poprzez wydrukowanie oryginalnego obrazka, umiesz czenie go pod arkuszem kalki technicznej, obrysowanie widocznych na nim kształtów i wy korzystanie uzyskanych linii do stworzenia węzłów, które oddadzą charakter odpowiednich fragmentów rysunku (rysunek 1.2). Na tym etapie wystarczy już tylko zamienić punkty z wy kresu na linię krzywą SVG lub punkty ścieżek.
Narysuj mnie!
19
Jednym ze stereotypów związanych z grafiką internetową jest zakorzenione w ludziach prze świadczenie, że aby ją tworzyć, należy być artystą, projektantem albo nawet absolwentem jakiejś specjalistycznej uczelni. Oczywiście, jeśli ktoś chce zajmować się grafiką, powinien mieć pewne zdolności plastyczne, jednakże nie trzeba pamiętać o tym, do czego już dawno temu doszli nauczyciele z „etykietowych" szkół rysowania: w każdym człowieku drzemie artysta. Do wielu prac związanych z tworzeniem grafiki potrzebny jest profesjonalny artysta, ale nie do wszystkich. Bardzo wiele osiągnąć może na tym polu również osoba bez praktyki, niebędąca znawcą skomplikowanych technologii, lecz gotowa zmierzyć się z nowymi wyzwaniami. Przykładem niech będzie SVG, którą opiszę w dalszej części książki, pozwalająca tworzyć grafikę z wykorzystaniem składni języka XML. Pomysł ten na pierwszy rzut oka wydaje się być dość okropny - w jaki sposób można otrzymać wyrafinowaną grafikę za pomocą prostych znaczników, takich jak ten przedstawiony poniżej?
/>
Jednakże istnieją zupełnie mechaniczne metody umożliwiające zrobienie kopii jakiegoś projektu graficznego, a potem zamianę go (w całości bądź tylko w częściach) �rafikę wektorową SVG. Nie trzeba przy tym korzystać z żadnych programów bardziej sk �owanych niż zwykły edytor tekstu.
n
ii�
X
Znany technolog komputerowy Sam Ruby przy każdym · t swoim blogu umieszcza ikonę stworzoną w SVG. Ikonki te wyglądają całkiem ·e . �am nieco zaskoczona, gdy je ysty. Znalazłam notkę, w której ujrzałam, ponieważ nigdy nie sądziłam, że Sam ma na opisał metodę tworzenia ikon za pomocą narzęd i r ziej skomplikowanego niż vi, czyli popularny edytor tekstowy działający w środow, �nix.
��
o
� � �opiowany do dokumentu SVG. 2. W razie potrzeby można zmienić & Yzmiar. 3. Należy pokryć obszary na o�a1-ym obrazku odpowiednim zestawem figur SVG, takich
Niżej podaję opis metody Sama.
1. Należy otworzyć obrazek, który ma
jak koła i kwadraty.
4. Te fragmenty grafiki, figur, takich jak kol 5. Należy dopasować
�-,
ie pasują do uzyskanego wzoru składającego się z typowych e a obrysować ścieżkami SVG. rokości, kolory i umiejscowienia elementów otrzymanego wzoru.
6. Pora usunąć oryginalny obrazek.
Co prawda Sam nie napisał, skąd wie, gdzie umiejscawiać poszczególne figury i jakie powinny być ich wymiary, niemniej ustalenie tego nie może być niczym trudnym, wystarczy bowiem na zasadzie prób i błędów, za pomocą edytora tekstowego, zmieniać rozmiar danej figury i jej położenie aż do chwili, gdy osiągnie się pożądany efekt. Po uzyskaniu wzoru SVG, będącego odpowiednikiem wzoru z obrazka, wystarczy ów obrazek zwyczajnie usunąć i voilr - projekt gotowy! Całą opisaną procedurę można uprościć poprzez wydrukowanie oryginalnego obrazka, umiesz czenie go pod arkuszem kalki technicznej, obrysowanie widocznych na nim kształtów i wy korzystanie uzyskanych linii do stworzenia węzłów, które oddadzą charakter odpowiednich fragmentów rysunku (rysunek 1.2). Na tym etapie wystarczy już tylko zamienić punkty z wy kresu na linię krzywą SVG lub punkty ścieżek.
Narysuj mnie!
19
Tanie obrazki Wrócę teraz do kwestii aparatu z wysokiej półki, o którym wcześniej wspomniałam. Jeśli jest się prawdziwym fotografem, na pewno warto wydać możliwie jak najwięcej pieniędzy na dobry cyfrowy aparat oraz dodatkowe obiektywy. Inwestycja ta na dłuższą metę okaże się opłacalna. Jeśli jednak zastanowić się nad potrzebami osoby, która pragnie robić zdjęcia po prostu dla przyjemności albo traktuje fotografię jako sposób tworzenia ciekawych obrazów lub uwieczniania wydarzeń, dojdzie się do wniosku, że większość zwykłych aparatów typu „wyceluj i naciśnij” zaspokoi je w pełni, a zarazem zapewni rozdzielczość zdjęć w zupełności spełniającą standardy sieci WWW. Prawda przedstawia się następująco: nie trzeba posiadać sprzętu o matrycy 12 (i więcej) Mpix, jeżeli nie planuje się publikować swoich prac w profesjonalnych magazynach ani przekształcać ich w większych rozmiarów obrazy ścienne. Jakich rozmiarów obrazy widuje w internecie przeciętny jego użytkownik? Bardzo rzadko mają one szerokość większą niż 600 pikseli, natomiast szerokość nawet tych największych zazwyczaj nie przekracza 800 – 1000 pikseli. Większość aparatów fotograficznych typu „wyceluj i naciśnij”, których opisy udało mi się znaleźć w sieci podczas pisania tej książki, umożliwia wykonanie dość szczegółowych zdjęć w niemałym zakresie czułości ISO, szerokich nawet na 1000 pikseli. Zazwyczaj urządzenia te oferują dodatkowo opcję powiększenia i kosztują mniej niż 500 PLN. Mowa tu oczywiście o górnej półce aparatów „wyceluj i naciśnij”. Zdjęcia to nie wszystko, do ich obróbki potrzebny jest bowiem komputer. Jaki będzie najlepszy? Cóż, konfiguracja komputera w dużej mierze zależy od uruchamianego na nim oprogramowania. Trzeba też mieć na uwadze to, że ostatnimi czasy komputery wyraźnie tanieją. Nawet laptop można dziś kupić za mniej niż 2000 PLN, natomiast komputer stacjonarny z naprawdę niezłym monitorem i znaczną ilością pamięci RAM oraz pojemnym dyskiem twardym kosztuje nie więcej niż 1800 PLN. Wracam do kwestii używanego oprogramowania — może się okazać, że nowoczesny komputer wcale nie będzie potrzebny. Sama używałam cztero- i pięcioletnich komputerów do obróbki grafiki i muszę stwierdzić, że całkiem nieźle się sprawdziły. Starsze maszyny działają nieco wolniej niż nowe, ale jeśli pracuje się na stosunkowo małych plikach (i tu ponownie pojawia się temat aparatów „wyceluj i naciśnij”), nie są znowu aż tak wolne, by doprowadzić użytkownika do płaczu. Oczywiście, jeśli ktoś pragnie zajmować się grafiką przy użyciu programu Adobe Photoshop, będzie potrzebował nowszego komputera. Na szczęście jednak z powodzeniem można tworzyć grafikę i obrabiać zdjęcia w innych aplikacjach. Świetnym darmowym programem do tego typu prac, radzącym sobie z całą masą różnych formatów plików, a nawet z plikami RAW, które zawierają możliwie najwięcej danych pochodzących wprost z urządzeń sensorowych aparatów fotograficznych (w tym wypadku potrzebny będzie jeszcze jeden darmowy program), jest GNU Image Manipulation Program (GIMP). Inny popularny program do obróbki grafiki to Paint Shop Pro. Mimo że nie jest on darmowy, z całą pewnością nie pozostaje poza materialnym zasięgiem przeciętnego zjadacza chleba. Prawdę mówiąc, istnieje wiele darmowych oraz tanich alternatyw dla droższych aplikacji. Niektóre z nich opiszę, urozmaicając swoje wywody spojrzeniem na nieco droższe oprogramowanie, w rozdziale 3.
$$$$$$$$$$$$
|
21
Ci, którzy chcą pracować nie tylko ze zdjęciami, mają do dyspozycji jeszcze większy wybór interesujących aplikacji. W poprzednim podrozdziale wspomniałam o metodach przekształcania obrazów w pliki SVG. Żeby nie męczyć się z korzystaniem z wykresu punktów, można sięgnąć po narzędzie takie jak Inkscape, które pozwala przerysowywać obrazki bądź tworzyć własne, a potem zapisywać je jako pliki SVG. Więcej informacji o obrazach, narzędziach do obróbki obrazów oraz programowaniu związanym z obrazami zawarłam w rozdziale 2.
Programowanie za grosze Co ma zrobić programista, który chciałby w swej pracy korzystać z zestawu narzędzi wchodzących w skład jakiegoś przystępnego środowiska graficznego? Nie od dziś wiadomo, że podobne produkty Microsoft kosztują tysiące złotych, a oprogramowanie Adobe i innych firm jest niewiele tańsze. Ceny ustalone na takim poziomie wykraczają poza możliwości finansowe każdego, kto nie zarabia na życie jako programista albo nie jest prawdziwym programistą-zapaleńcem. Co więcej, w dzisiejszych czasach nawet profesjonaliści często nie mogą sobie pozwolić na zakup potrzebnych im narzędzi, więc korzystają z nich dzięki firmom, dla których pracują. Na szczęście, podobnie jak ma to miejsce w przypadku aplikacji służących do tworzenia plików graficznych i obróbki zdjęć, tak i w kwestii środowisk programistycznych istnieją rozwiązania alternatywne dla zakupu drogiego oprogramowania. Przecież każdy może korzystać z dobrodziejstw języków CSS i JavaScript, nie płacąc nawet dziesięciu groszy — z użyciem wspomnianych standardów można pisać naprawdę wysublimowane aplikacje. Ponadto większość firm mających w swej ofercie środowiska programistyczne udostępnia zubożone ich odpowiedniki za darmo lub przynajmniej tworzy w pełni funkcjonalne, działające czasowo wersje próbne, które ułatwiają podjęcie decyzji o ewentualnym zakupie danego produktu. Korzystając z darmowych, otwartych oraz próbnych wersji oprogramowania można skutecznie zgłębiać cudowną różnorodność grafiki internetowej bez wydawania „cudownych” (z punktu widzenia firm sprzedających drogie aplikacje) kwot. Nie mogę nikomu zagwarantować, że opisane w niniejszej książce programy będzie można uruchomić na każdym komputerze. Zapewniam jednak, że korzystanie z omówionych przeze mnie aplikacji i przykładów nie wymaga kupowania zupełnie niczego. W przypadku niektórych zagadnień zajdzie potrzeba użycia próbnej, czasowej wersji jakiejś aplikacji, ale z całą pewnością będzie ona w pełni funkcjonalna dość długo, aby Czytelnik zdążył się z nią dobrze zapoznać i bez problemu wykonać wszystkie zademonstrowane tu ćwiczenia.
Grafika: wspaniały smak, zero nadwagi Każdy, kto chce okrasić swoją stronę grafiką, powinien zadać sobie trzy zapisane poniżej pytania.
1. Jakiej przepustowości łącza będzie wymagało przesłanie plików graficznych na serwer i przeglądanie ich po stronie klienta?
22
|
Rozdział 1. Dobra zabawa
2. W jaki sposób wykorzystanie takiej, a nie innej grafiki wpłynie na funkcjonalność strony? 3. Czy grafika będzie prawidłowo wyświetlana na mniejszych urządzeniach? Cała „zabawa” z siecią WWW polega na tym, że strony internetowe powinny być atrakcyjne dla każdego, kto je odwiedza, nie zaś tylko dla użytkowników myszy i wielkich ekranów, dysponujących nieograniczonym transferem przesyłu danych oraz najnowocześniejszymi komputerami. Nie jest żadną tajemnicą, że w wielu przypadkach grafika znajdująca się na stronach internetowych jest po prostu niefunkcjonalna, niemniej jednak zaskakująco wiele witryn działa naprawdę nieźle albo przynajmniej oferuje jakąś alternatywę użytkownikom, którzy przeglądają je za pomocą programów powiększających obraz wyświetlany na ekranie albo czytających zawartość serwisu. Atrybut alt oraz znacznik img pozwalają opisywać obrazy tekstem. Jednoczesne pojawianie się na stronach WWW tekstowych odsyłaczy oraz menu sterowanych myszką sprawia, że owe strony mogą przeglądać zarówno ci, którzy wolą korzystać z myszy, jak i ci, którzy pracują z klawiaturą. W nawiązaniu do kwestii przepustowości łącz — rozmiary plików graficznych można zoptymalizować bez straty jakości obrazu bądź za cenę niewielkiej jej utraty, natomiast za pomocą odpowiedniego skryptu można stworzyć stronę z miniaturami, których kliknięcie powoduje otwieranie się grafik w ich pełnych wymiarach. Jednym z najprostszych sposobów zwiększania szybkości działania i ładowania się strony WWW po stronie klienta jest otwieranie plików graficznych spod różnych domen. Większość przeglądarek dopuszcza wysyłanie zaledwie dwóch jednoczesnych żądań typu HTTP do jednej domeny. Przy takim ograniczeniu przeglądarka ma dostęp tylko do dwóch spośród kilku obrazów, które powinny się załadować. Jeśli chce się poprawić działanie witryny (szczególnie gdy tworzony serwis zawiera wiele grafik), warto stworzyć kilka wirtualnych poddomen, jak to widać na poniższym przykładzie. img1.jakasdomena.com img2.jakasdomena.com img3.jakasdomena.com
Umieszczenie plików graficznych pod różnymi domenami skróci czas ładowania się strony. Rozwiązanie to nie wymaga nawet modyfikowania samych obrazków. Kolejnym sposobem na radzenie sobie z problemem długiego wczytywania się plików graficznych stało się osadzanie grafiki bezpośrednio w kodzie witryny. Nowoczesne technologie, takie jak SVG i obiekt canvas, umożliwiają umieszczanie na stronach WWW wyszukanej i dynamicznej grafiki, która jest przesyłana w postaci danych tekstowych o rozmiarach nieprzekraczających kilku bajtów (definicje obiektów, które zostaną otwarte po stronie klienta z wykorzystaniem zasobów komputera osoby przeglądającej witrynę). Dzięki aktualnym wersjom starych, dobrze znanych standardów takich jak CSS można otrzymać zupełnie nowe efekty wizualne bez korzystania z jakichkolwiek zewnętrznych względem kodu strony plików i obiektów. Natomiast biblioteki JavaScript, nawet te największe, można kompresować i dzielić na moduły, co sprawia, że ściągane są tylko najważniejsze ich fragmenty, i ostatecznie wymagania względem przepustowości łącz maleją. W czasach, gdy popularność gwałtownie zyskuje wszelkiego rodzaju sprzęt przenośny (przykładem niech będzie iPhone), witryny internetowe muszą być swoistymi wirtualnymi Guliwerami, wymaga się od nich bowiem, żeby na zawołanie wdzięcznie zmieniały swoje wymiary i dopasowywały się tym samym do otoczenia, w jakim się akurat znalazły. Strona WWW może Grafika: wspaniały smak, zero nadwagi
|
23
gwarantować minimalne wsparcie dla urządzeń przenośnych (wersja napisana z użyciem odpowiedniej wersji CSS, z programowo okrojoną szatą graficzną i animacjami Flash uruchamianymi z serwera) bądź też udostępniać wyszukane aplikacje obsługujące wszelkiego rodzaju sprzęt łączący się z internetem. Wszystkie aspekty wykorzystywania grafiki podczas tworzenia serwisów WWW — funkcjonalność, szybkość transmisji danych, wsparcie dla urządzeń przenośnych — stanowią wyzwanie, ale bynajmniej nie powinny nikogo skłaniać do myślenia o grafice w internecie jak o czymś, co nie powinno istnieć. Nie ma najmniejszej potrzeby wracać do pierwotnej postaci stron WWW, opisanej przeze mnie na początku tego rozdziału. Wielkość wyzwania, którego musi podjąć się twórca witryny, zależy tak naprawdę od tego, jak ważnym jej elementem ma być grafika.
Przestań! To boli! Jeden ze stereotypów nierozłącznie związanych z grafiką internetową — o czym wspomniałam wcześniej — opiera się na przekonaniu, że zajmowanie się nią to poważna sprawa, bo przecież wszyscy wiedzą — tworzenie grafiki jest trudne. Ten mit należy obalić. Jak pokazałam w poprzednich podrozdziałach, każdy niemal efekt można osiągnąć dzięki lekturze poradników, analizie przykładów i próbek, postępowaniu zgodnie z instrukcjami „krok po kroku”. Oprócz wszelkiego rodzaju dokumentacji i innych materiałów pomocniczych w sieci znajduje się wiele bibliotek, osnów aplikacji, interfejsów programowania aplikacji (ang. Application Programming Interface, w skrócie API), przy użyciu których można tworzyć własne, wyrafinowane aplikacje zawierające grafikę internetową bądź też na niej bazujące. Podczas tworzenia statycznej grafiki zauważyłam pewną prawidłowość. Otóż jeśli uda się prawidłowo sklasyfikować i nazwać efekt, który pragnie się uzyskać, zawsze można znaleźć w internecie odpowiedni poradnik, nierzadko opatrzony pomocniczymi rysunkami, opisujący krok po kroku właściwą metodę osiągania zamierzonego celu (przykładem niech będzie fraza „Web 2.0 odbicie” — umożliwia ona odszukanie cennych informacji na temat napisów odbijających się w jakiejś wirtualnej, błyszczącej powierzchni). Większość poradników dotyczy pracy z programem Photoshop, ale opisane w nich czynności można wykonać analogicznie w innych aplikacjach. Technologie oparte na idei grafiki osadzonej, takie jak SVG i obiekt canvas, pozwalają pominąć wiele nużących czynności, które zazwyczaj wykonuje się podczas tworzenia obrazu — jakąś większą całość wystarczy złożyć z mniejszych elementów. Obydwa standardy bazują na jawnym, łatwo dostępnym kodzie będącym częścią kodu aplikacji internetowych, zatem ktoś, kto pragnie zająć się tworzeniem grafiki osadzonej, może zobaczyć, w jaki sposób konkretne efekty osiągnęli inni, i samemu opanować przydatne metody postępowania. Dlatego właśnie jestem wielką zwolenniczką SVG oraz obiektu canvas i poświęciłam tym technologiom dużą część niniejszej książki. W wielu rozbudowanych aplikacjach internetowych można zobaczyć graficzne efekty pochodzące prosto z technologii AJAX (ukrywanie i wyświetlanie elementów strony WWW, przesuwanie ich i przeskalowywanie, układanie warstwowe i rozmywanie oraz odpowiednie reagowanie na konkretne akcje wykonywane przez użytkownika aplikacji). Bardziej popularne z nich zostały zaimplementowane w przeróżnych bibliotekach (Prototype, JQuery, Moo Tools,
24
|
Rozdział 1. Dobra zabawa
Dojo, Dean Edwards’ base2 itd.), tak by były dostępne jako wywołanie pojedynczych funkcji. Istnieją też środowiska działające po stronie serwera, umożliwiające programowanie w językach Ruby, Python lub PHP i obsługujące jednocześnie stronę serwera i klienta. Warto wspomnieć, że nowsze, pominięte w tej książce narzędzia i środowiska programistyczne (na przykład Silverlight firmy Microsoft, AIR/Flex firmy Adobe albo będące oprogramowaniem otwartym OpenLaszlo) również nadają się do tworzenia grafiki. Bardzo rzadko zdarza się, by ktokolwiek był zmuszony programować efekty graficzne zupełnie od zera. Praca z grafiką internetową wcale nie musi być trudna. Wystarczy przyjąć zasadę, że grafika nie jest najważniejsza z punktu widzenia założeń istnienia sieci WWW, aby móc bez przeszkód z nią eksperymentować. Istotna jest swoboda, która pozwala po prostu bawić się grafiką. Jako że wciąż przekonuję Czytelnika do zerwania z typową wiedzą na temat grafiki internetowej i odrzucania stereotypów, przedstawię teraz kilka przykładów z przeszłości, które obrazują syndrom kurczowego trzymania się wyssanych z palca zasad i konwencji. Widocznymi skutkami takiego postępowania są strony WWW świetnie nadające się do straszenia dzieci, a może nawet fizycznego krzywdzenia małych, puchatych stworzeń. Mówiąc poważnie, wygląd owych przykładów świadczy o tym, że ich twórcy złamali fundamentalną i najważniejszą regułę, która mówi: grafika znajdująca się na stronie WWW nie powinna w żaden sposób ograniczać jej funkcjonalności. Listę tych przykładów zwykłam nazywać Galerią Żałosnej Grafiki Internetowej.
Galeria Żałosnej Grafiki Internetowej Skoro do tej pory wyśmiewałam reguły dotyczące tworzenia grafiki internetowej, teraz powinnam oczywiście stwierdzić, że czasami jednak obowiązują pewne zasady. Wielki, ciągle rozwijający się świat internetu jest pełen zarówno twórczych wzlotów, jak i porażek. Można powiedzieć, że pod wieloma względami dzisiejsza sieć przypomina tę z lat osiemdziesiątych poprzedniego stulecia — za dużo w niej błahości oraz złego smaku. Ludzie zaś chętnie śmieją się z tego, co kiedyś robili, nawet jeśli owoce ich pracy budzą w nich sentyment. Opierając się na powyższym stwierdzeniu, zamierzam przedstawić Galerię Żałosnej Grafiki Internetowej. Zanim jednak to zrobię, pragnę podkreślić, że w żadnym razie nie chcę nikogo wyśmiewać, natomiast z przyjemnością oddam hołd ludzkiej kreatywności. Każdy z przedstawionych niżej stylów tworzenia stron WWW stanowi symbol naszego rozwoju, a nauka — jak wiadomo wszem i wobec — bywa bolesna. Skorzystam z metody konstruowania wypowiedzi zapożyczonej od komika z nocnych programów telewizyjnych Davida Lettermana1 oraz licznych ekspertów z małego ekranu i Galerię Żałosnej Grafiki Internetowej przedstawię w kolejności od najmniej do najbardziej pożałowania godnych „dzieł”.
1
David Michael Letterman to znany amerykański komik i prezenter telewizyjny. Stał się sławny dzięki cyklicznemu programowi telewizyjnemu Late Show with David Letterman — przyp. tłum.
Galeria Żałosnej Grafiki Internetowej
|
25
10. Strona w budowie W swoim czasie internet dosłownie zaśmiecono całą masą „stron w budowie” (przykład „strony w budowie” można zobaczyć na rysunku 1.3). Wiele witryn pozostawało w tym dziwnym stanie przez całe miesiące, a bywały też i takie, które „tworzono” latami. Zazwyczaj umieszczano na nich iście czarujące obrazki z napisami w stylu „Strona w trakcie tworzenia” oraz informacje o tym, jakimi niesamowitościami za jakiś czas zostaną uraczeni internauci. Niestety, najczęściej kończyło się na obietnicach.
Rysunek 1.3. Dwa w cenie jednego — „Strona w budowie” i piekielna tapeta
Niektóre ze wspomnianych witryn wyglądały całkiem nieźle, dlatego nie zamierzam krytykować sposobu, w jaki ich autorzy wykorzystywali dobrodziejstwa grafiki. Nie! Po prostu pojawiały się w sieci w tak wielkiej liczbie, że w pewnym momencie odniosłam wrażenie, iż cały internet tworzą tylko i wyłącznie ludzie dojmująco niezdolni do realizowania swoich genialnych pomysłów. Dziś już rzadko spotyka się w sieci animacje i napisy głoszące, że „strona jest w budowie” — to konkretne zastosowanie grafiki, podobnie zresztą jak i wiele innych, było niejako znakiem swoich czasów. Aktualnie na większości jeszcze niegotowych stron widnieją: nazwa witryny, opis jej przyszłej zawartości i niekiedy odnośniki prowadzące do serwisów z dodatkowymi informacjami. Coraz rzadziej autorzy stron umożliwiają indeksowanie niedokończonych stron w wyszukiwarkach internetowych, co uważam za zupełnie właściwy trend.
26
|
Rozdział 1. Dobra zabawa
9. Projektowanie stron WWW a grafika internetowa — ogon macha psem Niniejsza książka w założeniu ma traktować nie o projektowaniu stron WWW, lecz o grafice internetowej, niemniej niedbalstwem byłoby pominąć ten temat, jako że wiąże się on bezpośrednio z kwestią, w jaki sposób wykorzystuje się grafikę. Uważam, że moim obowiązkiem jest omówić pokrótce pewne mody widoczne w dziedzinie projektowania witryn oraz korzystania z grafik, których istnienie można uznać za zbrodnię przeciwko indywidualizmowi. Na początku (wcale nie mam tu na myśli początku rozumianego biblijnie) wszystkie strony WWW wyglądały identycznie, przede wszystkim dlatego, że w zasadzie inaczej wyglądać nie mogły. Przed pojawieniem się pierwszej wersji przeglądarki Mosaic niemożliwe było nawet umieszczanie na nich obrazków. Mimo że dziś do wyboru mamy więcej ciekawych możliwości kreowania wyglądu stron WWW niż kiedyś, wciąż rosnący stopień zaawansowania grafiki internetowej i nowe techniki jej tworzenia w wyraźny sposób kreują mody. Kilka lat temu, gdy nowością była opcja pozwalająca tłem witryny zrobić dowolny obrazek, wszyscy jak jeden mąż tła stron WWW upiększali obrazkami. Później przyszła moda na DHTML i nagle w sieci zaroiło się od wielkich, rozwijalnych opartych na skryptach menu. Następnie pojawiły się pstrokate serwisy pisane w języku Flash, dziś natomiast furorę robią napisy „stojące” na lustrzanych, częściowo odbijających literki płaszczyznach (rysunek 1.4). Ponadto ludzie zakochali się w „betach”, które opisują stan prac prowadzonych nad danym serwisem od jego nieszczęsnej wersji alfa po moment, w którym działa on absolutnie bezbłędnie.
Rysunek 1.4. Przykład projektu typowego dla danego czasu — w tym wypadku jest to mniej więcej rok 2007 Warto zwrócić uwagę na to, jak litery odbijają się w „podłożu”, na którym „stoją”, oraz na dostawioną „betę”. Ten projekt niewątpliwie szybko wyjdzie z mody
Taka jednomyślność w dziedzinie projektowania stron WWW wynika z fascynacji „nowymi zabawkami”. Ludzie uwielbiają wszelkie nowinki, więc z upodobaniem używają wszystkiego, co pojawiło się niedawno. Twórczą siłą napędową motywującą do pracy okazuje się być chęć stworzenia grafiki nowoczesnej, a nie takiej, która odpowiadałaby indywidualnym upodobaniom i gustowi osoby projektującej witrynę. Prościej (a może modniej?) jest tworzyć projekty w oparciu o najnowsze technologie i z wykorzystaniem najnowocześniejszych technik, tak aby nie przejmować się tym, co się z nimi stanie, gdy już się zestarzeją. Galeria Żałosnej Grafiki Internetowej
|
27
Rysunek 1.5. Główna strona wyszukiwarki Google: projekt klasyczny i ponadczasowy zarazem
8. Chomik w kolorowym kółku Czarny tekst na białym tle może i jest bardzo czytelny, ale nie przyciągnie na długo uwagi ludzi z pokolenia przyzwyczajonego do kolorowej telewizji oraz fotografii, nie wspominam o dzieciach kwiatach, dla których nawet czerń i biel były jak najbardziej kolorowe. Na szczęście organizacja W3C stworzyła wersję 3.2 języka HTML (w której pojawiły się pewne ciekawe atrybuty) i uratowała tym samym ludzi przed życiem w świecie monochromatycznych stron WWW. Za pomocą wspomnianych atrybutów można było zmieniać kolor czcionki i tła, a także — korzystając z przyprawiającego o zawrót głowy bogactwa znaczników — umieszczać w tle witryny wybrane przez siebie obrazy. Nagle internet ożył całą gamą kolorów. Tam, gdzie kiedyś widniały stateczne czerń i biel, teraz pojawiły się krzykliwe obrazki pokryte niebieskim, czerwonym lub żółtym tekstem, a nierzadko tekstem we wszystkich kolorach naraz. Ale to nie wszystko! Wszak można było również zmieniać obrazek tła osobno dla każdej komórki tabeli. Jako że układ większości stron WWW planowano, korzystając z tabel HTML, można było ustawić nie tylko tło i kolor czcionki dla całej witryny, lecz także podzielić stronę na wiele osobnych kawałków, a każdemu z nich zupełnie indywidualnie przypisać obraz tła i barwę czcionki. Krzykliwe efekty takich działań były wielkimi, przyprawiającymi o ból głowy widowiskami. Całość sprawiała niesamowite wrażenie. To tak, jakby napoić wiele chomików silnym espresso z dobrych, kolumbijskich ziaren, po czym wpuścić każdego z nich z pojemniczkiem farby do osobnego kolorowego kółka. Uważam, że używanie różnych kolorów podczas tworzenia stron WWW jest czymś właściwym. Czasami za bardzo przejmujemy się wymogami dobrego smaku, a zapominamy o naszych indywidualnych upodobaniach. Jednocześnie jednak trzeba zrozumieć, że umieszczanie tekstu bezpośrednio na wzorzystym tle, ciemnoczerwonych liter na czarnej płaszczyźnie lub napisów w kolorze żółtej ochry na tle różowym skutkuje tym, że strona staje się zupełnie nieczytelna. Można połączyć subtelny, klarowny obrazek tła z tekstem bądź też użyć różnokolorowych czcionek do pisania na wielobarwnym tle. Należy jednak przy tym bardzo uważać, najważniejszym założeniem podczas tworzenia witryny powinna być bowiem czytelność znajdującego się na niej tekstu, a nie projekt sam w sobie.
28
|
Rozdział 1. Dobra zabawa
I ja nie oparłam się czarowi kolorów — przez lata odważnie eksperymentowałam z barwami tekstu oraz obrazkami w tle. Gdy uśmiecham się na widok gryzonia biegającego w kółku, robię to z pełnym wyrozumiałości rozbawieniem. Chomik z nadmiarem kofeiny we krwi wciąż żyje i od czasu do czasu wychyla łepek ze swojej norki. Z powodzeniem można go szukać w serwisie Tripod (http://www.tripod.lycos.com). Wystarczy wpisać w wyszukiwarce hasło unicorns2 albo rainbows3, żeby zobaczyć całe stada chomików. Większość ze znalezionych stron okaże się witrynami nieaktualizowanymi od lat. Są one historią ewolucji projektowania internetowego zatopioną w wyjątkowo paskudnym kawałku bursztynu. Przykład wielobarwnej, krzykliwej strony został przedstawiony na rysunku 1.6.
Rysunek 1.6. Jest coś takiego w jednorożcach, że ich widok zmusza człowieka do umieszczania kolorowego tekstu na wielobarwnym tle i w efekcie tworzenia zupełnie nieczytelnych stron WWW
7. Okienek nigdy dość Niektóre strony WWW przeglądam tylko wtedy, kiedy naprawdę muszę, przy czym nie oznacza to, że nie podoba mi się jakość tekstów, które się na nich pojawiają, albo ich treść. Po prostu witryny te otwierają mnóstwo małych okienek, powiązanych z różnymi zewnętrznymi serwisami, przez co ładują się w oknie przeglądarki nawet do kilku minut. Siedzę wtedy i — uważnie obserwując pasek stanu mojej przeglądarki — czekam, aż wszystkie dane raczą się ściągnąć. Należy to powiedzieć wprost: mnóstwo stron reklamowych, z których pochodzą niechciane okienka, ma poważne problemy z poprawnym działaniem.
2
Jednorożce — przyp. tłum.
3
Tęcze — przyp. tłum.
Galeria Żałosnej Grafiki Internetowej
|
29
Osadzanie w obrębie stron WWW dostępu do innych witryn jest znane od lat, szczególnie zaś kojarzy się z niechcianymi reklamami otwieranymi przez jakiś zewnętrznie kontrolowany proces. Jednakże w ostatnich latach można zaobserwować prawdziwą plagę małych okienek, których zawartość pochodzi ze źródła niezwiązanego z przeglądaną stroną. Okienka wydatnie wzbogacają treść odwiedzanej witryny. Dzięki nim osoba przeglądająca ją może sobie obejrzeć: zdjęcia pochodzące z serwisu Flickr, kierunki i współrzędne zaznaczone na mapach Google, jeden lub dwa klipy z YouTube i diabli wiedzą co jeszcze. Wspaniale, tylko należy jednocześnie pamiętać, że skutecznie spowalniają działanie przeglądanej strony, a także przeglądarki osoby ją odwiedzającej. Niewielki zestaw dobrze dobranych okienek, których zawartość pokrywałaby się z tematyką strony bądź aplikacji internetowej, mógłby sprawić, że dana strona lub aplikacja stałaby się ciekawsza i poniekąd unikalna. Twórca strony albo aplikacji, wraz z którą otwierałyby się proste, nieobciążające łącza ani komputera okienka z atrakcyjnymi grafikami, na pewno zostałby doceniony przez użytkowników internetu. Z drugiej jednak strony, witrynę WWW stworzoną przez kogoś, kto uważa, że krzykliwe, natrętne, bezładnie porozrzucane na ekranie okienka są super, nieuchronnie czeka smutny los, jako że ludzie zwyczajnie nie będą mieli ochoty jej odwiedzać.
6. Przeglądarkowe Wojny Jak przez mgłę pamiętam moment pojawienia się na rynku pierwszej wersji przeglądarki Netscape Navigator. Program ten trzeba było kupić, jeśli chciało się go używać. Trudno to sobie wyobrazić dziś, gdy przeglądarki dostępne są za darmo, tymczasem sprzedawany użytkownikom sieci Netscape Navigator niepodzielnie panował na rynku przeglądarek aż do roku 1995. W tym roku firma Microsoft udostępniła swoją pierwszą przeglądarkę Internet Explorer. Pierwsze wersje programu Internet Explorer nie były niczym szczególnie ciekawym. Sytuacja ta zaczęła wyglądać zupełnie inaczej, gdy obydwie firmy — Microsoft i Netscape — udostępniły internautom wersję 4.0 swoich produktów. Tak oto zaczęły się Przeglądarkowe Wojny. Obie firmy wypuściły obłożone prawami autorskimi rozszerzenia do swoich programów. Szczególnie dużo uwagi poświęcono stworzeniu obiektowego modelu dokumentu (ang. Document Object Model, w skrócie DOM), wspieranego przez JavaScript (Jscript w przypadku aplikacji Internet Explorer) i umożliwiającego wyświetlanie w przeglądarkach interaktywnych efektów graficznych. Każda z przeglądarek zyskała znaczną liczbę zwolenników, zatem zaczęły się pojawiać strony internetowe pisane wyraźnie z myślą o jednej z nich. Nawet dziś, gdy tworzenie stron dedykowanych konkretnej przeglądarce jest źle widziane, nierzadko spotyka się witryny przystosowane do przeglądania za pomocą programu Internet Explorer. Jeśli ktoś chciał być mądry i stworzyć stronę, która działałaby w obydwu wymienionych wyżej przeglądarkach, a także w tych dopiero pojawiających się na rynku, musiał korzystać z technik zapewniających zgodność dokumentu HTML ze wszystkimi aplikacjami oraz całego zestawu trików i sztuczek. Biblioteki JavaScript, zapewniające wsparcie dla obydwu czołowych przeglądarek, pełne były kodu warunkowego, sprawdzającego typ przeglądarki, której użyto do wyświetlenia strony, albo rodzaj otwieranego w jej oknie obiektu. Przez to ich rozmiary wzrosły dwu- lub nawet trzykrotnie w stosunku do tych, jakie miałyby, gdyby tylko w przeglądarkach zaimplementowany został ten sam obiektowy model dokumentu.
30
|
Rozdział 1. Dobra zabawa
Jeśli chodzi o CSS, najsłynniejszym błędom właściwym przeglądarce Internet Explorer nadawano nazwy, gdy tylko znajdowano sposoby radzenia sobie z nimi. Na przykład problem o dźwięcznej nazwie „Peekaboo bug” rozwiązywano metodą „box model hack”. Wczesny okres wojen między firmami tworzącymi przeglądarki był wyjątkowo złym czasem dla wszystkich, którzy chcieli tworzyć aplikacje internetowe, lecz zarazem miał niebagatelny wpływ na rozwój całej sieci. Gdyby firmy te nie konkurowały ze sobą, tylko poczekały, aż odpowiednie organizacje, takie jak World Wide Web Consortium (W3C), opracują konkretne standardy, i zdecydowały się owych standardów przestrzegać, znane dziś technologie, specyfikacje i same przeglądarki nie zostałyby rozwinięte w znanym nam stopniu lub też nie pojawiłyby się w ogóle. Do osiągnięć wynikłych z walki firm starających się podbić rynek oprogramowania służącego do eksplorowania internetu zaliczyć można postęp w dziedzinie grafiki internetowej, którego zalążkiem stało się tworzenie przez nie autorskich rozszerzeń przeznaczonych dla konkretnej przeglądarki. Tak czy inaczej, w drugiej połowie lat dziewięćdziesiątych XX wieku twórcy stron WWW naprawdę nie mieli lekkiego życia. Tim Berners-Lee4, dumny ojciec internetu, w roku 1996 opublikował na łamach „Technology Review” następujący tekst: Każdy, kto w obrębie swojej witryny internetowej umieszcza informację o treści „tę stronę najlepiej otwierać w przeglądarce X”, zdaje się pragnąć powrotu do starych, złych czasów, kiedy nie było jeszcze sieci WWW i miało się bardzo niewielkie szanse na przeczytanie dokumentu napisanego na innym komputerze, przy użyciu innego edytora tekstu lub istniejącego w odrębnej sieci. Dziś teoretycznie Przeglądarkowych Wojen się nie toczy, jednakże użytkownicy internetu wciąż borykają się z różnicami w działaniu poszczególnych przeglądarek. W przypadku dalszego rozwoju sieci WWW rozbieżności mogą dać efekt odwrotny do zamierzonego, szczególnie dostrzegalnie wpłyną zaś na los bardziej wyrafinowanych funkcji JavaScript i grafiki osadzonej (pełne wsparcie dla SVG lub obiektu canvas).
5. Nawigacja-niespodzianka Gdy projektanci stron WWW po raz pierwszy zetknęli się z językiem o nazwie Dynamiczny HTML (ang. Dynamic HTML, w skrócie DHTML), zrozumieli, że nadszedł dla nich wspaniały czas. Mogli zwijać i rozwijać elementy witryny, dowolnie zmieniać ich kolory, korzystać z opcji przezroczystości oraz przycinania, a nawet osobiście tworzyć animowane efekty. Nie minęło wiele czasu, a okazało się, że za pomocą języka DHTML pisze się kompletnie wszystko, włącznie z najważniejszymi fragmentami kodu strony odpowiedzialnymi za nawigację po niej. W drugiej połowie 1999 roku zostałam wynajęta przez jakąś nowo założoną firmę z Bostonu zajmującą się tworzeniem stron WWW — miałam zmusić do działania aplikacje, które stanowiły jej źródło utrzymania. Sprawa wyglądała tak: wykorzystano środki finansowe wiceprezesa i wynajęto grupę projektantów, których praca kosztowała łącznie 1,2 miliona dolarów. Ludzie ci stworzyli całkiem ładne witryny, tyle że żadna z nich nie chciała działać po wyłączeniu obsługi skryptów. Oczywiście projektanci nie zdefiniowali żadnych usług wykonywanych po stronie serwera, lecz gdyby nawet to zrobili, nie byłoby dużo lepiej, jako że napisane przez nich strony działały jedynie w oparciu o rozwijalne, zbudowane z obrazków menu wymagające od przeglądającego stronę korzystania z myszy. Ironia całej tej sytuacji polegała na tym, że jeden z głównych testerów systemu był niewidomy. 4
Tim Berners-Lee jest jednym z twórców usługi WWW. Od 1994 roku piastuje stanowisko przewodniczącego organizacji W3C — przyp. tłum. Galeria Żałosnej Grafiki Internetowej
|
31
Z problemem stron WWW poradziliśmy sobie następująco: pozbyliśmy się wszystkich menu napisanych za pomocą języka skryptowego, uprościliśmy ogólną strukturę witryn i zabraliśmy się do pracy nad ostatecznym kształtem aplikacji. Składnikami tworzącymi menu nadal były grafiki, ale tym razem oprócz nich pojawiły się także hipertekstowe odnośniki, możliwość nawigowania po stronie za pomocą klawiatury oraz tekst alternatywny. Współcześnie bardzo często spotyka się w sieci witryny WWW z nawigacją-niespodzianką. Każdemu, kto używa przeglądarki Firefox, polecam przeprowadzenie ciekawego eksperymentu — należy zainstalować w przeglądarce dodatek NOSCRIPT, całkowicie wyłączyć obsługę skryptów i zobaczyć, po których ze znanych sobie stron nadal można nawigować. Po znalezieniu kolejnych niedziałających stron pozostaje co najwyżej pomruczeć sobie pod nosem: „Nieładnie, oj nieładnie…”. Silniki wyszukiwarek „nie lubią” dynamicznych, zbudowanych z obrazków menu. Jeśli ktoś chce, żeby jego strona pojawiała się w wynikach wyszukiwania wyświetlanych przez wyszukiwarki, powinien konstruować menu statyczne i oparte na zwykłych odnośnikach.
4. Animowane GIF-y Dawno temu jedynymi aktywnymi komponentami stron WWW były animowane GIF-y, nic więc dziwnego, że w pewnym momencie cały świat oszalał na ich punkcie. Uważam, że w korzystaniu z nich podczas tworzenia witryn nie ma niczego niewłaściwego (sama używam na przykład animowanych wskaźników postępu ładowania strony, czyli tzw. throbberów), jeśli tylko robi się to z umiarem. Prawdziwym problemem stało się nie samo umieszczanie GIF-ów na stronach WWW, lecz ich nadużywanie. Wydawało się, że witryny, na których znajdowały się setki tych ruchomych potworków wydatnie spowalniających proces wczytywania się danych, tworzono z myślą o dezorientowaniu odwiedzających je osób i wywoływaniu w nich nieodpartego pragnienia ratowania swojego życia bardzo szybką ucieczką. Istnieje jeszcze jedno realne zagrożenie związane z używaniem efektów animowanych. Ruchome GIF-y określonego typu mogą wywoływać ataki u ludzi chorych na epilepsję. Każda animacja przedstawiająca powtarzający się schemat graficzny i powodująca, że monitor komputera mruga z częstotliwością od 2 do 55 Hz jest w stanie wywołać atak padaczkowy, w związku z czym powinna być umieszczona na stronie poprzedzonej witryną z adekwatnym ostrzeżeniem.
Animacje mogą być pożytecznymi elementami witryny WWW tylko wtedy, gdy nie zaburzają działania programów służących do odczytywania stron internetowych. Zawsze powinniśmy mieć możliwość własnoręcznego włączenia filmu, prezentacji itd. Krótko mówiąc, z punktu widzenia użytkownika sieci ważna jest kontrola nad animowanymi elementami serwisów WWW, a GIF-y, niestety, kontrolować się nie dają. Efekty graficzne uzyskiwane za pomocą technologii AJAX (na przykład zmiana koloru elementu strony sygnalizująca, że właśnie zaszła jakaś zmiana) działają zupełnie inaczej. Nie trwają długo, a poza tym stosuje się je w celach praktycznych — służą do podkreślania zmian zachodzących na stronie WWW, natomiast jedynym zadaniem animowanych GIF-ów jest tkwić w jednymi miejscu i bezsensownie mrugać. 32
|
Rozdział 1. Dobra zabawa
W internecie czyha na człowieka mnóstwo denerwujących animacji, tyle że dziś tworzy się je z wykorzystaniem technologii Flash. Ponadto w większości przypadków są to reklamy. Swoją drogą nie mam zielonego pojęcia, dlaczego niektórzy ludzie żywią przekonanie, że wystarczy być nieznośnie natrętnym, aby przekonać obcą osobę do kliknięcia odnośnika reklamowego oraz zakupu jakiegoś produktu. Odnoszę wrażenie, że twórcy animowanych reklam ciągle jeszcze tkwią w erze stron WWW pełnych latających motylków, migających klejnotów, samochodzików, którym kręcą się kółka, oraz parowozików wypuszczających kłęby dymu. Twórcom wspomnianych reklam oraz tym, którzy udostępniają im miejsce na serwerach, sugeruję przeprowadzenie diametralnej zmiany sposobu myślenia. Ponadto wszystkim tym, którzy mają ochotę przyjrzeć się z bliska rzeczywiście interesującym przykładom wykorzystania denerwujących GIF-ów, ponownie polecam odwiedzenie serwisu Tripod (http://www.tripod.lycos. ´com); tym razem radzę szukać wyrazów butterflies5 i rainbows (nieprzemyślane używanie GIF-ów do „upiększania” stron WWW to tylko jeden z wielu niewłaściwych sposobów wykorzystania z grafiki internetowej; w połączeniu z okropnymi melodyjkami w formacie MIDI tworzy naprawdę koszmarną kompozycję). Nie mam najmniejszego zamiaru wytykać palcem konkretnych ludzi ani wyśmiewać konkretnych projektów stron WWW. Wskazując Czytelnikowi pewien ogół witryn, chciałam uniknąć podawania konkretnych adresów URL czy nazw serwisów.
3. Ekran powitalny Nawet obecnie użytkownikowi internetu nierzadko zdarza się ujrzeć ekran powitalny będący jakąś animacją Flash. Po odtworzeniu animacji na ekranie powitalnym pojawia się opcja Wejdź. Pomysł ten sam w sobie nie jest zły, niemniej należy pamiętać o zasadzie mówiącej, że nie powinno się odbierać użytkownikom sieci WWW kontroli nad działaniem przeglądanych przez nich stron. Niestety, ekrany powitalne często są tworzone w taki sposób, by odwiedzający je ludzie musieli obejrzeć całą animację, a tym samym czekać na dostęp do właściwej zawartości serwisu. Strony internetowe, które same zmieniają rozmiar okna przeglądarki, również należą do kategorii „odbierz użytkownikowi sieci WWW kontrolę nad tym, co się dzieje”. Istnieje bowiem istotna różnica między otwarciem nowego okna pomocniczego a zmienianiem ustawień tego, które jest używane przez osobę przeglądającą stronę. Praktyki tego typu są tak samo, a może nawet bardziej karygodne niż tworzenie niewygodnych ekranów powitalnych.
Nowoczesne reklamy wykorzystujące DHTML, pojawiające się nad tekstem lub zdjęciami, zasłaniające właściwą zawartość serwisów WWW i znikające dopiero po obejrzeniu ich w całości albo po kliknięciu maleńkiego przycisku Zamknij, w równym stopniu co ekrany powitalne blokują użytkownikom dostęp do prawdziwej treści strony. Po raz kolejny muszę to stwierdzić: nie mam pojęcia, dlaczego ludziom tworzącym niewyobrażalnie męczące, denerwujące reklamy wydaje się, że ktokolwiek mógłby skorzystać z owych ogłoszeń do otworzenia jakiegokolwiek odnośnika lub zakupu jakiegokolwiek produktu. 5
Motyle — przyp. tłum.
Galeria Żałosnej Grafiki Internetowej
|
33
W trakcie budowania stron WWW niekiedy zachodzi potrzeba skorzystania z takiej czy innej technologii, użycia jakiejś wtyczki bądź elementu napisanego w języku Flash lub JavaScript. Należy wtedy zaprojektować wersję alternatywną serwisu pozbawioną tego typu dodatków. Można przecież stworzyć stronę powitalną, dzięki której osoba odwiedzająca nasz serwis będzie mogła wybrać jego odpowiednią wersję, zyska pełną kontrolę nad typem przeglądanej zawartości, a ponadto nie zostanie zmuszona do otwierania stron opartych na technologiach, z których nie jest w stanie skorzystać. Tworzenie ekranu powitalnego staje się w miarę sensownym rozwiązaniem tylko w przypadku, jeśli daje się przeglądającemu stronę możliwość nieoglądania animacji lub natychmiastowego przejścia do właściwej części serwisu WWW. Nie uważam, żeby ekrany powitalne były szczególnie pożyteczne, ale jeżeli już powstają, niech chociaż grafika użyta do ich tworzenia nie przeszkadza internautom w przeglądaniu witryn. Ekrany powitalne, zupełnie jak nawigacja-niespodzianka, nie najlepiej współpracują z silnikami wyszukiwarek internetowych.
2. Tylko nie BLINK! Większość użytkowników internetu prawdopodobnie uznałaby, że znacznik BLINK (a także jego odpowiednik MARQUEE) zasługuje na honorowe pierwsze miejsce w Galerii Żałosnej Grafiki Internetowej, trudno bowiem wyobrazić sobie bardziej irytujący i rozpraszający uwagę znacznik HTML. Korzystający z niego twórcy stron internetowych wydają się żywić przekonanie, podobnie zresztą jak ich zakochani w animowanych GIF-ach koledzy, że uwagę internauty odwiedzającego daną witrynę należy przykuwać do niej siłą. Najwyraźniej ludzie ci sądzą, że zwyczajny, prosty tekst nie jest niczym atrakcyjnym. Używanie znacznika MARQUEE nigdy nie dawało aż tak kiepskich efektów jak posługiwanie się znacznikiem BLINK, dlatego jego popularność nie dorównywała sławie tego drugiego. Mimo to, pojawiając się na stronach, MARQUEE denerwował tak samo jak BLINK — po pierwsze tekst przewijał się zbyt szybko, by móc go przeczytać, a po drugie trudno było skupić uwagę na zawartości odwiedzanej strony WWW. W przypadku obydwu wymienionych znaczników prawdziwym problemem jest to, że jeśli zostały użyte w trakcie tworzenia strony WWW bądź aplikacji internetowej, internauci stykający się z nimi nie mają na ich działanie żadnego wpływu. Nie są w ogóle pożyteczne, a tylko rozpraszają uwagę osoby usiłującej zapoznać się z zawartością witryny. Stanowią graficzną metodę uzyskiwania iluzji interaktywności strony WWW, a więc z czystym sumieniem można je nazwać tanimi sztuczkami. Aktualnie przykładami wykorzystania znaczników BLINK i MARQUEE są już tylko stare, dawno nieaktualizowane witryny. Niestety, istnieją ich nowocześniejsze odpowiedniki, można się z nimi zetknąć choćby za sprawą technologii AJAX. Wiele magazynów internetowych ma wbudowane nagłówki lub okienka wideo, w których wyświetla się różne teksty i obrazy mające zachęcić internautów do przeczytania takiego czy innego artykułu. Zazwyczaj poszczególne klatki są wyświetlane zbyt szybko, by zdążyć kliknąć tę, która nas interesuje. Lepszym rozwiązaniem byłoby wyświetlanie reklam trzech najciekawszych
34
|
Rozdział 1. Dobra zabawa
artykułów oraz udostępnianie odnośnika pozwalającego przejść do listy tytułów pozostałych tekstów. Można by przynajmniej obok okienka reklamowego zamieścić odnośnik do strony, na której wypisano wszystkie polecane artykuły. Całkiem niedawno twórcy popularnej wyszukiwarki blogów dokonali zasadniczych zmian w swoim dziele. Między innymi „poprawili” górną część strony, działającą w oparciu o słowa kluczowe służące do klasyfikowania zawartości stron WWW, dodając do znajdującego się w niej tekstu efekt przewijania, bardzo podobny do tego znanego dzięki znacznikowi MARQEE, oraz efekt odświeżania pochodzący prosto z technologii AJAX. Rozwiązanie to nie tylko okazało się kompletnie bezużyteczne, ale również nie chciało należycie działać w niektórych przeglądarkach (na przykład w mojej przeglądarce Firefox uruchomionej na Macintoshu). Panel boczny serwisu Flickr służy do wyświetlania miniatur zdjęć. Jeśli najechać kursorem myszy na którąś z tych miniatur, natychmiast otwiera się modne animowane okienko zawierające powiększoną fotografię. Niestety, większość otwartych w ten sposób zdjęć wygląda po prostu paskudnie. Ostatnimi czasy internauci wolą nieco bardziej statyczne strony WWW, co dowodzi, że nadużywanie tego typu animacji wynika w większym stopniu z zamiłowania projektantów witryn do nowinek technicznych niż z prawdziwych potrzeb przeciętnego użytkownika usług dostępnych w sieci. Po raz kolejny to napiszę: umiarkowane korzystanie z animacji w celu podkreślenia istotnych informacji w nierażący sposób może być praktyką naprawdę pożądaną, natomiast bezmyślne umieszczanie ich gdzie popadnie, powoduje tylko niepotrzebne zamieszanie. Gdyby tylko udało się przekonać do tego punktu widzenia tych nieszczęsnych twórców animowanych reklam… No dobrze. Przedstawiłam już historię Przeglądarkowych Wojen i animowanych informacji typu „najlepiej przeglądać w”, dzielnie rywalizujących o palmę pierwszeństwa z szaleństwem kolorów i złośliwością okienek zasłaniających przeglądaną stronę. Czy można znaleźć jeszcze gorsze przykłady wykorzystania grafiki internetowej niż te, które właśnie wymieniłam? Czy istnieje coś jeszcze brzydszego niż nieszczęsny BLINK? Owszem! Co ciekawe, tego czegoś nawet nie widać.
1. „Pusty” GIF Zanim język CSS stał się popularny, istniały dwie główne metody ustalania układu elementów strony WWW. Pierwszą z nich było odpowiednie wykorzystanie tabel HTML, drugą zaś właściwe używanie przezroczystego pliku GIF o wymiarach 1×1 px, popularnie zwanego spacerem6. Gdy język HTML wzbogacono o znacznik IMG, atrybutami, które można było ustawiać dla tego znacznika, były width i height oraz vspace i hspace — atrybuty umiejscowienia zawartości witryny. Ogólnie vspace i hspace służyły do regulacji położenia zawartości strony WWW wewnątrz komórek tabeli oraz względem pozostałych elementów witryny. Jeśli chciało się przesunąć element strony w dół lub w prawo albo w lewo, można było użyć spacera GIF, podając odpowiednio wartości parametrów wysokości lub szerokości (inaczej mówiąc vspace i hspace). Technika ta pozwalała na przemieszczanie całych bloków teksu, robienie wcięć w akapitach, umieszczanie poszczególnych elementów strony w dowolnych miejscach itd. 6
Spacer — słowo pochodzące od angielskiego słowa space (przestrzeń, puste miejsce). W żargonie informatycznym stanowi nazwę obrazka pozycjonującego — przyp. tłum.
Galeria Żałosnej Grafiki Internetowej
|
35
Nie wiadomo, kto wpadł na pomysł korzystania ze spacera GIF, niemniej uważa się, że rozpropagował go David Siegel — autor książki Creating Killer Web Sites (Hayden Books). Każdemu, kto chciałby się zapoznać z czarującą przeszłością sieci, polecam przeczytanie tekstu zamieszczonego na stronie http://www.killersites.com/killerSites/ ´1-design/single_pixel.html.
Ciągle jeszcze mam swój spacer GIF (nazywa się on blank.gif), którego używałam w trakcie projektowania różnych witryn WWW. Swoją drogą trzeba przyznać, że idea tworzenia za pomocą tabel i spacera takich układów elementów stron internetowych, które same dostosowują się do rozmiaru okna przeglądarki, była bardzo sprytna. Pomysł ten miał jednak swoje wady. Otóż projektanci witryn bardzo rzadko dbali o to, żeby atrybut alt spacerów miał przypisaną wartość będącą łańcuchem pustym (""), w wyniku czego programy odczytujące zawartość stron WWW nie pomijały jednopikselowych GIF-ów. Eksplorowanie witryny stworzonej w oparciu o spacery GIF bez tekstu alternatywnego za pomocą programu czytającego musiało być okropnym przeżyciem. Spacer GIF, tabela HTML, znacznik FONT i atrybuty takie jak bgcolor oraz background wykazywały pewne wspólne cechy: pozwalały jakoś sobie radzić z tym, że CSS był słabo wspierany przez przeglądarki internetowe, stymulowały gwałtowny rozwój technik tworzenia stron WWW, a także były pierwszymi prymitywnymi narzędziami, dzięki którym miało się znaczący wpływ na ostateczny wygląd tworzonej witryny. Niestety, ich pojawienie się spowodowało, że ustalanie nowych standardów oraz zapewnianie wsparcia już istniejącym (na przykład CSS) przestało być sprawą pilną. Po dziś dzień wiele stron tworzy się przy użyciu starych technik. Przyczyną takiego stanu rzeczy jest ludzka niechęć do uczenia się nowych metod postępowania, jeśli stare ciągle działają. Spacer GIF wybrałam na reprezentanta rodziny starych i przeterminowanych technik kreowania wyglądu witryn WWW. Umieściłam go na pierwszym miejscu listy tworzącej Galerię Żałosnej Grafiki Internetowej, ponieważ stał się on czynnikiem, który chyba najbardziej niekorzystnie wpłynął na rozwój standardowej, wyświetlanej za pomocą różnych przeglądarek grafiki internetowej.
Czas na cudowną różnorodność Jak wcześniej wspomniałam, jedyną regułą obowiązującą podczas tworzenia grafiki internetowej jest stwierdzenie, że nie może ona wpływać na funkcjonalność strony WWW. Inaczej mówiąc, grafika nie powinna utrudniać internautom przeglądania zawartości witryny. Poniżej wypisałam kilka intuicyjnych zasad, o których warto pamiętać. • Nie powinno się stosować kolorów i wzorów, które utrudniają odszukiwanie i odczytywanie
zawartości strony. • Animacje muszą być użyteczne; nie powinny rozpraszać uwagi osoby przeglądającej wi-
trynę, a już tym bardziej nie mogą stanowić zagrożenia dla jej zdrowia. • Program służący do odczytywania zawartości stron WWW powinien mieć pełną kontrolę
nad wszystkimi animacjami i zaawansowanymi technicznie elementami witryny. • Agresywna grafika internetowa nie powinna blokować dostępu do zasobów witryny
programowi służącemu do odczytywania zawartości stron WWW.
36
|
Rozdział 1. Dobra zabawa
• Grafika nie powinna mieć wpływu na funkcjonowanie najważniejszych elementów strony
(na przykład na funkcjonowanie elementów strony odpowiedzialnych za nawigację po niej). • Grafika umieszczana na stronach WWW powinna czemuś służyć, a nie istnieć dla samego
istnienia (warto jednak pamiętać, że satysfakcja to całkiem sensowny powód). Naprawdę nie istnieją żadne inne reguły, poza tymi zdroworozsądkowymi, dotyczące sposobów kreowania i wykorzystywania grafiki internetowej. Zajmowanie się grafiką nie musi być ani drogie, ani trudne — nie trzeba urodzić się jako połączenie Picassa i Normana Rockwella, żeby móc ją tworzyć. Wszystko, czego naprawdę trzeba, to dobre chęci, zainteresowanie tematem i umiejętność cieszenia się tym, co się robi. Każdy, kto uważa, że poprzednie zdanie pasuje do niego jak ulał, jest gotów, by przeczytać resztę tej książki i zapoznać się z cudowną różnorodnością grafiki internetowej.
Czas na cudowną różnorodność
|
37
38
|
Rozdział 1. Dobra zabawa
ROZDZIAŁ 2.
Obrazy
Nic nie zastąpi tekstu, jeśli trzeba przekazać konkretne informacje, lecz jakże nieciekawy byłby świat bez obrazów, które przecież stały się nieodłącznym elementem książek już wtedy, gdy pisano pierwsze z nich. W Biblii Gutenberga, czyli w pierwszej książce drukowanej, pojawiły się przepiękne ilustracje, co stanowiło kontynuację wielowiekowej tradycji zdobienia ksiąg, tradycji, która przetrwała do dziś, to jest do czasów dynamicznego rozwoju mediów cyfrowych. Trudno wyobrazić sobie sieć WWW bez niezliczonych plików graficznych, niemniej warto pamiętać, że grafika komputerowa jest dziedziną relatywnie młodą. Jej początki sięgają roku 1960, kiedy to Ivan Sutherland — student MIT (Massachusetts Institute of Technology) wykonał rysunek w komputerze za pomocą pióra świetlnego. Obraz stworzony przez Shuterlanda należał do typu grafiki dziś powszechnie określanej mianem grafiki wektorowej. Rysunki uzyskane za pomocą technologii grafiki wektorowej składają się z wektorów lub ścieżek łączących punkty, których współrzędne są wyliczane przez komputer i modyfikowane odpowiednim oprogramowaniem. Skalowalna grafika wektorowa (SVG), opisywana przeze mnie w kilku rozdziałach niniejszej książki, stanowi przykład grafiki wektorowej. Innym typem grafiki jest grafika bitmapowa lub rastrowa. W przeciwieństwie do wektorowej grafika rastrowa bazuje na zestawie kolorowych punktów lub kropek tworzących obraz. Każdej kropce przypisywana jest konkretna barwa, a także inne parametry. Przykładami grafiki rastrowej są popularne formaty zapisu obrazu, takie jak Graphics Interchange Format (GIF), Joint Photographic Experts Group (JPEG) oraz Portable Network Graphics (PNG). Obrazy pojawiły się w internecie dzięki jednemu, prostemu znacznikowi HTML IMG, dodanemu do specyfikacji języka HTML 2.0 w 1995 roku. Początkowo na stronach WWW można było umieszczać obrazy zapisane tylko w jednym formacie — GIF, ale sytuacja ta nie trwała długo, jako że szybko dodano obsługę formatu JPEG. JPEG był i jest formatem przeznaczonym do zapisywania zdjęć w postaci plików graficznych, natomiast w formacie GIF zapisuje się przede wszystkim ilustracje i proste animacje. Zaskakującym może się wydawać fakt, że mimo niezwykle dynamicznego rozwoju grafiki, jaki dokonał się w ciągu ostatnich lat, znaczna większość obrazów znajdujących się w internecie to pliki JPEG oraz GIF. Formaty JPEG i GIF cieszą się niesłabnącą popularnością, ale o każdym z nich można powiedzieć, że ma swoje wady i zalety. JPEG to format kompresji „stratnej” — część danych o obrazie zapisywanym w ten sposób jest tracona bezpowrotnie, co może mieć bezpośredni wpływ na wygląd tego obrazu. Grafiki zachowywane jako pliki GIF co prawda nie są poddawane kompresji stratnej, ale sam format obsługuje mniejszą liczbę kolorów, przez co niezbyt dobrze nadaje
39
się do przechowywania zdjęć. Z drugiej jednak strony GIF umożliwia korzystanie z przezroczystych teł oraz tworzenie animacji, czyli oferuje opcje zupełnie niedostępne tym, którzy korzystają z formatu JPEG. Format JPEG nie został zabezpieczony żadnymi prawami autorskimi, natomiast w GIF zastosowano opatentowaną metodę kompresji obrazu. Internet nie byłby internetem, gdyby ludzie po zapoznaniu się z obydwoma formatami nie stwierdzili z pełnym przekonaniem, że „przecież musi istnieć coś lepszego”. I tak oto zaczęły się prace nad PNG. Przykład grafiki zapisanej do pliku typu PNG można zobaczyć na rysunku 2.1.
Rysunek 2.1. Stare i nowe w jednym, czyli plik PNG, otrzymany na bazie grafiki SVG, przedstawiający różę Lancasterów. Plik stworzono za pomocą programu Inkscape; znalazłam go w Wikipedii
Format PNG, tak samo jak JPEG, obsługuje nie tylko dużą liczbę kolorów, lecz także przezroczystość znaną z GIF. Obrazy zapisywane w postaci plików PNG są poddawane kompresji bezstratnej. Oznacza to, że PNG nadaje się zarówno do przechowywania grafik oraz ilustracji (dobrze oddaje ostre krawędzie obiektów, co jest właściwością formatu GIF), jak i zdjęć (nie gorzej niż JPEG radzi sobie z płynnymi przejściami barwnymi). Pliki PNG mogą mieć niewielkie rozmiary, gdy na obrazkach występuje stosunkowo niewielka liczba kolorów, jednakże rozmiary te znacząco rosną wraz z liczbą barw pojawiających się na grafikach. Najistotniejszym aspektem prac prowadzonych nad formatem PNG było założenie, że metoda kompresji obrazu nie powinna być chroniona prawem patentowym, jak to ma miejsce w przypadku GIF. Pomimo wszystkich swoich zalet PNG na razie nie stał się popularny. Głównym czynnikiem hamującym rozpowszechnienie się tego formatu w sieci WWW jest brak wsparcia dla niego ze strony twórców przeglądarek internetowych (najwięcej problemów pojawia się w przypadku opcji przezroczystości). Niemniej jednak kolejne wersje popularnych przeglądarek coraz lepiej obsługują PNG.
40
|
Rozdział 2. Obrazy
Wszystkie pliki graficzne pojawiające się na stronach WWW podlegają takim samym ograniczeniom, są bowiem oglądane za pomocą setek różnych urządzeń — od telefonów komórkowych po nieco starsze monitory VGA, które bardzo różnie radzą sobie z wyświetlaniem kolorów. Ponadto obrazy, szczególnie te o większych rozmiarach, długo się ściągają i zajmują dużo miejsca na dysku. Jeśli pominąć kwestie techniczne, należy pamiętać też i o tym, że grafiki udostępniane w sieci mogą być kopiowane, modyfikowane i dowolnie wykorzystywane przez wszystkich jej użytkowników, czasami za przyzwoleniem autora, a czasem bez niego. Na szczęście istnieją sposoby pozwalające zmniejszać rozmiary plików graficznych bez widocznej utraty jakości zapisanych za ich pomocą obrazów. Jeśli nie dysponuje się miejscem na serwerze, istnieją alternatywne metody publikowania w sieci obrazków oraz innych mediów, przy czym mogą mieć różne ograniczenia. Dodatkowo można poczynić pewne założenia odnośnie do potencjalnych aplikacji, za pomocą których oglądane będą udostępnione w internecie grafiki, i sprawić, by obrazy prezentowały się nieźle w większości urządzeń. Problemu ochrony praw autorskich nie da się, niestety, łatwo rozwiązać za pomocą samych tylko zdobyczy technologii. Ochrona praw autorskich, których przedmiotem są obrazy, to w znacznym stopniu kwestia zdobytej wiedzy, a nie jakichkolwiek innych czynników. Niemniej jednak istnieją pewne rozwiązania techniczne (hotlinking), które mogą okazać się przydatne w kontekście wspomnianego tu zagadnienia. Zanim przejdę do omawiania bardziej egzotycznych przykładów grafiki wektorowej (na przykład SVG), zatrzymam się na chwilę przy temacie zwykłej grafiki rastrowej.
Niezbędne podstawy grafiki rastrowej i modelu RGB Grafika rastrowa, określana również mianem bitmap, opiera się na idei płaskiej tablicy złożonej z pikseli, którym przypisano: określone miejsce w tablicy, tablicę informacji o kolorze, a także — jeśli funkcja ta jest dostępna — informację o przezroczystości. Im więcej pikseli wchodzi w skład tablicy, tym większą rozdzielczość ma tworzony przez nią obrazek. Na obrazkach o większej rozdzielczości widać więcej szczegółów. Ponadto obrazki te można powiększać bardziej niż grafiki o małej rozdzielczości. Na rysunku 2.2 widać, w jaki sposób poszczególne piksele tworzą skomplikowany obrazek. Z lewej jego strony widnieje naturalnej wielkości zdjęcie motyla, natomiast z prawej można zobaczyć fragment zdjęcia przedstawiający głowę owada w niewielkim powiększeniu. Liczba bitów służących do przechowywania informacji o kolorze jednego piksela, nazywana fachowo głębią kolorów, określa maksymalną liczbę kolorów, które mogą znaleźć się na jednym obrazie. W najprostszym typie grafiki rastrowej pikselowi przypisywany jest jeden z zaledwie dwóch kolorów — czarny albo biały. Bardziej znane spośród innych rodzajów grafiki rastrowej wymieniam poniżej. • Na obrazach składających się z pikseli, których kolor jest opisywany 8 bitami, może pojawić
się do 256 barw (28 = 256).
• W przypadku, gdy kolor jednego piksela jest opisywany 16 bitami, na obrazkach może poja-
wić się naraz ponad 65 000 barw (216). O obrazkach takich mówi się, że są typu Real Color.
• Na obrazkach składających się z pikseli, których kolor jest opisywany 24 bitami, może
pojawić się więcej niż 16,8 miliona barw (224). Ten typ grafiki świetnie nadaje się do przechowywania zdjęć i jest określany jako True Color. Niezbędne podstawy grafiki rastrowej i modelu RGB
|
41
Rysunek 2.2. Pikselowy charakter grafiki rastrowej • W technologii zapisu obrazu PNG każdy piksel jest opisywany 32 bitami, przy czym kolor
zostaje określony, podobnie jak to ma miejsce w przypadku grafiki True Color, 24 bitami, natomiast pozostałe 8 bitów służy do opisu kanału alfa odpowiedzialnego za poziom przezroczystości pikseli.
Istnieją takie typy plików graficznych, dla których głębia kolorów jest jeszcze większa, niemniej liczba kolorów zapewniana przez True Color (24 bity) określa górną granicę ludzkich możliwości w zakresie postrzegania i odróżniania barw.
Model RGB przestrzeni barw Kwestia wspomnianych wyżej bitów przechowujących informacje o kolorach wiąże się z ideą modelu RGB. Według założeń tego modelu wszystkie kolory można otrzymać w wyniku połączenia ze sobą trzech barw podstawowych: czerwonej (ang. red), zielonej (ang. green) i niebieskiej (ang. blue). Każda z barw podstawowych staje się jaśniejsza w miarę zwiększania wartości jej parametru nasycenia. Ten parametr można utożsamiać z intensywnością „świecenia” danej barwy. Nasycenie przyjmuje jedną z 256 wartości — od 0 do 255. Wartość 255 odpowiada nasyceniu równemu 100%. Model RGB jest modelem addytywnym, co oznacza, że to, jaki kolor zostanie uzyskany w wyniku połączenia trzech barw podstawowych, zależy od procentowych wartości ich parametrów nasycenia. Jeśli parametr nasycenia każdej z barw przyjmie wartość odpowiadającą nasyceniu równemu 100%, otrzymanym kolorem będzie biały. Analogicznie, jeżeli nasycenie dla wszystkich trzech barw podstawowych przyjmie wartość 0, uzyskanym kolorem będzie czarny. Rysunek 2.3 obrazuje addytywny charakter modelu RGB. Kolory pochodne uzyskuje się poprzez odpowiednie łączenie ze sobą trzech barw podstawowych w różnych nasyceniach. Na przykład: kolor magenta powstaje, gdy nasycenie barw niebieskiej i czerwonej jest maksymalne, natomiast wartość parametru nasycenia barwy zielonej wynosi 0; kolor żółty to wynik nałożenia na siebie maksymalnie nasyconych barw czerwonej i zielonej (nasycenie barwy niebieskiej ustawione na 0).
42
|
Rozdział 2. Obrazy
Rysunek 2.3. Addytywny charakter modelu RGB — grafika SVG znaleziona w Wikipedii Istnieją również inne modele przestrzeni barw, na przykład: CMYK (akronim powstały ze słów: cyan, magenta, yellow, key [black] — cyjan, magenta, żółty, kolor kluczowy [czarny]), wykorzystywany w pracach drukarskich, odcieni szarości, HSV (od angielskich słów: hue, saturation, value — barwa, nasycenie, jasność). W tej książce opisuję jedynie model RGB.
Istnieje kilka sposobów podawania informacji o kolorze z modelu RGB. Można po prostu wypisać wartości parametru nasycenia barw podstawowych, a kolejne liczby oddzielić spacją. Wartości wypisuje się w następującym porządku: czerwona, zielona, niebieska, jak w poniższym przykładzie: 255 127 0
Czasami wartości umieszcza się w nawiasach i oddziela przecinkami: (255,255,0)
Ludzie pracujący nad stronami WWW zwykli korzystać z definicji kolorów opartych na wartościach liczbowych zapisanych za pomocą szesnastkowego systemu liczbowego. Wartość 255 z dziesiętnego systemu liczbowego zapisana w systemie szesnastkowym wygląda tak: FF. Jeśli trzy wartości parametru nasycenia barw podstawowych połączy się w jeden ciąg znaków i poprzedzi krzyżykiem, otrzyma się definicję koloru podobną do którejś w podanych niżej: #FFFF00 #ffff00
Wartości szesnastkowych używa się zazwyczaj podczas tworzenia stron internetowych i korzystania z kaskadowych arkuszy stylów (CSS), opisanych przeze mnie w dalszych częściach tej książki. Kolejnym sposobem podawania wartości parametrów RGB jest konstruowanie definicji koloru mającej składnię funkcji (taki zapis występuje w nowszym CSS3 Color Module, nad którym prace aktualnie trwają), co pokazuje poniższy przykład: rgb(255,255,0);
Niezbędne podstawy grafiki rastrowej i modelu RGB
|
43
Opis koloru RGB można wzbogacić również o parametr przezroczystości alfa. Przykład takiego opisu widnieje poniżej: rgba(255,255,0,0);
Grafika rastrowa — przykład tekstowy O grafice rastrowej myśli się zazwyczaj w kontekście fotografii lub rysunków stworzonych w programie Paint i zapisanych do plików BMP, GIF lub TIFF (Tagged Image File Format). Niektórym może się ona kojarzyć również z plikami binarnymi, wyglądającymi jak wysypisko śmieci, jeśli otworzyć je w zwykłym edytorze tekstu. Grafika rastrowa nie jest z natury binarna, obrazek można bowiem przedstawić w formie tekstowej, bazującej na ASCII. Wystarczy tylko skorzystać z odpowiedniej struktury pliku. Jednym z tekstowych formatów przechowywania grafiki rastrowej jest Pixel Portable Map (PPM). Pliki tego typu można tworzyć za pomocą edytora tekstowego. Poniżej pokazany został format pliku PMM: P3 # komentarz 350 500 255 0 0 255 ...
Pierwsza linijka powyższego listingu (P3) stanowi deklarację, że dane zostaną zapisane w formacie ASCII. Druga linia kodu to występująca opcjonalnie linia komentarza. Jeśli dane mają być przedstawione w formie binarnej, wpis z pierwszej linijki należy zmienić na P6. W trzeciej linii znalazła się informacja o szerokości i wysokości obrazka zapisanego do pliku. Dla podanego wyżej przykładu parametry te wynoszą odpowiednio 350 i 500 pikseli. Linia czwarta służy do określania najwyższej dopuszczalnej wartości parametru nasycenia kolorów na obrazku (na listingu pojawiła się wartość 255, czyli typowa dla grafik zapisanych jako GIF). Następnie wypisywane są, w formacie ASCII, wartości parametrów nasycenia barw RGB w porządku: czerwona, zielona, niebieska. Poszczególne wartości liczbowe rozdziela spacja. Na przykładzie widać, że każdy zestaw trzech wartości jest podawany w nowej linijce, niemniej parametry można wypisywać w jednym ciągu. Jeśli obrazek zapisywany w postaci pliku PPM ma szerokość równą 500 pikseli, pierwsze 500 definicji kolorów opisuje najwyższy rząd pikseli. Kolejne 500 grup wartości przechowuje informacje o drugim, patrząc od góry, rzędzie pikseli itd. Ręczne konstruowanie pliku PPM byłoby bardzo nużące i dlatego właśnie podobne czynności wykonuje się programowo. Na listingu 2.1 znalazł się kod aplikacji PHP, która po uruchomieniu tworzy plik PPM. Obraz zapisany do tego pliku przedstawia cztery paski — dwa białe i dwa zielone — ustawione naprzemiennie. Aplikacja składa się z pętli zewnętrznej, od której zależy liczba powtórzeń wzoru składającego się z jednego paska białego i jednego zielonego (na listingu widać dwa powtórzenia), oraz pętli zagnieżdżonych, odpowiedzialnych za tworzenie pikseli ustawionych w poziome rzędy (w każdym rzędzie rysowanych jest 500 pikseli). Najbardziej wewnętrzne pętle służą do tworzenia kolejnych wierszy pikseli (każda pętla daje 50 wierszy).
44
|
Rozdział 2. Obrazy
Listing 2.1. Aplikacja PHP tworząca plik PPM przedstawiający występujące naprzemiennie białe i zielone pasy
Po uruchomieniu aplikacji z linii poleceń tworzony jest plik colors.ppm (jeśli plik ten istnieje, zostaje otwarty, a jego zawartość jest usuwana i zastępowana nowymi wpisami): php r02-01.php
Aplikacja oraz wynikowy plik PPM zostały dołączone do przykładów, ale warto spróbować utworzyć je osobiście, jeśli tylko ma się dostęp do PHP. Jeżeli z jakichś przyczyn aplikacja nie chce się uruchomić z linii poleceń, Czytelnik powinien upewnić się, czy posiada globalne uprawnienia zapisu dla katalogu, w którym tworzony jest plik PPM. Użytkownicy komputerów z zainstalowanymi systemami operacyjnymi Mac OS X lub Linux oraz programem ImageMagick mogą wyświetlać obrazy zapisane do plików PPM, na przykład obrazek colors.ppm: display colors.ppm
Grafiki zapisane w postaci plików PPM można przeglądać także za pomocą innych aplikacji. Do tej grupy należą na przykład programy: Adobe Photoshop oraz GIMP. Rysunek 2.4 przedstawia efekt otwarcia pliku colors.ppm w aplikacji OpenOffice.org Draw. Powyższy przykład zamieściłam w swojej książce z dwóch powodów. Po pierwsze chciałam pokazać, na czym opiera się idea grafiki rastrowej i zwrócić tym samym szczególną uwagę na to, że obrazki będące przykładami bitmap nie są niczym innym, jak grupami pikseli; każdemu pikselowi przypisuje się ściśle zdefiniowany kolor — zależność łączącą twory takie jak barwa, piksel i obraz najłatwiej jest zrozumieć, gdy zobaczy się ją na własne oczy. Po drugie zaś pragnęłam zadać kłam powszechnie spotykanej opinii, że grafika rastrowa zawsze powinna kojarzyć się z zapisem binarnym danych, podczas gdy grafika wektorowa zazwyczaj jest reprezentowana w formacie ASCII. Omówiony przeze mnie przykładowy plik PPM jest dowodem na to, że grafikę rastrową bez problemu można przechowywać w plikach tekstowych, które można bardzo łatwo otwierać i edytować. Niezbędne podstawy grafiki rastrowej i modelu RGB
|
45
Rysunek 2.4. Tak wygląda plik PPM utworzony przez aplikację, której kod źródłowy znalazł się na listingu 2.1, i przeglądany za pomocą programu OpenOffice.org Draw To, czy plik, do którego zapisano obraz, jest binarny, czy też nie, wydaje się być nieistotne tylko z punktu widzenia osoby niezamierzającej umieszczać go na serwerze za pomocą oprogramowania służącego do korzystania z usługi FTP, jednakże programy służące do obsługi FTP zazwyczaj oferują trzy metody wysyłania danych: binarną, ASCII oraz automatyczną. Domyślnie wybraną opcją jest opcja trzecia — aplikacje zarządzające FTP bez problemu rozpoznają, z jakimi typami pliku mają do czynienia.
Tak czy inaczej, format PPM jest tylko ciekawostką. Większość grafik, które można znaleźć w internecie, to obrazki zapisane do plików typu GIF, PNG i JPEG. Wymienione tu formaty zapisu danych omówię szerzej w następnych podrozdziałach.
JPEG Większość obrazków w sieci to pliki JPEG i raczej nie wydaje się, aby ten stan miał w najbliższym czasie ulec zmianie. Nawet pojawienie się formatu PNG nie szybciej niż za kilka lat wykorzeni przyzwyczajenie do korzystania z metody zapisu obrazów statycznych, jaką jest JPEG. Format JPEG całkiem nieźle nadaje się do przechowywania zdjęć. Większość fotografii skompresowanych w dość znacznym stopniu prezentuje się dobrze na stronach WWW, przynajmniej dopóki fotografie te nie mają zbyt dużych wymiarów. Wyraźną utratę jakości widać w zasadzie tylko na większych zdjęciach poddanych naprawdę dużej kompresji. W większości aparatów cyfrowych fotografie są zapisywane do plików JPEG w celu zaoszczędzenia miejsca na dysku
46
|
Rozdział 2. Obrazy
bądź karcie pamięci. Nawet aparaty obsługujące format RAW, zapewniający użytkownikowi danego urządzenia dostęp do obrazów niemodyfikowanych programowo, lub TIFF zazwyczaj posiadają opcję zapisu zdjęć do plików JPEG. W niektórych aparatach można nawet ustawiać jakość plików JPEG i w ten sposób łatwiej kontrolować ilość wolnego miejsca w pamięci urządzenia.
RAW czy TIFF? Chciałabym napisać parę słów na temat aparatów i zachowywania zdjęć w postaci plików JPEG. Otóż, jeśli ma się wybór między formatami RAW i JPEG albo TIFF i JPEG, doradzam skorzystanie z formatu RAW lub TIFF. Oczywiście pozwalają one na zrobienie mniejszej liczby zdjęć, niemniej szkoda ryzykować, że jakieś szczególnie dobre zdjęcie zostanie poddane dużej kompresji stratnej. Zapisywanie fotografii jako plików JPEG warto rozważać tylko wtedy, gdy chce się je drukować bezpośrednio z aparatu. Grafiki w formacie JPEG można drukować bądź też publikować w sieci WWW od razu, bez dokonywania żadnych ich modyfikacji, natomiast pliki typu RAW wymagają dodatkowych zabiegów. Rozwiązaniem alternatywnym może być skorzystanie z opcji udostępnianej przez niektóre aparaty (na przykład przez mojego Nikona D200), umożliwiającej tworzenie naraz dwóch kopii robionego zdjęcia — JPEG i RAW. W ten sposób otrzymuje się pliki RAW, których obróbką w Photoshopie lub GIMP-ie można zająć się w wolnej chwili, i jednocześnie JPEG gotowe do druku. Tak czy inaczej, zalecam korzystanie z formatu RAW, jeśli tylko istnieje taka możliwość. Bynajmniej nie jestem osamotniona w swoich poglądach. Jeden z autorów tekstów pojawiających się na stronie Nikonians napisał: „Puryści fotografii, miłośnicy wydruków wielkoformatowych i pokręceni twórcy artykułów publikowanych w internecie uważają ten format za najlepszy ze wszystkich”. Pełny tekst w języku angielskim znajduje się pod adresem http://www.nikonians.org/html/resources/guides/digital/jpeg_tiff_or_raw_3.html.
Format JPEG jest wygodny dla projektantów witryn WWW, pozwala bowiem tworzyć pliki graficzne o niewielkich rozmiarach bez wyraźnej utraty jakości obrazu. Pliki JPEG można kompresować w trybie progresywnym. Plik skompresowany progresywnie cechuje się tym, że podczas ściągania go i przygotowywania do wyświetlenia w oknie przeglądarki otwierana jest jego wersja niskiej jakości. Dzięki temu miejsce, w którym powinien znaleźć się obrazek, zostaje zapełnione, nim ściągnie się on całkowicie. Zasadniczą wadą formatu JPEG, pozwalającego na tworzenie plików graficznych nieobciążających łącz internetowych, jest to, że bazuje on na metodzie stratnego kompresowania obrazu.
Kompresja stratna Algorytm kompresji stratnej opracowano, opierając się częściowo na podstawowej wiedzy dotyczącej ludzkiej fizjologii. Dzięki temu można zmniejszać rozmiary plików graficznych, a przy tym pozornie nie powodować utraty jakości zapisanych w nich obrazów. Pliki zawierające media kompresowane stratnie zazwyczaj mają dużo mniejsze rozmiary niż te, które stworzono za pomocą algorytmu kompresji bezstratnej. Na anglojęzycznej stronie poświęconej pytaniom i odpowiedziom związanym z kompresją w JPEG (http://www.faqs.org/faqs/jpeg-faq/part1/) można przeczytać: Słowo „stratna” użyte do opisu typu kompresji, jakiej poddawany jest obraz zapisywany w postaci pliku JPEG, świadczy o tym, że otrzymana grafika skompresowana nie jest taka sama jak nieskompresowana… Twórcy formatu JPEG skorzystali z wiedzy na temat JPEG
|
47
ograniczeń ludzkiego oka, w szczególności skupiając się na tej jego cesze, która powoduje, że małe zmiany kolorów trudniej człowiekowi dostrzec niż niewielkie nawet modyfikacje jasności obrazu. Z tego wynika, że metoda kompresji obrazów zastosowana w JPEG została opracowana z myślą o tworzeniu grafik przeznaczonych do oglądania przez ludzi. Każdy, kto planuje wykonywać sprzętowe analizy grafik zapisanych w postaci plików JPEG, musi spodziewać się wykrycia błędów obrazu, nawet jeśli błędy te nie są widoczne gołym okiem. Błędy obrazu powstające w wyniku kompresji nie są żadnym kłopotem w przypadku plików udostępnianych w sieci oraz tych o niewielkich rozmiarach. Niestety, pliki JPEG w zasadzie w ogóle nie nadają się do publikacji. Na przykład, pliki, które posłużyły do wykonania ilustracji pojawiających się w tej książce, były typu TIFF lub PNG. Ani jednego z zamieszczonych tu rysunków nie wydrukowano z wykorzystaniem pliku w formacie JPEG. Błędy wynikające ze znacznej kompresji obrazu stają się widoczne dopiero po jego powiększeniu. Na rysunku 2.5 widać zestawione ze sobą dwie wersje tej samej grafiki, którą powiększono, aby móc przyjrzeć się widniejącym na niej szczegółom. Grafikę poddano kompresji dwukrotnie. Wartość parametru kompresji wyniosła najpierw 10% (lewa strona rysunku), a następnie 75% (prawa strona rysunku). Widać, że duża kompresja obrazu pociąga za sobą znaczną utratę jego jakości.
Rysunek 2.5. Różnice między jakością tego samego obrazu poddanego mniejszej i większej kompresji
Korzystanie z formatu JPEG pociąga za sobą jeszcze inne trudności. Otóż cechą kompresji stratnej jest to, że każde kompresowanie tego samego obrazu powoduje kolejną utratę jego jakości. Próba odzyskania jakości obrazu grafiki metodą zapisywania jej do pliku o mniejszym stopniu kompresji na nic się nie zda, dane zostały bowiem dawno wykasowane. Błędy wpływające na jakość obrazu i widoczne gołym okiem (kwadratowe pola wygładzające ostre krawędzie) są nazywane artefaktami. Wielokrotnie prowadzono prace nad sposobem poprawiania jakości skompresowanego obrazu i redukowania efektu artefaktów, jednakże skupiano się nie na zagadnieniu odzyskiwania danych, lecz kompensowania strat powstałych w wyniku kompresji. Stworzono co prawda programy, za pomocą których możliwe jest przeprowadzenie procesu interpolacji obrazu w celu poprawienia wizualnej jakości kompresowanej grafiki, niemniej użycie żadnego z nich nie daje rezultatów, które pozwoliłyby stwierdzić, że poniekąd udało się odzyskać utracone dane. 48
|
Rozdział 2. Obrazy
Do większości zastosowań związanych z internetem nadają się pliki, które zostały utworzone w wyniku ustawienia średniego poziomu kompresji obrazu. Są one stosunkowo niezłej jakości i nie zajmują zbyt dużo miejsca na dysku. Należy wspomnieć, że format JPEG obsługuje większą niż GIF liczbę barw, dzięki czemu nadaje się on do przechowywania bardziej złożonych obrazów o znacznej rozdzielczości, czyli na przykład zdjęć. Na obrazach zapisanych do plików JPEG może znaleźć się kilka milionów barw (w tym duży zakres odcieni szarości), jako że na informacje o kolorze każdego piksela zarezerwowane zostały aż 24 bity. Większa paleta kolorów, dostępna w trakcie procesu tworzenia obrazu, pozwala na realistyczne oddanie subtelnych przejść barwnych pojawiających się na fotografiach, bez potrzeby uciekania się do metod opartych na przeprowadzaniu procesów takich jak dithering. Dithering to proces, w którego wyniku kolor zbliżony do koloru niedostępnego w danej palecie barw jest otrzymywany jako zestawienie barw wchodzących w skład owej palety. Dwa kolory z istniejącej palety są ze sobą zestawiane i umieszczane w sąsiedztwie innych, tak aby mogły uchodzić za trzeci — niedostępny.
Oczywiście samo zapisywanie grafik do plików JPEG wcale nie gwarantuje, że obrazki, które świetnie wyglądają w jakimś edytorze zdjęć, będą dobrze prezentowały się w sieci WWW. Na wygląd grafik wpływ ma bowiem kilka czynników. Jednym z nich jest to, w jaki sposób różne urządzenia interpretują kolory.
JPEG i kolory wyświetlane Na celuloidzie kolory uzyskuje się dzięki użyciu odpowiednich odczynników chemicznych i postępowaniu zgodnym z pewnymi regułami. Barwy uzyskane na zdjęciu cyfrowym zależą od fotografa, a nie od działania i rodzaju środków chemicznych. Dla wielu zaskakująca okazuje się informacja, jak wiele kolorów można otrzymać z połączenia trzech barw podstawowych, gdy wartość parametru nasycenia każdej z nich wybiera się z zakresu liczb naturalnych od 0 do 255. Na rysunku 2.6 widnieją próbki dwóch takich kolorów. Czy kolory widniejące na powyższym rysunku rzeczywiście nie są tym samym kolorem? Są, choć wyglądają inaczej. Na obydwu widać barwę, której definicja, zgodna z koncepcją modelu RGB, przedstawia się następująco: czerwona = 88, zielona = 249, niebieska = 17. Obrazki wchodzące w skład rysunku są próbkami tego samego koloru, przy czym każda z próbek przedstawia barwę zmodyfikowaną wyborem innego profilu kolorów. Profil kolorów to tablica kolorów, w której zawarte zostały informacje o przestrzeni barw. Pierwszą próbkę z dwóch zamieszczonych powyżej otrzymano poprzez ustawienie profilu kolorów sRGB (dokładniej sRGB IEC61966-2.1), czyli typowego dla obrazu wyświetlanego na ekranach monitorów komputerów PC. Dla drugiej próbki ustawiono profil Adobe RGB, z którego korzysta się przede wszystkim w trakcie przygotowywania dokumentów do wydruku. Przykłady obrazują, jak odmiennie wyświetlany jest ten sam kolor, zdefiniowany w modelu RGB zestawem wartości (88,249,17), przy wyborze różnych przestrzeni barw. Płynie z tego wniosek, że przestrzenie barw mogą mieć niebagatelny wpływ na wygląd obrazu publikowanego w internecie.
JPEG
|
49
Rysunek 2.6. Ten sam kolor — dwa różne profile kolorów
Załóżmy, że mamy do czynienia z człowiekiem, który potrafi coś więcej, niż tylko umieszczać na stronie WWW zdjęcia wzięte prosto z aparatu. Człowiek taki, korzystając na przykład z programu Adobe Photoshop, starannie kadruje fotografie, zmienia rozmiary każdej z nich i pracuje nad ich wyglądem, dopóki nie jest całkowicie zadowolony z osiągniętego rezultatu. Następnie publikuje efekty swojej pracy w internecie, sprawdza, jak prezentują się wyświetlane za pomocą przeglądarki, i dochodzi do smutnego wniosku, że pieczołowicie przygotowywane do umieszczenia na stronie WWW zdjęcia wyglądają po prostu kiepsko. Gdzie podziały się te żywe kolory, które tak bardzo podobały się autorowi zdjęć? Dlaczego fotografie wyglądają, jakby je ktoś wyprał? Co więcej, brzydkie grafiki stają się na powrót piękne po otwarciu ich za pomocą aplikacji Adobe Photoshop! Oto jest właśnie świat kolorów wyświetlanych. Po obejrzeniu próbek kolorów przedstawionych na rysunku 2.6 nasuwa się wniosek, że ta sama barwa może być wyświetlana na wiele różnych sposobów. Dlatego też dane dotyczące kolorów widocznych na zdjęciu są przenoszone z jednego środowiska kolorystycznego, w którym stworzono bądź zmodyfikowano dane zdjęcie, do innego. Jeśli w pierwszym z dwóch środowisk kolorystycznych określona barwa widoczna na fotografii została zdefiniowana jako kolor jasnej limy, w drugim również zostanie jej przypisany kolor jasnej limy. Przeprowadzanie opisanej procedury ma na celu uzyskanie takiego samego wyglądu fotografii w dwóch różnych środowiskach kolorystycznych. Zagadnienie metod wyświetlania kolorów przez różne urządzenia nie byłoby kłopotliwe, gdyby obrazy zawsze można było przenosić pomiędzy zaledwie dwoma urządzeniami, na przykład z określonego aparatu do konkretnego komputera albo z danego komputera do jednej, zawsze tej samej drukarki. Istnieją jednak rozmaite aparaty, skanery, monitory i drukarki. Dla wszystkich Czytelników, którzy sięgnęli po tę książkę, jeszcze istotniejszy okaże się fakt, że obraz opublikowany w internecie jest oglądany za pomocą wielu różnych urządzeń, na których zainstalowano różne systemy operacyjne i w których zaimplementowano obsługę odmiennych przestrzeni barw. Nie istnieje możliwość przenoszenia danych dotyczących definicji kolorów między wszystkimi istniejącymi środowiskami kolorystycznymi i korygowania systemu wyświetlania barw w każdym urządzeniu osobno, dlatego zazwyczaj tworzy się zestaw standardowych profili kolorów.
50
|
Rozdział 2. Obrazy
Jakiś czas temu powstała organizacja o nazwie International Color Consortium (ICC), której członkowie dążą do stworzenia i rozpowszechnienia niezależnych systemów zarządzania kolorami. Nie zajmują się oni kwestiami dotyczącymi tzw. „zamkniętych obiegów”, czyli przepływu danych między dwoma konkretnymi urządzeniami, na przykład między określonym komputerem i podłączoną do niego drukarką. Celem organizacji ICC jest praca nad sposobami przenoszenia danych dotyczących definicji kolorów pomiędzy bardzo wieloma różnymi urządzeniami, tj. w „obiegach otwartych”. Aby osiągnąć cel, pracownicy organizacji ICC stworzyli pewną liczbę profili kolorów, z których każdy stanowi zestaw predefiniowanych ustawień wyświetlania barw. Informacja o profilu kolorów może zostać dodana do pliku graficznego, dzięki czemu ten plik, oglądany w różnych środowiskach kolorystycznych (wyświetlacz aparatu cyfrowego, ekran monitora komputera, wydruk z drukarki), będzie wyglądał tak samo. Urządzenie bądź aplikacja „odczytuje” dołączoną do obrazu informację o profilu kolorów i przełącza się w odpowiedni tryb pracy. Obydwie próbki widoczne na rysunku 2.6 uzyskałam, korzystając z tego samego komputera — laptopa z zainstalowanym systemem Mac OS X. Na ekranie monitora niczym się od siebie nie różniły. Obrazki przedstawiające jednolicie zielone tło różnią się tylko tym, że do każdego z nich dodałam inną informację o profilu kolorów. Dlaczego w takim razie wyglądają zupełnie inaczej? Teoretycznie nie powinny, skoro w programach i urządzeniach implementuje się obsługę profili kolorów. Niestety, w większości przeglądarek internetowych wciąż nie zaimplementowano obsługi profili kolorów, a raczej zaimplementowano obsługę dokładnie jednego profilu sRGB, co kojarzyć się może z koncepcją koloru samochodów przedstawioną swojego czasu przez Henry’ego Forda. Inaczej mówiąc, informacje o profilach kolorów dołączone do plików graficznych nie są przez przeglądarki rozpoznawane. Każdy obraz otwierany za pomocą przeglądarki jest wyświetlany zgodnie z regułami zdefiniowanymi w profilu sRGB. Stąd właśnie wzięła się różnica barw, jakie można zobaczyć na rysunku 2.6, przedstawiającym dwie próbki tego samego koloru. Przedstawiony tu problem został zobrazowany za pomocą rysunków 2.7 oraz 2.8. To samo zdjęcie (widnieje na nim kwiat lotosu), zapisane do pliku graficznego, w którym zawarta została informacja, że powinno się je otwierać z uwzględnieniem reguł wyświetlania barw definiowanych w profilu kolorów Adobe RGB, otworzyłam w dwóch przeglądarkach. Na rysunku 2.7 widać, jak wygląda fotografia oglądana za pomocą programu Firefox 2, w którym nie zaimplementowano obsługi profili kolorów, natomiast rysunek 2.8 jest zrzutem ekranu stworzonym po otwarciu pliku ze zdjęciem w przeglądarce Safari 3 (w aplikacji tej zaimplementowano obsługę profili kolorów). Nawet na stronach drukowanej książki różnice w wyglądzie tego samego zdjęcia oglądanego za pomocą dwóch przeglądarek powinny być łatwo zauważalne. W przypadku fotografii opublikowanej w internecie różnice te z całą pewnością byłyby jeszcze wyraźniejsze. W chwili wydania niniejszej książki tylko w przeglądarkach Safari 3.x i Firefox 3.x zaimplementowana była obsługa profili kolorów.
JPEG
|
51
Rysunek 2.7. Plik graficzny, do którego dodano informację, że powinien być wyświetlany zgodnie z regułami określonymi w profilu kolorów Adobe RGB, otwarty za pomocą przeglądarki Firefox 2
Rysunek 2.8. Plik graficzny, do którego dodano informację, że powinien być wyświetlany zgodnie z regułami określonymi w profilu kolorów Adobe RGB, otwarty za pomocą przeglądarki Safari 3 52
|
Rozdział 2. Obrazy
Kolory w sieci WWW Dopóki obsługa profili kolorów nie stanie się opcją dostępną we wszystkich przeglądarkach, lub chociaż w większości z nich, trzeba będzie starać się zapisywać obrazy w takiej postaci, w której będą wyglądały najlepiej w różnych środowiskach kolorystycznych. Inaczej mówiąc, należy dbać o to, aby obrazki publikowane w internecie prezentowały się jeśli nie wspaniale, to przynajmniej znośnie. Podejście takie sprawdza się w przypadku większości grafik, które pojawiają się w sieci. Poniżej w punktach wypisałam czynności, które powinno się wykonać, gdy przygotowuje się obrazy do publikacji w sieci WWW.
1. Należy wyregulować monitor tak, by mieć pewność, że kolory pojawiające się na ekranie są wyświetlane prawidłowo.
2. Poziom promieniowania gamma należy ustawić na poziomie obsługiwanym zarówno przez komputery PC, jak i Mac.
3. W oprogramowaniu do edycji zdjęć, w którym zamierza się pracować, należy ustawić tryb pracy sRGB.
4. Każdy obrazek zapisany jako plik graficzny przeznaczony do wyświetlania w trybie innym niż określony profilem sRGB należy przekonwertować, tak aby domyślnym profilem wyświetlania stał się sRGB.
5. Na tym etapie można dowolnie modyfikować zdjęcie. 6. Jeśli to tylko możliwe, efekty pracy należy zapisać do pliku, dla którego właściwym profilem kolorów jest sRGB.
Mówiąc dokładniej, warto się upewnić, że monitor został ustawiony prawidłowo (informacje na temat metod kalibracji monitorów dla różnych systemów operacyjnych znaleźć można w internecie). Ponadto należy ustawić poziom promieniowania gamma (jasność) nieco wyższy niż domyślny dla komputerów PC oraz tych z zainstalowanym systemem Linux (2.2), lecz zarazem niższy niż domyślny znany z komputerów Mac (1.8). W wyniku wprowadzenia tych ustawień obraz może się wydawać nieco za ciemny użytkownikom komputerów PC, korzystających z ustawień domyślnych, a trochę za jasny posiadaczom komputerów Mac, niemniej jednak uzyskane różnice w wyświetlaniu nie powinny nikomu utrudniać obróbki zdjęć. Wszyscy ci, którzy planują publikować stworzone przez siebie obrazy w internecie, powinni upewnić się, że aplikacja do obróbki grafiki pracuje w trybie sRGB. Profil kolorów sRGB gwarantuje poprawne wyświetlanie obrazów za pomocą większości dostępnych na rynku monitorów. Jeśli pragnie się przygotować grafiki i do publikacji w sieci, i do wydruku, należy pamiętać o odpowiednim przełączaniu trybu pracy (profilu kolorów) aplikacji, w której się pracuje. Jeżeli otwarty w programie do edycji zdjęć plik graficzny ma ustawiony profil kolorów niezgodny z trybem pracy aplikacji (w wielu aparatach implementowana jest obsługa profilu firmy Adobe, ponieważ udostępnia on bogatszą przestrzeń barw), należy zastąpić go profilem zgodnym z trybem pracy aplikacji. Obraz należy zapisywać do pliku bez dołączania do niego informacji o trybie wyświetlania zdefiniowanym profilami kolorów lub dołączając informację o profilu kolorów zgodnym z trybem pracy aplikacji do obróbki zdjęć, czyli sRGB. Postępowanie zgodnie z powyższymi JPEG
|
53
wskazówkami pozwala tworzyć grafiki, które będą się dobrze prezentowały na stronach internetowych. Więcej informacji można znaleźć na stronie internetowej organizacji ICC: http://www.color. ´org. Inna ciekawa witryna ze wskazówkami, jak pracować z obrazami, które chce się opublikować w sieci WWW, jest dostępna pod adresem http://www.creativepro.com/story/ ´howto/24697.html. Obydwa serwisy są prowadzone w języku angielskim.
GIF — format bezstratny Format GIF został stworzony przez firmę CompuServe w latach osiemdziesiątych poprzedniego stulecia. Miał umożliwić wymianę obrazów za pośrednictwem internetu, który w tamtych czasach nie był jeszcze zbyt rozwinięty. Oryginalną wersją formatu była wersja 87a (GIF87a), natomiast ostateczną stała się wersja o numerze 89a (GIF89a). O ile JPEG został zoptymalizowany do przechowywania obrazów, na których widnieją płynne przejścia barw, o tyle GIF nadaje się do zapisu grafik opisywanych jako flat color (o „płaskich” kolorach). Obrazy typu flat color cechuje brak łagodnych przejść kolorystycznych. GIF to nieskomplikowany, 8-bitowy format zapewniający obsługę 256 kolorów. Dodatkowo pliki GIF są tworzone, w celu zmniejszenia ich rozmiarów, w oparciu o zoptymalizowaną paletę barw. Każdy kolor z palety jest przypisywany do określonej wartości RGB. Istnieje metoda tworzenia GIF-ów 24-bitowych (True Color), lecz po pierwsze jest ona nielegalna, a po drugie nie warto z niej korzystać, gdy ma się do dyspozycji formaty True Color, takie jak JPEG i PNG.
Liczba kolorów obsługiwana przez format GIF (256) jest liczbą optymalną z punktu widzenia metody zarządzania kolorami znanej jako tworzenie palety (ang. palettes). Metoda ta umożliwia opisywanie barwy każdego piksela 8-, a nie 24-bitową informacją. W ośmiu bitach zapisywana jest wartość, na podstawie której właściwy kolor piksela jest wyszukiwany w specjalnej tablicy kolorów. Wersja 8-bitowa formatu PNG również obsługuje palety. Elementem formatu GIF jest metoda bezstratnej kompresji danych zwana LZW. Ten rodzaj kompresji opiera się na idei wyszukiwania w ciągu znaków powtarzających się schematów, kopiowaniu ich do specjalnej tablicy i zastępowaniu krótszymi ciągami (krótsze ciągi znaków są powiązane z długimi). Za każdym razem, gdy dany wzór się powtarza, dłuższy fragment kodu zostaje zamieniony na krótszy. Poziom kompresji jest najwyższy dla ciągów znaków, które składają się z jednej, powtarzającej się sekwencji. Świadomość, że format GIF opiera się na metodach prostej palety kolorów oraz kompresji bezstratnej, pozwala łatwo zrozumieć, dlaczego bardziej nadaje się on do przechowywania obrazów, na których widać jednolite plamy poszczególnych kolorów i ostre krawędzie uwiecznionych obiektów, niż tych, na których widnieją gradienty barw i płynne przejścia kolorystyczne między obszarami pokrytymi różnymi kolorami. W przypadku zapisywania do pliku prostych, konturowych obrazków, ilustracji, symboli oraz rysunków przypominających animację z kreskówek GIF sprawdza się dużo lepiej niż JPEG.
54
|
Rozdział 2. Obrazy
Jako że format GIF nie obsługuje pełnego zakresu kolorów dostępnych w przypadku korzystania z 24-bitowej przestrzeni barw RGB, wzbogacono go o metodę emulowania brakujących kolorów, zwaną ditheringiem. Mimo że aplikacje umożliwiające zapisywanie obrazów do plików typu GIF spisują się całkiem nieźle, wystarczy nieco powiększyć grafikę w tym formacie, aby gołym okiem zobaczyć, w jaki sposób przeprowadzany jest proces ditheringu (rysunek 2.9). Zaimplementowana w technologii GIF ograniczona obsługa kolorów sprawia, że nie warto za jej pomocą przechowywać fotografii.
Rysunek 2.9. Nieco powiększone zdjęcie zapisane do pliku typu GIF. Wyraźnie widać, jak działa dithering
GIF oferuje dwie dodatkowe opcje, dzięki którym jego popularność w zasadzie nie maleje od chwili, gdy został stworzony. Otóż umożliwia tworzenie animacji, a także obsługuje przezroczystość.
Animacje GIF i throbbery W rozdziale 1., przedstawiając Galerię Żałosnej Grafiki Internetowej, wspomniałam o korzystaniu ze spacerów GIF w trakcie projektowania stron WWW. Spacery to jednopikselowe, przezroczyste obrazki, które — w połączeniu z atrybutami znacznika IMG, takimi jak szerokość i wysokość oraz umiejscowienie zawartości strony WWW w pionie (vspace) i w poziomie (hspace) — umożliwiały przesuwanie elementów witryny w prawo lub w lewo oraz w dół. Przezroczystość GIF staje się przydatna także podczas tworzenia ikon i logo. Obrazki te nie muszą być w całości pokryte kolorami, przez co świetnie komponują się z różnobarwnymi tłami. GIF to pierwszy i jak na razie jedyny format zapisu obrazów do plików graficznych obsługujący animację. W swoim czasie animacje GIF były bardzo popularne. Dziś nie spotyka się ich aż tylu, po części z powodu pojawienia się technologii Flash, lecz także dlatego, że dość szybko okazały się być bardziej irytujące niż ciekawe. Aktualnie animowane GIF-y to najczęściej tzw.
GIF — format bezstratny
|
55
throbbery, czyli ruchome obrazki informujące o tym, że w obrębie witryny WWW zachodzi jakiś proces. Pierwszymi throbberami były animowane znaki firmowe, które widywało się podczas korzystania z pierwszych przeglądarek internetowych; na stronach WWW throbbery pojawiły się stosunkowo niedawno. Jak dotąd najlepszą metodą sygnalizowania, że przeprowadzany jest jakiś proces, niezmiennie pozostaje umieszczenie gdzie trzeba animowanej grafiki. Szczęśliwie tworzenie throbberów to nic skomplikowanego — wystarczy posłużyć się którymś z darmowych programów dostępnych w internecie. Rysunek 2.10 przedstawia stronę internetową http://www.ajaxload.info/, na której znajduje się generator throbberów. Zrzut ekranu wykonałam w trakcie tworzenia animacji w postaci kółka składającego się z pomarańczowych kropek oraz z umieszczonego centralnie napisu Loading.
Rysunek 2.10. Tworzenie throbbera za pomocą aplikacji udostępnionej na stronie http://www.ajaxload.info/
Kompresja GIF Metoda kompresji danych — aspekt, dzięki któremu format GIF stał się tak popularny — doprowadziła jednocześnie do podjęcia prac nad zupełnie nowym formatem zapisu plików graficznych. Algorytm bezstratnej kompresji danych LZW został stworzony w latach osiemdziesiątych XX wieku przez Terry’ego Welcha. Welch opatentował efekt swojej pracy w roku 1983. Prawa patentowe ostatecznie przejęła firma Unisys, najwyraźniej bez wiedzy CompuServe.
56
|
Rozdział 2. Obrazy
Firma Unisys próbowała wymusić na CompuServe oraz innych komercyjnych serwisach internetowych i firmach zajmujących się tworzeniem aplikacji wykupienie licencji na użytkowanie algorytmu kompresji, zarazem jednak nie zamierzała pobierać opłat od organizacji non-profit i autorów darmowych aplikacji. W 1995 roku powstało niemałe zamieszanie wokół patentu należącego do Unisys, w wyniku czego podjęte zostały prace nad zupełnie nowym formatem zapisu plików graficznych, łączącym cechy JPEG i GIF. Ten nowy format nosi nazwę PNG i mimo że nie zapewnia możliwości tworzenia animacji, zapewne zakończy wielką karierę GIF. Wszystkich zainteresowanych historią formatu GIF i patentu Unisys odsyłam na stronę http://lzw.info (strona w języku angielskim).
PNG Format PNG jak dotąd nie stał się nazbyt popularny, a to z tej przyczyny, że twórcy przeglądarek internetowych nie spieszyli się z zaimplementowaniem jego obsługi w swoich produktach. Stworzono go w czasie wojen o prawa patentowe do GIF. Gdy prawa te wygasły, twórcom przeglądarek zabrakło motywacji do pracy nad dodaniem do swych programów obsługi PNG. Format PNG nadaje się do przechowywania zarówno fotografii, jak i ilustracji, ale nie zapewnia kompresji obrazów na poziomie porównywalnym do JPEG. Niemniej jednak zastosowano w nim algorytm kompresji bezstratnej, dzięki czemu nie powoduje utraty jakości zapisywanych w nim obrazów. Bezpieczna metoda zapisu grafik świetnie nadaje się do przechowywania zdjęć, które można edytować dowolną liczbę razy. Dodatkowo metoda kompresji zaimplementowana w PNG jest dokładniejsza i bardziej efektywna niż ta znana z GIF, w wyniku czego pliki typu PNG są zazwyczaj mniejsze od plików GIF. W obsługujących odpowiednie opcje zapisu aplikacjach rozmiar pliku PNG można zredukować i zachować go jako plik 8-bitowy (PNG-8), a nie 32-bitowy (lub znany z programu Photoshop 24-bitowy, w którego przypadku 24 bity rezerwowane są na definicje kolorów, a 8 bitów przeznacza się na opis kanału przezroczystości alfa). Przy podejmowaniu decyzji o wyborze wspomnianej tu opcji trzeba brać pod uwagę fakt, że zredukowana zostanie paleta barw pojawiających się na obrazku oraz przeprowadzony zostanie proces ditheringu. Jedynymi aspektami przemawiającymi za korzystaniem ze starszych formatów są: możliwość tworzenia animacji za pomocą GIF oraz to, że pliki typu JPEG zajmują znacznie mniej miejsca na dysku niż pliki PNG. Ponadto format GIF polecam każdemu, komu zależy na tworzeniu grafik ze zdefiniowaną przezroczystością, które będą prawidłowo wyświetlane w przeglądarce Internet Explorer 6.x. We wspomnianej wersji programu Internet Explorer nie zaimplementowano obsługi przezroczystości typu alpha transparency.
PNG i przezroczystość Istnieją dwa rodzaje przezroczystości: binarny i alfa. Jeśli korzysta się z opcji przezroczystości binarnej, ma się do wyboru tylko dwie opcje — dany obszar na obrazku może być całkowicie przezroczysty albo całkowicie nieprzezroczysty. Przezroczystość typu alfa oferuje więcej opcji, można ją bowiem ustawić jako całkowitą (100%), częściową (na przykład 50%) i zerową. Przy
PNG
|
57
odniesieniu powyższych informacji do typów plików najczęściej spotykanych w internecie warto nadmienić, że format JPEG w ogóle nie ma zaimplementowanej obsługi przezroczystości, format GIF obsługuje tylko przezroczystość binarną, natomiast format PNG obsługuje obydwa wspomniane typy przezroczystości. Istnieją odstępstwa od każdej reguły związanej z grafiką internetową. Stworzony został nowy format JPEG (tzw. JPEG2000), zapewniający bezstratną kompresję obrazu i obsługujący przezroczystość typu alfa, jednakże algorytm kompresji danych wbudowany w tym formacie chroniony jest chyba prawami własności, tak jak to miało miejsce w przypadku GIF. Niepokoi mnie myśl o tym, że przeglądarka Safari, której budowa opiera się na oprogramowaniu WebKit typu open source, może nie obsługiwać formatu JPEG2000.
Przezroczystość binarną uzyskuje się w taki sposób, że wybierany jest jeden kolor, który zostaje uznany za przezroczysty w obrębie całej grafiki. Wszystkie powierzchnie na obrazku pokryte tym kolorem stają się całkowicie przezroczyste — nie ma mowy o opcjach takich jak półprzezroczystość. Korzystanie z opisywanego typu przezroczystości ma pewne skutki uboczne. Otóż przezroczystość zaimplementowana w GIF działa dobrze tylko wtedy, gdy kolor określony jako przezroczysty jest taki sam lub zbliżony do barwy tła, na którym umieszcza się obrazek. Jeśli kolor tła wyraźnie różni się od barwy, której przypisana została przezroczystość, ewentualnie jeśli w tle znajduje się jakiś wzór, wyraźnie widoczny staje się efekt halo, wydatnie obniżający jakość obrazu. Jeżeli korzysta się z techniki antyaliasingu w celu uzyskania na obrazku gładszych obiektów (dotyczy to w szczególności grafik, na których widnieją obiekty składające się z dużej liczby linii krzywych, takie jak okręgi albo litery), utrata jakości obrazu staje się jeszcze wyraźniejsza.
Przezroczystość i antyaliasing Antyaliasing to sztuczka, z której korzysta się wtedy, gdy obrazek przedstawia kształty odmienne od banalnych boków prostokąta. Na obrazkach dwukolorowych antyaliasing przeprowadzany jest za pomocą koloru widniejących na nich obiektów, jeśli zaś na grafice pojawia się większa liczba barw, odpowiedni program analizuje kolory tła oraz pierwszego planu, a następnie jakąś barwą obrysowuje zakrzywione, wyglądające jak postrzępione fragmenty konturów obiektów, tak aby zostały one wygładzone. Podczas tworzenia plików GIF z wykorzystaniem funkcji antyaliasingu i przezroczystości należy pamiętać o przypisywaniu przezroczystości do koloru identycznego z barwą tła strony internetowej, na której zamierza się je umieszczać. Jeśli barwa tła i kolor zdefiniowany w obrębie obrazka jako przezroczysty nie będą wystarczająco do siebie zbliżone, plamki powstałe w wyniku przeprowadzenia procesu antyaliasingu staną się wyraźnie widoczne i zepsują efekt wygładzania konturów. Na rysunku 2.11 widać dwa obrazki przedstawiające wymyślony liść. Narysowałam go w programie Photoshop i zapisałam do pliku, w opcji Otoczka ustawiając kolor biały. Wspomniana opcja służy do określania koloru tła, w zestawieniu z którym motyw pojawiający się na grafice będzie stanowił jedną całość. Na podstawie informacji o barwie tła program Photoshop przeprowadza proces ditheringu w celu poprawienia wyglądu grafiki. Mimo że liście poprawiane ditheringiem nie prezentują się najgorzej na ciemnoszarym tle, dużo bardziej pasują do tła białego.
58
|
Rozdział 2. Obrazy
Rysunek 2.11. Przezroczysty GIF umieszczony na dwóch tłach: ciemnoszarym i białym
W każdym z pikseli tworzących obrazek zapisany do pliku PNG przechowywana jest informacja o jego przezroczystości (format obsługuje 256 poziomów przezroczystości). Dzięki temu można regulować stopień, w jakim tło prześwituje spod poszczególnych pikseli, co eliminuje to dziwaczne, brzydkie halo, o którym pisałam wcześniej. Grafiki z przezroczystymi elementami zapisane w formacie PNG wyglądają dobrze umieszczone na każdym możliwym tle — wzorzystym lub jednolitym — niezależnie od jego koloru. Fakt ten został zobrazowany na rysunku 2.12.
Rysunek 2.12. Grafika zapisana do pliku PNG. Tło obrazka jest przezroczyste
Na uwagę zasługuje to, że całkowitą nieprzezroczystość obrazka zapisanego w formacie PNG można dowolnie regulować, co pozwala tworzyć grafiki o zupełnie przezroczystym tle i tylko częściowo przezroczystych pikselach (rysunek 2.13).
PNG
|
59
Rysunek 2.13. Częściowo nieprzezroczysty obraz zapisany jako PNG
Opisywanie, zagnieżdżanie i optymalizacja obrazów Warto zadać pytanie, czego więcej może nauczyć się osoba, która potrafi umieszczać obrazki na stronach WWW i wie, jak korzystać ze znacznika IMG. Prawdopodobnie niewiele, ale przecież nie zaszkodzi sprawdzić swojej wiedzy choćby po to, by zyskać pewność, że ma się opanowane te same podstawy co inni. Podrozdział ten pozwalam opuścić każdemu, kto wprost nie może się doczekać omawiania zagadnień dotyczących praw autorskich i patentowych, natomiast wszystkim, którzy jeszcze na krótką chwilę zdołają uzbroić się w cierpliwość, polecam rzucenie na niego okiem. Nawet stary pies może nauczyć się nowych sztuczek.
Obrazki na stronie Aby umieścić na stronie grafikę, należy skorzystać ze znacznika img. Wartością atrybutu src powinien być adres URL, pod którym znajduje się obrazek.
Żeby mieć pewność, że kod tworzonej strony WWW jest poprawny (podczas sprawdzania kodu nie pojawią się informacje o błędach ani ostrzeżenia), należy pamiętać o „zamykaniu” znaczników ukośnikiem oraz o dodaniu atrybutu alt.
Strony WWW, których twórcy używają atrybutu alt, są dostępne dla większej liczby użytkowników internetu. Aplikacje odczytujące zawartość ekranu, czyli programy zamieniające słowo pisane na tekst czytany, odczytują na głos to, co zostało zapisane wewnątrz cudzysłowów opisywanego atrybutu. Sensowne korzystanie z alt ułatwia poruszanie się po sieci ludziom, którzy zmuszeni są używać programów czytających. Wartością atrybutu alt nie powinna
60
|
Rozdział 2. Obrazy
być nigdy nazwa pliku; należy raczej wpisywać wewnątrz cudzysłowów jakiś mający konkretne znaczenie tekst, na przykład: „Na wpół rozwinięty liliowiec rdzawy”. Należy również dbać o to, aby tekst składał się z nie więcej niż 100 znaków i był napisany w języku, w którym napisana została większość zawartości witryny. W przypadku obrazków dekoracyjnych bez szczególnego znaczenia jako wartość atrybutu alt podaje się pusty łańcuch. Dzięki temu programy czytające ignorują mniej istotne grafiki. Niektóre przeglądarki nieprawidłowo wyświetlają znane jako tooltip małe okienka zawierające tekst alternatywny i pojawiające się nad obrazkami, nad którymi ustawiono kursor myszy. Na to projektant stron internetowych nie ma żadnego wpływu. Innymi dopuszczalnymi atrybutami znacznika img są style, przypisujące do znacznika określony styl lub określoną klasę, oraz id, pozwalający identyfikować dany element strony. Starsze atrybuty, takie jak width, height, vspace, hspace i align, albo wyszły z użycia i nie zostały uwzględnione w nowszych wersjach HTML, albo w ogóle nie pojawiły się w składni XHTML, dlatego należy unikać korzystania z nich. Nie wystarczy umieścić znacznika IMG w kodzie strony WWW, aby móc powiedzieć, że opublikowało się w internecie jakiś obrazek. Grafikę, która ma stać się elementem witryny, należy uprzednio przygotować. Aby obrazek sprawnie otwierał się w oknie przeglądarki, trzeba go zoptymalizować. W rozdziale 1. napisałam, że jedną ze strategii poprawiania funkcjonalności strony WWW jest przypisanie jej elementom osobnych domen lub poddomen. W ten sposób omija się wprowadzone w przeglądarkach ograniczenie liczby żądań wysyłanych do jednej domeny (większość przeglądarek wysyła tylko dwa jednoczesne żądania). Jeśli korzysta się z kilku poddomen, można „zachęcić” przeglądarki do wysyłania naraz większej liczby żądań, w wyniku czego witryna otwiera się szybciej. Istnieją także inne sztuczki umożliwiające poprawienie działania strony WWW, na której znajdują się grafiki. Niektóre z nich łączą się z konkretnymi formatami zapisu obrazów, a inne nie.
Optymalizacja GIF Wspominałam w tym rozdziale o metodzie kompresji LZW, będącej częścią technologii GIF. Ciekawostką dotyczącą tej metody może być stwierdzenie, że kompresja przeprowadzana za jej pomocą, odbywa się poziomo. Obrazy, na których obiekty przejawiają tendencję do ułożenia poziomego, zapisywane do plików typu GIF, kompresują się lepiej niż te przedstawiające cokolwiek „bardziej w pionie”. Gdy przeczytałam po raz pierwszy o tej zabawnej właściwości metody kompresji LZW, musiałam osobiście sprawdzić, czy jest ona prawdziwa. Utworzyłam dwukolorowy obrazek przedstawiający pasy (rysunek 2.14) i zapisałam go do pliku GIF — najpierw z paskami ułożonymi poziomo, a potem obrócony o 90°. Plik z grafiką przedstawiającą pasy ułożone poziomo osiągnął rozmiar 56 KB, natomiast ten z obrazkiem obróconym przed zapisem o kąt prosty — 76 KB. Różnica między rozmiarami obydwu otrzymanych plików jest co prawda niewielka, niemniej jeśli szuka się sposobu na wyrzucenie każdego zbędnego bajta…
Opisywanie, zagnieżdżanie i optymalizacja obrazów
|
61
Rysunek 2.14. Dwukolorowy obrazek przedstawiający poziomo ułożone paski, stworzony w celu sprawdzenia metody kompresji zastosowanej w formacie GIF
Istnieją narzędzia i programy, dostępne w internecie oraz instalowane w komputerze, służące do optymalizacji plików GIF. Większość z nich zmniejsza liczbę kolorów na obrazku, redukując tym samym rozmiar pliku. Niestety, używanie ich powoduje widoczną utratę jakości grafiki. Ponieważ większość programów zachowujących obrazy do plików typu GIF jednocześnie optymalizuje sam proces zapisu, w zasadzie nie trzeba korzystać w tym celu z żadnych dodatkowych narzędzi. Inną metodą optymalizacji plików GIF jest wybór którejś z metod wyświetlania wierszy na obrazku. Skorzystanie z opcji wyświetlania interlaced (z przeplotem) prowadzi do tego, że pliki graficzne GIF zachowują się podobnie jak te zapisane w progresywnym formacie JPEG: w trakcie wczytywania ostatecznej wersji obrazka w przeglądarce wyświetlana jest jego wersja niskiej jakości.
Optymalizacja JPEG Najbardziej znaczącym sposobem optymalizowania plików JPEG jest regulowanie poziomu kompresji zapisanych do nich obrazów. Od poziomu kompresji zależą rozmiar oraz jakość plików. Niektóre obrazki można kompresować w większym stopniu niż inne, nie powodując widocznego pogorszenia ich wyglądu. Każdy, kto korzysta z formatu JPEG do przechowywania grafik, powinien poeksperymentować z różnymi ustawieniami poziomów kompresji i znaleźć swój własny złoty środek między jakością obrazu a rozmiarem plików.
62
|
Rozdział 2. Obrazy
Podobnie jak ma to miejsce w przypadku GIF, tak i dla JPEG istnieją programy optymalizujące pliki w tym formacie, niemniej jednak zazwyczaj pozwalają one wyłącznie na zmianę poziomu kompresji obrazu, dlatego też rzadko kiedy okazują się naprawdę przydatne. Większość aplikacji służących do edycji obrazów udostępnia dwie opcje zapisu plików JPEG — do formatu progresywnego lub zwykłego. Format progresywny (już o nim pisałam) zapewnia podgląd grafiki, której wysokiej jakości wersja jest ściągana. Istnieją narzędzia, które pozwalają przycinać i obracać obrazy zapisane do plików JPEG bez utraty ich jakości. Aplikacje te tylko odpowiednio przesuwają obraz, bez ingerowania w poziom jego kompresji. Można znaleźć wtyczki do znanych programów, takich jak Photoshop, albo samodzielne aplikacje, na przykład JPEGCrops, oferujące możliwość przeprowadzania opisanych tu operacji. Oczywiście, temat ten jest niezależny od zagadnienia poziomu kompresji pozwalającej regulować rozmiar plików JPEG. Program JPEGCrops jest dostępny pod adresem http://ekot.dk/programmer/JPEGCrops/.
Optymalizacja PNG Pliki PNG również można zachowywać z przeplotem, ale najlepszą metodą ich optymalizowania okazuje się wybór opartego na metodzie palet formatu zapisu PNG-8 w zamian za format PNG-32 (w programie Photoshop PNG-24). Jak wspomniałam wcześniej, działanie takie powoduje utratę jakości obrazu zapisywanego do pliku PNG, jednakże grafiki uzyskane w opisany sposób mogą wyglądać wystarczająco dobrze, by móc opublikować je w sieci WWW. Istnieją programy typu open source, służące do przeprowadzania procesu optymalizacji plików PNG (pngcrush, OptiPNG). Różnica między rozmiarem pliku oryginalnego i modyfikowanego za pomocą wspomnianych aplikacji zależy od tego, jaką optymalizację pliku oryginalnego zapewnił program, za pomocą którego został on utworzony. Zazwyczaj oszczędność miejsca na dysku okaże się naprawdę niewielka. Więcej informacji na temat optymalizacji plików typu PNG oraz odnośniki do witryn z odpowiednim oprogramowaniem można znaleźć na stronie http://www.cs.toronto.edu/ ´~cosmin/pngtech/optipng.html.
Publikacja obrazów w sieci WWW a prawa autorskie. Hotlinking O prawach autorskich można by napisać wiele książek, dlatego też związanymi z nimi zagadnieniami zajmę się raczej pobieżnie. Ponadto, jako że moja wiedza opiera się na moich własnych doświadczeniach, skupię się na opisie prawa panującego w Stanach Zjednoczonych. Nie trzeba się szczególnie starać, by stać się właścicielem praw do stworzonego przez siebie obrazka. Każde dzieło od momentu ukończenia staje się własnością jego twórcy. Mimo to, jeśli
Publikacja obrazów w sieci WWW a prawa autorskie. Hotlinking
|
63
obraz zamieszcza się w sieci WWW, nie wystarczy być jego właścicielem, aby inni nie wykorzystywali go do swoich celów. Ktoś, kto nie jest zadowolony z tego, że jego obrazek umieszczono na jakiejś witrynie, może jedynie poprosić autora owej witryny, aby przestał używać grafiki, która nie jest jego własnością. Jeżeli taka metoda dbania o własne interesy zawiedzie, warto sprawdzić, czy firma, na której serwerze umieszczono stronę ze spornym obrazkiem, dopuszcza, by jej klienci korzystali z cudzych materiałów objętych prawami autorskimi. Jeżeli nie, można pokusić się o wniesienie skargi odnośnie do złamania zasad regulaminu użytkowania miejsca na danym serwerze. Należy mieć świadomość, że użytkownicy internetu korzystający z cudzych materiałów bez pozwolenia potrafią być niemili w stosunku do osób, które usiłują dochodzić swoich praw. Gdy okaże się, że wniesienie skargi nie przyniosło oczekiwanych rezultatów, nie pozostaje już nic innego, jak tylko wynająć prawnika i pozwać osobę łamiącą prawo. Jednakże nawet tak drastyczne działanie może okazać się nieskuteczne, dopóki bowiem właściciel obrazka nie dowiedzie przed sądem, że użycie przez kogoś innego dzieła, którego jest prawowitym właścicielem, w jakiś sposób zaszkodziło jego interesom z finansowego punktu widzenia, istnieje spora szansa, iż wykorzystanie spornej grafiki uznane zostanie za tzw. prawidłowe użycie. Za prawidłowe użycie obrazu uznaje się jego komentowanie, krytykowanie, opisywanie, a także wykorzystywanie go w celach edukacyjnych oraz w pracach badawczych. Oczywiście, pojawiają się dodatkowe aspekty sprawy związane z prawami własności, istotne jest bowiem, czy grafika stanowi część większej pracy autorstwa osoby pokrzywdzonej, a jeśli tak, to jaką część, oraz czy jej kopiowanie zaszkodziło właścicielowi praw autorskich z ekonomicznego punktu widzenia. Ktoś, kto skopiuje jeden z kilku obrazków zamieszczonych na cudzej stronie WWW i napisze tekst o tematyce pokrywającej się z tematyką obrazka, albo nawet opisze sam obrazek, najprawdopodobniej nie złamie prawa określonego zasadą prawidłowego użycia. Jeśli autor grafik nie pobiera opłat za korzystanie ze swoich dzieł ani nie zarabia na nich w żaden inny sposób, raczej nie będzie w stanie dowieść, że jego prace zostały użyte niezgodnie z prawem. Niestety, nie istnieje jednoznaczny, stuprocentowo skuteczny sposób określania, kiedy ma się do czynienia z prawidłowym, a kiedy z nieprawidłowym użyciem własności intelektualnej. W Stanach Zjednoczonych nakładem wydawnictwa Uniwersytetu Duke’a wydany został zabawny komiks pod tytułem Bound By Law1, w którym pokrótce opisano zagadnienia związane z prawami autorskimi oraz prawem prawidłowego użycia. Mimo że treść komiksu dotyczy przede wszystkim praw autorskich do filmów, wiedzę, którą w nim zawarto, potraktować można również jako opis problemu kopiowania obrazów. Sama w niniejszej książce zamieściłam grafikę będącą okładką Bound By Law (rysunek 2.15) — naruszyłam czyjeś prawa autorskie czy nie? Oczywiście autor obrazka może wcale nie przejmować się tym, że ktokolwiek go kopiuje. Co więcej, jeśli tylko zechce, może uznać swoje dzieło za dobro publiczne. Dobrem publicznym są również materiały, do których prawa autorskie wygasły, oraz te będące wynikiem pracy urzędów państwowych (obowiązuje tu zasada, że społeczeństwo płaci za wspomniane materiały, jako że zostało obłożone podatkami). Z dobra publicznego korzystać można tak, jak się chce.
1
W granicach prawa — przyp. tłum.
64
|
Rozdział 2. Obrazy
Rysunek 2.15. Okładka komiksu Bound By Law
Między pełnymi prawami autorskimi a własnością publiczną istnieje coś, co nazywa się zestawem licencji Creative Commons. Dzięki idei Creative Commons autor dzieła może formalnie pozwolić innym korzystać ze swojej własności intelektualnej pod pewnymi ściśle określonymi warunkami. W skład wspomnianych licencji wchodzi, na przykład, licencja Uznanie autorstwa-Użycie niekomercyjne-Bez utworów zależnych. Stwierdza ona, że osoba korzystająca z cudzego utworu ma obowiązek oznaczyć go w sposób określony przez jego twórcę. Ponadto nie może go wykorzystywać w celach komercyjnych ani w żaden sposób modyfikować (pod pojęciem modyfikowania rozumie się także tworzenie dzieł będących pochodnymi cudzej własności intelektualnej). Licencje typu Creative Commons nie naruszają w żaden sposób praw autorskich, raczej stanowią narzędzie mające ułatwić różnym ludziom korzystanie z dzieł danego twórcy bez każdorazowego pytania go o zgodę.
Publikacja obrazów w sieci WWW a prawa autorskie. Hotlinking
|
65
Więcej informacji na temat licencji Creative Commons można znaleźć pod adresem http://creativecommons.pl/.
Osoba decydująca się na korzystanie z licencji typu Creative Commons powinna w pełni rozumieć warunki każdej z nich. Gdy pisałam tę książkę, głośna stała się sprawa kilku użytkowników serwisu wymiany zdjęć Flickr, którzy odkryli, że ich fotografie, chronione licencją Uznanie autorstwa (zakaz podawania nieprawdziwych informacji lub utajniania informacji o autorze dzieła), zostały wykorzystane w australijskiej kampanii reklamowej firmy Virgin Mobile (rysunek 2.16). Jak się okazało, zdjęcia te, w większości przedstawiające ludzi i opatrzone niezbyt przychylnymi tekstami, pokazywano w gazetach, autobusach oraz w internecie.
Rysunek 2.16. Obrazek ze strony internetowej firmy Virgin Mobile (http://www.areyouwithusorwhat.com/)
Jako że warunki licencji nie wykluczały wykorzystywania zdjęć w celach komercyjnych, pokrzywdzeni amatorzy fotografii niewiele mogli poradzić na to, że ich dzieł użyto podczas tworzenia reklam Virgin. Jedyną kwestią sporną okazało się to, że od ludzi uwiecznionych na zdjęciach nie uzyskano oficjalnej zgody na upublicznienie ich wizerunków — podobne praktyki są niezgodne z prawami panującymi zarówno w USA, jak i w Australii. Jeśli chce się w celach redakcyjnych wykorzystywać na swojej niekomercyjnej stronie obrazki przedstawiające ludzi albo cudzą własność (na przykład należący do kogoś budynek), nie trzeba martwić się o zgodę na upublicznienie wizerunku osób lub rzeczy. Można natomiast ściągnąć sobie na głowę niemałe problemy, zamieszczając w swoim serwisie znaki firmowe i obrazki typu logo. Szczególnie należy uważać, jeśli serwis ów przynosi jakiekolwiek dochody — nieważne, czy dochody te są jakkolwiek związane z publikowanymi materiałami firmowymi, czy też nie.
66
|
Rozdział 2. Obrazy
Kopiowanie — tak, tworzenie odnośników — nie Może dojść do sytuacji, w której autor obrazu nie ma nic przeciwko jego kopiowaniu, natomiast nie życzy sobie zamieszczania na stronach WWW odnośników do niego. Tworzenie odsyłaczy do materiałów znajdujących się w innych serwisach internetowych, niekiedy w znaczącym stopniu obciążających łącza i serwery, nosi nazwę hotlinkingu. Każdy, kto umieszcza swoją witrynę na serwerze Apache i jest w stanie tworzyć własne pliki .htaccess, służące do regulacji ruchu na danej stronie WWW, może umieścić w nich wpisy, które przeciwdziałają hotlinkingowi. Poniżej podaję wpisy, które wystarczy dodać do kodu w plikach typu .htaccess, aby zablokować dostęp do obrazków umieszczonych na stronie WWW z domen innych niż własna. Tworząc przykładowe wpisy, za nazwę domeny przyjęłam jakas.com. RewriteEngine on RewriteCond %{HTTP_REFERER} !^$ RewriteCond %{HTTP_REFERER} !^http://(www\.)?jakas.com/.*$ [NC] RewriteRule \.(gif|jpg|png)$ - [F]
Do powyższej reguły można dopisać dowolną liczbę dodatkowych domen, spod których będzie możliwe otwarcie obrazków znajdujących się na stronie WWW — wystarczy odpowiednią liczbę razy przepisać linię z nazwą jakas.com i za każdym razem odpowiednio zmieniać nazwę domeny. Można nie tylko blokować dostęp do danego obrazka, lecz także sprawić, że zamiast niego otwierany będzie inny. Niektórzy z przyjemnością korzystają z tej opcji i tworzą przekierowania do grafik, których treść raczej trudno uznać za miłą. Nie polecam podobnego działania z dwóch przyczyn: po pierwsze nie zmniejsza ono ruchu na danej stronie WWW (w końcu i tak otwierana jest ta specyficzna „wiadomość”), a po drugie większość ludzi, którzy na nią trafiają za sprawą hotlinkingu, nawet nie wie, co to jest hotlinking ani dlaczego kieruje się do nich niezbyt piękny przekaz. Blokowanie dostępu do obrazków, bez obrażania kogokolwiek, według mnie w zupełności wystarczy. Oczywiście z opisanej wyżej opcji korzystać można w celu reklamowania swojego serwisu. Wystarczy zadbać o to, żeby na stronie otwierającej się przy próbach hotlinkingu znalazł się obrazek przekierowujący ruch internetowy na inną witrynę WWW bądź będący „zaproszeniem” do jej odwiedzenia. Można też zamieścić grzeczną wiadomość następującej treści: „Jeśli masz ochotę korzystać z tego obrazka, skopiuj go, proszę, na swojej stronie”. Aby to zrobić, wystarczy zmodyfikować wpis w pliku .htaccess zgodnie ze wzorem podanym poniżej: RewriteEngine on RewriteCond %{HTTP_REFERER} !^$ RewriteCond %{HTTP_REFERER} !^http://(www\.)?jakas.com/.*$ [NC] RewriteRule \.(gif|jpg)$ http://jakas.com/skopiujmnie.jpg [R,L]
Zastosowanie powyższej metody przeciwdziałania hotlinkingowi daje prawie stuprocentową pewność, że odnośnik do chronionego obrazka bardzo szybko zostanie usunięty z konkurencyjnej witryny. Oczywiście istnieją także inne sposoby radzenia sobie z problemami związanymi z przepustowością łącz i brakiem miejsca na serwerze — trzeba znaleźć alternatywną metodę przechowywania i udostępniania obrazów.
Publikacja obrazów w sieci WWW a prawa autorskie. Hotlinking
|
67
Przechowywanie obrazów Przynajmniej jedno nie zmieniło się w ciągu ostatnich lat gwałtownego rozwoju technologicznego ludzkości — aby móc udostępniać w sieci WWW obrazy, trzeba dysponować pewną ilością miejsca na jakimś dysku oraz łączem o określonej przepustowości. Niestety, teraz, gdy mamy do dyspozycji aparaty fotograficzne robiące zdjęcia o ogromnych rozmiarach oraz karty pamięci, na których mieści się mnóstwo fotografii, publikacja grafik w internecie stała się zajęciem bardziej „zasobożernym” niż kiedyś. Obrazy można udostępniać w sieci na kilka sposobów. Jednym z nich jest umieszczanie grafik na własnym serwerze, takim, z którego korzysta się samotnie lub który współdzieli się z innymi użytkownikami. Ostatnimi czasy ceny miejsca na serwerach spadły na tyle, że warto w ogóle rozważać jego wykup. Kilka gigabajtów miejsca i przepustowość na poziomie 30 – 50 GB można nabyć za mniej więcej 100 złotych rocznie. Mimo że wynajem miejsca na serwerze nie kosztuje już aż tak dużo jak kiedyś, niektórzy mogą chcieć skorzystać z rozwiązań alternatywnych do wykupu przestrzeni dyskowej i przepustowości. Istnieją inne metody publikowania obrazów w internecie, przy czym większość z nich ma pewne ograniczenia.
Umieszczanie obrazów w serwisach zrzeszających społeczności internetowe Serwisy społecznościowe stały się ostatnio bardzo popularne. Udostępniają one swoim użytkownikom wiele różnych opcji. Za ich pośrednictwem można nie tylko pokazać swoje zdjęcia innym internautom, ale także korzystać z ciekawych rozwiązań stworzonych po to, by jednoczyć w grupy ludzi o podobnych zainteresowaniach. Jednym z popularnych serwisów społecznościowych jest Flickr (http://flickr.com), będący własnością firmy Yahoo!. Rysunek 2.17 pozwala zapoznać się z jego wyglądem. Przy zakładaniu konta w serwisie Flickr należy się zdecydować, czy chce się posiadać konto płatne, czy darmowe. Od wyboru rodzaju konta zależy liczba zdjęć, które będzie można za jego pomocą opublikować. Warto rozważyć założenie konta płatnego — jego cena nie jest wygórowana, natomiast dostaje się do dyspozycji nieograniczoną ilość miejsca na fotografie oraz nielimitowaną przepustowość łącza. Do umieszczania zdjęć w serwisie Flickr służy specjalna aplikacja internetowa. Zdjęcia w tym serwisie można również umieszczać przy użyciu jednej z wielu dostępnych aplikacji stworzonych specjalnie w tym celu. Po przesłaniu zdjęć do Flickr tworzone są ich wersje o różnych rozmiarach. Każde zdjęcie można opatrzyć informacjami, takimi jak tytuł, opis, przypisy i słowa kluczowe. Jeśli do fotografii dołączone zostały jakieś informacje, będą one wyświetlane każdorazowo po jej otwarciu. Do pobierania zdjęć z serwera Flickr służy specjalna aplikacja internetowa przedstawiona na rysunku 2.18. Zdjęcia przesłane na serwer Flickr można grupować w galerie, dodawać do map lub publikować w tematycznych grupach dyskusyjnych (na przykład w grupie poświęconej fotografii czarno-białej, zdjęciom motyli albo przedstawiającym różne miejsca na Ziemi). Każde ze zdjęć udostępnianych publicznie może być komentowane przez innych internautów.
68
|
Rozdział 2. Obrazy
Rysunek 2.17. Zdjęcia kwiatów w serwisie Flickr pogrupowane ze względu na słowa kluczowe
W serwisie Flickr można zakładać fora, grupy tematyczne, jak również wyszukiwać zdjęcia na podstawie przypisanych do nich słów kluczowych i informacji. Ponadto można przeglądać fotografie za pomocą oprogramowania wyświetlającego pokazy slajdów oraz dla każdego ze zdjęć osobno ustalać typ chroniącej je licencji Creative Commons. Kolejną wygodną opcją oferowaną przez Flickr jest grupowanie zdjęć ze względu na słowa kluczowe, a także stopień zainteresowania, jakim się cieszą wśród internautów. W celu zaoszczędzenia miejsca na serwerze oraz uniknięcia przeciążenia łącz zdjęcia i inne grafiki, które chce się opublikować na swojej stronie WWW, można przechowywać w serwisie Flickr (odnośnik do fotografii i kod HTML niezbędny do zamieszczenia jej na stronie internetowej generowane są automatycznie). Jedynym warunkiem korzystania z tej usługi jest umieszczenie w obrębie własnej witryny odsyłacza do strony głównej serwisu Flickr. Na serwerach Flickr nie wolno przechowywać grafik będących elementami tworzącymi witrynę WWW. Mimo że serwis Flickr powstał z myślą o publikacji zdjęć, można w nim zamieszczać również grafiki niebędące fotografiami. W przypadku obrazów umieszczanych na stronach Flickr istotne jest, aby udostępniający je użytkownik miał prawo do ich rozpowszechniania oraz — o czym przed chwilą wspomniałam — żeby nie były one grafiką użytkową wykorzystywaną do budowy witryny WWW.
Przechowywanie obrazów
|
69
Rysunek 2.18. Strona ściągania zdjęcia w serwisie Flickr; pola tekstowe zawierają kod HTML, dzięki któremu fotografię można umieścić na swojej stronie WWW
Korzystanie z usług opisywanego serwisu jest naprawdę opłacalne, a sam serwis działa niezawodnie. Za jego wadę można jednak uznać to, że stanowi część większego przedsięwzięcia, w związku z czym nie ma żadnych gwarancji, że profil oferowanych w nim opcji nie ulegnie z czasem znaczącej zmianie. Na przykład, gdy stworzono wersję niemieckojęzyczną serwisu, na konta zakładane za jej pośrednictwem nałożono pewne restrykcje. Miały one sprawić, że konta te będą „bezpieczne” z punktu widzenia niemieckiego prawa, ściśle określającego zasady dostępu dzieci do fotografii. Należy mieć na uwadze fakt, że podobne rozwiązania stosuje wielu twórców serwisów zrzeszających dużą liczbę ludzi.
70
|
Rozdział 2. Obrazy
Flickr to serwis wart uwagi, niemniej jednak czasami chciałoby się móc po prostu przechowywać gdzieś swoje zdjęcia, bez stawania się częścią żadnej społeczności. Trzeba pamiętać, że aktualnie wiele osób traktuje serwis Flickr jak zbiór darmowych grafik, z których wolno korzystać w niemal dowolny sposób, na przykład umieszczać je na swojej stronie WWW. Ktoś, kto nie życzy sobie, żeby inni używali jego fotografii do swoich celów, nie powinien godzić się na ochronę swojej własności intelektualnej licencjami typu Creative Commons. Jeśli nie chce się nazbyt upubliczniać zdjęć, nie należy ich udostępniać w internecie, a już na pewno nie wolno umieszczać ich w serwisie Flickr.
Innymi serwisami anglojęzycznymi świadczącymi usługi takie jak Flickr są SmugMug (http:// ´www.smugmug.com/) i PhotoBucket (http://photobucket.com/). W polskim internecie również można znaleźć witryny o podobnym profilu, wystarczy w wyszukiwarce stron WWW wpisać frazę „internetowa galeria zdjęć”. Oto przykładowe wyniki wyszukiwania: PLFOTO (http://plfoto.com/), fotoKonto (http://fotokonto.pl), pxd.pl (http://pxd.pl/).
Umieszczanie obrazów w sieci — inne rozwiązania Zdjęcia i inne multimedia można umieszczać w serwisach, które zostały stworzone z myślą o przechowywaniu i (lub) rozpowszechnianiu plików dowolnego rodzaju. Jednym z tego typu serwisów jest S3 (Amazon Simple Storage Service). Jego adres internetowy to: http://aws.amazon.com/s3. Serwis ten oferuje przestrzeń dyskową oraz różne usługi internetowe, takie jak możliwość wysyłania dowolnych plików na serwer i ich ściągania (m.in. zdjęć) oraz tworzenie kopii zapasowych plików. Serwis S3, mimo swoich zalet, nie najlepiej nadaje się do tego, by za jego pośrednictwem udostępniać na swojej stronie WWW zdjęcia, ponieważ płaci się za każdą (nawet nieudaną) próbę otwarcia umieszczonych w nim obrazków. Faktem jest, że potrzeba tysięcy prób, by rachunek wyniósł zaledwie kilka centów, niemniej jednak trzeba pamiętać, że istnieją złośliwe witryny, które w krótkim czasie wysyłają ogromną liczbę żądań pod jeden adres internetowy — za ich sprawą opłata mogłaby znacząco wzrosnąć. Jeśli chce się używać miejsca dyskowego firmy Amazon bezpiecznie, należy zapoznać się z innymi oferowanymi przez nią usługami (w tym aplikacjami internetowymi) i ograniczyć do korzystania właśnie z nich. W serwisie Mashable, poświęconym nowym technologiom internetowym, można znaleźć ponad osiemdziesiąt odsyłaczy do stron oferujących usługi w zakresie udostępniania przestrzeni dyskowej internautom. Odnośniki pogrupowano w trzy kategorie: kopia zapasowa, tylko przesyłanie, przechowywanie i udostępnianie. Na wielu witrynach widnieje słowo free (darmowy), ale zalecałabym dokładne zapoznanie się z jej treścią i warunkami korzystania z proponowanych na niej usług. Dobrze jest wiedzieć o wszystkich „szczególnych przypadkach”, w których usługa darmowa przeradza się w płatną. Jednym ze stosunkowo niedawno założonych „darmowych” serwisów jest DivShare. Rzeczywiście możliwe jest nieodpłatne korzystanie z oferowanych w nim usług, niemniej wiąże się ono z oglądaniem materiałów reklamowych. Po założeniu konta i zobowiązaniu się do uiszczania niewielkiej comiesięcznej opłaty użytkownik DivShare dostaje do dyspozycji do 5 GB przestrzeni dyskowej, na której może przechowywać obrazy; miesięczny limit transferu danych wynosi 50 GB. Oczywiście ludzie prowadzący serwis zapewniają, że grafiki „nigdy” nie zostaną
Przechowywanie obrazów
|
71
usunięte z serwera, trzeba jednak pamiętać, że słowo „nigdy” ma w internecie zupełnie inne znaczenie niż w normalnym życiu. Oto odnośnik do listy serwisów oferujących przestrzeń dyskową, dostępnej dzięki witrynie Mashable: http://mashable.com/2007/07/28/online-storage/. Serwis DivShare znajduje się pod adresem: http://divshare.com.
Umieszczanie obrazów i plików multimedialnych na oddzielnym serwerze niż ten, na którym znajduje się strona WWW, okazuje się rozwiązaniem bardziej efektywnym niż trzymanie wszystkich jej elementów w jednym miejscu. Do przechowywania i udostępniania plików potrzebne są inne zasoby niż do wyświetlania dynamicznej witryny, przeprowadzania obliczeń oraz obsługi baz danych. Ponadto serwery tworzone z myślą o przechowywaniu danych nie wymagają, w przeciwieństwie do tych, na których umieszcza się strony internetowe, instalowania dużej liczby programów. Dzięki temu jeszcze więcej przestrzeni dyskowej zapełnić można na przykład plikami graficznymi. W tym momencie pragnę jeszcze raz podkreślić, że w sieci WWW traci swoje normalne znaczenie słowo „nigdy”. Dlatego też, jeśli przechowuje się pliki na serwerach serwisów udostępniających przestrzeń dyskową, należy: tworzyć kopie zapasowe danych, być obeznanym z regulaminami serwisów, z których usług się korzysta, mieć plan awaryjny.
Bez niespodzianek Mam niemałe doświadczenie w dziedzinie wszelkich możliwych metod umieszczania obrazków w sieci WWW. Ponadto zarządzałam w swoim życiu wieloma domenami. Dość boleśnie przekonałam się, że prawdziwym utrapieniem może okazać się zmienianie adresów do zewnętrznych stron lub domen w kodzie witryny, którą trzeba było przenieść w inne miejsce. Po podjęciu decyzji, że nie chce się więcej korzystać z zewnętrznej strony, do której odnośnik został zagnieżdżony w kodzie witryny, pozostaje albo pogodzić się z faktem, że elementem owej witryny na stałe stanie się odsyłacz „donikąd”, albo stracić mnóstwo czasu na ręczne lub programowe modyfikowanie kodu. Istnieją dwie metody zabezpieczenia się przed niespodziankami związanymi z lokacjami obrazów. Pierwszą z nich jest nieużywanie pełnych adresów URL podczas tworzenia odnośników do grafik przechowywanych na tym samym serwerze, na którym umieszczone zostały pliki witryny. Warto korzystać z adresów względnych.
Zastosowanie opisanego tu rozwiązania gwarantuje, że odsyłacze, w sposób względny przypisujące obrazki do podstron witryny, będą działały nawet po zmianie domeny, na przykład z twojadomena.com na innadomena.com. Drugą z metod, stosowaną w przypadku korzystania z kilku domen lub zewnętrznej przestrzeni dyskowej, jest używanie (w środowisku typu Apache) reguł HTACCESS do przekierowywania żądań z witryny pod właściwe adresy określające fizyczną lokalizację plików graficznych. Zazwyczaj tworzy się przekierowania tymczasowe, jako że sama idea przekierowań opiera się na założeniu, że w którymś momencie może zajść potrzeba przeniesienia obrazów w inne miejsce.
72
|
Rozdział 2. Obrazy
Przykład reguły przekierowania widać poniżej (reguła przekierowuje pod inną domenę wszystkie żądania wyświetlenia plików GIF): RedirectMatch (.*)\.gif$ http://www.innyserwer.com$1.gif
W internecie można znaleźć wiele informacji na temat takich wariacji powyższego przykładu, jak reguły rewrite rules czy przekierowania bazujące na słowach kluczowych. Podsumowując — jeśli żądanie wyświetlenia grafiki zostanie wysłane pod względny adres URL /obraz/roza.jpg, a katalogowi „obraz” za pomocą odpowiedniej reguły HTACCESS przypisano wcześniej przekierowanie do zewnętrznej przestrzeni dyskowej naszemiejscetwojepliki.com/twojekonto/obraz, grafika ta zostanie wyświetlona na stronie WWW niezależnie od tego, ile razy uległa zmianie lokalizacja owej strony. Jedyną wadą opisanego rozwiązania jest to, że jeżeli chce się otworzyć dany plik graficzny za pomocą jakiejś aplikacji (więcej na ten temat można znaleźć w dalszych częściach książki), musi być on przechowywany lokalnie (ewentualnie trzeba zrobić jego lokalną kopię). To tyle, jeśli chodzi o teorię. Nadszedł czas, żeby stworzyć kilka obrazków.
Przechowywanie obrazów
|
73
74
|
Rozdział 2. Obrazy
ROZDZIAŁ 3.
Z aparatu do internetu
Kilka lat temu miałam okazję przeczytać wypowiedź pewnego fotografa, który stwierdził, że ustawienia domyślne programu Photoshop w zupełności wystarczą, by właściwie przygotować zdjęcia do publikacji w sieci WWW. Oczywiście kiedyś fotografie kojarzyły się przede wszystkim z drukiem na papierze, lecz dziś już nie można twierdzić, że z internetu warto korzystać tylko i wyłącznie w celu promowania swoich „papierowych” dzieł. Aktualnie sieć stała się jak najbardziej odpowiednim miejscem docelowym dla fotografii. Zrozumienie tego faktu prowadzi do diametralnej zmiany poglądów na temat ustawień domyślnych jako „wystarczających” do obróbki zdjęć, które pragnie się opublikować w internecie. Cyfrowe aparaty, a co za tym idzie — i cyfrowe zdjęcia, popularne są od lat. Według mnie wpłynęły na to trzy czynniki: aparaty cyfrowe i komputery stały się dostępne dla przeciętnego człowieka, dostęp do internetu przestał być czymś rzadkim (ludzie oswoili się z siecią), znacznie wzrosła liczba użytkowników sieci WWW. Za sprawą tych właśnie czynników nastąpił rozkwit fotografii cyfrowej, a w internecie pojawiło się mnóstwo stron ze zdjęciami. Kiedyś większość zdjęć robiono za pomocą celuloidowych filmów i papieru — odbitki co ciekawszych z nich wysyłano rodzinie i znajomym. Dziś ludzie coraz rzadziej korzystają z celuloidu, a fotografie, przenoszone z aparatu cyfrowego wprost do komputera, rozsyłają za pomocą poczty elektronicznej lub udostępniają w internecie. Zmienił się więc nie tylko sposób ekspozycji zdjęć, lecz także ich odbiorca. Dawniej fotografie pokazywało się tylko najbliższym, teraz zaś chwalimy się nimi dosłownie przed całym światem. Okazuje się, że mnóstwo jest fotografówamatorów, którzy robią naprawdę świetne zdjęcia. Nawet w serwisach informacyjnych coraz częściej pojawiają się amatorskie fotografie, co akurat można uznać za rozwiązanie dość kontrowersyjne. Ponieważ fotografia cyfrowa stała się szalenie popularna, zdjęcia są dziś bardzo istotną częścią grafiki tworzącej strony WWW. Aż trudno uwierzyć, że jeszcze dziesięć lub nawet pięć lat temu fotografię cyfrową można było uznać za zupełnie marginalną gałąź sztuki internetowej. Kiedyś mnóstwo czasu spędzało się przy tworzeniu projektów witryn, grafiki przycisków i menu, teraz zaś całe godziny poświęca się na poprawianie zdjęć, które mają zostać opublikowane w sieci. Nawet najwięksi amatorzy każdego roku zamieszczają w internecie dziesiątki, a nierzadko i setki, swoich cyfrowych dzieł.
75
Wspaniale, że są wśród nas digerati1. Za sprawą ich inwencji możemy poprawiać wygląd fotografii cyfrowych na wiele różnych sposobów — od zupełnie zautomatyzowanych po ręczne, opierające się na postępowaniu zgodnie z instrukcjami „krok po kroku”; i nie musimy przy tym znać się na edycji zdjęć ani posiadać drogiego wyposażenia. Do swojej dyspozycji mamy znaczną liczbę programów, bibliotek i przeróżnych konwerterów, za pomocą których jesteśmy w stanie skutecznie przeprowadzać proces przenoszenia zdjęć z aparatu wprost do sieci WWW. I dobrze, bo — prawdę mówiąc — bez użycia odpowiedniego oprogramowania trudno pikselowy bałagan zmienić w sensownie wyglądające zdjęcie. Niestety, istnieje tak wiele narzędzi do tworzenia i obróbki fotografii, że nie sposób ich opisać w jednym rozdziale książki. Za ich pomocą można osiągać niesamowite efekty. Fotografie wbrew pozorom nigdy nie były czymś nazbyt fizycznym, namacalnym, rzeczywistym. Zdjęcie to nie tylko otwarcie się i zamknięcie przesłony, nie tylko czary, jakich dokonuje się w ciemni. Dzięki technologii fotografii cyfrowej oraz rozmaitym programom niejedno dość przeciętnej jakości zdjęcie może stać się dobre, a niekiedy nawet okaże się dziełem sztuki — wystarczy nieco poeksperymentować ze światłem. Co ważne, nie trzeba być Anselem Adamsem, Walkerem Evansem ani Annie Leibovitz, by publikować swoje prace w sieci. Za pomocą zdjęć można opowiadać historie, przedstawiać idee oraz dawać upust własnej pomysłowości; na zdjęciach można uwieczniać ciekawe wydarzenia. Należy pamiętać, że fotografie, aby dobrze wyglądały w internecie, nie muszą być najwyższej jakości. Prawdę mówiąc, prawdziwa sztuka prezentuje się w sieci gorzej niż prace amatorskie, jako że nie służą jej: wyświetlanie na przeróżnych monitorach o odmiennych możliwościach i parametrach oraz umieszczanie na niewielkich przestrzeniach dyskowych. W tym rozdziale omówię pierwsze kroki, które musi wykonać fotograf chcący przenieść swoje prace z aparatu wprost do internetu. Opiszę także niektóre z ciekawszych i bardziej znanych programów do obróbki zdjęć. Skupię się jednak przede wszystkim na sposobach poprawiania wyglądu fotografii, tak aby jak najlepiej prezentowały się w sieci WWW. Wymagania systemowe dla poszczególnych programów opisanych w tym rozdziale różnią się. Cechą wspólną omawianych przeze mnie aplikacji jest to, że dostępne są ich wersje darmowe, shareware lub próbne (w pełni funkcjonalne przez okres 30 dni).
Warsztat pracy fotografa Za pracę fotografa uznać należy wszelkie czynności przygotowawcze, które umożliwiają opublikowanie zdjęcia pozyskanego z aparatu. Ludzie prezentują odmienne podejście do kwestii obróbki zdjęć i korzystają z różnego oprogramowania. Niektórzy lubią używać aplikacji takich jak Aperture, czyli będących kompletnymi zestawami narzędzi do obróbki zdjęć, inni zaś sięgają po rozmaite programy, z których każdy służy do wykonywania czynności określonego typu (konwertowanie plików RAW, edycja zdjęć, program do obsługi FTP, aplikacja wyświetlająca fotografie jako pokazy slajdów).
1
Słowa tego używa się do opisu ludzi znających się na komputerach oraz obeznanych z nowoczesnymi technikami cyfrowymi — przyp. tłum.
76
|
Rozdział 3. Z aparatu do internetu
Derrick Story (guru z wydawnictwa O’Reilly, ekspert w sprawie cyfrowych mediów) umieścił w swoim blogu The Digital Story poradnik pod tytułem „Stwórz swój warsztat pracy” (ang. „Build Your Workflow”). Poradnik ten dostępny jest w dwóch wersjach: tekstowej i audio. W obydwu autor omawia podane niżej podstawowe zagadnienia.
1. Robienie zdjęć (za pomocą aparatu). 2. Kopiowanie zdjęć do komputera. 3. Organizowanie zdjęć (zamieszczanie informacji dodatkowych, ocenianie, sortowanie). 4. Edycja zdjęć. 5. Udostępnianie (publikowanie) zdjęć. 6. Zapisywanie (archiwizowanie) zdjęć. Proces kopiowania i przetwarzania fotografii, tak by ostatecznie znalazły się one w internecie, nie różni się niczym od tego opisanego powyższymi punktami — poza tym, że jedyną interesującą nas formą ich udostępniania jest publikacja tylko i wyłącznie w sieci WWW. To, z ilu narzędzi korzysta dana osoba, aby osiągnąć cel, zależy w znacznym stopniu od stopnia, w jakim interesuje się ona oprogramowaniem oraz — ewentualnie — od budżetu, jakim dysponuje. Inne czynniki, włącznie z tym, czy owa osoba zarabia robieniem zdjęć, czy też nie, wydają się być mniej istotne. Poradnik napisany przez Derricka można znaleźć na stronie http://www.thedigitalstory. ´com/blog/2007/08/build_your_workflow.html (strona w języku angielskim).
Zarówno amatorzy, jak i profesjonalni fotografowie korzystają z programów służących do zarządzania zdjęciami, takich jak Lightroom firmy Adobe, Expression Media firmy Microsoft, Aperture firmy Apple, Camera One albo ciągle rozwijany w czasie, gdy powstawała niniejsza książka, blueMarine (aplikacja typu open source). Wspomniane programy ułatwiają organizowanie fotografii oraz opatrywanie ich dodatkowymi informacjami. Można też za ich pomocą edytować zdjęcia, niemniej większość programów do zarządzania fotografiami nie oferuje bardziej skomplikowanych opcji, które występują we wszystkich, nawet najprostszych edytorach plików graficznych. Po początkowym stadium pracy nad zdjęciami, polegającym na ich uporządkowaniu, przychodzi czas, by każde z nich nieco poprawić. Niezależnie od tego, jak dobrego programu do zarządzania fotografiami się używa, czynność ta wymaga skorzystania z jakiegoś edytora plików graficznych. Jednym z najbardziej znanych edytorów jest Photoshop firmy Adobe, który wciąż pozostaje niekwestionowanym liderem na rynku aplikacji do modyfikowania obrazów. Niemniej nie musimy korzystać z tego właśnie programu, jako że istnieją dla niego rozsądne alternatywy. Prawda jest taka, że do dyspozycji mamy dziesiątki różnych aplikacji, z których wielu możemy używać za darmo na platformach Windows, Mac OS X i Linux. Oprócz tego powstaje coraz więcej edytorów zdjęć uruchamianych bezpośrednio ze stron WWW, pisanych w języku Flash bądź też tworzonych z wykorzystaniem innych narzędzi programistycznych. Pierwszym krokiem na drodze do umieszczenia własnych zdjęć w internecie jest pozyskanie ich z aparatu. Producenci aparatów zwykle dołączają do swoich produktów odpowiednie oprogramowanie, a poza tym wiele spośród edytorów zdjęć, programów do obróbki plików
Warsztat pracy fotografa
|
77
RAW i innych aplikacji omawianego tu typu również może posłużyć do kopiowania zdjęć na dysk komputera. Ponadto do pamięci znacznej liczby aparatów można dostać się bezpośrednio za pomocą komputera — na karcie pamięci zazwyczaj znajduje się katalog z fotografiami, który wystarczy skopiować na twardy dysk. Do tego celu posłużyć może dowolny program do zarządzania plikami. Taka metoda kopiowania fotografii niejednokrotnie okazuje się najszybsza. Skopiowane na dysk komputera zdjęcia można następnie zaimportować do aplikacji zarządzającej obrazami lub edytować bezpośrednio z katalogu, w którym się znalazły. To, którego programu można użyć do bezpośredniej obróbki zdjęć znajdujących się na karcie pamięci, zależy od formatu, w jakim zdjęcia te zostały zapisane. W wielu starszych, niedrogich aparatach fotografie przechowywane są tylko w postaci plików JPEG, natomiast urządzenia dostępne dzisiaj zazwyczaj pozwalają wybrać jedną z kilku opcji zapisu obrazów: JPEG, TIFF, PNG oraz jakiś typ RAW. Na przykład ja posiadam dwa aparaty firmy Nikon i w przypadku obydwu do wyboru mam formaty: RAW, a w zasadzie jego odmianę zwaną NEF (Nikon Electronic Format), oraz JPEG. Jedną z opcji dostępnych w moich aparatach jest tworzenie pliku NEF, a potem na jego bazie pliku JPEG o jakości normalnej lub bardzo dobrej. Ponieważ JPEG to format stratny (kwestię tę omówiłam w rozdziale 2.), nigdy nie korzystam z obrazów zapisanych do plików w tym właśnie formacie. To samo doradzam wszystkim, którzy nie są naprawdę zmuszeni do korzystania z plików JPEG. Natomiast odpowiedź na pytanie, czy warto pracować akurat z plikami w formacie RAW, zależy od tego, na ile korzysta się z możliwości, jakie daje ten format podczas procesu obróbki zdjęć.
Praca na plikach w formacie RAW W przeciwieństwie do plików JPEG, GIF czy TIFF pliki typu RAW nie są niczym innym jak obrazami zapisanymi w stanie zupełnie surowym, bez żadnego przetwarzania. Danych zapisanych do plików RAW nie poddaje się żadnej kompresji ani nie modyfikuje — pliki RAW stanowią zbiór wszelkich informacji, jakie udaje się zebrać za pomocą sensorów aparatu. Zaletą obrazów zapisanych w formacie RAW jest to, że można zmieniać ich parametry, takie jak: ekspozycja, nasycenie kolorów, ostrość, balans bieli. Jedynymi parametrami niezmiennymi w przypadku zdjęć zapisanych do plików RAW są: ISO, przysłona i ogniskowa. Parametry te są, w gruncie rzeczy, parametrami właściwymi dla kliszy. Wadą plików RAW są ich znaczne rozmiary. Niemniej obecnie, gdy dysponujemy wielogigabajtowymi kartami pamięci, czynnik ten nie jest już aż tak kłopotliwy jak kiedyś. Na mojej karcie pamięci o pojemności 4 GB mieści się ponad 200 fotografii, co zazwyczaj w zupełności mi wystarcza. Jeśli chcę zrobić więcej zdjęć, niż mieści się na jednej karcie pamięci, wystarczy, że włożę do aparatu kolejną. Zapisywanie danych w formacie RAW może być dość powolne, ale prawdopodobnie większość z nas nawet tego nie zauważy, szczególnie w erze coraz nowocześniejszych rozwiązań stosowanych w aparatach cyfrowych. Nasze życie byłoby dużo prostsze, gdyby pliki RAW tworzone we wszystkich aparatach były tego samego typu. Niestety, nie są. Jak wspomniałam wcześniej, posiadam dwa aparaty firmy Nikon (D200 oraz D70), w których zaimplementowano obsługę formatu RAW właściwego dla produktów firmy, czyli NEF. Canon stworzył swoje formaty RAW zwane CRW i CRW2 (Canon RAW), w aparatach Sony natomiast powstają pliki typu SRF (Sony Raw Format). W odpowiedzi
78
|
Rozdział 3. Z aparatu do internetu
na ciągle rosnącą liczbę formatów firma Adobe zaproponowała wprowadzenie jednego standardowego typu plików RAW. Typem tym jest DNG lub inaczej Digital Negative. Istnieją firmy, które, oprócz Adobe, korzystają z tego właśnie formatu (m.in. Apple, Leica, Hasselblad). Niestety, Nikon na razie z niego nie korzysta. Firma Adobe udostępniła program DNG Converter, za pomocą którego można pliki w formatach takich jak NEF przekształcać w pliki DNG. (Aplikacja ta jest dostępna w dwóch wersjach: dla komputerów z systemem Windows oraz Mac). Wystarczy uruchomić program i wskazać mu ścieżkę do katalogu, w którym znajdują się pliki do przekształcenia, by rozpoczął się proces konwersji (rysunek 3.1). Nowe pliki DNG są tworzone w tym samym katalogu.
Rysunek 3.1. Program DNG Converter i konwersja typu plików NEF do DNG
Odejdźmy jednak nieco od tematu samych formatów RAW. Niektóre programy pozwalają na wprowadzanie modyfikacji bezpośrednio w plikach RAW, inne natomiast działają w oparciu o dodatkowe aplikacje, które służą do zmieniania parametrów obrazów. Aplikacje konwertujące pliki RAW do plików typu DNG są darmowe. Można je pobrać ze strony Adobe DNG http://www.adobe.com/products/dng/.
Nie można udzielić jednoznacznej odpowiedzi na pytanie, które czynności mające na celu poprawę wyglądu fotografii należy wykonywać za pomocą programów do obróbki plików RAW, a które edytorami zdjęć. Wszystko zależy od osobistych upodobań fotografa i jego sposobu pracy z obrazami. Ja, na przykład, korzystam z aplikacji do obróbki plików RAW wtedy, gdy chcę dokonać zmian parametrów obrazu będących odpowiednikami ustawień aparatu (balans bieli, ekspozycja). Sądzę, że ostrość, balans kolorów, jasność i kontrast lepiej jest regulować w edytorach zdjęć. Nie znaczy to jednak, że ktoś, kto w większym stopniu korzysta z narzędzi do obróbki RAW, postępuje niewłaściwie. Część programów służących do modyfikowania wyglądu obrazów zapisanych do plików RAW umożliwia skorzystanie z opcji automatycznego ustawiania niektórych parametrów Praca na plikach w formacie RAW
|
79
edytowanych zdjęć. Zdarza się, że fotografie, które zostały zmodyfikowane automatycznie przez jakiś program, wyglądają zaskakująco dobrze, niemniej jednak zauważyłam, że ręcznie zmieniając ustawienia parametrów obrazu, zawsze uzyskuję lepsze efekty niż podczas korzystania z opcji zautomatyzowanego poprawiania wyglądu fotografii. Uczciwie, choć niechętnie przyznaję, że przekonanie to może brać się nie tyle z rzeczowej oceny własnych zdolności, ile ze zwykłego zarozumialstwa. Istnieje zaskakująco wiele konwerterów, edytorów oraz innych narzędzi do pracy z plikami RAW. Przyjrzę się bliżej kilku programom do obróbki obrazów zapisanych w formacie RAW, aby ci, którzy nigdy z nich nie korzystali, mieli okazję zapoznać się z istotą ich działania. Wśród przykładów dołączonych do niniejszej książki znalazł się zbiór plików, których można używać w trakcie wypróbowywania programów i metod postępowania opisanych w tym rozdziale. To pliki typu RAW, zapisane w formacie NEF. Posłużyły one do stworzenia większości przykładów, które zobaczyć można na stronach tej książki.
UFRaw Jednym z edytorów plików typu RAW jest program o nazwie UFRaw, udostępniany na licencji open source. Można go używać jako samodzielnego narzędzia lub w połączeniu z innymi narzędziami, na przykład z popularną aplikacją GIMP. UFRaw świetnie nadaje się do zmieniania ustawień parametrów plików RAW (ekspozycja, balans bieli, balans kolorów), ale nie oferuje wszystkich opcji niezbędnych do całkowitej i pełnej obróbki zdjęć (wyostrzanie, przycinanie).
Linuksowe programy do obróbki grafiki na komputerach Mac Użytkownikom komputerów Mac pragnącym zajmować się grafiką sugeruję, by poświęcili nieco czasu na zapoznanie się z Terminal, X11 (X Windows), systemem pakietów Mac, Macports (informacje na temat Macports znajdują się pod adresem http://macports.com), dawniej nazywanymi Darwinports. Terminal daje użytkownikowi dostęp do infrastruktury uniksowej, na bazie której stworzono system Mac OS X. X11 to system obsługi okien, z którego korzysta wiele aplikacji do obróbki grafiki. System pakietów to struktura, dzięki której aplikacje stworzone na bazie programów linuksowych instalują się prawidłowo (na przykład umożliwia sprawdzanie, czy wszystkie składniki niezbędne do tego, by dało się zainstalować daną aplikację, zostały uprzednio zainstalowane w systemie). Istnieje wiele linuksowych programów dających się łatwo zainstalować w systemie Mac za pomocą Macports. Niektóre z nich omawiam w tej książce. Aby dowiedzieć się więcej na temat X11 dla komputerów Mac, warto zapoznać się z informacjami zawartymi na stronie http://developer.apple.com/opensource/tools/runningx11.html. Kilka dobrych instrukcji do oprogramowania Terminal można znaleźć w O’Reilly MacDevCenter (http://www.macdevcenter.com/pub/ct/51). Wiadomości na temat instalacji Macports spisano na stronie http://www.macports.org/install.php, a dokumentacja znajduje się pod adresem http:// ´trac.macosforge.org/projects/macports/wiki/UsingMacPortsQuickStart oraz http://geeklair.net/new_ ´macports_guide/. Wszystkie strony dostępne są w języku angielskim.
80
|
Rozdział 3. Z aparatu do internetu
Omawianą aplikację można pobrać ze strony http://ufraw.sourceforge.net/; dostępne są jej wersje dla systemów Linux, Windows i Mac OS X. Aby zainstalować UFRaw w systemie innym niż Windows, należy wybrać typ instalacji „dla początkujących”. Ponadto przed instalacją programu UFRaw trzeba zainstalować GIMP Toolkit (GTK+2), udostępniany wraz z GIMP (aplikację GIMP opiszę w dalszej części tego rozdziału). Instalator GIMP w wersji dla Windows można znaleźć pod adresem http://gimp-win.sourceforge.net/. Użytkownikom komputerów Mac zalecam, by instalację programu UFRaw przeprowadzali, korzystając z portów Darwin/Mac. W programie UFRaw znajdziemy kilka przydatnych opcji, na przykład zaznaczanie prześwietlonych lub (oraz) niedoświetlonych obszarów zdjęcia (rysunek 3.2). Aplikacja może skorygować parametr ekspozycji w miejscach, które zostały zaznaczone. Efekt naniesienia poprawek przez program UFRaw uwidoczniony został na rysunku 3.3.
Rysunek 3.2. Program UFRaw — opcje zaznaczania prześwietlonych i niedoświetlonych miejsc na zdjęciu
Za pomocą programu UFRaw można również zmieniać ustawienia balansu bieli dla fotografii. Opcje ustawień odpowiadają opcjom, które są implementowane w różnych modelach aparatów fotograficznych. Dla moich aparatów firmy Nikon mam do dyspozycji opcje wypisane poniżej. • Manual WB, • Camera WB, • Auto WB, • Incandescent, • Fluorescent, • Direct Sunlight,
Praca na plikach w formacie RAW
|
81
Rysunek 3.3. Modyfikacje wyglądu zdjęcia przeprowadzane w programie UFRaw • Flash, • Cloudy, • Shade.
Program UFRaw może działać jako wtyczka do aplikacji GIMP lub zupełnie autonomicznie. Ponadto jest kompatybilny z takimi formatami, jak TIFF czy PNG. Jakie są największe zalety UFRaw? Otóż program ten należy do grupy oprogramowania typu open source, nie trzeba płacić za jego użytkowanie i występuje w wersjach dla systemów Linux, Mac OS X oraz Windows. Ponadto można znaleźć w nim opcje, które zadowolą większość użytkowników edytorów plików RAW. Jednakże, mimo znacznego stopnia jego rozbudowania, program UFRaw nie dorównuje supernarzędziu do obróbki plików RAW, jakim niewątpliwie jest Adobe Camera Raw.
Adobe Camera Raw Adobe Camera Raw (ACR) to zawodnik wagi ciężkiej, jeśli chodzi o obróbkę plików typu RAW. Stwierdzenie to dotyczy w szczególności wersji programu od 4.1 wzwyż, dodawanych do aplikacji Adobe’s Photoshop CS3 i Adobe Elements. Prawdę mówiąc, w połączeniu z aplikacjami Adobe Bridge (zarządzanie zbiorami zdjęć) i Photoshop (edycja obrazów) Adobe Camera Raw tworzy kompletny warsztat pracy fotografa. Jedną z ciekawych opcji zaimplementowanych w ACR są klatki — po otwarciu za pomocą programu więcej niż jednego pliku RAW zawartość plików przedstawiana jest w postaci układu 82
|
Rozdział 3. Z aparatu do internetu
klatek. Pracować można nad wyglądem zawartości wybranych klatek bądź wprowadzać zmiany ustawień dla wszystkich obrazów naraz. Po zaaprobowaniu jakiejś zmiany dla wszystkich zdjęć przy każdym z nich pojawia się ikona żółtego trójkąta z wykrzyknikiem w środku (rysunek 3.4). Możliwość modyfikowania ustawień dla wielu fotografii jednocześnie jest szczególnie przydatna w przypadku pracy nad plikami RAW, które wymagają dokonywania takich samych poprawek.
Rysunek 3.4. Adobe Camera RAW: ciąg klatek i dokonywanie zmian dla wszystkich zdjęć jednocześnie
ACR wyróżnia się również pod względem możliwości, jakie daje użytkownikowi w zakresie samej pracy nad wyglądem zdjęć. Można za jego pomocą zmieniać nie tylko ustawienia właściwe dla aparatów fotograficznych, takie jak ekspozycja, balans kolorów, nasycenie barw, ostrość i balans bieli, ale również i inne parametry, na przykład dodawać światło wypełniające i regulować przejrzystość obrazu. Światło wypełniające, będące wzmocnieniem oświetlenia tła lub bocznego, rozjaśnia obiekty, które znalazły się w cieniu. Korzystanie z tej opcji, w połączeniu z regulacją czasu ekspozycji, daje osobie edytującej zdjęcia znaczną kontrolę nad oświetleniem uwiecznionym na fotografii oraz możliwość skutecznego poprawiania błędów obrazu związanych z jego prześwietleniem i niedoświetleniem. Funkcja Przejrzystość jest funkcją nową w ACR. Jeff Schewe w swoim wspaniałym tekście o ACR dla PhotoshopNews napisał, że Przejrzystość to nic innego jak Maska wyostrzająca używana ze specyficznymi ustawieniami, będącymi implementacją w programie metody Local Contrast Enhancement (LCE). Sposoby regulowania ostrości zdjęć opiszę w dalszych częściach tego rozdziału, ale już teraz pragnę powiedzieć, że funkcja Przejrzystość ma szansę stać się jednym z moich ulubionych narzędzi w pracy nad wyglądem fotografii cyfrowych. Praca na plikach w formacie RAW
|
83
Artykuł o funkcji Przejrzystość z PhotoshopNews można znaleźć na stronie http://photoshop ´news.com/2007/05/31/about-camera-raw-41. Opis metody Local Contrast Enhancement znajduje się pod adresem http://luminous-landscape.com/tutorials/contrast-enhancement.shtml. Wymienione tu witryny prowadzone są w języku angielskim.
Program ACR daje użytkownikowi niemałe możliwości. Za jego pomocą można nie tylko zmieniać wartości parametrów RAW ustawianych w aparacie, dodawać światło wypełniające i kontrolować przejrzystość obrazu, lecz również wykonywać mnóstwo innych czynności, od zarządzania kolorami po obsługę metadanych. Należy sobie jednak zadać pytanie, czy na pewno warto korzystać ze wszystkich opcji, które oferuje ACR. A może lepiej niektóre czynności wykonywać za pomocą innych programów? Jeśli korzysta się z programów takich jak ACR, będących częścią większego zestawu narzędzi stworzonego przez jedną firmę, można zakładać, że we wszystkich narzędziach ten sam proces przeprowadzany jest mniej więcej tak samo. W takim przypadku to, w której z aplikacji wykonuje się określoną czynność, wydaje się być mniej istotne. Sytuacja wygląda inaczej, jeżeli korzysta się z aplikacji do obróbki plików RAW i edytora zdjęć różnych firm (bądź twórców) — na przykład z programów UFRaw i GIMP. W takim przypadku należy sprawdzić działanie poszczególnych funkcji w obu aplikacjach i ustalić metodę najbardziej efektywnej pracy z tworzonym przez owe aplikacje zestawem narzędzi. Większość producentów aparatów fotograficznych (jeśli nie wszyscy) udostępnia klientom oprogramowanie służące do kopiowania zdjęć z aparatu do komputera i dokonywania ich wstępnej obróbki. Na przykład, programem stworzonym do tych celów przez firmę Canon jest Digital Photo Professional, Nikon zaś udostępnia aplikację o nazwie Nikon Capture. Oczywiście inni producenci wypuszczają własne oprogramowanie do obsługi aparatów i zdjęć. Zazwyczaj programy tego typu są dobrymi narzędziami. Jedynym powodem, dla którego nie zamierzam ich tu opisywać, jest to, że tworzy się je z myślą o aparatach konkretnego rodzaju, ja natomiast pragnę przekazać Czytelnikowi informacje o aplikacjach współpracujących z większością dostępnych na rynku urządzeń.
Po dokonaniu wstępnej obróbki pliku RAW (niezależnie od tego, na jakim etapie zostanie ona tak naprawdę zakończona) przychodzi czas na poprawienie wyglądu fotografii w edytorze zdjęć.
Edytowanie zdjęć: praca ze światłem Fotografia to dziedzina polegająca na manipulowaniu światłem. Niezależnie od tematu uwiecznianego na zdjęciu i umiejętności fotografa, niezależnie od tego, czy robi się zdjęcia cyfrowe, czy też metodą naświetlania kliszy, fotografowanie zawsze pozostaje pracą ze światłem. Zdjęcie jest za ciemne? Wrażenia tego można się pozbyć, rozjaśniając fotografię, zwiększając kontrast, a nawet manipulując nasyceniem i poziomami kolorów. Wszystkie wymienione czynności nie są niczym innym jak dokonywaniem zmian w oświetleniu, przy którym robiono zdjęcie. Cienie są za głębokie albo niektóre miejsca na fotografii wyglądają na zbyt jasne? Wystarczy inaczej ustawić czas ekspozycji przed zrobieniem zdjęcia albo po jego wykonaniu. Fotografia wydaje się być zbyt „miękka”? Zwiększanie ostrości obrazu polega tak naprawdę na znajdowaniu krawędzi obszarów o różnym poziomie naświetlenia i akcentowaniu ich w większym
84
|
Rozdział 3. Z aparatu do internetu
stopniu. Nawet algorytmy wykorzystywane do zmieniania rozmiarów obrazów tworzone są w oparciu o metody sprawdzające poziomy jasności fragmentów danej grafiki i przekładające otrzymany wzór na inny, dający w efekcie grafikę proporcjonalną do oryginalnej. Każdy edytor zdjęć zawiera pewien zestaw funkcji pozwalających na modyfikowanie ustawień związanych ze światłem uwiecznionym na zdjęciu. Oczywiście w zależności od tego, jakiego programu używamy, korzystać możemy z bardziej lub mniej wyszukanych opcji. Większość programów omawianego tu typu oferuje raczej prymitywne funkcje, niemniej jednak w takiej liczbie, która pozwala — na drodze łączenia efektów wykorzystania poszczególnych opcji — uzyskać modyfikacje obrazu będące całkiem dobrymi odpowiednikami zmian standardowo dokonywanych za pomocą droższych narzędzi. Warto o tym wiedzieć, szczególnie jeśli nie ma się pieniędzy na drogie aplikacje i zarazem pragnie się umieszczać w sieci zdjęcia możliwie jak najlepszej jakości. Każdy użytkownik edytorów zdjęć ma inne oczekiwania względem programów, w których przychodzi mu pracować. Według mnie dobry edytor zdjęć powinien spełniać warunki wypisane poniżej (oczywiście moje zdanie na ten temat nie jest niezmienne i zależy w dużej mierze od dotychczasowego doświadczenia zdobytego w trakcie pracy nad wyglądem obrazów). • W dobrym programie do obróbki zdjęć powinny być dostępne opcje przeskalowania lub
zmieniania wielkości obrazu, a także jego przycinania. • Program taki powinien oferować możliwość pracy z plikami RAW — bezpośrednio lub
z wykorzystaniem odpowiednich wtyczek albo dodatków. • W programie powinna być zaimplementowana obsługa profili kolorów oraz przestrzeni
barw. • Dobry program do obróbki zdjęć powinien umożliwić zapisywanie obrazów do plików
w wielu różnych formatach (m.in. TIFF, PNG, JPEG i GIF). Ponadto istotne jest, aby można było zapisywać efekty swojej pracy przed jej ukończeniem.
• Program powinien udostępniać funkcję cofania dowolnej liczby zmian dokonanych podczas
obróbki zdjęcia, dzięki temu bowiem zawsze można wrócić do etapu pracy, w którym jeszcze wszystko szło jak należy. • Dobry program do obróbki zdjęć powinien umożliwiać usuwanie z nich szumów, skaz
albo kurzu. Szczególnie przydatna jest funkcja pozwalająca pozbyć się kurzu, stworzona w oparciu o jakiś rodzaj klonowania. • Program powinien oferować przynajmniej niektóre z efektów i filtrów przydatnych podczas
pracy ze zdjęciami. Na pewno nie może w nim zabraknąć funkcji rozmywania i wyostrzania obrazu. • Istotne jest, aby za pomocą programu do obróbki zdjęć można było zmieniać ustawienia
związane z kolorami i światłem (korekcja krzywych, korekcja poziomów, łączenie kanałów).
• Dobry program powinien dawać użytkownikowi możliwość zaznaczenia określonego
elementu obrazka. • W programie powinna być zaimplementowana obsługa warstw. • W programie do obróbki zdjęć powinny znaleźć się funkcje umożliwiające dokonywanie
korekcji sprzętowych zniekształceń i zakłamań obrazu, będących na przykład wynikiem właściwości układu optycznego aparatu. • Dobry program powinien mieć zaimplementowaną obsługę wtyczek i dodatków. Edytowanie zdjęć: praca ze światłem
|
85
Prawdą jest, że w drogich aplikacjach można znaleźć wiele bardziej i mniej przydatnych funkcji, ale sądzę, że oprogramowanie do obróbki grafiki należy wybierać ze świadomością własnych potrzeb, a nie sugerując się liczbą zawartych w nim opcji. Warto zastanowić się nad tym, jakie czynności wykonuje się najczęściej podczas korzystania z programów do obróbki obrazów, i — będąc uzbrojonym w niezbędną wiedzę — znaleźć właściwą aplikację. Aplikacja ta powinna zawierać narzędzia i funkcje niezbędne z punktu widzenia użytkownika, albo przynajmniej takie, które umożliwią mu osiągnięcie oczekiwanych efektów mniej wygodną, lecz nadal skuteczną metodą. Jeśli w programie do obróbki zdjęć zaimplementowano podstawowe funkcje, takie jak korekcja krzywych, większość bardziej złożonych funkcji (na przykład Dopasuj kolor) można uzyskać, bez utraty jakości ich działania, korzystając z najprostszych narzędzi. Aby w przypadku korzystania z funkcji podstawowych osiągnąć efekt, który zazwyczaj osiąga się, używając funkcji bardziej specjalistycznych, wystarczy zrozumieć, jak przebiega złożony proces obróbki obrazu i krok po kroku powtórzyć poszczególne składające się na niego operacje. Na szczęście można znaleźć wiele poradników i instrukcji, w których opisane są metody realizacji skomplikowanych funkcji narzędzi znanych z programów takich jak Photoshop w tańszych aplikacjach (Paint Shop Pro, Photoshop Elements, GIMP). W dalszej części tego rozdziału skoncentruję się na omówieniu typowych czynności wykonywanych przede wszystkim podczas edytowania zdjęć, które mają zostać opublikowane w sieci WWW. Następnie wypiszę listę aplikacji do obróbki grafiki i przedstawię wyniki porównania ich funkcjonalności podczas przeprowadzania poszczególnych procesów mających na celu zmianę wyglądu fotografii. Korzystając z różnych opcji, pragnę Czytelnikowi pokazać, że nie bez przyczyny stwierdziłam wcześniej, iż program do obróbki grafiki „powinien” umożliwiać użytkownikowi dokonywanie korekcji krzywych. Bynajmniej nie chodziło mi o to, by — podążając za modą panującą wśród zawodowych fotografów — pochwalić się, że wiem o istnieniu funkcji takiej jak korekcja krzywych. To samo dotyczy wszystkich innych funkcji, które znalazły się na przedstawionej powyżej liście opcji, które według mnie są niezbędnymi elementami dobrej aplikacji omawianego w tym rozdziale typu. Wszystkie przykłady opisane w następnym podrozdziale zostały stworzone w programie Photoshop CS3 PL firmy Adobe. Informacje na temat implementowania wykorzystanych funkcji w innych edytorach znajdują się w dalszej części rozdziału.
Dopasuj kolor w grupie, czyli optymalizacja grupowa Przygotowując zdjęcie do wydruku, zazwyczaj optymalizujemy jego wygląd tak, by prezentowało się po prostu dobrze. Publikowanie fotografii w sieci WWW może wymagać jednak nieco innego podejścia do kwestii ich wyglądu, jako że nie zawsze pojawiają się one samotnie w obrębie pewnej przestrzeni prezentacji. Zdjęcia o podobnej tematyce często łączy się w grupy, co wymaga od nas dbania zarówno o indywidualny wygląd każdego z nich, jak i o prezencję całej galerii. Dobrym przykładem może tu być seria zdjęć zrobionych przeze mnie na wystawie Apollo/ Saturn V Center, w centrum kosmicznym Kennedy Space Center. Uwieczniłam wiele różnych obiektów, ale ogólna tematyka fotografii pozostaje taka sama: rakiety, pojazdy księżycowe i wszelkiego rodzaju historyczny sprzęt przeznaczony do badań kosmicznych. Wszystkie 86
|
Rozdział 3. Z aparatu do internetu
zdjęcia zostały wykonane w tym samym miejscu (hangar pełen przeróżnych urządzeń i maszyn zwisających z sufitu bądź spoczywających bezpośrednio na betonowej podłodze), więc kiedy się na nie patrzy, ma się zbliżone odczucia. Mimo to jednak oświetlenie nie było jednolite. Niektóre przedmioty zostały oświetlone sztucznie, na inne zaś przez bramy hangaru padało jasne, naturalne światło dzienne. W większości przypadków korzystanie ze światła wypełniającego nie było dobrym rozwiązaniem problemu — z powodu znacznych rozmiarów fotografowanych ekspozycji. Na rysunku 3.5 widnieją cztery zdjęcia otwarte w edytorze — każde z nich wygląda inaczej, ponieważ każde wykonałam, korzystając z innych ustawień parametrów oświetlenia i kolorów. Ten zestaw zdjęć świetnie nadaje się do przedstawiania koncepcji „optymalizacji grupowej”, ponieważ żadna z fotografii nie jest zbyt dobra jako praca indywidualna (widać na nich zbyt wiele błędów). Niemniej jednak z kilku raczej kiepskiej jakości zdjęć można stworzyć, po poprawieniu ich wyglądu, naprawdę mocny materiał ilustracyjny wart załączenia na przykład do jakiegoś artykułu.
Rysunek 3.5. Połączone w grupę zdjęcia z Kennedy Space Center przed zmianą ustawień jasności i kolorów
Zdjęcie przedstawiające pojazd księżycowy (w lewym górnym rogu) jest zbyt żółte, co wynika z faktu, że zrobiłam je przy sztucznym, żarówkowym świetle. Wystarczy spojrzeć na histogram (Okno/Histogram), aby dojść do wniosku, że jest to fotografia low key. Przeciwieństwem low key są zdjęcia high key, czyli zbyt jasne, prześwietlone. Nie ma niczego złego w robieniu fotografii low key i high key, jeśli tylko uzyskane niedoświetlenie lub prześwietlenie obrazu jest efektem zamierzonym, podkreślającym walory uwiecznianego tematu. Zdjęcia low key zazwyczaj są przyciemnione i nastrojowe. Niestety, konwencja taka nijak nie kojarzy się z pojazdami księżycowymi.
Dopasuj kolor w grupie, czyli optymalizacja grupowa
|
87
Zdjęcie widniejące pod fotografią przedstawiającą pojazd księżycowy także wygląda na niedoświetlone, ale przynajmniej nie ma na nim przebarwień. Ustawienia światła i kolorów widoczne na dwóch pozostałych zdjęciach (zdjęcia rakiet) są dopuszczalne, daleko im jednak do ideału. W przypadku czterech omawianych przeze mnie fotografii najważniejsze jest to, że nie pasują one do siebie nawzajem (różnice oświetlenia i kolorów są zbyt rażące), przez co nie tworzą spójnej, dobrze wyglądającej grupy. Pozostaje zatem jedynie zoptymalizować i zsynchronizować ich poziomy jasności oraz barw, nie dopuszczając jednak do tego, by którakolwiek z nich straciła cokolwiek ze swego indywidualnego czaru. Zanim jednak przejdę do sedna, napiszę parę słów na temat histogramów. Histogramy widać na rysunku 3.5 — znajdują się z prawej strony grupy czterech fotografii. Obrazują one luminację wybranego zdjęcia (w tym wypadku fotografii przedstawiającej pojazd księżycowy). Na histogramie znajdującym się najwyżej przedstawiona jest ogólna luminacja zdjęcia, natomiast poniżej widnieją trzy histogramy utworzone dla kanałów poszczególnych kolorów: czerwonego, zielonego i niebieskiego. W dalszych częściach tego rozdziału będę niejednokrotnie korzystała z histogramów. Można z nich odczytać, ile pikseli o danym poziomie jasności (skala przebiega od 0 — czerń — do 255 — biel) tworzy analizowany obraz. Dzięki nim widać, jakie jest ogólne naświetlenie zdjęcia. W tym rozdziale będę posługiwać się histogramami RGB, czyli takimi, które ukazują poziomy jasności dla barw czerwonej, zielonej i niebieskiej, oraz histogramami powstałymi w wyniku wyliczania średniej z danych niezbędnych do rysowania histogramów RGB. Ponadto będę korzystała z histogramów tworzonych osobno dla różnych kolorów. Wszystkim, którzy chcą się dowiedzieć czegoś więcej na ten temat, polecam lekturę poradników dostępnych w ramach Cambridge in Colour, w szczególności zaś części pierwszej i drugiej „Understanding Histograms” (http://www.cambridgeincolour.com/tutorials/histograms1.htm, http://www.cambridgeincolour. ´com/tutorials/histograms2.htm; wspomniane witryny prowadzone są w języku angielskim).
Dopasowywanie klasycznych kolorów za pomocą funkcji Dopasuj kolor Jest jedna taka funkcja, którą można znaleźć w jednym konkretnym programie i która służy do dopasowywania poziomów luminacji oraz kolorów na dwóch zdjęciach. Wspomnianym programem jest oczywiście Photoshop firmy Adobe, a funkcją opcja Dopasuj kolor (Obraz/Dopasowania/Dopasuj kolor). Korzystając z owej funkcji, można użyć jednego z dwóch otwartych zdjęć jako wzorca kolorów do wprowadzenia zmian w parametrach barw występujących na drugim. Jeśli nie wiemy, jakie procesy zachodzą wewnątrz aplikacji Photoshop w trakcie jej używania, niewiele możemy powiedzieć na temat reguł działania funkcji Dopasuj kolor. Niemniej jednak mamy do dyspozycji histogramy, na które przecież wolno nam patrzeć bez ograniczeń przed skorzystaniem z jakiejś opcji modyfikującej edytowany obraz, jak i po jej wykorzystaniu. Histogramy zdradzają niektóre tajemnice wewnętrznych ustawień programu do obróbki grafiki. Wystarczy przyjrzeć się wykresom kanałów kolorów dla zdjęcia służącego za wzór oraz zmodyfikowanego funkcją Dopasuj kolor, aby stwierdzić, że miejsca na wykresach obrazujące poziomy kolorów czarnego, białego i szarego w przypadku obydwu zdjęć wyglądają dość podobnie — bardziej podobnie niż te same miejsca odszukane na wykresach utworzonych dla fotografii wzorcowej i jeszcze nieprzetworzonej. Użycie funkcji Dopasuj kolor spowodowało pojawienie się stosunkowo niewielkich zmian kształtów krzywych widniejących na wykresach, 88
|
Rozdział 3. Z aparatu do internetu
natomiast doprowadziło do dość wyraźnego przesunięcia całych wykresów względem skali na osi X. Rysunek 3.6 przedstawia histogramy wykreślone dla dwóch wersji tego samego zdjęcia: oryginalnej i takiej, dla której przeprowadzono operację dopasowywania poziomów barw do zakresu kolorów właściwego dla fotografii wzorcowej. Pierwsza kratka w każdej z linii to wykres stworzony dla kanału danego koloru przed modyfikacją poziomów barw. Kratki środkowe zawierają histogramy właściwe dla zdjęcia wzorcowego, natomiast wszystkie kratki, które znajdują się najbardziej po prawej stronie, są histogramami kanałów barw pojawiających się na fotografii będącej wynikiem przeprowadzenia procedury dopasowywania kolorów.
Rysunek 3.6. Histogramy dla kanałów barw fotografii wzorcowej oraz dwóch wersji zdjęcia: oryginalnej i zmodyfikowanej przez zastosowanie funkcji dopasowywania kolorów
Zachowałam się bardzo niegrzecznie, ujawniając wygląd histogramów zdjęć, których Czytelnik nie miał jeszcze okazji ujrzeć na własne oczy. Pokazywanie komuś histogramu można porównać do umieszczania zdjęcia rentgenowskiego w serwisie randkowym. Takie podejście do omawianego tematu z pewnością jest ścisłe i niezwykle pouczające, ale zarazem kompletnie nieprzekonujące. W omawianym tu przykładzie zdjęciem poddawanym obróbce jest fotografia domu, w którym dorastałam (stan Waszyngton). Zdjęcie wzorcowe to reprodukcja dzieła Vincenta van Gogha La maison blanche au nuit. Używanie reprodukcji klasycznych obrazów jako wzorców kolorów podczas korzystania z funkcji Dopasuj kolor w programie Photoshop może być interesujące i zabawne zarazem. Pomysł ten zrodził się w głowie Jamesa Daleya, który posługiwał się klasycznymi, starymi obrazami w celu nadania charakteru bardzo nowoczesnym fotografiom. Rezultat podobnych działań w dużej mierze zależy od tego, na ile tematyka zdjęć i obrazów wzorcowych pasuje do siebie, oraz od tego, czy jasność grafiki modyfikowanej utrzymana jest na poziomie zbliżonym do wzorcowej, niemniej jednak proces dopasowywania kolorów nierzadko pozwala nieciekawej fotografii nadać zupełnie oryginalny wygląd.
Dopasuj kolor w grupie, czyli optymalizacja grupowa
|
89
James Daley opisuje swoją technikę dopasowywania kolorów na stronie http://www. ´unfocusedbrain.com/projects/match_color/ (strona w języku angielskim).
Na rysunku 3.7 widać efekty dopasowywania kolorów przeprowadzonego przeze mnie. Niebo jest nieco za żółte, a całe zdjęcie stało się mało kontrastowe, ale technika, którą się posłużyłam, wydaje się być interesująca. Ponadto z całą pewnością jest ona równie dobra jak wszystkie inne, by od skorzystania właśnie z niej zacząć zabawę w zmienianie wyglądu fotografii.
Rysunek 3.7. Obraz wzorcowy oraz zdjęcie przed przeprowadzeniem na nim operacji dopasowywania kolorów i po tym procesie
Jak funkcja Dopasuj kolor spisała się w przypadku obróbki zdjęć z Kennedy Space Center? Nie najlepiej. Dwie dowolne fotografie są do siebie na tyle podobne, że efekt użycia dla nich wspomnianej funkcji można określić mianem akceptowalnego, lecz różnice występujące między wszystkimi zdjęciami są zbyt duże, by którekolwiek z nich uznać za dobry wzorzec barw dla pozostałych.
90
|
Rozdział 3. Z aparatu do internetu
Odkryłam, że funkcja Dopasuj kolor działa lepiej podczas obróbki zdjęć, w których przypadku wartości parametrów związanych ze światłem są zbliżone. Nie ma znaczenia tematyka fotografii — ważne jest, aby były one utrzymane mniej więcej w tej samej tonacji barwnej. Z kolei zdjęć o podobnej tematyce lub zrobionych w tym samym miejscu, dla których wartości parametrów związanych ze światłem są wyraźnie różne, nie można zadowalająco przekształcać za pomocą opcji Dopasuj kolor. W podobnych przypadkach fotografie warto modyfikować ręcznie, bez korzystania z automatycznych regulacji ustawień. Poza tym dlaczego jakiś tam algorytm ma mieć dobrą zabawę przy przekształcaniu naszych zdjęć? Przygotowywanie wykonanych przez siebie fotografii do publikacji jest najprzyjemniejszą częścią pracy fotografa. Fotografowanie to nie tylko wciskanie przycisku wyzwalacza migawki. W sieci WWW można znaleźć mnóstwo reprodukcji dzieł starych mistrzów pędzla. Zalecam Czytelnikowi sprawdzienie działania funkcji Dopasuj kolor dla rozmaitych zestawień klasycz-nych obrazów z fotografiami..
Ręczne dopasowywanie kolorów — co można uzyskać, korzystając z korekcji poziomów i korekcji krzywych? Dopasowywanie kolorów różnych zdjęć jest czynnością polegającą zarówno na odpowiednim dopasowaniu kanałów kolorów czerwonego, zielonego i niebieskiego, jak i na ogólnej luminacji parowanych fotografii. Nie trzeba dysponować żadnymi specjalistycznymi aplikacjami — wystarczy program, w którym znalazły się opcje umożliwiające dokonywanie korekcji poziomów oraz korekcji krzywych, rysujący także podstawowe histogramy. Korekcja poziomów (w programie Photoshop dostęp do tej funkcji uzyskuje się następująco: Obraz/Dopasowania/Poziomy) i korekcja krzywych (w programie Photoshop: Obraz/Dopasowania/Krzywe) to funkcje służące do regulowania parametrów obrazu związanych z jego jasnością i widniejącymi na nim kolorami. Korekcja poziomów służy przede wszystkim do korygowania ogólnej jasności obrazu, natomiast z korekcji krzywych korzysta się, gdy chce się odpowiednio dostroić ustawienia związane zarówno z kolorami, jak i z jasnością obrazu. Dobre teksty poglądowe na temat korekcji krzywych i korekcji poziomów można znaleźć na stronie Luminous Landscape (http://www.luminous-landscape.com/). O tym, jak przejść od korzystania z korekcji poziomów do efektywnego używania korekcji krzywych, można przeczytać na stronie http://www.earthboundlight.com/phototips/ ´photoshop-curves.html.
Jeśli tylko pozwala na to używany przez nas edytor zdjęć, warto otwierać w nim całe grupy zdjęć, dla których chcemy dokonać dopasowania kolorów. Po otwarciu zestawu fotografii należy wybrać z niego te wymagające wstępnych zabiegów. Spośród czterech zdjęć zrobionych w Kennedy Space Center trzy wymagały obróbki poprzedzającej właściwą procedurę dopasowywania barw — dwa były niedoświetlone, a na tym przedstawiającym pojazd księżycowy wystąpiło największe przekłamanie kolorów. Wstępnej obróbki zdjęcia pojazdu księżycowego można dokonać za pomocą programu Photoshop. Aby to zrobić, należy stworzyć nową warstwę ustawień poziomów (Warstwa/Nowa warstwa dopasowania/Poziomy). Największym problemem w przypadku fotografii pojazdu
Dopasuj kolor w grupie, czyli optymalizacja grupowa
|
91
księżycowego jest dominanta barwna (zdjęcie jest zbyt żółte). W związku z tym należy ustawić punkt bieli tak, jak zostało to pokazane na rysunku 3.8. W tym celu trzeba posłużyć się Kroplomierzem do ustawiania punktu bieli. Za pomocą tego narzędzia można pobrać próbkę koloru z miejsca, które powinno być białe (w opisywanym tu przypadku jest to górna, pokryta płótnem część oparcia siedzenia pojazdu).
Rysunek 3.8. Tak wygląda zdjęcie pojazdu księżycowego po korekcji punktu bieli dokonanej za pomocą funkcji Poziomy Domyślnie punkt bieli ustawiany jest na poziomie wartości 255 dla każdego z kanałów kolorów (czerwonego, zielonego i niebieskiego). Ustawienie to sprawdziło się w przypadku edycji zdjęcia pojazdu księżycowego, można je jednak dowolnie zmienić, jeśli tylko zachodzi taka potrzeba.
Wykonując czynność opisaną powyżej, prawie całkowicie usunęłam ze zdjęcia żółtą dominantę barwną, będącą wynikiem fotografowania przedmiotu oświetlonego światłem sztucznym, żarówkowym. W prawej części okna programu znajduje się okno Histogram (Okno/Histogram), dla którego ustawiłam opcję Widok wszystkich kanałów. Źródło histogramu określiłam jako Dopasowanie kompozytu. Na otrzymanych w ten sposób histogramach widać jednocześnie ustawienia dla zdjęcia przed ustawianiem punktu bieli, jak i po przeprowadzeniu tej operacji. Jak widać na powyższym rysunku, kanały kolorów zielonego i czerwonego nie zostały zmodyfikowane w dużym stopniu. Największe modyfikacje ustawień wystąpiły w kanale koloru niebieskiego, co zaobserwować można na wykresie umieszczonym w okienku opisanym jako Niebieski. Mimo podjętych do tej pory działań zdjęcie wciąż nie wygląda dobrze — jest za ciemne, zbyt kontrastowe, widać na nim wiele cieni. W oknie Poziomy (opcja Kanał ustawiona na RGB), korzystając z funkcji Poziomy wejściowe, należy zmienić ustawienia dla punktu szarości, tak aby 92
|
Rozdział 3. Z aparatu do internetu
została mu przypisana wartość równa mniej więcej 1,21. W tym celu trzeba przesunąć w lewo środkowy suwak — jeden z trzech znajdujących się pod histogramem. Opisane tu manipulacje pozwalają rozjaśnić fotografię bez nadmiernego zacierania kontrastu na niej. Na tym etapie zdjęcie przedstawiające pojazd księżycowy wygląda na tyle dobrze, że można zająć się obróbką pozostałych fotografii. Zdjęcie, na którym widać rakietę Apollo, jest niedoświetlone. Ponadto widnieją na nim zbyt jasne plamy — pojawiły się one w miejscach, w których światło padające na rakietę przez drzwi hangaru wytworzyło zbyt jasne refleksy na metalicznej powierzchni. Ze zdjęciem tym warto postąpić tak samo, jak z fotografią przedstawiającą pojazd księżycowy. Należy stworzyć warstwę ustawień poziomów, a następnie przesunąć suwak regulujący ustawienie wartości poziomu wejściowego dla punktu szarości (środkowy) w lewo, by zwiększyć ogólną jasność obrazu (rysunek 3.9). Rozjaśniona fotografia wygląda, jakby była sprana, ale stanowi świetną bazę do dalszych prac, w wyniku których mamy nadzieję otrzymać dobrze prezentujące się zdjęcie.
Rysunek 3.9. Rozjaśnione zdjęcie rakiety Apollo po korekcji wartości poziomu wyjściowego dla punktu szarości
Po dokonaniu wstępnej obróbki zdjęć warto zająć się dopasowaniem kolorów na poszczególnych fotografiach. W tym wypadku przydatna okaże się funkcja korekcji krzywych, umożliwiająca wprowadzanie bardziej zaawansowanych zmian w ustawieniach kolorów niż korekcja poziomów i pozwalająca modyfikować jedynie wartości poziomów wejściowych dla punktów bieli, czerni i szarości. Korzystając z korekcji krzywych, możemy nie tylko skutecznie usuwać dominanty barwne (przekłamania), lecz także ujednolicać tonacje barwne kilku zdjęć (dopasowywać kolory tych zdjęć do kolorów pozostałych zdjęć wchodzących w skład danego
Dopasuj kolor w grupie, czyli optymalizacja grupowa
|
93
zestawu). Korekcję krzywych można przeprowadzić bezpośrednio na obrazie (Obraz/Dopasowania/ ´Krzywe) albo za pomocą warstwy dopasowania (Warstwa/Nowa warstwa dopasowania/Krzywe). Gdy próbuję dopasować kolory obrazów wchodzących w skład jednej grupy, szukam na nich podobnych elementów, a potem sprawdzam, w których miejscach elementy te mają mniej więcej taki sam poziom jasności. Następnie modyfikuję ustawienia tylko dla kanałów kolorów czerwonego i niebieskiego, kanału barwy zielonej używam jako kanału „kontrolnego”. Na przykład, przybrudzony złoty kolor osłon kół pojazdu księżycowego powinien być zbliżony do przybrudzonej złotej barwy, którą można dostrzec na jednym ze zdjęć rakiety. Za pomocą Kroplomierza (Okno/Narzędzia) pobieram próbkę koloru złotego z odpowiedniego miejsca na rakiecie i porównuję ją, obserwując tylko i wyłącznie kanał koloru zielonego, z kanałem koloru zielonego próbki barwy złotej z osłony koła pojazdu. Czynność tę powtarzam aż do uzyskania dopasowania obydwu próbek na poziomie kanału koloru zielonego. Pod pojęciem „dopasowania” rozumiem tu zgodność wartości odczytanych dla kanału koloru zielonego. Po odszukaniu na zdjęciu odpowiedniego punktu, w którym barwa zielona zgadza się z barwą zieloną występującą w próbce pobranej w jakimś punkcie drugiego zdjęcia, zapisuję wartości dla wszystkich trzech kanałów kolorów (czerwony, niebieski i zielony) dla obydwu punktów — odszukanego i wzorcowego. Tę samą procedurę powtarzam, szukając punktów zgodności dla innych fragmentów różnych fotografii, takich jak kafle na ścianach, elementy szkieletu budynku, metalowe przedmioty pokryte jasną, żółtą emalią i zielone części niektórych ścian. Punkty te stanowią świetny dodatek do próbek koloru szarego, które bez wątpienia najlepiej nadają się do szukania zgodności kolorów na osobnych zdjęciach. Na rysunku 3.10 zaznaczone zostały niektóre spośród wspomnianych wyżej punktów „dopasowania barw”.
Rysunek 3.10. Punkty zgodności kolorów odnalezione na dwóch różnych zdjęciach
Kiedy zajmowałam się poprawianiem wyglądu fotografii, odkryłam ciekawą prawidłowość. Gdy patrzymy na jakieś zdjęcie, może się nam ono wydawać na przykład zbyt czerwone, 94
|
Rozdział 3. Z aparatu do internetu
wystarczy jednak sprawdzić, jakie kolory na nim występują, by przekonać się, że tak naprawdę mamy do czynienia z przesyceniem w zakresie barw zielonej i niebieskiej. Płynie z tego wniosek, że nie sposób na oko prawidłowo ocenić kolorystyki fotografii, dlatego też zawsze korzystam z Kroplomierza, którym sprawdzam, jakie barwy występują na danym obrazie. Ustawień kolorów staram się nie zmieniać w oparciu o obserwację i wrażenia wzrokowe. Poniżej wypisane są przykładowe pomiary wartości ustawień kanałów kolorów dla obrazu wzorcowego i modyfikowanego. rgb(0,76,116) -> rgb(0,76,104) rgb(163,150,93) -> rgb(166,153,92)
Po zebraniu zadowalającej liczby punktów „kontrolnych” wybieram te z punktów, którymi posłużę się podczas przeprowadzania procesu dopasowywania kolorów fotografii tworzących jedną grupę. Następnie, korzystając z funkcji korekcji krzywych, biorę się za właściwe modyfikowanie ustawień barw dla poszczególnych zdjęć. Krzywa kanału koloru zielonego pozostaje niezmieniona (kanał koloru zielonego to kanał kontrolny dla poziomu jasności obrazu); zmiany wprowadzam tylko dla barw czerwonej i niebieskiej. Postępując zgodnie z powyższym założeniem, modyfikuję ustawienia kanału koloru niebieskiego edytowanego obrazu, tak aby odpowiadały ustawieniom tego samego kanału obrazu wzorcowego (bądź źródłowego). Na przykład, jeśli wartość poziomu koloru niebieskiego na obrazie wzorcowym wynosi 114, a na obrazie modyfikowanym 104, wiem, że wynikowa krzywa powinna być ukształtowana tak, by ukazywała odpowiednią zmianę wartości poziomu, czyli zmianę wartości ze 104 na 114. Przykład ten został zobrazowany na rysunku 3.11.
Rysunek 3.11. Dopasowywanie poziomu koloru niebieskiego obrazu modyfikowanego do ustawień właściwych dla obrazu wzorcowego
Zazwyczaj dopasowania barw widniejących na dwóch różnych zdjęciach dokonuję w oparciu o wartości poziomów kolorów spisane dla trzech par punktów zgodności. Pierwszą parę stanowią punkty dość ciemne, drugą utrzymane w tonacji średnio jasnej, a trzecią jasne (rysunek 3.12). Dopasuj kolor w grupie, czyli optymalizacja grupowa
|
95
Rysunek 3.12. Kanał koloru niebieskiego zdjęcia modyfikowanego — korekcja krzywej wykonana dla trzech par punktów porównawczych (punktów, dla których ustawienia kanału koloru niebieskiego były takie same dla obydwu fotografii — edytowanej i wzorcowej)
Na rysunku 3.13 widać okno, w którym dokonuje się korekcji krzywych. Modyfikacje wartości poziomów kolorów niebieskiego i czerwonego przeprowadzane są na podstawie danych pochodzących z trzech par punktów porównawczych. Zwracam uwagę Czytelnika na to, że krzywe poziomów kolorów niebieskiego oraz czerwonego zostały zmodyfikowane w nieznacznym stopniu. Wynika to z faktu, że zmienia się ustawienia kolorów na zdjęciach przedstawiających obiekty tego samego bądź podobnego rodzaju, lecz o różnych parametrach oświetlenia i dominanty barwnej. Nie należy nadmiernie ingerować w kolorystykę fotografii, by nie uzyskać efektu odwrotnego do oczekiwanego, czyli po prostu rozczarowującego. Jeśli chodzi o mnie, zazwyczaj modyfikacje ustawień wprowadzam najpierw dla koloru czerwonego, a dopiero później dla niebieskiego. Poniżej podaję w punktach kroki, które wykonuje się podczas przeprowadzania procedury dopasowywania kolorów widniejących na różnych zdjęciach.
1. Jeśli to możliwe, należy otworzyć w edytorze zdjęć wszystkie fotografie wchodzące w skład tej samej grupy.
2. Przed przystąpieniem do właściwego dopasowywania kolorów zdjęć powinno się wykonać wszystkie czynności przygotowawcze, na przykład rozjaśnić zdjęcia, które są za ciemne.
3. Trzeba wybrać jedno zdjęcie, które będzie wzorcem kolorów podczas modyfikowania ustawień związanych z barwami na pozostałych fotografiach.
4. Na zdjęciu wzorcowym należy wyznaczyć odpowiednią liczbę punktów, które zostaną porównane z odpowiadającymi im punktami znalezionymi na innych zdjęciach.
96
|
Rozdział 3. Z aparatu do internetu
Rysunek 3.13. Odpowiednio zmodyfikowane krzywe poziomów kolorów czerwonego i niebieskiego
5. Każdy punkt „kontrolny” ze zdjęcia wzorcowego powinien zostać porównany z odpowiednimi punktami na innych zdjęciach. Odczytane wartości poziomów dla kanałów kolorów RGB należy zanotować tak w przypadku fotografii, które trzeba zmodyfikować, jak i dla zdjęcia wzorcowego.
6. Po otwarciu w edytorze obrazów zdjęcia, którego kolorystykę pragnie się zmienić, należy utworzyć nową warstwę dopasowania krzywych.
7. Nie zmieniając ustawień kanału koloru zielonego, należy odpowiednio zmodyfikować
wartości poziomów barw czerwonej i niebieskiej, tak aby odpowiadały one wartościom pobranym z punktów „kontrolnych”, czyli znajdujących się na fotografii wzorcowej.
8. Powyższą procedurę warto powtarzać aż do chwili uzyskania jak najlepszej zgodności kolo-
rystyki obrazu modyfikowanego z kolorystyką wzorca. Niekiedy, gdy efekt dopasowania kolorów okaże się niezadowalający, może zajść potrzeba dokonania ręcznych modyfikacji ustawień związanych z kolorami bądź też skorzystania z innego punktu „kontrolnego” niż pierwotnie obrany.
Do przykładów dołączone zostały dwie strony internetowe, na których znalazły się cztery omawiane przeze mnie zdjęcia przed obróbką i po wprowadzeniu na nich poprawek ustawień kolorów. Stronę przedstawiającą oryginalne, niemodyfikowane fotografie można zobaczyć na rysunku 3.14, natomiast rysunek 3.15 przedstawia witrynę z fotografiami poprawionymi za pomocą programu Photoshop.
Dopasuj kolor w grupie, czyli optymalizacja grupowa
|
97
Rysunek 3.14. Strona WWW z grafikami stworzonymi na bazie oryginalnych, „surowych” plików RAW
Rysunek 3.15. Na tej stronie WWW widać zdjęcia po korekcji krzywych (poprawiono ich kolorystykę) 98
|
Rozdział 3. Z aparatu do internetu
Opisana przeze mnie metoda wyszukiwania punktów zgodności za pomocą Kroplomierza i korygowania krzywych poziomów barw może być wykorzystywana do usuwania dominant barwnych w obrębie jednej i tej samej fotografii, na przykład podczas tworzenia zdjęcia panoramicznego składającego się z większej liczby mniejszych zdjęć albo w trakcie wstawiania elementów jednej fotografii do drugiej. Funkcja modyfikowania ustawień techniką korekcji krzywych bywa przydatna również wtedy, gdy chce się zaznaczyć pewne określone fragmenty edytowanego zdjęcia. Oczywiście stwierdzenie to jest prawdziwe w przypadku programów, w których zaimplementowano odpowiednią opcję (w większości aplikacji opisywana funkcja jest dostępna). Metoda obróbki zdjęć, o której do tej pory pisałam, opiera się na idei przesuwania dominanty barwnej techniką rozjaśniania i przyciemniania kolorów, a nie zastępowania jednego koloru drugim. Istnieją oczywiście inne metody poprawiania wyglądu fotografii. Można do nich zaliczyć koloryzowanie, rozmywanie, mieszanie warstw. Techniki bazujące na metodzie mieszania warstw, choć ciekawe, nie są zbyt skomplikowane, niemniej jednak stanowią inne podejście do tematu modyfikowania obrazów, niż omówione przeze mnie dopasowywanie kolorów, dlatego też opiszę je w kolejnych podrozdziałach.
Dopasowywanie kolorów jako nakładanie warstw Kilka miesięcy temu wymyśliłam alternatywną metodę dopasowywania barw różnych zdjęć. Powinno się ją bez problemów zastosować przy wykorzystaniu dowolnego edytora obrazów z zaimplementowaną obsługą warstw. Eksperymentowanie z metodą, o której tu mowa, może być całkiem przyjemną zabawą, a ponadto nierzadko prowadzi do uzyskania zaskakująco dobrych efektów. Aby wypróbować wspomnianą technikę, należy pobrać Kroplomierzem próbkę jakiegoś koloru ze zdjęcia wzorcowego. Dla fotografii, która wymaga poprawek, trzeba stworzyć nową, przezroczystą warstwę. Dla nowej warstwy w trybie mieszania należy ustawić opcję Nakładka, a następnie użyć Wiadra z farbą do wypełnienia warstwy pobranym wcześniej kolorem. Poniżej wypisuję trzy kroki, które trzeba wykonać przy zastosowaniu opisywanej tu metody.
1. Trzeba pobrać próbkę koloru Kroplomierzem. 2. Dla zdjęcia, którego wygląd pragnie się zmodyfikować, należy utworzyć przezroczystą warstwę, w trybie mieszania wybierając opcję Nakładka.
3. Nową warstwę należy wypełnić pobranym wcześniej kolorem. W tym celu trzeba posłużyć się narzędziem Wiadro z farbą.
Opisywaną tu metodę zastosowałam do naniesienia zmian na dwóch spośród czterech zdjęć z Kennedy Space Center. Tym razem posłużyłam się aplikacją GIMP. Najpierw pobrałam próbkę szarej barwy z fotografii o mniejszych różnicach w jasności miejsc najjaśniejszych i najciemniejszych, a następnie na drugie ze zdjęć nałożyłam warstwę wypełnioną uzyskanym kolorem (zdjęciem modyfikowanym była w tym wypadku fotografia przedstawiająca pojazd księżycowy). Po nałożeniu warstwy szarej na fotografię pojazdu nałożyłam jeszcze kilka warstw wypełnionych kolorami, których próbki pobrałam z innych punktów zdjęcia wzorcowego (rysunek 3.16). Po lewej stronie okien z fotografiami znajduje się panel z warstwami utworzonymi dla zdjęcia przedstawiającego pojazd księżycowy. Widać w nim dwie nowe warstwy wypełnione kolorami nakrywającymi.
Dopasuj kolor w grupie, czyli optymalizacja grupowa
|
99
Rysunek 3.16. Metoda dopasowywania kolorów opierająca się na wykorzystaniu Nakładki, zastosowana dla dwóch zdjęć z Kennedy Space Center
Opisywaną technikę można również stosować podczas dopasowywania do kolorystyki zdjęć klasycznych zestawów barw. Uzyskiwanie na fotografiach kolorów klasycznych omówione zostało przeze mnie nieco wcześniej w tym rozdziale i zobrazowane na rysunku 3.7. W celu odświeżenia pamięci Czytelnika po wielokrotnym pobieraniu próbek kolorów z różnych fragmentów rozmaitych fotografii wspomnę tylko, że podczas przeprowadzania procedury dopasowywania barw widniejących na jednym zdjęciu do kolorystyki drugiego zdjęcia owo drugie zdjęcie można zastąpić reprodukcją jakiegoś obrazu. Posługując się tą nową metodą dopasowywania klasycznych kolorów, mogę zmyślonym ruinom nadać kolor patyny właściwy dla budowli antycznych (rysunek 3.17). Na obydwu rysunkach (3.16 i 3.17) widać, że w panelu warstw znajdują się okienka kilku warstw wypełnionych rozmaitymi kolorami. Wynika to z faktu, że na efekt ostatecznej modyfikacji kolorystyki zdjęcia wpływ mają zmiany dokonane kolejnymi nakładkami barwnymi. Po wielu próbach przeprowadzonych podczas pracy z różnymi obrazami doszłam do wniosku, że nakładanie najpierw kolorów jaśniejszych i bardziej neutralnych, a dopiero potem barw ciemniejszych i zdecydowanych daje lepszy rezultat, niż działanie odwrotne. Oczywiście najłatwiej byłoby wyrzucić kolory z fotografii, nad których wyglądem przychodzi nam pracować w pocie czoła. Rozwiązanie takie może nawet miałoby sens, gdyby nie fakt, że wygląd zdjęć czarno-białych zależy w największym stopniu od uwiecznionych na nich barw. 100
|
Rozdział 3. Z aparatu do internetu
Rysunek 3.17. Metoda dopasowywania kolorów opierająca się na korzystaniu z funkcji nakładania warstw sprawdza się również w przypadku zestawu grafik, dla których wzorcem barw jest reprodukcja jakiegoś obrazu
Czerń i biel zamiast kolorów Gdy czasem przeglądam zdjęcia zamieszczane przez ludzi na różnych stronach internetowych, dochodzę do wniosku, że pierwszym narzędziem, którym poprawiają oni wygląd swoich prac, jest suwak zmieniający nasycenie barw. Pierwszym i ostatnim, niestety. Widziałam wiele fotografii przedstawiających nieba tak niebieskie, jakby wysypano je szafirowym pyłem, rubinowoczerwone usta, rażąco żółte słoneczniki i soczystą zieleń, od której widoku bolą zęby. Przed obejrzeniem tych wszystkich zdjęć nie miałam pojęcia, że natura stworzyła tak cudowne barwy. Mam nadzieję, że kiedyś trafię na planetę, na której wykonano wszystkie te wspaniałe, kolorowe fotografie. Uwielbiam kolory, jak większość ludzi, niemniej jednak zdaję sobie sprawę z tego, że istnieje coś takiego jak „nadmiar kolorów”. Fotografia cyfrowa daje nam możliwości, dzięki którym wciąż przesuwamy granicę określającą dopuszczalną „ilość” kolorów. Oprócz nieszczęść, jakie spadają na nas z powodu istnienia suwaków pozwalających regulować nasycenie barw na zdjęciach, w sieci WWW czyhają na nas i inne niebezpieczeństwa. Twórcy stron starają się przyciągnąć nasz wzrok krzykliwymi reklamami, przesłodzonymi ikonami paneli bocznych oraz wszelkiego rodzaju grafiką, która według nich musi znaleźć się w obrębie witryny internetowej. Czerń i biel zamiast kolorów
|
101
Tworzenie fotografii czarno-białych z kolorowych zdjęć wcale nie musi być domeną wielkich artystów ani wszystkich tych, którzy pragną stworzyć swój własny efekt noir. Czerń i biel podkreślają kształty fotografowanych obiektów, co jest niezwykle użyteczne, jeśli pragnie się za pomocą obrazów opowiedzieć jakąś historię związaną z określonym obiektem będącym tematem zdjęć. Ponadto fotografie czarno-białe wyglądają dużo lepiej niż kolorowe, na których dobór barw jest kiepski bądź po prostu nieciekawy. Zamienianie kolorowych zdjęć w fotografie czarno-białe jest bardzo proste, wystarczy bowiem przesunąć suwak służący do regulacji nasycenia kolorów tak, by wszelkie kolory zniknęły zastąpione czernią i bielą. W ten sposób z każdego kolorowego zdjęcia można zrobić czarnobiałe, ale na pewno nie będzie to najlepsze czarno-białe zdjęcie, jakie można w ogóle uzyskać. Aby otrzymać naprawdę zadowalającej jakości fotografię czarno-białą, trzeba popracować nad jej kolorami. Podczas robienia zdjęć na czarno-białej kliszy korzysta się z kolorowych filtrów, dzięki którym ma się kontrolę nad takimi parametrami uzyskanego obrazu, jak kontrast i szczegółowość. Filtry takie wpuszczają do wnętrza aparatu światło określonej barwy. Na przykład, zielony filtr wpuszcza światło zielone, czerwony filtr wpuszcza światło barwy czerwonej itd. Filtry tego typu, jeśli umie się z nich korzystać, pozwalają robić bardzo interesujące, efektowne zdjęcia czarno-białe. Jednym z przykładów wykorzystania filtrów może być uzyskiwanie większych kontrastów na fotografiach. Aby podkreślić, uwypuklić jakiś obiekt na zdjęciu, podczas fotografowania go należy skorzystać z filtru o barwie dopełniającej względem jego koloru. Oto kolory, które się dopełniają: • zielony i magenta, • żółty i niebieski, • czerwony i cyjan.
Podobne efekty z łatwością można uzyskać w programie Photoshop CS3 PL, korzystając z nowej funkcji Czarno-biały. Panel kontrolny tej opcji zawiera suwaki pozwalające regulować ustawienia kolorów, a także kilka gotowych filtrów. Stworzyłam swój własny filtr, w znacznym stopniu modyfikując ustawienia dla kanałów kolorów czerwonego i zielonego. Panel kontrolny funkcji Czarno-biały z rozwijalnym menu zawierającym różne wersje filtrów został przedstawiony na rysunku 3.18. Na rysunku 3.19 widać natomiast oryginalne zdjęcie, na którym ustawienia kolorów nie były modyfikowane, oraz kilka przykładów zastosowania do jego obróbki filtrów dostępnych w panelu Czarno-biały, w tym także filtru stworzonego przeze mnie. Czyż nowe wersje fotografii nie są przepiękne? Istnienie filtrów kolorów pozwala spojrzeć na zagadnienie fotografii czarno-białej z zupełnie nowej perspektywy. Jeśli nie ma się dostępu do tak zaawansowanych narzędzi, jak te opisane powyżej, skutecznej, w pełni kontrolowanej konwersji kolorów w czerń i biel można dokonywać również na inne sposoby. Jednym z nich, prawdopodobnie najpopularniejszym, jest korzystanie z funkcji Mieszanie kanałów.
102
|
Rozdział 3. Z aparatu do internetu
Rysunek 3.18. Panel kontrolny funkcji Czarno-biały dostępnej w programie Photoshop
Rysunek 3.19. Ta sama fotografia kilkakrotnie modyfikowana za pomocą gotowych filtrów dostępnych w panelu Czarno-biały oraz filtrem własnym stworzonym przez użytkownika programu Photoshop
Mieszanie kanałów to nieskomplikowany panel kontrolny, składający się z trzech suwaków. Każdy z nich służy do dokonywania zmian ustawień dla jednego z trzech kanałów: czerwonego, zielonego i niebieskiego. Podstawą działania funkcji Mieszanie kanałów jest zasada, zgodnie z którą wejściowa luminacja obrazu nie ulega zmianie, jeśli tylko suma wartości poziomów dla wszystkich trzech kanałów jest utrzymana na poziomie 100%. W przypadku gdy suma wartości Czerń i biel zamiast kolorów
|
103
ustawień poziomów trzech kolorów przekracza 100%, zwiększa się ogólna jasność obrazu, natomiast dla sumy mniejszej niż graniczna następuje jego przyciemnienie. Użytkownicy niektórych programów mają do dyspozycji gotowe filtry przygotowane przez autorów oprogramowania, na przykład filtr czerwony lub żółty. Ponadto filtry można tworzyć własnoręcznie. Przy opracowywaniu ustawienia dla nowych filtrów trudno kierować się konkretnymi regułami, w związku z czym większość czynności wykonuje się na chybił trafił. Na szczęście jednak nie ma dobrych ani złych metod modyfikowania czarno-białych fotografii — w tym wypadku wszystko pozostaje kwestią gustu. Jednym z rezultatów, które można uzyskać za pomocą opcji Mieszanie kanałów, jest efekt zdjęcia w podczerwieni. Używam tu sformułowania „efekt zdjęcia w podczerwieni”, ponieważ na normalnym zdjęciu „uwieczniane jest” tylko światło widma widzialnego. Prawdziwe fotografie wykonywane w podczerwieni otrzymuje się w wyniku korzystania ze specjalnego sprzętu, umożliwiającego detekcję i przechwytywanie światła z podczerwonego zakresu widma fal elektromagnetycznych. Stąd też, mówiąc o efekcie zdjęcia w podczerwieni, mam na myśli rezultat użycia filtrów, za pomocą których fotografie wykonane zwykłym aparatem fotograficznym można zmodyfikować tak, by wyglądały podobnie do prawdziwych zdjęć obiektów widzianych w podczerwieni. Jedną z metod przerabiania zdjęć, tak aby wyglądały, jakby zostały wykonane w podczerwieni, jest tworzenie warstwy dopasowania typu Mieszanie kanałów, zaznaczanie dla niej opcji Monochromatycznie i ustawianie wartości 200% dla kanału koloru zielonego oraz takich wartości dla kanałów kolorów czerwonego i niebieskiego, których suma wynosi –100%. Po dokonaniu opisanych tu zabiegów z jasnych fragmentów fotografii może zniknąć zbyt wiele detali. Problem ten da się jednak rozwiązać: wystarczy utworzyć warstwę dopasowania typu Krzywe i odpowiednio zmodyfikować ustawienia dla poziomów barw jasnych. Po utworzeniu warstwy typu Krzywe nie powinno się dokonywać żadnych modyfikacji tej warstwy. Należy po prostu stworzyć warstwę z ustawieniami domyślnymi i przeciągnąć ją między Tło a warstwę typu Mieszanie kanałów. Następnie można otworzyć panel kontrolny warstwy typu Krzywe, wybrać kanał koloru zielonego i ustawić jasność. Z moich doświadczeń wynika, że opisana tu metoda dla niektórych zdjęć działa lepiej, a dla innych gorzej. Kolejna metoda również opiera się na korzystaniu z funkcji Mieszanie kanałów, przy czym w jej przypadku zdjęcia nie konwertuje się do obrazu monochromatycznego. Kanał wyjściowy należy ustawić na Czerwony, a potem ustawić wartość 0 dla Kanału źródłowego koloru czerwonego oraz wartość 100% dla Kanału źródłowego barwy niebieskiej. Następnie należy wybrać Niebieski w menu Kanał wyjściowy, po to, by wprowadzić dla niego odwrotne ustawienia Kanałów źródłowych (barwie niebieskiej trzeba przypisać wartość 0, zaś czerwonej 100%). Po wprowadzeniu odpowiednich parametrów „na odwrót” w kanałach kolorów należy utworzyć nową warstwę dopasowania, tym razem jednak powinna to być warstwa typu Barwa/Nasycenie. Parametrowi Nasycenie trzeba nadać wartość –100. Trzecią metodą jest skorzystanie z odpowiedniej wtyczki. Ja wypróbowałam dwie: IR Film firmy ChromaSoftware (http://www.chromasoftware.com/ir_film.htm) i Pseudo-IR stworzony przez firmę Cybia (http://www.cybia.co.uk/pseudoir.htm). Zawsze miło jest pobawić się różnymi dodatkami. Rysunek 3.20 przedstawia kilka wersji znanego już Czytelnikowi zdjęcia motyla zwanego monarchem bądź monarchą. Fotografia ta posłużyła mi do wypróbowania kilku metod uzyskiwania efektu zdjęcia w podczerwieni. Na rysunku — jeśli spojrzeć od lewej do prawej
104
|
Rozdział 3. Z aparatu do internetu
Rysunek 3.20. Ten sam temat w wielu różnych przedstawieniach: efekt zdjęcia w podczerwieni
w rzędzie górnym, a potem dolnym — widać: oryginalne zdjęcie, rezultat skorzystania z firmowego ustawienia Podczerwień, dostępnego w panelu Czarno-biały, fotografię, na którą nałożono filtr zielony (z ustawieniami: kolor czerwony –10, kolor niebieski –90), efekt przeprowadzenia procedury wpisywania parametrów „na odwrót” w kanałach kolorów oraz dwie próbki możliwości wtyczek programowych IR Film i Pseudo-IR. Konwertowanie kolorowych fotografii do obrazów czarno-białych nie jest bynajmniej jedynym sposobem podnoszenia ich walorów ilustracyjnych. Najlepsze ciągle przed nami.
Tworzenie atrakcyjnego materiału ilustracyjnego Ktoś, kto decyduje się na publikację zdjęcia w sieci WWW dlatego, że jest ono po prostu ładne, nie musi robić z nim niczego więcej poza skadrowaniem i zoptymalizowaniem. Umieścić w internecie dobrze prezentującą się fotografię to przecież czysta przyjemność. Jeśli jednak chce się za pomocą zdjęć coś przekazać — opowiedzieć ciekawą historię, podnieść wartość jakiegoś tekstu — nie wystarczy ich po prostu zrobić. Fotografie można przekształcać za pomocą nieskończonej liczby środków, co daje nam sposobność zamykania w obrazach rozmaitych nastrojów, pokazywania uwiecznionych na nich obiektów zgodnie z naszymi wyobrażeniami, przekazywania za ich pośrednictwem różnych przesłań. Zajmując się fotografowaniem, stajemy się rzeźbiarzami, zdjęcia zaś to glina, którą kształtujemy zgodnie z naszą wolą.
Jeśli chcesz mnie wyostrzyć, musisz mnie rozmazać Wiele lat temu, gdy zaczynałam swoją naukę w college’u, pracowałam w zakładzie fotograficznym jako retuszerka. W tamtych czasach retuszowało się papierowe zdjęcia za pomocą różnych farb, kredy i kolorowych ołówków.
Tworzenie atrakcyjnego materiału ilustracyjnego
|
105
Na jednej z pierwszych lekcji retuszu zdjęć dowiedziałam się, że niezbyt ostry portret można powiększać tak długo, jak długo ostre są refleksy światła odbijające się w oczach uwiecznionej osoby. Refleksy te wyostrzaliśmy pędzelkiem i farbami, co dawało całkiem niezłe efekty. Poznałam też inne, wymagające korzystania z ciemni, techniki przywracania ostrości zdjęciom. Jedna z nich znana była jako Maska wyostrzająca — tak, to ta sama technika, z którą stykamy się, używając rozmaitych edytorów zdjęć. W zamierzchłych czasach, gdy świat jeszcze nie był aż tak cyfrowy jak dzisiaj, przed wykonaniem ostatecznej, papierowej wersji zdjęcia, korzystając z negatywu, tworzyło się przezrocze-pozytyw. Przezrocze to zawsze było nieco rozmyte. Składało się je z negatywem i dopiero takiego zestawu używało się do robienia papierowych odbitek fotografii. Rozmaz na pozytywie tworzył wokół krawędzi obiektów widniejących na negatywie swoiste halo. Ponieważ efekt halo, otaczający dany obiekt widoczny na zdjęciu, brał się z pozytywu, zawsze miał barwę kontrastującą z odpowiadającym mu kolorem na negatywie. Tak uzyskane obwódki wzmacniały przejścia między różnokolorowymi fragmentami fotografii, tym samym wizualnie ją wyostrzając. Tę samą metodę stosuje się podczas obróbki zdjęć cyfrowych, z tą różnicą, że nie musimy męczyć się z przezroczami. To zwyczajna ironia losu i naprawdę zabawny aspekt fotografii, że wyostrzanie obrazów zależy w znacznej mierze od ich rozmazywania. Dokładniej mówiąc, chodzi o Rozmycie gaussowskie.
Rozmycie gaussowskie i „nastrój” Funkcja Rozmycie gaussowskie jest prawdziwym „kombajnem” do obróbki zdjęć, dostępnym w każdym edytorze obrazów. Za pomocą tej funkcji można eliminować szumy na grafikach, ponadto stała się elementem składowym wielu popularnych filtrów, takich jak uwypuklanie obrazów, świecenie czy neon. W następnych rozdziałach posłużę się nią podczas tworzenia realistycznych odbić obiektów. Powyżej opisałam technikę wyostrzania zdjęć przy użyciu Rozmycia gaussowskiego, teraz zaś omówię metodę wprowadzania nastroju na zdjęciach, które wydają się być nijakie. Na rysunku 3.21 Czytelnik zobaczy fotografię przedstawiającą część przelewu spływowego młyna stojącego przy Alley Spring Mill w stanie Missouri. Zdjęcie to ma niemały potencjał, na który składa się wiele czynników, m.in. ładny wzór słojów drewna, z którego zbudowano uwiecznioną śluzę, woda i drzewa widoczne w tle fotografii oraz kompozycja opierająca się na ciemnym, zacienionym narożniku, pozostającym w kontraście z jasną częścią obrazu. Zarazem jednak wydaje się być nieco za płaskie, a także nadmiernie szczegółowe. Niestety, istnieje coś takiego, jak nadmiar interesujących obiektów, na których warto zatrzymać wzrok podczas oglądania fotografii. Dlatego też należy nieco „zmiękczyć” omawiane tu zdjęcie, przy tym zachować bez zmian ten wspaniały wzór słojów drewna. Należy wytworzyć na zdjęciu atmosferę. Aby nadać zdjęciu nieco charakteru i niezbędną miękkość, zduplikujemy istniejącą warstwę (Warstwa/Powiel warstwę), a następnie zmieszamy ją z warstwą oryginalną; z Trybów mieszania (dostępnych w rozwijalnym menu, które otworzyć można wewnątrz okna Warstwy) należy wybrać wariant o nazwie Nakładka. Na rysunku 3.22 przedstawiony został efekt wstępnego mieszania warstw. Jak widać, rezultat mieszania fotografii oryginalnej z jej duplikatem jest dość krzykliwy.
Rysunek 3.22. Zdjęcie śluzy przelewu spływowego młyna z nałożoną za pomocą Trybów mieszania zduplikowaną warstwą tła
Tworzenie atrakcyjnego materiału ilustracyjnego
|
107
Pora popracować nad nastrojowością fotografii. Aby „zmiękczyć” wygląd obrazka, należy nałożyć na niego Rozmycie gaussowskie (Filtr/Rozmycie/Rozmycie gaussowskie). W okienku kontrolnym filtra znajdują się suwak regulacji promienia efektu rozmycia oraz przyciski, za pomocą których ustala się rozmiar podglądu edytowanego obrazu, co można zobaczyć na rysunku 3.23. Co ciekawe, rozmycie widoczne w małym okienku podglądu jest zawsze bardziej intensywne niż to, które obserwuje się na edytowanym obrazie po zaznaczeniu opcji Podgląd. Powód: filtr nakładany jest tylko na górną warstwę obrazu.
Rysunek 3.23. Nakładanie filtra o nazwie Rozmycie gaussowskie na warstwę będącą powieleniem oryginalnego zdjęcia
Kolejnym interesującym efektem jest wyostrzanie się i klarowanie edytowanego zdjęcia wraz ze zwiększaniem promienia rozmycia. Rezultat taki otrzymujemy dlatego, że wpływ warstwy nałożonej na oryginalny obraz maleje w wyniku jej rozmazywania. Ostatecznie naszym oczom ukazuje się coraz więcej detali, które zaczynają prześwitywać spod nakładki. Zarazem pojawiające się szczegóły wyglądają bardziej miękko, a poza tym otoczone są jakby mgiełką nie z tego świata. Ogólną jasność obrazu możemy wyregulować, korzystając z funkcji korekcji poziomów. Otrzymane zdjęcie prezentuje się subtelniej niż pierwowzór, ale zarazem widnieje na nim dostatecznie dużo szczegółów. Najważniejsze zaś jest to, że drewniana śluza przelewu spływowego młyna zlała się z resztą obrazu, nie straciła przy tym swojego oryginalnego charakteru. Skoro udało się nadać fotografii nieco charakteru, warto teraz popracować nad jej kontrastem. Przydałoby się odzyskać kontrast między śluzą a tłem, między drzewami a roślinnością wodną, tak aby nie utracić atmosfery niesamowitości, nad której uzyskaniem ciężko pracowaliśmy. 108
|
Rozdział 3. Z aparatu do internetu
Ponadto nie chcemy, by nasze dzieło wyglądało mętnie z powodu nadmiaru kontrastu. Krótko mówiąc, potrzebujemy funkcji takiej jak wspomniana przeze mnie wcześniej Przejrzystość. Niestety, programiści firmy Adobe nie udostępnili tej opcji bezpośrednio w aplikacji Photoshop CS3 PL… A może jednak udostępnili? Jak wcześniej wspomniałam, efekt o nazwie Przejrzystość stworzony został w oparciu o koncepcję Local Contrast Enhancement (LCE). Chodzi o to, aby kontrast zmieniać lokalnie (dla małych fragmentów grafiki), a nie globalnie, czyli dla całego obrazu jednocześnie. Wystarczy wyobrazić sobie, że patrzy się na jakąś fotografię przez zmrużone oczy i — siłą rzeczy — nie widzi się wszystkich uwiecznionych na niej detali. Właśnie ten typ szczegółów, których nie sposób dojrzeć przez przymknięte oczy, daje się wydobyć ze zdjęć techniką Local Contrast Enhancement. Aby nałożyć na zdjęcie własnej roboty filtr odpowiadający funkcji Przejrzystość, należy otworzyć Maskę wyostrzającą, po czym ustawić dla niej raczej niską wartość (warto zacząć od 10%) oraz dość duży promień (dobry na początek parametr promienia to 50 pikseli). Próg poziomów filtra powinien wynosić 0. Efekty stosowania techniki LCE są subtelne, niemniej jednak nadaje się ona do podkreślania niezbyt wyraźnych szczegółów obrazu (rysunek 3.24). Możliwość ta szczególnie przydaje się podczas pracy z fotografiami, które mają zostać opublikowane w sieci WWW. Fotografie takie zazwyczaj nie są zbyt duże, przez co wiele szczegółów na nich po prostu ginie. Za pomocą filtra LCE można niejako uwypuklić utracone detale, jednakże bez rezygnowania z jakości poprawianych nim zdjęć.
Rysunek 3.24. Zdjęcie śluzy przelewu spływowego młyna po nałożeniu efektu Local Contrast Enhancement
Warto korzystać z warstw podczas dokonywania zmian parametrów obrazu, a także odkrywania możliwości trybów mieszania. Dzięki warstwom eksperymentowanie z nakładaniem na zdjęcie coraz to nowych efektów jest całkowicie bezpieczne, nie stanowi zagrożenia dla tych Tworzenie atrakcyjnego materiału ilustracyjnego
|
109
rezultatów naszej pracy, które uważamy za warte zachowania. Każdą warstwę można ukryć, dzięki czemu to my decydujemy, czy kolejne filtry chcemy nakładać na zdjęcie, którego wygląd został zmodyfikowany daną warstwą, czy też nie. Opisana tu przeze mnie metoda sprawdza się wtedy, gdy pragnie się nadać jakiś charakter całemu zdjęciu, niemniej czasami modyfikacji wymaga tylko jego fragment. Co wtedy?
Wycinanki i wyodrębnienia Tworzenie zaznaczeń, przeze mnie nazywanych wycinankami, to oddzielanie obiektu lub grupy obiektów od reszty zdjęcia. Powody, dla których warto zajmować się robieniem wycinanek, są tak zróżnicowane, jak ich zastosowania — załóżmy, na przykład, że tło jakiejś fotografii wydaje się nam zbyt rozpraszające albo chcemy nadać jakiemuś obrazowi ciekawy wygląd, korzystając z funkcji nakładania warstw. Wycinanki bywają śmieszne, a także pozwalają kreować dziwaczne, przyciągające wzrok grafiki (co jest ich wielką zaletą z punktu widzenia projektantów stron WWW pragnących, by ich dzieła przyciągały uwagę internautów). Jeden z moich znajomych tworzy wycinanki z kwiatów, a następnie umyślnie powiększa je tak, żeby zachodziły na ramkę, wewnątrz której teoretycznie powinny się mieścić. Wyodrębnianie obiektu z fotografii nie jest zadaniem trudnym, szczególnie jeśli jego konturami są gładkie krzywe, a tło ma jednolity kolor. W takim przypadku wystarczy zwyczajnie zaznaczyć odpowiedni fragment zdjęcia za pomocą narzędzia Różdżka (lub też jego odpowiednika) i wyciąć go. Niestety, każdy, kto zechce zrobić cokolwiek bardziej skomplikowanego, będzie musiał nieco się wysilić. Jedną z metod zaznaczania na fotografiach obszarów dowolnego kształtu jest korzystanie z narzędzia Zakres kolorów (Zaznacz/Zakres koloru), będącego opcją dostępną w programie Photoshop. W skład owego narzędzia wchodzi zestaw kroplomierzy, za pomocą których można regulować obszar całkowitego zaznaczenia, dodając do niego (bądź z niego usuwając) fragmenty zdjęcia pokryte określonymi kolorami. Na rysunku 3.25 przedstawiona została fotografia, na której za pomocą omawianego narzędzia zaznaczono kilka obszarów w różnych barwach. Po zaznaczeniu niepotrzebnych fragmentów zdjęcia możemy je po prostu z niego wyciąć. Nic nie stoi na przeszkodzie, byśmy — jeśli tylko tego chcemy — skopiowali i wkleili obiekt, na którym nam zależy, w nowy obraz. Wystarczy kliknąć prawym przyciskiem myszy zaznaczony obszar i wybrać z menu opcję Zaznacz odwrotnie, a następnie wykonać standardową procedurę kopiowania i wklejania. Stosowanie opisanej tu metody przynosi całkiem niezłe rezultaty, szczególnie jeśli obiekt pierwszoplanowy i tło różnią się kolorystycznie. Niemniej jednak do wyciętego obiektu zazwyczaj doczepione są zbędne wycinki tła, a sam obiekt traci część detali (rysunek 3.26). Nieograniczone prostymi kształtami zaznaczenia daje się tworzyć również za pomocą filtra o nazwie Wydziel. Korzystając z niego, dostajemy do dyspozycji konfigurowalny pędzel służący do obrysowywania obszarów, które wymagają zaznaczenia. Obwiedziony linią fragment zdjęcia należy wypełnić kolorem — tak zaznaczona część fotografii stanowi zaznaczenie (rysunek 3.27).
110
|
Rozdział 3. Z aparatu do internetu
Rysunek 3.25. Narzędzie Zakres kolorów w działaniu — zaznaczanie obiektu uwiecznionego na zdjęciu
Rysunek 3.26. Tak wygląda zdjęcie po zaznaczeniu na nim (z wykorzystaniem narzędzia Zakres kolorów) i usunięciu z niego niepotrzebnych fragmentów
Wycinanki i wyodrębnienia
|
111
Rysunek 3.27. Obiekty widoczne na zdjęciach można zaznaczać także za pomocą filtra o nazwie Wydziel
W programie Photoshop CS3 pojawiło się nowe narzędzie służące do zaznaczania na obrazach obszarów o nietypowych kształtach, niedostępne w poprzednich częściach aplikacji. Nosi ono nazwę Szybkiego zaznaczania. Za jego pomocą tworzy się zaznaczenia w oparciu o próbki kolorów pobrane kroplomierzem. Wspomniane narzędzie daje użytkownikowi edytora obrazów większą kontrolę nad kształtem zaznaczanego obszaru, niż Różdżka. Zaznaczania obiektów uwiecznionych na zdjęciach oraz usuwania zbędnych fragmentów fotografii dokonywać można również metodami opartymi na konstruowaniu masek warstw i wykorzystaniu kanałów kolorów, jednakże niemal zawsze, niezależnie od zastosowanej techniki tworzenia zaznaczeń, nad efektem wycinania elementów obrazu trzeba dodatkowo popracować. Ja do usuwania niechcianych elementów obrazów używam Gumki, a do odzyskiwania materiału, który pragnę zachować, Pędzla historii. Podczas kopiowania fragmentów obrazu i wklejania ich w inną grafikę, przeprowadzam dopasowywanie kolorów (opisane wcześniej w tym rozdziale), aby mieć pewność, że efekt mojej pracy nie będzie wyglądał źle pod względem kolorystycznym. Wreszcie, gdy zachodzi potrzeba usunięcia pozostałości starego tła, przykrywam je nowym za pomocą narzędzia Stempel. Poniżej zamieszczam w punktach podsumowanie opisu procesu zaznaczania, wycinania i umieszczania na nowych tłach fragmentów zdjęć.
1. Należy zaznaczyć jakiś obiekt uwieczniony na zdjęciu. W tym celu można skorzystać
z narzędzia Zakres kolorów, filtra Wydziel, którejś z funkcji zaznaczania czy posłużyć się metodą opartą na wykorzystaniu kanałów kolorów lub masek warstw.
2. Uzyskany materiał warto oczyścić Gumką z niechcianych pozostałości po obrazie, z którego
został on wycięty. Dobrze jest pamiętać o istnieniu Pędzla historii, który przydaje się, gdy trzeba odzyskać materiał nieumyślnie usunięty.
112
|
Rozdział 3. Z aparatu do internetu
3. Po nałożeniu wyciętego fragmentu obrazu na nowe tło (nakładka powinna stanowić nową
warstwę) należy zająć się dopasowaniem kolorów, o którym pisałam w poprzednich częściach tego rozdziału. Dopasowania wymagać mogą parametry tła i umieszczonego na nim obiektu odpowiedzialne za poziom jasności, położenie źródła światła i kolorystykę obydwu łączonych grafik.
4. Krawędzie zaznaczenia nałożonego na nowe tło warto poprawić za pomocą narzędzia Stempel. Przed umieszczeniem w internecie zdjęcie można zmodyfikować na nieskończoną wręcz liczbę sposobów, jednakże przed przystąpieniem do pracy trzeba zaopatrzyć się w odpowiedni edytor obrazów — taki, w którym znajdziemy wszystkie niezbędne opcje. Rysunki 3.28 i 3.29 przedstawiają przykładowe obrazki mojego autorstwa wykonane z wykorzystaniem technik, które opisałam w tym rozdziale.
Rysunek 3.28. Brama przelewu spływowego młyna wklejona w zdjęcie zatoczki
Przegląd aplikacji służących do edycji obrazów Istnieje tyle różnych edytorów obrazów, że miałam prawdziwy problem z wyborem tych kilku, które powinnam opisać w niniejszej książce. Niektóre programy wymagają wzmianki choćby z racji swojej popularności, nawet jeśli nie są szczególnie dobre. Inne po prostu warto omówić dlatego, że oferują zaskakująco wiele jak na oprogramowanie tanie bądź wręcz darmowe. Część aplikacji działa tylko w środowisku Windows, ale są też takie, które występują w wersjach przeznaczonych do pracy pod różnymi systemami operacyjnymi (w tym także pod Linuksem, choć dla tego systemu wybór programów do obróbki grafiki jest najmniejszy). Swój przegląd programów do obróbki zdjęć rozszerzyłam o opis kilku narzędzi niewymagających instalacji i dostępnych w sieci WWW. Narzędzia te należą do zupełnie nowej, niezwykle interesującej rodziny aplikacji kompletnie niezależnych od systemu operacyjnego, pod którym się ich używa.
Przegląd aplikacji służących do edycji obrazów
|
113
Rysunek 3.29. Nie zawsze trzeba wycięty z fotografii obiekt wstawiać w inne zdjęcie. Warto niekiedy uwolnić swoją wyobraźnię
Wszystkie programy, które postanowiłam opisać, sprawdziłam pod kątem dostępności w nich podstawowych opcji absolutnie niezbędnych z punktu widzenia użytkownika pragnącego przygotować swoje fotografie do publikacji w internecie. Poniżej dla przypomnienia ponownie zamieszczam listę ważnych funkcji, które powinny znaleźć się w dobrym programie do obróbki zdjęć. • W dobrym programie do obróbki zdjęć powinny być dostępne opcje przeskalowania lub
zmieniania wielkości obrazu, a także jego przycinania. • Program taki powinien oferować możliwość pracy z plikami RAW — bezpośrednio lub
z wykorzystaniem odpowiednich wtyczek albo dodatków. • W programie powinna być zaimplementowana obsługa profili kolorów oraz przestrzeni
barw. • Dobry program do obróbki zdjęć powinien umożliwić zapisywanie obrazów do plików
w wielu różnych formatach (m.in. TIFF, PNG, JPEG i GIF). Ponadto istotne jest, aby dało się zapisywać efekty swojej pracy przed jej ukończeniem.
• Program powinien udostępniać funkcję cofania dowolnej liczby zmian dokonanych pod-
czas obróbki zdjęcia, dzięki temu bowiem zawsze można wrócić do etapu pracy, w którym jeszcze wszystko szło jak należy. • Dobry program do obróbki zdjęć powinien umożliwiać usuwanie z nich szumów, skaz
albo kurzu. Szczególnie przydatna jest funkcja pozwalająca pozbyć się kurzu, stworzona w oparciu o jakiś rodzaj klonowania. • Program powinien oferować przynajmniej niektóre z efektów i filtrów przydatnych podczas
pracy ze zdjęciami. Na pewno nie może w nim zabraknąć funkcji rozmywania i wyostrzania obrazu. • Istotne jest, aby za pomocą programu do obróbki zdjęć można było zmieniać ustawienia
związane z kolorami i światłem (korekcja krzywych, korekcja poziomów, łączenie kanałów).
114
|
Rozdział 3. Z aparatu do internetu
• Dobry program powinien dawać użytkownikowi możliwość zaznaczenia określonego
elementu obrazka. • W programie powinna być zaimplementowana obsługa warstw. • W programie do obróbki zdjęć powinny znaleźć się funkcje umożliwiające dokonywanie
korekcji sprzętowych zniekształceń i zakłamań obrazu, będących na przykład wynikiem właściwości układu optycznego aparatu. • Dobry program powinien mieć zaimplementowaną obsługę wtyczek i dodatków.
Pora sprawdzić, na ile różne edytory grafiki rastrowej spełniają wypisane wyżej oczekiwania.
Adobe Photoshop CS3 PL Przedstawiciele firmy Adobe twierdzą, że Photoshop został stworzony z myślą o grafikachprofesjonalistach, w związku z czym średnio zaawansowany fotograf-amator nie będzie w stanie wykorzystać jego potencjału. Niemniej jednak po latach przeglądania serwisów społecznościowych (na przykład Flickra) doszłam do wniosku, że zainteresowania i pasje ludzi nie zależą od tego, czy dostają oni pieniądze za swoje zdjęcia, czy też robią je dla przyjemności. Fotografia zawsze była dziedziną budzącą znaczne zaciekawienie. Obecnie, gdy do dyspozycji mamy nowoczesne aparaty cyfrowe i nieskończoną liczbę sposobności do pokazywania owoców naszej pracy, słowo amator nabrało zupełnie nowego znaczenia. Korzystam z aplikacji Photoshop od lat. Pierwszy raz ją kupiłam, gdy nie miała jeszcze zbyt wielkiej konkurencji na rynku i można ją było nazwać programem dość oryginalnym. Ponadto dawniej nie kosztowała tyle co dzisiaj, choć — co trzeba powiedzieć — nigdy nie należała do grupy tanich produktów. Uwielbiam ją, mimo że z całą pewnością nie wykorzystuję wszystkich jej możliwości. Photoshop CS3 po brzegi wypełniony jest funkcjami użytecznymi zarówno dla artystów-grafików, jak i fotografów. Co sprawia, że Photoshop wyróżnia się na tle konkurencji? Na przykład ma wbudowanych wiele różnych filtrów wyostrzających. Jednym z nich jest Inteligentne wyostrzanie. Filtr ten przydaje się przede wszystkim podczas obróbki lekko poruszonych zdjęć. Innymi mocnymi stronami aplikacji Photoshop są wyjątkowo wysoki poziom obsługi warstw i kanałów kolorów oraz jeden z najlepszych systemów wyświetlania informacji (na przykład histogramy dla wielu kanałów). Program oferuje dużo, dużo więcej. Zawiera narzędzia umożliwiające użytkownikowi szybkie tworzenie grafiki gotowej do publikacji w sieci WWW oraz budowanie galerii lub prezentacji zdjęć. Więcej na ich temat napiszę w następnym rozdziale. Wraz z wersją CS3 aplikacji Photoshop użytkownik otrzymał do dyspozycji zupełnie nowe narzędzie; nosi ono nazwę Adobe Device Central. Dzięki niemu możemy sprawdzić, jak zdjęcie, nad którego wyglądem aktualnie pracujemy, prezentowałoby się oglądane za pomocą różnych telefonów komórkowych i innych urządzeń przenośnych. Po uruchomieniu Adobe Device Central sami wybieramy nazwę producenta i model aparatu telefonicznego. Gdy już uporamy się z wyborem konkretnego urządzenia, program wstawi zdjęcie w odpowiednie miejsce przedstawiającego go obrazu. Oczywiście fotografię można w dalszym ciągu modyfikować. Co więcej, można obserwować, jak będzie się ona prezentowała oglądana na wyświetlaczu telefonu w różnych warunkach, na przykład rozciągnięta i dopasowana do wyświetlacza albo wyświetlona na ekraniku telefonu używanego w sztucznie oświetlonym pomieszczeniu (rysunek 3.30). Przegląd aplikacji służących do edycji obrazów
|
115
Rysunek 3.30. Adobe Device Central w działaniu
Naprawdę warto czasami zobaczyć, co dzieje się ze zdjęciami oglądanymi za pomocą telefonu komórkowego… Kolejnym narzędziem dołączonym do aplikacji Photoshop CS3 jest Adobe Bridge — wspaniały menedżer zdjęć, umożliwiający użytkownikowi ich wstępną obróbkę, pozwalający na przykład opatrzyć grupę fotografii wspólnymi metadanymi. Genialnie nadaje się on do eksplorowania folderów z obrazami, jako że wyświetla podgląd przeglądanych grafik. Funkcja ta niezwykle ułatwia wybieranie spośród wielu zdjęć tych, które wymagają obróbki. Za pośrednictwem Adobe Bridge można korzystać z różnych dodatkowych usług, m.in. tworzenia internetowej kopii zapasowej i umieszczania zdjęć w sieci WWW. Ponadto wraz z pakietem aplikacji Photoshop otrzymujemy program Adobe Camera Raw, umożliwiający pracę z plikami typu RAW. Omawiany pakiet jest kompletnym zestawem narzędzi potrzebnych podczas przeprowadzania procesu przenoszenia fotografii z aparatu do internetu. Na ile Photoshop CS3 spełnia moje oczekiwania? O tym, że dostępne są w nim podstawowe opcje standardowo pojawiające się we wszystkich edytorach obrazów (zmiana wielkości zdjęć, kadrowanie itd.), nie muszę nawet wspominać. Warto natomiast napisać kilka słów o aplikacji Camera Raw, dzięki której Photoshop świetnie radzi sobie z plikami typu RAW. W programie Photoshop zaimplementowano obsługę historii zmian dokonywanych na zdjęciach zapisanych do plików RAW, a także możliwość cofania niechcianych modyfikacji wyglądu tych zdjęć. Za pomocą narzędzia Stempel można usuwać z fotografii niepotrzebne efekty uboczne ich edytowania, zaś zestaw filtrów dostępny w programie Photoshop jest jednym z najlepszych, z jakich korzystałam podczas pracy z różnymi edytorami obrazów. Jakby tego było mało, w omawianej aplikacji znalazły się rozmaite panele
116
|
Rozdział 3. Z aparatu do internetu
kontrolne, umożliwiające użytkownikowi modyfikowanie ustawień parametrów związanych z poziomami jasności i kolorystyką grafik. Przykładami wspomnianych paneli są okna ustawień Poziomów i Krzywych, Mikser kanałów oraz okno opcji Czarno-biały. W programie Photoshop obiekty uwiecznione na zdjęciach daje się zaznaczać na kilka różnych sposobów (metody tworzenia zaznaczeń omówiłam nieco wcześniej w tym rozdziale). Edycja zdjęć w znacznej mierze opiera się na wykorzystaniu warstw, których implementacja w aplikacji firmy Adobe stoi na niedoścignionym dla konkurencji poziomie. Photoshop jest jednym z najlepszych narzędzi do edycji fotografii, łatwym do rozbudowania za pomocą rozmaitych wtyczek i niezliczonych dodatków. Korzystałam z niego, omawiając niektóre techniki poprawiania wyglądu zdjęć, Czytelnik miał więc okazję zobaczyć, jak wiele można za jego pomocą osiągnąć. W programie Photoshop znajdziemy mnóstwo filtrów pozwalających korygować zniekształcenia oraz inne defekty pojawiające się na zdjęciach. Dostępne są w nim między innymi narzędzia, dzięki którym można poprawiać wady fotografii związane z układem optycznym aparatu, a także dowolnie obracać i przekrzywiać obraz. Czy wychwalany tu przeze mnie program nie ma wad? Owszem. Po pierwsze aplikację Photoshop połączono z innymi narzędziami wchodzącymi w skład pakietu CS3, tak że jej zdezorientowany użytkownik nigdy nie ma do końca pewności, co powinien zrobić, gdy pragnie ulepszyć bądź rozwinąć którykolwiek z programów tworzących omawiany przeze mnie zestaw. Po drugie niemało problemów może sprawić korzystanie z licencji na użytkowanie słynnego edytora obrazów. Otóż klucz aktywacyjny programu Photoshop jest ważny tylko dla jednej jego instalacji. Jeśli ktoś chce przenieść aplikację Photoshop na inny komputer, musi najpierw odinstalować ją z komputera, którego dotychczas używał. Zadanie to może okazać się niewykonalne w przypadku awarii maszyny i utraty instalacji programu Photoshop. Dodatkowo testerzy wersji beta produktu Adobe odkryli, że Photoshop CS3 nie chce prawidłowo instalować się na tych komputerach, na których wcześniej instalowano jego wersję beta. Programiści z Adobe napisali specjalne skrypty, których zadaniem jest przygotowanie komputerów do procesu instalacji na nich oprogramowania wchodzącego w skład pakietu CS3. Najwyraźniej skrypty te nieco za dokładnie badają środowisko, w którym się je uruchamia. Ostatnią i zarazem chyba największą wadą omawianego programu jest jego cena. Photoshop to aplikacja dla jednych za droga, a dla innych po prostu zbyt skomplikowana w obsłudze. Dobrą alternatywę dla pakietu CS3 stanowi aplikacja Photoshop Elements, zawierająca większość podstawowych narzędzi do edycji zdjęć znanych z oryginalnego programu Photoshop i jednocześnie pozbawiona dodatkowych opcji. Wraz z programem Elements otrzymujemy dostęp do Adobe Camera Raw oraz wiele funkcji ułatwiających zarządzanie grafikami — za wszystko to zapłacimy znacznie mniej, niż za pakiet Photoshop CS3. Strona firmy Adobe dostępna jest pod adresem: http://www.adobe.com/pl/products/ ´photoshop/index.html. Wersje próbne oprogramowania można ściągnąć, wybrawszy odpowiednią opcję z menu znajdującego się w górnej części strony.
Przegląd aplikacji służących do edycji obrazów
|
117
Photoshop Elements Photoshop Elements dostępny jest w dwóch wersjach: dla komputerów z systemem operacyjnym Mac oraz Windows. Na potrzeby tej książki przyjrzałam się programowi Photoshop Elements 5, przygotowanemu z myślą o systemie operacyjnym firmy Microsoft. Photoshop Elements to bardzo interesująca aplikacja, szczególnie dla tych, którzy mieli okazję korzystać z pełnej wersji programu Photoshop. Kiedy uruchamiałam ją po raz pierwszy, spodziewałam się znaleźć w niej opcje nieistniejące w nadrzędnym względem Elements produkcie Adobe, lecz nie sądziłam, że zaimplementowano w niej naprawdę przydatne funkcje, których nie ma w pakiecie Photoshop CS3. Na szczególną uwagę zasługuje narzędzie o nazwie Magic Extractor, wydatnie ułatwiające zaznaczanie wybranych fragmentów fotografii. Wszyscy ci, którzy podobnie jak i ja nie potrafią powstrzymać drżenia dłoni podczas korzystania z pióra świetlnego lub myszki komputerowej, prędzej czy później dojdą do wniosku, że za możliwość korzystania z niego warto zapłacić niemal każdą cenę, narzędzie to pozwala bowiem z niesłychaną łatwością zaznaczać na zdjęciach rozmaite obiekty. Wystarczy odpowiedni fragment fotografii pokryć kolorem, a potem jednym kliknięciem odpowiedniego przycisku go wyciąć. Przeprowadzenie tej operacji zostało przedstawione na rysunkach 3.31 oraz 3.32.
Rysunek 3.31. Narzędzie Magic Extractor w działaniu. Wystarczy pokryć część zdjęcia kolorem…
Photoshop Elements jest prostszy w obsłudze niż zwykły Photoshop. Wiele zaimplementowanych w nim funkcji uruchamia się zaledwie jednym kliknięciem. Ponadto wszystkie opcje dostępne w Elements zostały dobrze opisane, dzięki czemu nawet nowicjusze w dziedzinie grafiki komputerowej oraz idący z duchem czasu fotografowie będą w stanie używać ich bez trudu.
118
|
Rozdział 3. Z aparatu do internetu
Rysunek 3.32. Okno programu Photoshop Elements po „magicznym” wycięciu kwiatka z oryginalnej fotografii i umieszczeniu go na nowym tle
Za pomocą aplikacji Photoshop Elements można zarządzać plikami graficznymi i kopiować zdjęcia bezpośrednio z pamięci aparatu fotograficznego, niemniej jednak opcje te zostały bardzo uproszczone w stosunku do funkcji dostępnych w Adobe Bridge. Ponadto Elements pozwala korzystać z większej niż w programie Photoshop liczby opcji przydatnych w czasie przygotowywania fotografii do prezentacji, w tym z rozszerzonego zestawu gotowych profili ustawień. Muszę tu zaznaczyć, że większość z tych profili wydaje się być przygotowana bardziej z myślą o drukowaniu zdjęć niż o ich publikowaniu w sieci WWW. Wszystkich, którzy są zainteresowani szybkim i łatwym wprowadzaniem poprawek w wyglądzie zdjęć za pomocą suwaków regulacji barw i nasycenia, funkcji usuwającej z fotografii efekt czerwonych oczu i domyślnego filtra wyostrzającego, ucieszy prawdopodobnie fakt, że w aplikacji Elements pojawiło się narzędzie o nazwie Quick Fix (widać je na rysunku 3.33). Muszę przyznać, że funkcje zawarte w Quick Fix spisują się całkiem nieźle, mimo to z całą pewnością nie poprawiają wyglądu zdjęć w taki sposób, w jaki ja bym go poprawiła. Wróćmy do zagadnienia sporządzonej przeze mnie listy opcji, w które uzbrojony powinien być każdy dobry edytor obrazów. Otóż w Elements zautomatyzowany został proces ustawiania części spośród atrybutów, które zwykłam regulować ręcznie. Dzięki temu aplikacja jest prosta w obsłudze, niemniej jednak odniosłam wrażenie, że decyzję o tym, do których funkcji użytkownik powinien mieć dostęp, a do których nie, podjęto, nie kierując się żadnymi przesłankami, poniekąd przypadkowo. Na przykład, pracując w aplikacji Elements, możemy do woli korzystać z opcji Poziomy (ang. Levels), ale z opcji Krzywe (ang. Curves) już nie. W zamian za funkcję o nazwie Krzywe, znaną z oryginalnego programu Photoshop, otrzymaliśmy proste narzędzie, za pomocą którego daje się wybrać jeden z wariantów ustawień jasności obrazu. Inny przykład? Proszę: możemy korygować perspektywę, lecz nie mamy dostępu do uczciwego Miksera kanałów (ang. Channel Mixer).
Przegląd aplikacji służących do edycji obrazów
|
119
Rysunek 3.33. Narzędzie Quick Fix w programie Photoshop Elements
Na szczęście w Elements zaimplementowano tak ważną funkcję, jak obsługa warstw. Bez problemu daje się powielać warstwy i zmieniać ustawienia trybu ich mieszania. I dobrze, bo te właśnie czynności należy wykonywać, stosując opisaną przeze mnie metodę „poprawiania nastroju” fotografii. Dodatkowo w Elements znajdziemy niemało różnych filtrów, między innymi Rozmycie gaussowskie (ang. Gaussian Blur). Muszę przyznać, że twórcy tej aplikacji położyli nacisk na jakość opcji wyostrzania obrazu — zarówno ręcznie ustawiane, jak i automatyczne funkcje spisują się wyśmienicie. W Elements zaimplementowano filtr o nazwie Maska wyostrzająca (ang. Unsharp Mask), a także jakąś odmianę filtra zwanego Inteligentnym wyostrzaniem (ang. Smart Sharpening). Drugi z filtrów przydaje się wtedy, gdy na zdjęciu o wysokim poziomie szumów chcemy podnieść ostrość krawędzi uwiecznionych obiektów, a nie sprawić, by szumy te stały się jeszcze wyraźniejsze. Tak się szczęśliwie składa, że wiele spośród bardziej zaawansowanych funkcji znanych z programu Photoshop można niejako odtworzyć w Elements, jeśli postępować zgodnie z określonymi regułami. Co więcej, omawianą aplikację można rozbudowywać różnymi wtyczkami. Jest to o tyle cenne, że liczni zapaleńcy tworzą dodatki służące do wzbogacania Elements o istotne brakujące funkcje. Jedną z wtyczek, według mnie naprawdę wartą uwagi, jest darmowy dodatek SmartCurve, opracowany z myślą przede wszystkim o Photoshop Elements. Za jego pomocą można dokonywać istotnych korekcji krzywych (rysunek 3.34). Jeśli pragnie się używać Elements do przeprowadzania opisanej wcześniej w tym rozdziale operacji dopasowywania i ujednolicania kolorystyki kilku zdjęć, wspomniana wtyczka staje się naprawdę niezbędna. Innym dodatkiem, który wypróbowałam, było narzędzie stworzone przez theimagingfactory, służące do konwertowania zdjęć kolorowych do czarno-białych.
120
|
Rozdział 3. Z aparatu do internetu
Rysunek 3.34. Wtyczka SmartCurve stworzona z myślą o Photoshop Elements Wtyczkę SmartCurve można pobrać ze strony http://free.pages.at/easyfilter/curves.html. Wersja próbna produktu theimagingfactory jest dostępna pod adresem http://www.the ´imagingfactory.com/.
Niewątpliwymi zaletami Photoshop Elements są: jego stosunkowo niska cena, dostępność licznych poradników dotyczących korzystania z niego oraz to, że ma on zaimplementowaną obsługę wtyczek działających w droższej wersji programu Photoshop. Do wad Elements zaliczyć należy to, że wsparcie dla jego wersji napisanej z myślą o systemie operacyjnym Mac jest mniejsze, niż wsparcie dla wersji działającej pod systemem Windows. Poza tym każdego, kto przywykł do bardziej zaawansowanych paneli kontrolnych, pozwalających na precyzyjne i w pełni samodzielne zmienianie ustawień parametrów obrazu, zawiedzie system dokonywania modyfikacji wyglądu zdjęć, oparty na klikaniu przycisków. Nawiązując do omówionych w tym rozdziale przykładów poprawek, jakich można dokonać w przypadku zdjęć wymagających obróbki, napiszę teraz krótko o implementowaniu niezbędnych funkcji i korzystaniu z nich podczas pracy z Photoshop Elements.
Dopasowywanie kolorów Proces dopasowywania kolorów można przeprowadzić za pomocą wbudowanej w Elements funkcji Levels (zmienianie ustawień poziomów barw), kroplomierza (pobieranie próbek kolorów) i dodatku SmartCurve (regulacja parametrów dominant barwnych). Dzięki Elements można otwierać po kilka zdjęć jednocześnie.
Przegląd aplikacji służących do edycji obrazów
|
121
Konwersja zdjęć kolorowych do czarno-białych Konwersja zdjęć kolorowych do czarno-białych może być dokonywana z wykorzystaniem wbudowanej w Elements funkcji konwersji lub za pomocą jednej z licznych wtyczek dostępnych dla programu Photoshop.
Poprawianie nastroju zdjęcia za pomocą Rozmycia gaussowskiego Photoshop Elements umożliwia duplikowanie warstw. Należy utworzyć duplikat oryginalnej warstwy fotografii, a potem nałożyć na niego filtr o nazwie Gaussian Blur (Rozmycie gaussowskie). Następnie warstwy oryginalną i zmodyfikowaną trzeba zmieszać, korzystając z opcji Overlay (Nakładka). W aplikacji Elements zaimplementowano także obsługę poziomów, więc w razie potrzeby można rozjaśnić otrzymany obraz. Jeśli ktoś chciałby użyć efektu przejrzystości, stworzonego na bazie metody Local Contrast Enhancement, może posłużyć się filtrem Unsharp Mask (Maska wyostrzająca).
Wycinanki i usuwanie tła W Elements zaznaczenia można tworzyć za pomocą różnych odmian lassa, na przykład lassa magnetycznego, i opcji Magic Extractor. Po wycięciu jakiegoś obiektu z jednego zdjęcia możliwe jest wklejenie go w inną fotografię lub zapisanie do nowego pliku. Jeśli chcemy usunąć z grafiki niepotrzebne fragmenty, wystarczy użyć narzędzia Eraser (Gumka). Co prawda w programie Elements nie udostępniono znanego z aplikacji Photoshop narzędzia History Brush (Pędzel historii), ale można je w miarę nieźle zastąpić — trzeba utworzyć nową warstwę i połączyć z nią kopię zdjęcia, a potem włączyć dla niej przezroczystość. Aby odzyskać fragment nieprawidłowo zmodyfikowanej fotografii, należy wyłączyć przezroczystość warstwy połączonej z kopią zdjęcia i skorzystać z narzędzia Eraser w celu odkrycia odpowiednich jego części. Oczywiście Adobe nie jest jedyną firmą, której produkty liczą się na rynku edytorów obrazów. Nie zapominajmy o programie Paint Shop Pro — dość rozbudowanym narzędziu do obróbki grafiki, kosztującym mniej więcej tyle, ile Elements. Wersję próbną aplikacji Photoshop Elements można pobrać ze strony http://www.adobe.com/ ´pl/downloads/. Niestety, wszystkie wersje próbne wspomnianego programu udostępniane są w języku angielskim.
Paint Shop Pro Photo XI PL Aplikacje spod szyldu Paint Shop Pro są dostępne na rynku oprogramowania do obróbki grafiki od lat. W momencie pisania przeze mnie tej książki najnowszą odsłoną programu była jego wersja z numerem 11. Paint Shop Pro to w pełni rozwinięte narzędzie do edycji zdjęć, które można kupić za bardzo rozsądną cenę. Z tego należy się cieszyć. Dużo mniej cieszy jednak to, że omawiana aplikacja dostępna jest tylko w wersji dla Windows. W Paint Shop Pro zaimplementowano obsługę RAW, ale dla plików zapisanych w tym formacie nie można zmieniać ustawień parametrów obrazu regulowanych podczas robienia zdjęć z poziomu aparatu fotograficznego, takich jak czas ekspozycji i balans bieli.
122
|
Rozdział 3. Z aparatu do internetu
Paint Shop Pro udostępnia użytkownikowi większość zaawansowanych funkcji służących edycji zdjęć, na przykład Poziomy, Krzywe, Mikser Kanałów, a także kilka prostszych opcji, aktywowanych kliknięciem odpowiedniego przycisku. Jedną z takich opcji jest Inteligentna korekta zdjęcia. Po skorzystaniu z niej automatycznie regulowane są wszystkie parametry edytowanej fotografii (kolorystyka, jasność, nasycenie barw i ostrość). Co więcej, możliwa jest modyfikacja ustawień właściwych dla automatycznej metody modyfikacji wyglądu obrazów, w związku z czym Inteligentną korektę zdjęć można traktować jak narzędzie w pełni zautomatyzowane i jednocześnie nadające się do manualnego edytowania grafik. W Paint Shop Pro znajdziemy znaną z programów Photoshop oraz Elements funkcję podglądu zmian wprowadzonych w parametrach wyglądu edytowanego obrazu. Opcja ta w aplikacji Paint Shop Pro jest nawet bardziej zaawansowana niż w oprogramowaniu firmy Adobe, oferuje bowiem nie tylko podgląd obrazu zmodyfikowanego działaniami użytkownika, lecz także oryginalnego. Dzięki temu rezultat zastosowania określonego rozwiązania widzimy od razu i bez trudu możemy stwierdzić, czy nam on odpowiada, czy też nie. Kolejnym ciekawym i przyjemnym aspektem pracy z Paint Shop Pro jest dostęp do zestawu interesujących efektów, za pomocą których możemy modyfikować nasze zdjęcia. Przykładami niech będą Światła i Wehikuł czasu (rezultat użycia pierwszego z efektów do nadania „nowej twarzy” obrazowi widać na rysunku 3.35). Zazwyczaj dość sceptycznie podchodzę do nowinek w dziedzinie edycji fotografii, ale funkcja Światła zrobiła na mnie bardzo dobre wrażenie — świetnie nadaje się do stosowania w przypadku niektórych zdjęć z zaciemnionymi narożnikami. Natomiast Wehikuł czasu to nie tylko świetny filtr postarzający, lecz także przewodnik po historii fotografii. Jedno narzędzie, a korzyści wiele — czyż to nie doskonały interes?
Rysunek 3.35. Narzędzie Światła dostępne w programie Paint Shop Pro PL Przegląd aplikacji służących do edycji obrazów
|
123
W Paint Shop Pro znajdziemy wiele rozmaitych efektów. Jak widać na rysunku 3.36, opcje stworzone z myślą o dostosowywaniu zdjęć do wymogów sieci WWW (głównie opcje związane z zapisywaniem zdjęć do różnych formatów i przeglądaniem ich za pomocą przeglądarki internetowej) pogrupowano w dodatkowych paskach narzędzi. W programie znalazł się również pasek narzędzi, za którego pośrednictwem mamy dostęp do dziesiątek (a niewykluczone, że i setek!) przeróżnych efektów; do przeglądania ich wszystkich służy specjalna Przeglądarka efektów. Wraz z aplikacją Paint Shop Pro otrzymujemy do dyspozycji wiele specjalistycznych funkcji korygujących obraz, takich jak filtry usuwające z fotografii czerwone oczy lub wymazujące fioletowe odblaski, pojawiające się na szczytach morskich fal uwiecznianych w słoneczne dni. Osobiście nie jestem przekonana, czy ta wielka liczba rozmaitych efektów przemawia na korzyść opisywanego tu programu w znaczącym stopniu. Wszak większość funkcji, takich jak te wspomniane wyżej, daje się z łatwością odtworzyć samodzielnie za pomocą instrukcji dostępnych w internecie.
Rysunek 3.36. Aplikacja Paint Shop Pro PL po otwarciu pasków narzędzi oraz okna Przeglądarki efektów
Na ile Paint Shop Pro spełnia moje oczekiwania? Nikogo pewnie nie zaskoczę stwierdzeniem, że omawiana aplikacja oferuje użytkownikowi wszystko to, o czym wspomniałam w punktach z listy wymagań wobec dobrego edytora zdjęć, oraz to, co jest niezbędne do wykonania przykładowych modyfikacji zdjęć, opisanych przeze mnie wcześniej w tym rozdziale. Niektóre z modyfikacji wymagają utworzenia określonych efektów graficznych na bazie funkcji dostępnych w Paint Shop Pro. Na przykład efekt LCE można uzyskać, posługując się filtrem Maska wyostrzająca, natomiast nastrojowość fotografii — podnieść za pomocą następujących narzędzi: Rozmycie gaussowskie, duplikowanie warstw i korekcja poziomów. Paint Shop Pro świetnie 124
|
Rozdział 3. Z aparatu do internetu
radzi sobie z zaznaczaniem i wycinaniem obiektów z obrazów (ma wbudowane opcje takie jak Różdżka albo Inteligentna krawędź, a także obsługuje inne metody tworzenia zaznaczeń fragmentów edytowanej grafiki). Wszyscy ci, którzy wciąż są sceptycznie nastawieni do Paint Shop Pro i bogactwa jego funkcji, powinni wiedzieć, że w programie tym działają wtyczki i dodatki pisane z myślą o analogicznych produktach firmy Adobe. Paint Shop Pro to aplikacja z wielkim potencjałem, o naprawdę przystępnej cenie. Niestety, ma jedną wadę (wspominałam o tym wcześniej): istnieje tylko jedna jej wersja — wersja stworzona z myślą o systemie operacyjnym Windows. Co więcej, nie zapowiada się, by sytuacja ta miała ulec zmianie. Inną wadą omawianego programu, za której sprawą odwróciło się od niego niemało jego fanów i miłośników, jest to, że z wielu efektów, filtrów i wtyczek korzystać można wyłącznie podczas obróbki grafik 8-bitowych. Każdy, kto chce używać Paint Shop Pro, będzie musiał prędzej czy później przywyknąć do częstego oglądania wyskakującego okienka informacyjnego z tekstem głoszącym, że przeprowadzenie danego procesu wymaga zredukowania grafiki z 16-bitowej do 8-bitowej. Trzeba to jasno powiedzieć: inne edytory zdjęć, z Elements włącznie, pozwalają pracować na obrazach 16-bitowych. Czy istnieje jakakolwiek różnica między edytowaniem obrazu 8-bitowego a grafiki 16-bitowej? Tak, istnieje. Modyfikowanie wyglądu fotografii w większości przypadków wiąże się z utratą ich jakości, a przekonwertowanie obrazów 16-bitowych do 8-bitowych (czyli takich, dla których na jeden kanał przypada zaledwie 256 kolorów) dodatkowo powiększa straty. Jeśli jednak pracuje się nad prezencją zdjęć, które zostaną opublikowane w sieci WWW, różnica jakości między obrazami 16-bitowymi i 8-bitowymi nie musi stanowić wielkiego problemu. Paint Shop Pro nie jest całkowicie osamotniony, jeśli chodzi o brak obsługi obrazów 16-bitowych. Za pomocą programu Photoshop Elements można co prawda otwierać 16-bitowe pliki graficzne, ale większość opcji związanych z kolorystyką zdjęć, takich jak obsługa warstw, korekcja poziomów itd., jest podczas pracy nad ich wyglądem zwyczajnie niedostępna. Dopiero przekonwertowanie edytowanych grafik do obrazów 8-bitowych odblokowuje wspomniane funkcje. Z drugiej strony w aplikacji Photoshop CS3 zaimplementowana została rozszerzona obsługa grafiki 16-bitowej. Pliki RAW automatycznie są w niej otwierane jako obrazy 16-bitowe. Jeśli ktoś chciałby edytować ich 8-bitowe wersje, musiałby najpierw je utworzyć, konwertując fotografie 16-bitowe do 8-bitowych. Powróćmy do przykładów modyfikacji wyglądu fotografii. Poniżej omówiłam sposoby na ich dokonywanie za pomocą Paint Shop Pro PL.
Dopasowywanie kolorów W Paint Shop Pro dopasowywanie kolorów można przeprowadzić dokładnie tak samo, jak w aplikacji Photoshop CS3, przy czym trzeba pamiętać, aby uprzednio edytowany obraz przekonwertować do jego wersji 8-bitowej. Jasność grafiki reguluje się za pomocą panelu kontrolnego Poziomy (Warstwy/Nowa warstwa dopasowania/Poziomy), próbki kolorów pobiera się kroplomierzami, natomiast ustawienia dominant barwnych ustawia się, korzystając z narzędzia Krzywe.
Przegląd aplikacji służących do edycji obrazów
|
125
Konwersja zdjęć kolorowych do czarno-białych W Paint Shop Pro znajdziemy efekty napisane z myślą o tworzeniu i modyfikowaniu zdjęć czarno-białych. Za jego pomocą możemy również przekonwertować dowolną grafikę z kolorowej do przedstawionej w skali odcieni szarości, a także odpowiednio zmodyfikować ustawienie parametru nasycenia barw w panelu kontrolnym Barwa/Nasycenie/Jasność. W Paint Shop Pro mamy do dyspozycji Mikser kanałów, świetnie nadający się do konwersji fotografii kolorowych do czarno-białych.
Efekt rozmycia gaussowskiego Trzeba stworzyć duplikat warstwy poprzez wybór trybu mieszania Nałóż. Na nowo utworzoną warstwę należy nałożyć efekt o nazwie Rozmywanie gaussowskie, a następnie połączyć obydwie warstwy. Ogólną jasność obrazu można ustawić za pomocą panelu Poziomy. Aby dokończyć procedurę, trzeba jeszcze uzyskać efekt przejrzystości. W tym celu edytowaną grafikę należy poddać działaniu filtra o nazwie Maska wyostrzająca.
Tworzenie zaznaczeń i wycinanie obiektów ze zdjęć W programie Paint Shop Pro znajduje się niemało narzędzi służących do tworzenia zaznaczeń. Wartym uwagi jest lasso typu Zaznaczenie odręczne z wybraną opcją Inteligentna krawędź. Za jego pomocą można zaznaczyć kontur dowolnego obiektu — wystarczy, tworząc liczne węzły, pokryć jego kontur linią zaznaczenia. Po stworzeniu pożądanego zaznaczenia przyda się Gumka. Warto usunąć nią niechciane pozostałości obrazu. Nieważne, jak tani jest Paint Shop Pro — i tak nic nie przebije darmowych programów, jeśli tylko zaczniemy zastanawiać się nad cenami różnych aplikacji. Tak oto przechodzimy do omówienia kolejnego programu: Paint.NET. Napisany w oparciu o .NET Framework, może być używany za darmo.
Paint.NET Gdy zaczęłam się zastanawiać, które edytory plików graficznych powinnam opisać, Paint.NET pojawił się kilkakrotnie na różnych etapach moich rozważań. Nie tylko jest darmowy, lecz również ma niemałe wsparcie internautów. Podobnie jak Paint Shop Pro, działa tylko pod systemem Windows. Architektura Paint.NET jest otwarta, można go rozbudowywać rozmaitymi wtyczkami. W przeciwieństwie jednak do wielu innych programów, Paint.NET nie został obdarzony obsługą wtyczek pisanych z myślą o aplikacji Photoshop. Na szczęście istnieje spora liczba dodatków dedykowanych Paint.NET. Co więcej, powinna ona z czasem znacząco wzrosnąć. Paint.NET można pobrać ze strony internetowej o adresie http://www.getpaint.net/ ´index.html. Jak ma to miejsce w przypadku większości programów darmowych oraz open source, tak i w tym wypadku wszelkie dobrowolne wpłaty na konto twórców będą mile widziane. Na forum społecznościowym związanym z Paint.NET znajdują się poradniki na temat korzystania z programu (http://paintdotnet.forumer.com/viewforum. ´php?f=15) oraz lista wtyczek (http://paintdotnet.forumer.com/viewforum.php?f=16). Wszystkie strony, do których adresy tu podałam, prowadzone są w języku angielskim. Program Paint.NET oryginalnie nie występuje w polskiej wersji językowej, jednakże w sieci WWW bez trudu znaleźć można pliki umożliwiające jego spolszczenie.
126
|
Rozdział 3. Z aparatu do internetu
Interfejs Paint.NET jest bardzo prosty, w związku z czym aplikacja ta świetnie nadaje się do nauki obsługi edytorów plików graficznych. Udostępniono w niej kilka bardzo interesujących funkcji, niemniej jednak — ze względu na brak niektórych ważnych opcji — nie nazwałabym jej w pełni funkcjonalnym edytorem zdjęć. Na przykład, w Paint.NET zaimplementowana została obsługa warstw, ale nie warstw dopasowań ani masek. Na stronie prowadzonej przez twórców można przeczytać, że warstwy dopasowań (zakładam, że maski również) mają pojawić się w jej wersji 4.0. Dzięki prężności społeczności użytkowników programu w internecie pojawiły się ciekawe wtyczki, za pomocą których można rozbudowywać Paint.NET. Jeden z dodatków implementuje w aplikacji obsługę obiektów trójwymiarowych (rysunek 3.37).
Rysunek 3.37. Efekt trójwymiarowości w programie Paint.NET
Czy Paint.NET spełnia kryteria, które wcześniej ustaliłam i których listę przytoczyłam ponownie tuż przed przystąpieniem do omawiania poszczególnych edytorów grafiki rastrowej? Jak wspomniałam, aplikacja ma zaimplementowaną obsługę warstw. Ponadto, korzystając z niej, możemy dokonywać korekcji poziomów i krzywych. Niestety, w Paint.NET nie znajdziemy narzędzia takiego jak Mikser kanałów. Idźmy jednak dalej. Konwersja zdjęć kolorowych do czarno-białych wydaje się być przeprowadzana na zasadzie prostego zmniejszania nasycenia barw. Funkcja wyostrzania obrazów także nie jest zbyt wyszukana, ale za to w Paint.NET znalazło się miejsce dla efektów pokroju Rozmycia gaussowskiego. Pracując z Paint.NET, mamy możliwość cofania niechcianych zmian oraz otwierania plików typu RAW bezpośrednio w aplikacji (otwieranie plików RAW działa wolno). Błędy i skazy widoczne na zdjęciach można
Przegląd aplikacji służących do edycji obrazów
|
127
usuwać narzędziem typu Stempel, natomiast do tworzenia zaznaczeń służą Magiczna różdżka oraz różne warianty funkcji lasso. Gdyby za pomocą wtyczek nie udało mi się rozbudować programu Paint.NET o kilka niezbędnych funkcji oraz gdyby wsparcie ze strony społeczności użytkowników dla owego programu nie było aż tak duże, z pewnością skreśliłabym go z listy aplikacji, które zamierzałam opisać w tej książce. Muszę jednak przyznać, że za sprawą obydwu wspomnianych wyżej czynników Paint.NET spełnił moje podstawowe oczekiwania. Na razie wciąż jest on stosunkowo nowym narzędziem, które z pewnością będzie rozwijane. Poniżej Czytelnik znajdzie kilka wskazówek, jak należy postępować, by podczas pracy w Paint.NET móc wykonać czynności edycyjne opisane wcześniej w tym rozdziale.
Dopasowywanie kolorów W Paint.NET zaimplementowano obsługę warstw, korekcję krzywych oraz korekcję poziomów, kroplomierz, a także możliwość otwarcia kilku zdjęć jednocześnie. Wymieniony zestaw funkcji wystarczy, by przeprowadzić procedurę dopasowywania kolorów dla dwóch lub większej liczby fotografii.
Konwersja zdjęć kolorowych do czarno-białych Dysponując zaledwie możliwością regulacji nasycenia barw (nie mając dostępu do miksera kanałów), musimy sięgnąć po odpowiednie wtyczki. Ja skorzystałam z miksera kanałów zaimplementowanego w dodatku o nazwie WPF. Wspomniana wtyczka spisywała się całkiem nieźle.
Efekt rozmycia gaussowskiego Paint.NET umożliwia tworzenie duplikatów warstw. Ponadto znajdziemy w nim filtr Rozmycie Gaussa, a to oznacza, że połowę pracy mamy za sobą. W programie zaimplementowane zostały takie opcje, jak korekcja poziomów i korekcja krzywych (przydają się do poprawiania wyglądu edytowanego obrazu), natomiast jedyną metodą osiągnięcia efektu Local Contrast Enhancement jest zainstalowanie w nim odpowiedniego dodatku. Ja skorzystałam z wtyczki o nazwie Sharpen+.
Tworzenie zaznaczeń i wycinanie obiektów ze zdjęć W Paint.NET znalazły się rozmaite odmiany narzędzia lasso oraz narzędzie Magiczna różdżka (ang. Magic Wand). Po zaznaczeniu odpowiednich fragmentów obrazu można skorzystać z Gumki w celu pozbycia się pozostałych, niepotrzebnych części. Paint.NET istnieje tylko w wersji przeznaczonej do pracy w systemie operacyjnym Windows. Jak na razie wszystkie omówione przeze mnie aplikacje zostały napisane z myślą o systemie Windows lub Mac. Co mają począć użytkownicy Linuksa? Najbardziej kompletną i rozwiniętą aplikacją typu open source przeznaczoną do edycji obrazów jest GNU Image Manipulation Program (w skrócie GIMP). W przeciwieństwie do swoich konkurentów GIMP jest dostępny aż w trzech wersjach — dla systemów Windows, Mac OS X i Linux. Program ten ma wbudowane wszystkie funkcje potrzebne podczas edycji grafiki rastrowej. Ponadto, dzięki swej otwartej architekturze, jest narzędziem, które można rozbudowywać za pomocą wtyczek.
128
|
Rozdział 3. Z aparatu do internetu
GIMP GNU Image Manipulation Program to jedno ze starszych i zarazem bardziej rozbudowanych narzędzi dostępnych na rynku edytorów graficznych. W sieci WWW można znaleźć zarówno jego kod źródłowy, jak i pliki instalacyjne przygotowane z myślą o systemach operacyjnych Windows, Unix (albo Linux), Mac OS X. Jeśli chce się korzystać z GIMP-a na komputerach zarządzanych przez system Mac OS X, trzeba najpierw zainstalować X11 (można to zrobić za pomocą narzędzi programistycznych zamieszczonych na płytach z systemem Mac OS X). Podczas pisania tej książki używałam dwóch wersji programu GIMP. Pracując w systemie Windows, korzystałam ze stabilnej wersji o numerze 2.2.17, natomiast w systemie Mac OS X zainstalowałam wersję 2.4 — najpierw testową, a później ostateczną (instalacji dokonałam za pośrednictwem Macports). Obydwie wersje różnią się od siebie znacząco. Większość opisów metod wprowadzania zmian w wyglądzie obrazów podam dla wersji 2.2.17 programu, ponieważ w momencie pisania przeze mnie niniejszej książki dokumentacja dostępna dla tej właśnie wersji była pełniejsza. Niemniej jednak Czytelnik będzie mógł zapoznać się ze zrzutami ekranu, na których znalazły się obydwie wspomniane wersje GIMP, czyli 2.2.17 i 2.4. Mówi się czasem, że GIMP to narzędzie, które zastąpi bądź wyeliminuje aplikację Photoshop, jednakże twórcy tego darmowego programu na pewno nie chcą, byśmy właśnie w taki sposób myśleli o efekcie ich pracy. Ich celem z pewnością nie jest zbudowanie podróbki i zastępcy aplikacji Photoshop, lecz stworzenie potężnego i w każdym sensie kompletnego narzędzia do obróbki obrazów. Za pomocą samego programu GIMP nie można otwierać i edytować fotografii zapisanych do plików typu RAW, wystarczy jednak omawianą aplikację zintegrować z opisanym wcześniej programem UFRaw, aby otrzymać narzędzie świetnie radzące sobie z obsługą formatu RAW. UFRaw działa jak wtyczka: po zainstalowaniu tego programu w systemie każda próba otwarcia pliku RAW za pomocą aplikacji GIMP kończy się jego automatycznym uruchomieniem. Dzięki temu zyskujemy możliwość dokonania wstępnej obróbki „surowych” zdjęć. W wersji 2.4 programu GIMP pojawiło się zarządzanie kolorami, lecz jest ono ograniczone zaledwie do profilu RGB oraz skali odcieni szarości. W kontekście założeń leżących u podstaw powstania niniejszej książki fakt ten nie stanowi problemu — wszak i tak koncentruję się tu na omawianiu grafiki umieszczanej w internecie. Za pomocą aplikacji GIMP można edytować tylko obrazy 8-bitowe, co trudno uznać za jej zaletę. Przy omówieniu Paint Shop Pro wspomniałam, że lepiej byłoby mieć możliwość modyfikowania grafik 16-bitowych. Miejmy nadzieję, że w przyszłości twórcy programu GIMP wzbogacą swoje dzieło o tę właśnie opcję. W sieci WWW znaleźć można wtyczki napisane specjalnie z myślą o aplikacji GIMP. Ponadto istnieje wtyczka, która pozwala instalować w aplikacji GIMP dodatki tworzone dla programu Photoshop. Niestety, wtyczka o której tu mowa (wypróbowałam dodatek o nazwie PSPI), nie występuje w wersji przeznaczonej do użytku z oprogramowaniem zainstalowanym na komputerach z systemem operacyjnym Mac OS X, a jej wypróbowana przeze mnie wersja stworzona z myślą o Windows po prostu nie zadziałała. Aplikację GIMP można pobrać ze strony http://www.gimp.org, natomiast wtyczki do niej są dostępne pod adresem http://registry.gimp.org/. Dodatek PSPI znajduje się na stronie http://gimp.org./~tml/gimp/win32/pspi.html.
Przegląd aplikacji służących do edycji obrazów
|
129
GIMP to w pełni rozwinięta aplikacja, w której zaimplementowano obsługę warstw. Znajdziemy w niej mnóstwo narzędzi do edycji grafik, jak również filtrów, umożliwiających dokonywanie dowolnych modyfikacji wyglądu zdjęć — od wyostrzania obrazu po nakładanie na niego rozmaitych efektów świetlnych (rysunek 3.38).
Rysunek 3.38. GIMP 2.4, wersja działająca pod Windows
Wielki potencjał aplikacji GIMP bynajmniej nie rzuca się w oczy — przy pierwszym kontakcie z programem można zwyczajnie nie dostrzec wielu dostępnych w nim opcji. Najlepszą metodą uczenia się, jak należy pracować z GIMP-em, jest wyszukiwanie w sieci WWW odpowiedzi na zapytania w stylu: „GIMP konwersja do czarno-białych”. Poza tym na stronie http://www.gimp. ´org/tutorials można znaleźć kilka naprawdę przydatnych przewodników (napisanych w języku angielskim). Teraz, gdy powstaje niniejsza książka, najczęściej natrafia się w internecie na opisy wersji 2.2 aplikacji GIMP, ale z czasem ten stan rzeczy na pewno ulegnie zmianie. Każdy, kto zdecyduje się używać wersji 2.4 omawianej aplikacji i jednocześnie korzystać ze wspomnianych poradników, będzie zmuszony niejednokrotnie na własną rękę szukać w menu tych opcji, których lokalizacja w starszej i nowszej wersji GIMP-a nie jest taka sama. Na przykład istnieje kilka metod przeprowadzania konwersji zdjęć kolorowych do czarnobiałych. Jedna z nich zakłada korzystanie z Miksera kanałów i dostępnej w nim opcji o nazwie Monochromatyczny (rysunek 3.39). W wersji aplikacji GIMP oznaczonej numerem 2.4 do Miksera kanałów dostajemy się tak: Kolory/Składowe/Mikser kanałów. W starszej wersji programu tę samą akcję wykonuje się zupełnie inaczej: Filtry/Kolor/Mikser kanałów. Konwersję można przeprowadzić także za pomocą funkcji Rozłożenie kanałów. W wersji 2.2 aplikacji GIMP dostęp do niej uzyskujemy, klikając Obraz/Tryb/Rozłożenie, zaś w wersji 2.4 do potrzebnej opcji dostajemy się taką ścieżką: Kolory/Składowe/Rozłóż.
130
|
Rozdział 3. Z aparatu do internetu
Rysunek 3.39. Konwersja kolorowego zdjęcia do czarno-białego przeprowadzana przy użyciu Miksera kanałów
W programie GIMP zaimplementowana została obsługa warstw (w tym również warstw zduplikowanych), ale nie znajdziemy w nim warstw dopasowań. GIMP spełnia moje oczekiwania, jeśli chodzi o możliwość regulowania w nim kolorystyki obrazów — dostępne są funkcje takie jak Krzywe, Poziomy, Mikser kanałów, Odcień i nasycenie, Histogram oraz Rozłożenie kolorów. Korzystając z tej ostatniej, możemy rozłożyć obraz na kilka warstw w odcieniach szarości — warstwy te można dowolnie modyfikować. Jeśli chodzi o obsługę edycji kolorystyki fotografii — GIMP spisuje się wprost znakomicie. Omawiana aplikacja pozbawiona jest części dość istotnych funkcji — na przykład nie ma w niej opcji przekształcania swobodnego (obracanie, przekrzywianie obrazu itp.). Mimo to w GIMP-ie można znaleźć narzędzia transformacyjne, za pomocą których możliwe okazuje się korzystanie z funkcji skalowania, ścinania i perspektywy, działających w oparciu o konkretne wartości podawane przez użytkownika. Należy także zwrócić uwagę na to, że zaimplementowano w nim ograniczoną obsługę profili kolorów, używanych podczas drukowania zdjęć. Na szczęście akurat profil sRGB, istotny w przypadku obrazów pojawiających się w sieci WWW, jest dostępny. Mimo że prace nad udoskonalaniem programu GIMP prowadzone są w ramach projektu open source, z pewnością w przyszłości możemy spodziewać się poprawienia w nim obsługi profili kolorów, rozszerzenia zakresu działania funkcji przekształceń, a także wprowadzenia innych ulepszeń. Uważam, że narzędzia takie jak Zaznaczenie pierwszego planu oraz Zaznaczenie rozmyte, dostępne w GIMP-ie, sprawiają, iż program ten lepiej nadaje się do tworzenia skomplikowanych zaznaczeń i wycinanek niż wszystkie inne znane mi edytory obrazów. Ponadto jest on jedyną wyrafinowaną i kompletną aplikacją do obróbki grafiki napisaną z myślą o środowisku Linux.
Przegląd aplikacji służących do edycji obrazów
|
131
Oczywiście warto wiedzieć, że korzystając z emulatora systemu Windows pod Linuksem, można uruchomić program Photoshop (sztuka ta stała się możliwa dzięki pracownikom studia animacji Disneya). Dopóki jednak nie czuje się potrzeby używania bardzo specjalistycznych funkcji zaimplementowanych tylko w oprogramowaniu Adobe, program GIMP można uważać za doskonałe narzędzie do obróbki grafiki, która docelowo ma być pokazywana w sieci WWW. Poniżej Czytelnik znajdzie krótki opis, jak uzyskać za pomocą GIMP-a poszczególne efekty graficzne opisane wcześniej w tym rozdziale.
Dopasowywanie kolorów W aplikacji GIMP zaimplementowano obsługę Krzywych, Poziomów oraz warstw. Inaczej mówiąc, program oferuje wszystkie opcje, które są niezbędne do przeprowadzania procesu dopasowywania kolorów kilku fotografii metodą korekcji krzywych. GIMP radzi sobie równie dobrze z modyfikacjami barw opisanymi w części tekstu poświęconej nakładkom, co Czytelnik miał już okazję zobaczyć.
Konwersja zdjęć kolorowych do czarno-białych Za pomocą aplikacji GIMP konwersję fotografii kolorowych do czarno-białych możemy przeprowadzać na wiele różnych sposobów. Co ciekawe, niektóre z tych sposobów właściwe są tylko dla GIMP-a (na przykład Rozłożenie kolorów RGB albo korzystanie ze specjalnych wtyczek). Tak czy inaczej, moją ulubioną metodą pozostaje ta, która opiera się na używaniu opcji Mikser kanałów.
Efekt rozmycia gaussowskiego Efekt ten uzyskuje się bardzo łatwo, wystarczy bowiem stworzyć duplikat oryginalnej warstwy edytowanego obrazu, dla nowej warstwy w trybie mieszania wybrać opcję Pokrywanie, nałożyć na nią filtr o nazwie Rozmycie Gaussa (w panelu kontrolnym rozmycia gaussowskiego zalecam wpisanie wartości 70 dla długości promienia) i połączyć obie istniejące warstwy. Po połączeniu warstw należy zastosować metodę Local Contrast Enhancement, co można zrobić za pomocą filtra Wzmocnienie.
Zaznaczanie i wycinanie fragmentów obrazu W aplikacji GIMP znajdziemy kilka różnych narzędzi służących do zaznaczania fragmentów obrazu. Jednym z nich jest Zaznaczenie rozmyte, za pomocą którego można skutecznie tworzyć zaznaczenia o nieregularnych kształtach. W wersji 2.4 omawianego programu pojawiła się nowa funkcja o nazwie Zaznaczenie pierwszego planu, w znacznej mierze upraszczająca zaznaczanie obiektów widocznych na zdjęciach. Korzystając z niej, trzeba tylko zaznaczyć określony punkt na edytowanym obrazie, a następnie odpowiednimi ruchami myszy wyregulować kształt i wielkość obszaru zaznaczenia, dbając o to, by nie objęło ono zbyt dużego fragmentu grafiki. Szczerze mówiąc, uważam, że w GIMP-ie znalazły się lepsze narzędzia do tworzenia zaznaczeń niż w innych edytorach zdjęć, włącznie z aplikacją Photoshop. Czy mamy możliwość korzystania z edytorów obrazów bez zastanawiania się nad tym, które z nich uda się nam zainstalować w naszym komputerze? Odpowiedź brzmi: tak, wystarczy zacząć używać oprogramowania umieszczonego w sieci WWW i działającego bezpośrednio
132
|
Rozdział 3. Z aparatu do internetu
w oknie przeglądarki. Kolejne pytanie brzmi następująco: na ile internetowe edytory zdjęć spełniają kryteria, według których oceniam w tym rozdziale oprogramowanie do obróbki grafiki? Szukając odpowiedzi na to pytanie, sprawdziłam dwa internetowe edytory grafiki rastrowej. Ich nazwy to Splashup i Picnik.
Internetowe edytory obrazów: Splashup i Picnik Można wymienić wiele zalet internetowych edytorów zdjęć. Po pierwsze, korzystając z nich, nie musimy niczego instalować ani aktualizować w komputerze. Po drugie, do potrzebnych narzędzi mamy dostęp z dowolnego komputera, niezależnie od tego, jaki system operacyjny na nim uruchomiono. Ponadto większość programów działających bezpośrednio z sieci WWW jest darmowa, co stanowi mocny argument przemawiający za korzystaniem właśnie z nich. Oczywiście internetowe edytory mają również wady. Na przykład, firma udostępniająca daną aplikację może zbankrutować, zmienić charakter swojego produktu albo zasady korzystania z niego. Ponadto, jeśli edytor został tak skonstruowany, że działa tylko w trybie online, otwieranie w nim zdjęć zawsze będzie procesem zabierającym użytkownikom wiele czasu. Kolejną i według mnie największą wadą programów do obróbki grafiki rastrowej dostępnych bezpośrednio z sieci WWW jest to, że większość z nich po prostu nie oferuje wszystkich funkcji znanych z oprogramowania przeznaczonego do instalowania na dyskach twardych komputerów. Jeśli wziąć pod uwagę, jak wiele opcji składa się na przeciętny edytor obrazów, nie dziwi fakt, że nawet najbardziej zaawansowane aplikacje internetowe omawianego typu nie oferują użytkownikom tylu funkcji, ile można znaleźć w najprostszym programie zainstalowanym w komputerze. Z drugiej strony większość z nas tak naprawdę nie potrzebuje specjalistycznych i skomplikowanych narzędzi do obróbki zdjęć. Photoshop firmy Adobe dla wielu okaże się jednocześnie zbyt rozbudowany i stanowczo za drogi. Powiedzmy sobie szczerze, że nawet najwięksi mistrzowie pracy w programie Photoshop nie zawsze w pełni wykorzystują możliwości tego narzędzia. Niemniej jednak są takie funkcje, bez których obyć się nie możemy. Już na wstępie tego opisu aplikacji internetowych do obróbki grafiki muszę zaznaczyć, że nie znalazłem ani jednej, za pomocą której dałoby się przetworzyć plik typu Raw. Każdy, kto zechce pliki RAW edytować przy użyciu aplikacji internetowej, najpierw będzie musiał przekonwertować je do jakiegoś innego formatu, na przykład TIFF lub PNG. Zresztą nawet gdyby istniała możliwość otwierania za pomocą internetowych edytorów fotografii zapisanych do plików typu RAW, byłoby to niezwykle niepraktyczne ze względu na znaczne rozmiary tych plików. Na początku niniejszego rozdziału wymieniłam kilka konwerterów RAW — każdy z nich spisze się świetnie, jeśli tylko zajdzie potrzeba przemienienia „surowych” zdjęć w obrazy, które można edytować za pomocą aplikacji internetowych. Ogólnie sądzę, że żadna aplikacja internetowa nie nadaje się na główne i jedyne narzędzie do obróbki zdjęć. Programy tego typu warto traktować jak narzędzia zapasowe oraz mniej istotne. Sprawdzają się one w chwilach, gdy jest się daleko od domu albo gdy pragnie się szybko przygotować kilka fotografii do publikacji w serwisie Flickr lub SmugMug.
Internetowe edytory obrazów: Splashup i Picnik
|
133
Splashup Splashup to edytor napisany w języku Flash, chyba najbardziej przypominający dobre edytory instalowane na dyskach twardych komputerów. Można w nim otwierać po kilka zdjęć naraz, przy czym zdjęcia te mogą pochodzić z sieci WWW, z dysku komputera użytkownika aplikacji albo ze strony Splashup. W omawianym narzędziu zaimplementowano bardzo ograniczoną obsługę warstw, niewielki zestaw najpopularniejszych i nieskomplikowanych filtrów oraz opcje, za pomocą których na edytowanym zdjęciu można umieszczać tekst, rysować linie lub obrazki. Korzystając z aplikacji Splashup, mamy możliwość zmniejszania i powiększania obrazu, przesuwania go względem kanwy i obracania oraz umieszczania na nim grafik w postaci figur geometrycznych wypełnionych jednolitym kolorem lub gradientem barwnym. Ponadto za pomocą opisywanego programu możliwe jest również rysowanie kresek, rozmazywanie obrazka, dowolne umieszczanie na nim tekstu, wymazywanie jego fragmentów i — o czym już wcześniej wspomniałam — nakładanie na niego filtrów. Do dyspozycji mamy następujące efekty: wyostrzanie i rozmywanie obrazu, konwertowanie go do grafiki zapisanej w skali odcieni szarości, regulacja barwy i nasycenia, znajdowanie konturów i inne, takie jak nadawanie zdjęciu faktury. Edytując obraz, możemy tworzyć warstwy. W omawianej tu aplikacji spotkamy się z kilkoma trybami mieszania, podobnymi do tych, które znamy ze zwykłych edytorów grafiki rastrowej. Poniżej znajduje się lista trybów mieszania dostępnych w programie Splashup: • Normal, • Multiply, • Screen, • Lighten, • Darken, • Difference, • Add, • Subtract, • Invert, • Alpha, • Erase, • Overlay, • Hardlight.
Czy za pomocą Splashup można przeprowadzić proces dopasowywania kolorów albo nałożyć na zdjęcia efekt rozmycia gaussowskiego? Niestety, mimo że w aplikacji zaimplementowano obsługę warstw i pewne funkcje umożliwiające zmienianie parametrów kolorów widniejących na obrazie oraz udostępniono narzędzie kroplomierz, nie uzyskamy efektu dopasowania kolorów dla kilku zdjęć. Funkcje składające się na Splashup można w najlepszym razie określić mianem prymitywnych — ich panele kontrolne to przyciski, których klikanie powoduje wprowadzanie określonych zmian w wyglądzie obrabianych fotografii. Użytkownik aplikacji w najmniejszym nawet stopniu nie kontroluje sposobu, w jaki dana funkcja modyfikuje obraz.
134
|
Rozdział 3. Z aparatu do internetu
Co więcej, za pomocą Splashup nie zdołamy zaznaczyć na edytowanym obrazku określonego obiektu i usunąć zbędnego tła. Nie będziemy też w stanie klonować fragmentów obrazka w celu naprawienia widocznych na nim błędów lub usunięcia z niego niepotrzebnych pozostałości innej grafiki. Spośród wcześniej opisanych przeze mnie czynności edycyjnych za pomocą Splashup można wykonywać tylko jedną: zmieniać zdjęcia kolorowe w czarno-białe, a i to na zaledwie dwa sposoby. Te sposoby to prosta zamiana barw na skalę odcieni szarości lub zmniejszenie nasycenia kolorów — nic więcej nie zrobimy. W serwisie Splashup można przechowywać zdjęcia. Niestety, interfejs zarządzania obrazami nie jest zbyt intuicyjny. Ponadto w dużej mierze został oparty na idei przeciągania i upuszczania różnych obiektów w różnych miejscach, co często niczego nie ułatwia. Po przesłaniu fotografii na serwer serwisu można udostępnić je internautom oraz opisać słowami kluczowymi ułatwiającymi tematyczne przeszukiwanie galerii grafik. W Splashup znajdziemy funkcje, za pomocą których możliwe jest dokonywanie prostych modyfikacji wyglądu obrazów (rysunek 3.40). Aplikacja może okazać się użyteczna, jeśli zamierzamy edytować zdjęcia, które szybko się w niej ładują i wymagają bardzo niewielu poprawek. W tym miejscu pragnę zwrócić uwagę Czytelnika na to, że tylko obrabianie w aplikacji internetowej plików naprawdę małych nie skutkuje długim czasem ich przesyłania na serwer.
Rysunek 3.40. Aplikacja Splashup otwarta w przeglądarce Firefox — edycja zdjęcia
Internetowe edytory obrazów: Splashup i Picnik
|
135
Edytowanie zdjęć aplikacją Picnik: mniej niekiedy oznacza więcej Aplikacja Picnik dysponuje chyba najbardziej intuicyjnym interfejsem spośród wszystkich programów, które miałam okazję wypróbować podczas pisania tej książki. Otóż po załadowaniu się zdjęcia w oknie aplikacji pojawia się pod nim (w prawym dolnym rogu okna) suwak umożliwiający płynne powiększanie i pomniejszanie obrazu. Naprawdę chciałabym, żeby we wszystkich programach do obróbki grafiki dostępny był właśnie taki suwak. Wzdłuż górnej krawędzi okna umieszczone zostały przyciski opcji, takich jak automatyczna korekcja wyglądu obrazu, kadrowanie obrazu i jego obracanie, ustawianie dla niego czasu ekspozycji i kolorystyki oraz wyostrzanie go i usuwanie efektu czerwonych oczu. Po kliknięciu któregoś z przycisków pasek przycisków zastępowany jest paskiem opcji właściwych dla wybranej funkcji. Na rysunku 3.41 ujrzeć można pasek opcji powiązanych z funkcją przycinania obrazu.
Rysunek 3.41. Funkcja kadrowania obrazu w aplikacji internetowej o nazwie Picnik
Kliknięcie opcji Create otwiera menu efektów, takich jak konwersja zdjęć kolorowych do fotografii przedstawianych w skali odcieni szarości, sepii itp. Dostępne są również inne, dość interesujące efekty, na przykład Night Vision i Infrared Film Vignette, sprawiający, że zmodyfikowane nim fotografie wyglądają, jak gdyby zostały wykonane w latach sześćdziesiątych poprzedniego stulecia. Wszyscy użytkownicy mogą cieszyć się pełnym zestawem opcji, jakie ma do zaoferowania Picnik, niemniej jednak pełnoekranowa edycja zdjęć wymaga założenia płatnego konta typu premium.
136
|
Rozdział 3. Z aparatu do internetu
Po poprawieniu wyglądu zdjęć dostajemy możliwość przesłania ich bezpośrednio na swoje konto we Flickr, Picasa lub Facebook, a także zapisania na dysku komputera albo wysłania na podany adres poczty elektronicznej. Picnik to narzędzie, z którego korzysta się bardzo przyjemnie — dość przyjemnie, by mogło zostać zintegrowane z serwisem wymiany zdjęć Flickr. Mimo to nie spełnia ono moich oczekiwań, jakie mam względem dobrego edytora grafiki rastrowej. Według mnie Picnik to bardziej ciekawostka niż prawdziwy edytor zdjęć.
Organizacja i obróbka zbiorów zdjęć Do tej pory omawiałam aplikacje służące przede wszystkim do edytowania pojedynczych obrazów. Istnieje również oprogramowanie, za pomocą którego możemy pracować z wieloma fotografiami naraz, i robić z nimi bardzo różne rzeczy. Dwiema najsłynniejszymi aplikacjami wspomnianego typu są Aperture firmy Apple oraz Lightroom firmy Adobe. Żadna z nich nie jest tania, niemniej jednak w sieci WWW znajdują się ich wersje próbne, w pełni funkcjonalne przez 30 dni. Aperture występuje tylko i wyłącznie w wersji dla komputerów typu Mac, natomiast program Lightroom dostępny jest w dwóch wersjach: dla systemów operacyjnych Mac OS X i Windows. Wersję próbną aplikacji Aperture można pobrać ze strony http://www.apple.com/pl/ ´aperture/. Wersja próbna programu Lightroom jest dostępna pod adresem http:// ´www.adobe.com/pl/products/photoshoplightroom/. Aplikacja Aperture ma dość wysokie wymagania sprzętowe — udało mi się zainstalować ją zaledwie na jednym z moich komputerów. Lightroom okazał się być w tym względzie dużo bardziej elastyczny.
Warto wiedzieć, że prowadzone są prace nad darmową aplikacją typu open source, za pomocą której będzie można organizować i przerabiać całe zbiory zdjęć. Aplikacja ta nosi nazwę blueMarine (http://bluemarine.tidalwave.it/) i — podobnie jak w przypadku programów UFRaw oraz GIMP — jest dostępna w wersjach dla systemów operacyjnych Windows, Mac OS X oraz Linux. Na razie prace nad nią nie osiągnęły zbyt zaawansowanego stadium, dlatego wszystkim gotowym sięgnąć po omawianą aplikację w tej chwili radziłabym poczekać na ukazanie się bardziej stabilnej jej wersji. Oprogramowanie, o którym tu piszę, tworzone jest z myślą o zarządzaniu całymi grupami fotografii, a nie edytowaniu pojedynczych zdjęć. Służy ono do kopiowania plików z aparatu na dysk twardy komputera, ustalania dla zbiorów obrazów reguł dotyczących zachowywania i usuwania poszczególnych grafik, korygowania wyglądu wybranych fotografii, tworzenia z nich pokazów slajdów i wreszcie publikowania ich w sieci WWW. W niniejszym rozdziale skupię się przede wszystkim na omówieniu tych cech wspomnianych wyżej programów, które pozwalają nam porównywać owe programy do edytorów obrazów. W rozdziale następnym natomiast napiszę co nieco na temat stopnia ich przydatności podczas publikowania fotografii w internecie.
Organizacja i obróbka zbiorów zdjęć
|
137
Aperture firmy Apple Aperture to aplikacja o największych wymaganiach sprzętowych, z jakimi zetknęłam się podczas wypróbowywania przeróżnych programów opisanych w tym rozdziale. Tak wysokie wymagania sprzętowe mogą brać się stąd, że — zgodnie ze sloganami reklamującymi Aperture — aplikacja ta oferuje funkcję bezpiecznego edytowania zdjęć. Innymi słowy, przechowuje ona różne wersje edytowanych obrazów w pamięci oraz zapisuje je na dysku twardym komputera. Oprócz funkcji zarządzania zdjęciami, takich jak możliwość oceniania fotografii, grupowania ich i katalogowania, modyfikowania metadanych, w Aperture znajdziemy opcję edycji pojedynczych obrazów. Niełatwo ją jednak znaleźć po uruchomieniu aplikacji i załadowaniu w niej zbioru próbnych zdjęć. Aby dostać się do narzędzia, któremu programiści firmy Apple nadali nazwę Adjustments Inspector, należy dwukrotnie kliknąć zdjęcie przeznaczone do edycji. Po wykonaniu tej czynności z prawej strony pojawi się panel boczny, zawierający rozwijalne sekcje poszukiwanych opcji. Poniżej znajduje się Metadata Inspector, za pomocą którego można zmieniać metadane przypisane do fotografii. Rozmiary każdego z paneli mogą być regulowane tak, by więcej miejsca pozostało na rozwinięcie tego drugiego; obydwa można także zwyczajnie zamknąć. Warto włączyć Heads Up Display (HUD), wybierając odpowiednią opcję z menu Window, i dla opcji View wybrać wariant pełnoekranowy. Dzięki temu, podczas edytowania fotografii, będziemy mieć do dyspozycji jeszcze więcej przestrzeni roboczej. Korzystając z narzędzia Adjustments Inspector, otrzymujemy dostęp do histogramu, a także innych opcji, za pomocą których możemy regulować takie parametry obrazu, jak czas ekspozycji, nasycenie i kontrast. Ponadto możemy dokonywać korekcji cieni i najjaśniejszych miejsc na fotografii oraz modyfikować jej kolorystykę i ostrość. Poszczególne parametry reguluje się suwakami, a wprowadzane zmiany od razu są widoczne zarówno na edytowanym obrazie, jak i na histogramie. Ciekawie zaprojektowany został interfejs narzędzia Levels (rysunek 3.42). Otóż dla punktu bieli, punktu szarości i punktu czerni stworzono po dwa wskaźniki — jeden pokazuje na wykresie wartość wejściową danego punktu, a drugi wyjściową. Każdą parę wskaźników łączy linia, której położenie informuje o zmianach poziomów kolorów. Program Aperture całkiem nieźle radzi sobie z edycją pojedynczych fotografii. Korzystając z niego, można dokonać również wstępnej obróbki kilku zdjęć naraz. Zarazem jednak w omawianej aplikacji nie znajdziemy opcji niezbędnych do wykonania czynności edycyjnych opisanych wcześniej w tym rozdziale. Brakuje w niej narzędzia zarządzającego warstwami, a także funkcji korekcji krzywych i korekcji poziomów. Jeśli chcemy za pomocą Aperture zmieniać zdjęcia kolorowe w czarno-białe, pozostaje nam skorzystać z suwaka odpowiedzialnego za regulację barwy i nasycenia. Ponadto, mimo że w omawianym programie udostępniono opcję przycinania obrazów, nie znajdziemy w nim narzędzia pozwalającego tworzyć zaznaczenia. W Aperture pojawiły się następujące opcje umożliwiające dokonywanie zmian w wyglądzie zdjęć: • opcja RAW Fine Tuning z funkcjami Boost, Sharpening, Color Blur; • suwaki Exposure, Brightness, Saturation, Contrast;
138
|
Rozdział 3. Z aparatu do internetu
Rysunek 3.42. Katalog z przykładami do książki przeglądany w Aperture. Jedna z fotografii jest edytowana za pomocą narzędzia Levels • panele kontrolne funkcji Levels, Shadows, Highlight; • opcja White Balance; • typowe suwaki Hue, Saturation, Luminance; • filtry odszumiający i redukujący efekt czerwonych oczu; • opcja korekcji punktowej; • mieszanie kolorów dla obrazów monochromatycznych.
Zwracam uwagę Czytelnika na to, co może nie jest oczywiste w przypadku pracy z Aperture: po pierwszym uruchomieniu panelu Adjustments Inspector nie wszystkie opcje wymienione na powyższej liście widać. Aby uaktywnić te, które nie są dostępne w panelu (na przykład Monochrome Mixer), należy kliknąć mały znak „plus”, znajdujący się u góry okna Adjustments Inspector lub HUD. Po wykonaniu tej czynności brakujące funkcje pojawią się na edytowanym zdjęciu. Zakończywszy dodawanie do panelu Adjustments Inspector tych funkcji, które uważa się za niezbędne podczas pracy z obrazami, opcję pokazywania wszystkich narzędzi do edycji grafik można po prostu wyłączyć. Funkcja Monochrome Mixer jest mniej więcej odpowiednikiem Miksera kanałów. Składają się na nią trzy suwaki, za pomocą których dokonuje się zmian ustawień kanałów kolorów. Opcja Sepia działa zgodnie z oczekiwaniami — suwakiem reguluje się intensywność działania filtra. Prawdę mówiąc siłą aplikacji Aperture nie jest możliwość edytowania w niej wyglądu obrazów. Dużo ciekawiej prezentują się w niej opcje tworzenia i modyfikowania metadanych. Korzystając z omawianego programu, można dodawać metadane do jednego lub większej liczby zdjęć,
Organizacja i obróbka zbiorów zdjęć
|
139
dowolnie łączyć fotografie w grupy i szybko publikować je w sieci WWW. Wymienione funkcje stanowią niewątpliwą zaletę Aperture, lecz odpowiedzi na pytanie, czy warte są pieniędzy, które trzeba wydać na aplikację, każdy musi udzielić sobie sam.
Lightroom firmy Adobe Muszę przyznać się do tego, że interfejs programu Lightroom uważam za bardziej intuicyjny niż ten, z którym zetknęłam się w Aperture. Może dzieje się tak dlatego, że przez całe lata korzystałam z produktów Adobe i wyrobiłam w sobie Adobe Myślenie 1.0. Po uruchomieniu aplikacji naszym oczom ukazuje się zestaw zakładek podpisanych następująco: Library, Develop, Slideshow, Print i Web. Dzięki temu bardzo łatwo się zorientować, co należy kliknąć, by wykonać zamierzoną czynność. W panelu o nazwie Develop znajdziemy narzędzia, za pomocą których możliwa jest zmiana wyglądu wielu zdjęć naraz. Jednym ze wspomnianych narzędzi jest Auto Tone. Korzystając z niego, możemy skorygować kolorystykę wielu zdjęć jednocześnie. Według mnie każdy program będący menedżerem zdjęć powinien oferować podobną funkcję. Wszak jeśli chcemy publikować w sieci WWW całe zestawy fotografii, powinny one składać się z obrazów tworzących wizualnie spójną całość. Otworzyłam w Lightroom kilka zdjęć zrobionych w Kennedy Space Center, żeby wypróbować na nich narzędzie Auto Tone (rysunek 3.43). Wynik eksperymentu okazał się być średnio zadowalający — niektóre fotografie stały się zbyt jasne, a inne zbyt ciemne, lecz ich dominanta barwna z pewnością została ujednolicona. Krótko mówiąc, opcja Auto Tone nadaje się do poprawiania wyglądu zdjęć, których jasność zamyka się w pewnym niezbyt szerokim przedziale, wymagających korekcji niewielkich niedociągnięć. W każdym innym przypadku lepiej jest ręcznie zmieniać parametry związane z kolorystyką fotografii, stosując metody opisane w tym rozdziale. Lightroom umożliwia nam obserwowanie w czasie rzeczywistym zmian, których dokonujemy podczas edycji zdjęć, i porównywanie wyglądu fotografii przetworzonej z wyglądem fotografii oryginalnej, niezmodyfikowanej. Za pomocą opisywanego programu można również ustawiać punkt bieli obrazów (do opcji tej dostaniemy się, klikając Develop/Presets). Podobnie jak w Aperture, tak i w Lightroom znajdziemy kilka suwaków oraz histogram, na którym widać wszelkie modyfikacje wprowadzone na zdjęciach. Za pomocą suwaków możemy regulować parametry obrazu, takie jak kontrast, poziomy kolorów, ostrość, korekcja zniekształceń soczewkowych, redukcja szumów, a nawet ustawienia aparatu. W Lightroom dostępne są opcje: • opcja regulacji podstawowych parametrów, w skład których wchodzą: balans bieli, czas
ekspozycji i proste ustawienia kolorów; • Tone Curve, odpowiedzialna za ustawienia cieni oraz jasnych miejsc na zdjęciach; • panel HSL/Color/Grayscale Mixer, podobny do tego z Aperture; • Split Toning — opcja umożliwiająca osobne modyfikowanie ustawień barwy i nasycenia dla
cieni i plam światła;
140
|
Rozdział 3. Z aparatu do internetu
Rysunek 3.43. Proces dopasowywania kolorystyki kilku zdjęć z Kennedy Space Center za pomocą funkcji Auto Tone dostępnej w programie Lightroom • opcja Detail, za pomocą której można wyostrzać obraz oraz kontrolować poziom widocznych
Aplikacja Lightroom, podobnie zresztą jak Aperture, dobrze sobie radzi z edycją pojedynczych zdjęć, lecz jej prawdziwa siła leży w możliwości modyfikowania za jej pomocą całych zestawów fotografii. Korzystając z Lightroom, odniosłam wrażenie, że program ten ma być niejako odpowiednikiem trójki spod znaku marki Photoshop, składającej się z aplikacji Bridge, Photoshop i Camera Raw. Przecież za pomocą Bridge możemy edytować metadane całych grup zdjęć, Camera Raw świetnie nadaje się do wprowadzania zmian ustawień parametrów obrazu dla całych galerii fotografii, a sam Photoshop… no cóż, Photoshop został stworzony z myślą o wszystkim, czego nie potrafią dwa programy wymienione wcześniej. Może przemawia przeze mnie zwyczajne skąpstwo, ale naprawdę nie wiem, dlaczego ktoś, kto pracuje w aplikacji Photoshop, miałby dodatkowo kupować sobie Lightroom. Niezależnie od możliwości finansowych ważne jest to, aby każde narzędzie do obróbki grafiki, z którego decydujemy się korzystać, odpowiadało dokładnie naszym potrzebom. Tak oto wracamy do zagadnień poruszanych przeze mnie na początku tego rozdziału: należy zrozumieć, na czym polega proces publikacji zdjęć, od chwili zrobienia ich za pomocą aparatu aż do momentu zamieszczenia w internecie. Organizacja i obróbka zbiorów zdjęć
|
141
Obróbka zdjęć: jeszcze raz o procesie przenoszenia fotografii z aparatu do internetu Posiadam dwa komputery Mac i jeden typu PC. Na nich wszystkich instalowałam oprogramowanie opisane w tym rozdziale. Byłam nieco zaskoczona tym, że aplikacje całkiem nieźle spisywały się w obecności konkurencyjnych programów i nie zdominowały środowiska, w którym je uruchamiałam. Pomijam tu oczywiście typowe dla każdej aplikacji próby stania się domyślną przeglądarką takich czy innych plików. Pointą tego, co napisałam powyżej, jest następujący wniosek: nie trzeba ograniczać się do korzystania z zaledwie jednego narzędzia lub nawet jednego narzędzia danego typu. Jeśli ktoś ma ochotę używać kilku edytorów zdjęć naraz — proszę bardzo, miłej zabawy! Należy jedynie dysponować odpowiednią ilością gotówki i miejsca na dysku twardym komputera. Z drugiej strony starałam się udowodnić Czytelnikowi, że aby móc przygotować zdjęcia do publikacji w sieci WWW, wcale nie trzeba dysponować wieloma programami. W większości wypadków wystarczy mieć do dyspozycji jakąś aplikację do obróbki plików RAW i któryś z typowych edytorów grafiki rastrowej. Istotne są tak naprawdę następujące czynniki: typ narzędzia i zaimplementowane w nim opcje. Zastanówmy się nad oprogramowaniem omówionym w tym rozdziale — jako pierwsze opisałam programy do obróbki plików RAW. Ktoś, kto robi zdjęcia w formacie RAW, może potrzebować lub nie potrzebować dodatkowego narzędzia do ich edycji, w zależności od tego, czy korzysta z edytora obrazów z zaimplementowaną obsługą RAW, czy też nie. Na przykład Paint Shop Pro ma wbudowaną możliwość otwierania fotografii zapisanych do plików RAW, natomiast Photoshop wymaga używania w tym celu dodatkowej aplikacji. Jak wiele zadań powinno się wykonywać w programach do obróbki plików RAW? Na to pytanie nie ma jednoznacznej odpowiedzi. Stopień, w jakim korzystamy z oprogramowania omawianego typu, zależy od tego, na ile jest ono zintegrowane z innymi narzędziami, których używamy, oraz od naszej subiektywnej oceny uzyskiwanych w nim efektów. Jeśli program do obróbki plików RAW stanowi część większego pakietu używanych przez nas aplikacji, będącego produktem jednej firmy, i jednocześnie nie oferuje opcji wprowadzania zmian dla wielu plików naraz, procesy, które daje się przeprowadzać zarówno w nim, jak i w edytorze zdjęć warto przeprowadzać w tym drugim. Przykładem aplikacji przeznaczonej do pracy z fotografiami zapisanymi w formacie RAW, umożliwiającej jednoczesne modyfikowanie wyglądu wielu obrazów, jest Camera RAW firmy Adobe. Po omówieniu kilku popularnych technik modyfikowania wyglądu zdjęć pod kątem ich publikacji w sieci WWW zajęłam się opisem programów innego typu niż aplikacje do obróbki plików RAW — edytorami grafiki rastrowej. Wszystkie edytory, które sprawdziłam, oferują niezbędne minimum funkcji, niemniej jednak nieraz sięgać musiałam po odpowiednie wtyczki i dodatki. Tak czy inaczej, istotne jest to, że w zasadzie za pomocą każdego z programów instalowanych na dysku komputera można osiągnąć zamierzony efekt. Wybór określonego narzędzia do obróbki fotografii zależy więc przede wszystkim od czynników takich jak zasobność portfela, zbieg okoliczności, moc komputera, na którym zamierzamy zainstalować daną aplikację, i osobiste preferencje. Poniżej zamieszczam opis komputerów używanych przeze mnie do pracy.
142
|
Rozdział 3. Z aparatu do internetu
• Na dysku mojego głównego komputera typu Mac zainstalowałam następujące programy:
Photoshop CS3 (wersję standardową, a nie Extended), GIMP 2.4, Graphic Converter (nieopisywany w niniejszej książce) i ImageMagick (jego opis pojawi się w dalszej części książki). • W moim drugim komputerze Mac znaleźć można aplikację iPhoto, będącą częścią pakietu
iLife. Nie zamieściłam w tym rozdziale opisu iPhoto, ponieważ Apple nie udostępnia wersji próbnych swojego oprogramowania. • Na dysku komputera PC, który jest moim głównym narzędziem do obróbki obrazów, zain-
stalowane są programy: Photoshop CS2, GIMP dla Windows, Paint Shop Pro XI, Paint.NET, Photoshop Elements 5.0 oraz Picasa firmy Google (tej aplikacji nie opisałam w niniejszej książce).
Zapewne uważny Czytelnik zwrócił uwagę na to, że w komputerze PC znajduje się nieaktualna wersja aplikacji Photoshop. Cóż, nie ma niczego złego w opuszczaniu niektórych aktualizacji oprogramowania. Prawdopodobnie Photoshop już na zawsze pozostanie najbardziej eksploatowanym przeze mnie edytorem zdjęć, niemniej jednak GIMP bardzo szybko zyskuje w moich oczach, jako że staje się rozbudowanym narzędziem, które w coraz mniejszym stopniu ustępuje produktom Adobe. Odnoszę wrażenie, że Photoshop niebawem straci (jeśli jeszcze nie stracił) zarezerwowane tylko dla niego miejsce w moim sercu. Przejdźmy do kolejnego typu edytorów grafiki opisanych w tej książce, czyli do aplikacji internetowych, za pomocą których można modyfikować wygląd zdjęć. W mojej opinii Picnik oferuje internautom wszystko, czego można by się spodziewać po aplikacji internetowej — w przeciwieństwie do Splashup nie został zaprojektowany tak, aby prezentował się podobnie do programów takich jak Photoshop. Prawda jest taka, że żaden edytor działający bezpośrednio z sieci WWW nigdy nie stanie się dobrą alternatywą dla edytorów przeznaczonych do instalowania na dysku twardym komputera. Z całą pewnością możemy stwierdzić, że za pomocą aplikacji internetowych do obróbki obrazów nie będzie można przetwarzać większych plików ani fotografii zapisanych w formacie RAW. Ponadto programy te nigdy nie zostaną wzbogacone o bardziej skomplikowane algorytmy, bez których nie ma co marzyć nawet o przeprowadzaniu pewnych istotnych modyfikacji wyglądu zdjęć. Oczywiście w trakcie pisania tej książki dowiedziałam się, że firma Adobe chce stworzyć swój własny internetowy edytor obrazów, w którym użytkownik znajdzie większość podstawowych funkcji dostępnych w programie Photoshop. Tym wszystkim, którzy postanowią wypróbować przedstawione przeze mnie metody pracy z obrazami, radzę, by sprawdzili, czy ze wspomnianego narzędzia można już korzystać.
Aplikacje służące do zarządzania plikami graficznymi mogą budzić zainteresowanie, a poza tym bywają bardzo przydatne. Jeżeli kogoś stać na zakup którejś z nich, z pewnością warto zastanowić się nad takim wydatkiem, szczególnie w przypadku, gdy posiada się wielkie zbiory fotografii. Fani firmy Adobe zapewne zdecydują się pozostać wierni ulubionej marce i sięgną po Lightroom, jako że aplikacja ta świetnie współdziała z pozostałymi produktami z rodziny Photoshop, warto jednak pamiętać, że nic nie stoi na przeszkodzie, byśmy używanym przez siebie narzędziom zafundowali czasami zupełnie nowe sąsiedztwo. Tym, którzy sięgną po programy do zarządzania zbiorami fotografii, radzę nie traktować tych narzędzi jak jedynych wartych uwagi edytorów zdjęć. Prawdą jest, że dają one niemałą kontrolę
Obróbka zdjęć: jeszcze raz o procesie przenoszenia fotografii z aparatu do internetu
|
143
nad procesem poprawiania wyglądu obrazów, lecz znacząco ustępują pod tym względem właściwym edytorom. Za ich pomocą nie można maksymalnie uwydatnić wartości fotografii wymagających pewnych poprawek. Według mnie do edytorów internetowych w pewnym sensie należy mieć takie samo podejście, jak do programów będących menedżerami plików graficznych. Kiedy warto korzystać z internetowych aplikacji do obróbki zdjęć? Odpowiedź jest prosta: wtedy, gdy chce się przeprowadzić edycję kilku zdjęć w formacie JPEG, lecz nie dysponuje się dużą ilością wolnego czasu bądź też nie ma się dostępu do zazwyczaj używanego przez siebie edytora grafiki rastrowej. Dobrą okazją do korzystania z edytorów działających bezpośrednio w sieci WWW jest sytuacja, w której znajdujemy się poza domem, na przykład w podróży. Wystarczy wtedy uaktywnić w aparacie fotograficznym opcję zapisywania zdjęć jednocześnie do plików RAW oraz JPEG, by móc, mimo nieobecności w domu, aktualizować swoją stronę WWW. Wygląd fotografii w formacie JPEG przed ich publikacją łatwo i szybko poprawimy za pomocą aplikacji internetowych, natomiast po powrocie z wojaży będziemy mieli dość czasu, by popracować nad wyglądem plików RAW i stworzeniem ostatecznej wersji obrazów zdobiących naszą witrynę. Według mnie używanie uproszczonych narzędzi do edycji obrazów zmniejsza radość z zabawy, jaką jest modyfikowanie wyglądu fotografii. Dobór programów, za pomocą których pozyskujemy zdjęcia z aparatu i przygotowujemy je do publikacji w sieci WWW, nie zależy w gruncie rzeczy ani od cen oprogramowania, ani od wyglądu poszczególnych aplikacji. Tak naprawdę ważne jest, aby czerpać przyjemność z pracy w wybranym przez siebie programie. Czynności takie, jak na przykład zapoznawanie się z efektami nakładania na fotografie różnych filtrów podczas konwertowania zdjęć kolorowych do czarno-białych, to nie obowiązek, lecz świetna zabawa! Nic na to nie poradzę, że wszystkich, którzy z własnej woli sięgają po książkę z dziedziny grafiki internetowej, uważam za ludzi myślących podobnie do mnie. Krótko mówiąc, interesujemy się grafiką w sieci WWW nie dlatego, że musimy, tylko dlatego, że mamy na to ochotę. Teraz, gdy już dysponujemy pięknie prezentującymi się fotografiami (wyostrzonymi, poddanymi działaniu przeróżnych filtrów i o poprawionej kolorystyce), pora pochwalić się nimi w internecie.
144
|
Rozdział 3. Z aparatu do internetu
ROZDZIAŁ 4.
Internet w obrazkach
Gdy zdjęcia wyglądają już jak trzeba, warto pochwalić się nimi w sieci WWW. Edytowanie fotografii to tylko początek zabawy w pokazywanie swoich prac innym; jej kolejnym etapem jest stworzenie odpowiedniej oprawy dla zdjęć. Podobnie, jak to miało miejsce w przypadku procesu edycji fotografii, tak i podczas tworzenia z nich prezentacji do dyspozycji mamy całkiem pokaźną liczbę narzędzi, za pomocą których osiągniemy zamierzony cel. Jeśli zdjęcia zostały wykonane po to, by stanowiły dopełnienie jakiejś historii, można bez problemu wkomponować je w tekst — później napiszę, jak to zrobić. Ponadto pod tekstem (lub obok niego) można umieścić „klatki filmowe” albo nawet odnośnik do pokazu slajdów. Pozostańmy przez chwilę przy temacie pokazu slajdów. Otóż można je tworzyć za pomocą niektórych spośród edytorów grafiki rastrowej (na przykład prezentacje HTML i Flash) oraz wielkiej liczby specjalnie przygotowanych, bardziej lub mniej skomplikowanych, darmowych programów dostępnych w sieci WWW. Pokazy slajdów można pisać również w języku JavaScript — metoda ta jest dość nowoczesna i taka hm… „AJAX-owa”. Jeśli nie chcemy korzystać z pokazów slajdów, możemy ze swoich zdjęć budować poważnie wyglądające galerie. Galerie, zupełnie tak samo jak prezentacje slajdów, można tworzyć za pomocą niektórych edytorów obrazów oraz programów napisanych z myślą o zarządzaniu zasobami fotografii, a także aplikacji działających po stronie serwera. Co więcej, w kodzie strony WWW można umieścić krótki kod, który sprawi, że nasze zdjęcie będzie wyświetlane jako część nagłówka, paska bocznego albo tła, za każdym razem, gdy ktoś tę stronę odwiedzi. Niezależnie od tego, jaką metodę prezentacji zdjęć wybierzemy, jedna kwestia pozostaje niezmienna: jaki powinien być rozmiar publikowanej fotografii? Ten problem wiąże się z kolei z zagadnieniem miniatur zdjęć. Miniatury to coś więcej niż tylko pomniejszone fotografie — mogą one stać się metodą zachęcania internautów do obejrzenia zawartości galerii lub nawet same w sobie stanowić pewien unikalny środek przekazu.
Sztuka tworzenia miniatur o odpowiedniej wielkości Sądzę, że 90% miniatur zdjęć publikowanych w sieci WWW tworzonych jest automatycznie podczas umieszczania fotografii na stronach internetowych za pomocą takiego czy innego programu. Miniaturki wykonane automatycznie zazwyczaj wyglądają dobrze i nie można im niczego zarzucić, niemniej jednak unikając ręcznego ich tworzenia, zwyczajnie nie doceniamy tkwiącego w nich potencjału. 145
Mianem miniatury zdjęcia określa się jego mniejszą wersję, niekiedy zoptymalizowaną pod kątem prawidłowego wyświetlania i zazwyczaj będącą odsyłaczem pełnowymiarowej fotografii. Miniatury tworzy się po to, by osoba przeglądająca stronę WWW nie musiała zbyt długo czekać na załadowanie się obrazów o znacznych rozmiarach. Ponadto trzeba brać pod uwagę, że zdjęcia pełnowymiarowe mogą zajmować zbyt wiele miejsca na stronie, jeśli chcieć je wyświetlić wszystkie naraz. Miniatury spełniają niekiedy — oprócz wyżej wymienionych — dodatkowe funkcje. Po pierwsze można za ich pośrednictwem zaproponować ludziom oglądającym naszą stronę zupełnie nowe spojrzenie na przedstawione przez nas fotografie, po drugie zaś pozwalają stworzyć coś interesującego, coś koncepcyjnie znacznie odbiegającego od oryginalnych zdjęć. Rozważmy przykład wzięty z innej dziedziny życia, w której rozmiar ma znaczenie: jedzenie i jego wygląd. Chyba każdy przyzna mi rację, że nie ma to, jak zasiąść do pieczonego kurczaka wielkości małej ciężarówki albo wielkiego talerza spaghetti (ewentualnie do pieczeni nałożonej na talerz pełen przysmażonych na złoto ziemniaków), jednakże jednocześnie nie sądzę, abym znalazła wielu przeciwników przekąsek, które zdarza nam się zajadać w trakcie rozmaitych przyjęć, na przykład ślicznych krakersików srebrzących się łososiem czy niewielkich tarteletek z gorącymi grzybami. Istnieją restauracje serwujące posiłki składające się z serii niewielkich poczęstunków podawanych jeden za drugim. Taka metoda serwowania posiłków pozwala klientowi lokalu zarówno zachwycać się różnorodnością smaków, jak i cieszyć oko wyglądem zamówionych potraw. W przerwach między spożywaniem kolejnych dań goście częstowani są przez kelnerów przystawkami amuse-bouche przygotowanymi przez szefa kuchni na dany dzień. Podawanie owych przystawek obala mit, jakoby jedzenie smakowało zawsze tak samo niezależnie od ilości, w jakich się je serwuje. W swoim artykule dla pisma New York Times zatytułowanym „Tiny Come-Ons, Plain and Fancy” Melissa Clark napisała: „Niemal wszystko, co jest niewielkie, smaczne i zarazem wizualnie estetyczne, można określić mianem amuse-bouche”. Fotografie i ich miniaturki można potraktować jak swoisty odpowiednik posiłków i smakowitych ciekawostek, przekąsek, amuse-bouche ożywiających stronę WWW. Przykłady przedstawione w tym rozdziale wykonałam za pomocą programów Photoshop CS3 oraz GIMP, ale opisane tu przeze mnie czynności można powtórzyć również w pozostałych, instalowanych na dysku komputera edytorach grafiki rastrowej, opisanych w rozdziale 3. Jeśli tylko zajdzie taka potrzeba, podam instrukcje dotyczące „ręcznego” uzyskania takiego czy innego efektu graficznego.
Zmienianie wymiarów obrazu, ponowne próbkowanie, skalowanie Chyba żaden czynnik nie różnicuje zdjęć na te, które nadają się do publikacji w sieci WWW, oraz na takie, które można drukować na papierze, w równym stopniu, co ich rozmiar. W przypadku zdjęć umieszczanych na stronach internetowych można mówić o jednym poważnym ograniczeniu, jakim są wymiary grafiki mierzone w pikselach. Drukowanie fotografii to z kolei proces wysoce zależny od parametru obrazów zwanego rozdzielczością. Wynika to z faktu, że drukarki (w przeciwieństwie do monitorów, odbiorników telewizyjnych itd.) same potrafią odpowiednio przeliczać wymiary obrazów podawane w pikselach. Zachodzi w tym przypadku prosta prawidłowość: im wyższa jest rozdzielczość danego zdjęcia, tym lepszy wydruk można na jego bazie uzyskać.
146
|
Rozdział 4. Internet w obrazkach
Patrząc na okno dialogowe opcji Rozmiar obrazu w programie Photoshop, zobaczymy, że jest ono podzielone na trzy rozróżnialne części. W górnej części możemy regulować wymiary zdjęcia w pikselach, co interesuje nas zawsze wtedy, gdy zamierzamy zdjęcie umieścić w internecie. Środkowy fragment omawianego okienka dialogowego to opcja Rozmiar dokumentu, której ustawienia są istotne podczas wykonywania wydruku fotografii. Ostatnie, znajdujące się najniżej pole zawiera ustawienia wpływające zarówno na jakość przeskalowywania wymiarów obrazu, jak i na efekt zmieniania jego rozdzialczości. Opcja Skaluj style staje się ważna, gdy do warstw zastosowano style, na przykład cień rzucany przez warstwę, natomiast Zachowaj proporcje to ustawienie, którego odpowiednik znajdziemy w niemal każdym edytorze obrazów — dzięki niemu możemy zmienić jeden z wymiarów przeskalowywanego obrazu (wysokość bądź szerokość), a drugi zostanie dopasowany do niego automatycznie z zachowaniem proporcji grafiki. Oczywiście można regulować wyłącznie wysokość lub szerokość zdjęcia — wystarczy odznaczyć opcję Zachowaj proporcje. Ostatnią opcją widoczną w oknie dialogowym Rozmiar dokumentu, również dostępną w większości edytorów grafiki rastrowej, jest ustawienie umożliwiające włączenie bądź wyłączenie ponownego próbkowania obrazu. Ponowne próbkowanie wykonuje się za pomocą algorytmu, który przeprowadza proces interpolacji obrazu podczas zmieniania jego rozmiaru. Niektóre aplikacje do obróbki grafiki pozwalają na korzystanie z zaledwie jednego algorytmu, inne zaś (na przykład Photoshop) oferują większy wybór algorytmów. W większości edytorów spotkamy się z interpolacją dwusześcienną (ang. bicubic), ponieważ zapewnia ona otrzymywanie najpłynniejszych gradientów barw na zdjęciach. Inne algorytmy działają lepiej w przypadku grafik, na których widnieją ostre, wyraźne krawędzie, czyli na przykład ilustracji. Warto poświęcić trochę czasu na przyjrzenie się efektom działania rozmaitych algorytmów ponownego próbkowania obrazu i wybrać taki, który wydaje się działać najlepiej. Z opcji ponownego próbkowania obrazu korzysta się podczas przygotowywania zdjęć do publikacji w sieci WWW, ale wyłącza się ją przy drukowaniu obrazów na papierze.
Czytelnik nie powinien mieć trudności ze znalezieniem aplikacji do tworzenia miniatur dla całych zestawów zdjęć, umożliwiającej korzystanie z opcji ponownego próbkowania obrazu. Niektóre programy pozwalają nawet wybrać algorytm, za pomocą którego przeprowadzony zostanie proces interpolacji. W ImageMagick, omówionym nieco później w tej książce, zaimplementowano kilka różnych metod ponownego próbkowania obrazu — dobór właściwej metody odbywa się w oparciu o format przekształcanego pliku oraz to, czy grafikę zamierzamy powiększyć, czy też zmniejszyć. Odchodząc nieco od tematu algorytmów ponownego próbkowania, muszę stwierdzić, że z całą pewnością nie warto „zmieniać wymiarów” obrazów poprzez zmniejszanie ich za pomocą znacznika img lub atrybutów spotykanych w CSS. Po pierwsze działanie takie nie prowadzi w żaden sposób do ograniczenia wykorzystania pasma przesyłu danych, ponieważ ciągle mamy do czynienia z tym samym, nieprzetworzonym obrazkiem, a po drugie przeglądarki kiepsko sobie radzą z przeskalowywaniem grafik. Ponadto zmienianie rozmiarów zdjęć za pomocą znacznika i atrybutów sprawia, że dłużej trzeba czekać na ich pokazanie się w oknie przeglądarki. Tak oto przechodzimy do następującej kwestii: jakie powinny być wymiary obrazków umieszczanych na stronach WWW?
Sztuka tworzenia miniatur o odpowiedniej wielkości
|
147
iDopasowywanie Nie istnieje coś takiego, jak odpowiednie wymiary zdjęcia publikowanego w sieci WWW. Rozmiar każdego obrazka zależy od oprogramowania, jakiego używa jego twórca, układu strony internetowej, na której grafika ma zostać umieszczona, wiedzy projektanta na temat ludzi odwiedzających jego witrynę (przepustowość posiadanych przez nich łącz oraz stopień ich cierpliwości), a także od rozdzielczości najczęściej ustawianej w monitorach. Lata temu tworzyło się strony nie szersze niż 640 pikseli. Dziś na takiej stronie zdjęcie przeciętnej wielkości po prostu by się nie zmieściło. Aktualnie zakłada się (jeśli jest się konserwatystą), że witryny przeglądane są najczęściej w rozdzielczości 800×600. W statystykach prowadzonych przez W3 Schools (http://www.w3schools.com) czytamy, że w 54% monitorów, za pomocą których przeglądane są witryny internetowe, ustawiono rozdzielczość 1024×768, 26% pracuje w rozdzielczości większej od wymienionej, a zaledwie 14% wyświetla obraz w rozdzielczości 800×600; na temat 6% monitorów brak jest jakichkolwiek informacji. Oczywiście statystyki te dotyczą odwiedzin internautów w serwisie W3 Schools — w przypadku innych stron WWW wyniki badań mogłyby okazać się inne. Niezależnie od zastosowanego układu strony w obrębie witryn możemy umieszczać mniejsze wersje publikowanych obrazów (tzw. miniatury) oraz większe grafiki dla tych, którzy są w stanie (i mają ochotę) się z nimi zapoznać. Rozmiary miniatur bywają różne. Wielkość miniaturek zależy od tego, czy mają być one zagnieżdżone w tekście, czy też nie. Na swoich stronach zwykłam umieszczać dwa rodzaje miniatur: o rozmiarach od 400 do 600 pikseli oraz dużo mniejsze — nie większe niż 50 pikseli. Pierwszy typ miniatur pojawia się wszędzie tam, gdzie nie ma tekstu, zaś mniejsze miniatury służą do okraszania artykułów, pisemnych wypowiedzi itd. Wielkość miniatur zależy przede wszystkim od ich zastosowania.
Urządzenia przenośne a rozmiary obrazów Rozmiary, o których wspomniałam do tej pory, powinny okazać się odpowiednie dla obrazów wyświetlanych na większości ekranów monitorów komputerowych, ale co począć w sytuacji osób otwierających strony internetowe za pomocą telefonów komórkowych i innych niewielkich urządzeń przenośnych? W rozdziale 3., w podrozdziale zatytułowanym „Adobe Photoshop CS3 PL”, Czytelnik mógł zobaczyć, jak prezentują się zdjęcia oglądane na ekraniku telefonu komórkowego — trudno powiedzieć, że wyglądają ładnie. Średnia szerokość wyświetlaczy montowanych w urządzeniach przenośnych nie przekracza 120 pikseli. Taka wielkość ekranu naprawdę daje niewielkie możliwości w zakresie wyświetlania fotografii. Podziwiam wszystkich tych, którzy decydują się eksplorować sieć WWW za pomocą urządzeń nie większych niż tabliczki czekolady produkowane z myślą o ludziach odchudzających się. Tak bardzo ich podziwiam, że w trakcie projektowania stron WWW tworzę arkusze stylów specjalnie przeznaczone dla urządzeń przenośnych. Mianem arkusza stylów dla urządzeń przenośnych określa się plik typu CSS, który jest ładowany tylko wtedy, gdy dana witryna zostaje otwarta w urządzeniu przenośnym. Odnośnik do wspomnianego arkusza stylów wygląda tak:
148
|
Rozdział 4. Internet w obrazkach
W samym arkuszu stylów problem rozmiaru obrazów wyświetlanych na ekranikach urządzeń przenośnych rozwiązuję, korzystając z reguły: img { display: none }
Dla większości swoich stron WWW po prostu wyłączam wyświetlanie obrazów w urządzeniach przenośnych. Dzięki temu właściciele owych urządzeń mają łatwy dostęp do tekstów znajdujących się w obrębie witryn. Takie podejście do kwestii wyświetlania stron na ekranach małych urządzeń pozwala również niejako zaoszczędzić pasmo przesyłu danych, co z punktu widzenia ich użytkowników nie jest bez znaczenia, jako że urządzenia przenośne niekiedy narzucają ograniczenia w zakresie przepustowości łącz internetowych. Napisałam wcześniej, że lepiej nie zmieniać rozmiarów obrazów za pomocą CSS, niemniej jednak działanie takie jest jedną z metod radzenia sobie z problemem wyświetlania stron na ekranach urządzeń przenośnych, w szczególności zaś stron, na których znajdują się miniatury zdjęć. Aby ujednolicić wymiary miniaturek różnej wielkości i zadbać o to, aby szerokość żadnej z nich nie wynosiła więcej niż 50 pikseli, wystarczy zapisać regułę: img { max-width: 50px }
Cecha max-width pozwala określić maksymalną szerokość wyświetlanego obrazu i jednocześnie w żaden sposób nie wpływa na wygląd grafik, których szerokość nie przekracza jej wartości. Większość przeglądarek (wyłączając z tego grona Internet Explorer 6.x) i niemało urządzeń przenośnych poprawnie interpretuje zapis max-width. Jeśli jednak komuś to nie wystarczy, można ustalić stałą szerokość obrazów: img { width: 50px }
Mimo że stosowanie podanych powyżej reguł CSS nie pomaga w rozwiązywaniu problemów związanych z przepustowością łącza i wyświetlaniem obrazków zajmujących znaczną ilość miejsca dyskowego oraz z całą pewnością nie jest dobrym sposobem kontrolowania sposobu wyświetlania grafik na stronach WWW, owe reguły okazują się przydatne, gdy pragniemy zadbać o to, by witryna wyglądała jak należy na ekranach większości urządzeń przenośnych. Każdy, kto chce zobaczyć, jak jego strona WWW prezentuje się po otwarciu w urządzeniu przenośnym, może skorzystać z wbudowanego w przeglądarce Opera „emulatora urządzenia przenośnego” (opcja Widok/Mały ekran). Na rysunku 4.1 widać przykładową witrynę, którą otworzyłam, korzystając ze wspomnianej wyżej opcji, w oknie przeglądarki Opera zainstalowanej na dysku mojego laptopa. Opera umożliwia włączanie i wyłączanie wyświetlania obrazków umieszczonych na przeglądanej stronie WWW, ale opcja ta nie działa w przypadku witryny uwiecznionej na przedstawionym wyżej rysunku, ponieważ w jej przypadku wyświetlanie grafik na ekranach urządzeń przenośnych jest regulowane przez odpowiedni plik CSS. Innym sposobem kontrolowania rozmiarów obrazków zamieszczanych na stronach internetowych jest posługiwanie się skryptami JavaScript. Niestety, metoda ta sprawia niemało problemów podczas przeglądania witryn za pomocą urządzeń przenośnych. Niewątpliwą zaletą języka JavaScript jest to, że daje nam on możliwość sprawdzenia wymiarów okna, w którym otwarto stronę WWW, a także określenia typu użytego do jej otwarcia urządzenia. Trzeba jednak pamiętać, że uzależnianie jakości działania witryny od skryptów nie jest najszczęśliwszym rozwiązaniem, zwłaszcza jeśli chodzi tylko o wyświetlanie obrazków (korzystanie ze skryptów i tak nie zagwarantuje poprawnego wyświetlania grafik). Wiele urządzeń przenośnych nie radzi sobie z obsługą skryptów zamieszczonych w kodzie stron WWW.
Sztuka tworzenia miniatur o odpowiedniej wielkości
|
149
Rysunek 4.1. Strona internetowa z arkuszem stylów CSS dla urządzeń przenośnych, otwarta w przeglądarce Opera z ustawioną opcją widoku Mały ekran
Do problemu wyświetlania obrazów można podejść jeszcze inaczej. Dokonywania zmian w wyglądzie strony WWW lub umieszczonych na niej obrazów za pomocą skryptów wykonywanych po stronie klienta można uniknąć. Wystarczy, używając do tego celu aplikacji działającej po stronie serwera, wysyłać odpowiednie zapytania do urządzeń, w których otwierana jest witryna, a następnie, posługując się kodami otrzymywanymi od klientów użytkowników, przekierowywać, w razie potrzeby, żądania wyświetlenia grafik do grafik przygotowanych specjalnie z myślą o przeglądaniu ich w urządzeniach przenośnych. Opisana tu metoda byłaby świetnym rozwiązaniem, gdyby nie fakt, że nie we wszystkich telefonach komórkowych instalowane są właściwie działające klienty użytkowników. Firma Apple dodatkowo skomplikowała kwestię wyświetlania grafiki na ekranach urządzeń przenośnych, wypuszczając na rynek urządzenia typu iPhone i iPod, pozwalające na łączenie się z internetem, lecz działające niepodobnie do innych tego typu gadżetów elektronicznych (nowe produkty Apple ignorują arkusze stylów przeznaczone dla urządzeń przenośnych). Wygląd strony WWW otwieranej za pomocą urządzeń z rodzin iPhone i iPod można regulować w jeden tylko sposób: możemy ustalić rozmiar fragmentu witryny wyświetlanego na ekranie
150
|
Rozdział 4. Internet w obrazkach
urządzenia. Przeskalowywanie strony WWW w tym wypadku to nic innego, jak zmniejszanie bądź zwiększanie marginesów oraz odstępów między jej elementami.
Urządzenia iPhone oraz iPod zmniejszają całe witryny tak, by mieściły się one na wyświetlaczu. Strony WWW przeglądane na przykład za pomocą telefonu iPhone można powiększyć, wykonując odpowiedni ruch przypominający szczypanie lub korzystając z zaimplementowanej w urządzeniu klawiatury dotykowej. Każdy, kto chce zobaczyć, jak stworzona przez niego witryna prezentowałaby się na ekranie telefonu iPhone, ustawionego pionowo lub poziomo (strony WWW przeglądać można bowiem na dwa wymienione sposoby), powinien zainteresować się emulatorem iPhoney udostępnionym przez firmę Marketcircle (rysunek 4.2). Emulator telefonu iPhone różni się od samego urządzenia tylko tym, że nie jest sterowany dotykowo.
Rysunek 4.2. Strona internetowa ze zdjęciem, otwarta w emulatorze iPhoney Emulator iPhoney można pobrać z witryny http://www.marketcircle.com/iphoney/. Emulator można uruchomić tylko w systemie operacyjnym Mac OS X.
Pora przejść do omówienia ostatniego z zagadnień związanych z „dopasowywaniem” rozmiarów obrazów do rozmaitych warunków. Uważam, że warto poświęcić nieco uwagi technologii, która w przyszłości może mieć znaczący wpływ na oglądanie obrazów za pomocą przeglądarek internetowych.
Seam Carving Gdy pisałam tę książkę, światem fotografii wstrząsnęły pojawiające się na przeróżnych stronach WWW pogłoski o nowym algorytmie, mającym zrewolucjonizować proces modyfikowania wymiarów grafik. Tajemniczy algorytm, wymyślony przez dr. Ariela Shamira oraz Shaia Avidana pracujących dla Efi Arazi School of Computer Science, nosi nazwę Seam Carving1 1
Określenie to można tłumaczyć jako „wykrajanie łączników” — przyp. tłum.
Sztuka tworzenia miniatur o odpowiedniej wielkości
|
151
i działa w następujący sposób: analizuje zdjęcie w pionie i w poziomie, wyszukując na nim ścieżki o „najmniejszej energii”. Na podstawie wiedzy o ścieżkach wyodrębnia się na fotografii miejsca, które mogą ulec usunięciu (jeśli chce się fotografię zmniejszyć) lub powiększeniu (gdy pragnie się zwiększyć rozmiar fotografii) bez widocznego pogorszenia jej wyglądu. Pod adresem http://www.faculty.idc.ac.il/arik/IMRet-All.mov dostępny jest materiał wideo dotyczący omawianego algorytmu. Dokumentację, w której opisano metodę skalowania obrazu, można ściągnąć, korzystając z odnośnika: http://www.faculty.idc.ac.il/arik/imret.pdf.
Algorytm wydaje się być bardzo interesujący, ale większość fotografów zareagowała dość nerwowo, gdy tylko materiały na jego temat stały się dostępne. Niezadowolenie fotografów dodatkowo wzrosło, kiedy ludzie zaczęli domagać się zaimplementowania algorytmu w przeglądarkach internetowych. Podczas robienia zdjęcia zazwyczaj mamy pełną świadomość tego, że pojawią się na nim pozornie „mało energetyczne” plamy. Dla fotografa odpowiednia ilość bardzo jasnej przestrzeni stanowi podkreślenie natury krystalicznie białego śniegu, natomiast algorytm uznaje ową przestrzeń za zbędną część zdjęcia. Twórcy rewolucyjnego algorytmu, tłumacząc koncepcję skalowania (ang. re-targeting), posłużyli się przykładem tekstu umieszczonego na stronie WWW. Jeśli zaczniemy zmniejszać okno przeglądarki, w którym otworzyliśmy witrynę z tekstem (mowa tu o witrynie bez ustalonej stałej szerokości), zobaczymy, że poszczególne słowa zbliżają się do siebie, a potem spychane są coraz niżej w dół strony. Niby dlaczego nie mielibyśmy zmieniać wymiarów fotografii w podobny sposób? Problem polega na tym, że zmiana wielkości strony WWW powodująca „spadanie” słów do niższych linijek zupełnie nie wpływa na zawarty w tekście przekaz ani nie skutkuje, na przykład, wycięciem z tekstu elementów łączących poszczególne jego partie. Mówiąc inaczej, zmniejszanie okna przeglądarki nie powoduje usunięcia ze zdań wszystkich spójników, dajmy na to wszystkich „oraz”.
Sztuka kreatywnego tworzenia miniatur Większość miniatur to po prostu mniejsze wersje oryginalnych zdjęć. Zakłada się, że miniatury takie nie będą obciążać łącz ani zajmować zbyt wiele miejsca na dysku twardym, zarazem jednak z pewnością powinny wyglądać na tyle atrakcyjnie, by zachęcić osoby przeglądające stronę WWW, na której je umieszczono, do zapoznania się z pełnowymiarowymi fotografiami. Miniaturki spełniające powyższe wymagania można tworzyć za pomocą wszystkich opisanych w dalszej części tego rozdziału aplikacji służących do łączenia zestawów zdjęć w atrakcyjnie prezentujące się galerie. W większości przypadków ich jakość okaże się jak najbardziej zadowalająca. W większości przypadków, ale nie zawsze. Czasami, jeśli celem jest umieszczenie zdjęcia na stronie WWW lub własnoręczne utworzenie galerii tematycznej, warto zrezygnować z miniatur generowanych automatycznie i w zamian spróbować zrobić coś nowego, niepowtarzalnego.
152
|
Rozdział 4. Internet w obrazkach
Jak dodać cień Nie zawsze miniatury, które zamierzamy wykorzystać na naszej stronie WWW, muszą być proste i płaskie. Warto pokusić się o dodanie do nich cienia, który sprawi, że będą wyglądały, jak gdyby „wystawały” z płaszczyzny witryny. Cień utworzyć można w niemal każdym edytorze obrazów, czy to korzystając z odpowiednich wtyczek, czy też posługując się specjalnymi funkcjami lub nakładając na warstwy określone efekty. W programie Photoshop można ustawiać różne style dla warstw. Ustawienie któregoś ze stylów powoduje uzyskanie konkretnego efektu związanego z wyglądem krawędzi edytowanej warstwy (na przykład nietypowy widok krawędzi warstwy albo cień rzucany przez warstwę). Aby dodać jakiś styl warstwy do otwartego obrazka, najpierw należy jego tło przemienić w warstwę, oczywiście jeśli nie zrobiło się tego wcześniej. W tym celu wystarczy dwa razy kliknąć warstwę Tło w oknie zarządzania warstwami i zgodzić się na utworzenie warstwy o nazwie domyślnie zaproponowanej przez aplikację. Następnym krokiem jest zwiększenie wymiarów kanwy — należy pozyskać miejsce na cień rzucany przez uprzednio utworzoną warstwę. Okno dialogowe, w którym reguluje się rozmiary kanwy, znajduje się w rozwijalnym menu Obraz (Obraz/Rozmiar obszaru roboczego). Na tym etapie pracy nad wyglądem obrazka nie pozostaje już nic innego, jak tylko rozwinąć menu Warstwa/Styl warstwy, a następnie wybrać z niego opcję Cień lub dowolny inny efekt. W oknie opcji funkcji Cień (rysunek 4.3) można ustawić kąt padania światła (ustawienie oświetlenia), wartość przesunięcia cienia (chodzi o przesunięcie cienia w poziomie lub w pionie względem warstwy, przez którą jest rzucany), kolor cienia, a także jego przezroczystość oraz szerokość. Jeśli tworzymy naprawdę małe miniatury, dołączone do nich cienie nie powinny być zbyt rozległe. Ponadto, podczas pracy nad serią miniaturek, które mają pojawić się na tej samej stronie WWW, warto zadbać o to, by każda z miniatur została zmodyfikowana identycznie jak pozostałe. W ten sposób otrzymamy spójną galerię obrazków.
Rysunek 4.3. Opcja Cień w programie Photoshop Sztuka kreatywnego tworzenia miniatur
|
153
Efekt pracy nad wyglądem miniaturki możemy zapisać do pliku PNG (przykładową miniaturkę z częściowo przezroczystym cieniem widać na rysunku 4.4). Działanie takie ma sens, jeśli zależy nam na zachowaniu przezroczystości cienia. Niestety, w przeglądarce Internet Explorer 6.x nie zaimplementowano obsługi kanałów alfa, w związku z czym miniatury zapisane do plików PNG będą wyglądały w niej raczej kiepsko. Jeżeli stronę WWW, na której zamierzamy umieścić miniatury, często przeglądają internauci używający wspomnianej przeglądarki (na przykład, 21% osób odwiedzających moją witrynę to ludzie korzystający z programu Internet Explorer 6.x), najprawdopodobniej rozsądnie będzie spłaszczyć przygotowane obrazki i zapisać je w formacie JPEG.
Rysunek 4.4. Miniatura wykonana w programie Photoshop, z użyciem funkcji Styl warstwy i efektu o nazwie Cień
Jeszcze raz, tym razem w zwartej formie, napiszę, jakie kroki należy wykonać, by stworzyć miniaturkę rzucającą cień.
1. Należy zamienić tło w warstwę. 2. Trzeba zmienić rozmiar obszaru roboczego (kanwy), tak by zmieścił się na nim cień. 3. Z rozwijalnego menu Warstwa/Styl warstwy należy wybrać opcję Cień. 4. Na tym etapie reguluje się parametry efektu typu cień. 5. Ostatnim krokiem jest spłaszczenie zdjęcia i zapisanie go do pliku typu JPEG. W aplikacji GIMP cień uzyskuje się inaczej niż w programie Photoshop — nie trzeba modyfikować warstw, wystarczy skorzystać z funkcji Script-Fu (okno ustawień dla funkcji zostało przedstawione na rysunku 4.5). Co ciekawe, przed użyciem wspomnianej funkcji nie trzeba zmieniać rozmiarów kanwy; Script-Fu automatycznie powiększa obszar roboczy, tak by zmieścił się na nim cień.
154
|
Rozdział 4. Internet w obrazkach
Rysunek 4.5. Opcja Script-Fu: Rzucanie cienia dostępna w programie GIMP
Tworzenie cienia za pomocą programu GIMP różni się od nakładania podobnego efektu w programie Photoshop tym, że ten pierwszy nie pozwala określić ustawienia źródła światła. W zamian możemy podać wartości X i Y przesunięcia cienia. Jeśli ustalone przez nas wartości przesunięcia będą dodatnie, cień przesunie się w prawo i w górę, jeżeli zaś wprowadzimy wartości ujemne, cień padnie po lewej stronie miniatury i pod nią. W aplikacjach innych niż GIMP i Photoshop również można uzyskać efekt cienia rzucanego przez obrazek. Internet jest doskonałym źródłem informacji na ten temat — wystarczy wpisać w okienku wyszukiwania wyszukiwarki nazwę używanego edytora i hasło „cień”, a następnie kliknąć Szukaj. Można również pokusić się o własnoręczne stworzenie efektu cienia. Aby domową metodą uzyskać cień w aplikacji oferującej opcję pracy z warstwami (przecież wszyscy korzystamy z takich właśnie programów), trzeba najpierw zwiększyć rozmiar kanwy, na którą nałożony został edytowany obrazek. Dzięki temu zyskamy miejsce niezbędne na cień. Następnie należy utworzyć drugą warstwę (przezroczystą) i narysować na niej prostokąt o wymiarach edytowanej miniaturki. Prostokąt ten ostatecznie trzeba wypełnić barwą, która stanie się kolorem cienia (zazwyczaj jest to czerń). Kolejny krok to przesunięcie prostokąta tak, by znalazł się w miejscu, w którym powinien być „rzucany” cień. Dobrze jest zacząć od lokalizacji opisanej następującymi parametrami: 8 pikseli w prawo od miniatury i 8 pikseli pod nią. Po znalezieniu właściwego położenia dla prostokąta należy nałożyć na niego odpowiedni filtr, za pomocą którego można uzyskać efekt rozmycia gaussowskiego. Wartością startową dla rozmycia powinna być liczba 15, od której zalecałabym rozpocząć eksperymenty ze stosowaniem filtra. Po przeprowadzeniu kilku prób dla różnych wartości rozmycia i uzyskaniu zadowalającego efektu mamy cień, który jest równie dobry, a może nawet lepszy, niż cienie generowane automatycznie w różnych edytorach. Na rysunku 4.6 widać tę samą miniaturkę, do której dodałam dwa różne cienie. Obrazek widoczny po lewej stronie został zmodyfikowany za pomocą funkcji Script-Fu dostępnej w programie GIMP. Drugą z miniatur wzbogaciłam o cień wykonany zgodnie z podanym wyżej opisem.
Sztuka kreatywnego tworzenia miniatur
|
155
Rysunek 4.6. Porównanie dwóch efektów typu cień: po lewej widać cień wygenerowany automatycznie, po prawej zaś uzyskany ręcznie
Poniżej zamieszczam w punktach opis czynności, które należy wykonać, by własnoręcznie utworzyć efekt cienia rzucanego przez obraz.
1. W pierwszej kolejności trzeba zwiększyć rozmiar kanwy, aby zmieścił się na niej cień. 2. Należy utworzyć nową, przezroczystą warstwę. 3. Na nowej warstwie należy narysować prostokąt wielkości odpowiadającej wymiarom edytowanej miniaturki.
4. Uprzednio utworzony prostokąt trzeba wypełnić kolorem cienia (najczęściej tworzy się czarne cienie).
5. Otrzymany w poprzednim kroku cień należy przesunąć w górę lub w dół, w prawo albo w lewo po to, by umieścić go we właściwym miejscu.
6. Na warstwę z cieniem trzeba nałożyć filtr powodujący rozmycie gaussowskie. 7. Ostatnią czynnością, którą trzeba wykonać, jest umieszczenie warstwy z cieniem pod warstwą zawierającą miniaturę.
Miniatury powycinane w różne kształty Nie wszystkie miniatury muszą być prostokątne. Warto niekiedy rozważyć „wycinanie” z oryginalnych grafik miniatur różnych kształtów. Oczywistym jest, że aby utworzyć takie właśnie „miniatury-wycinanki”, nie wystarczy zmniejszyć oryginalnego zdjęcia, lecz trzeba wybrać jego odpowiednią część, która stanie się miniaturką. Z dużych obrazów wykrajać możemy zupełnie dowolne kształty. Ja omówię dwa typy miniatur: miniaturki owal i „plasterki”. Owalne miniatury dobrze tworzy się tylko na bazie niektórych obrazów. Istnieją zdjęcia, których narożniki są zbyt ważne, by można je było po prostu odciąć i wyrzucić (w kształcie owalnym nie uda się zachować rogów przerabianej grafiki). Niemniej jednak zaskakuje fakt, jak wiele tematów daje się świetnie przedstawiać za pomocą owalnych obrazków (między innymi osiągnięcia cywilizacji, zwierzęta, ludzie, kwiaty). Owalne miniatury tworzy się bardzo łatwo — wystarczy wykroić z oryginalnego obrazka odpowiedni kształt. Odkryłam, że owalne obrazy wyglądają lepiej po zmodyfikowaniu ich filtrami, dzięki którym wydają się być bardziej trójwymiarowe. Cień nie byłby zły, ale w tym 156
|
Rozdział 4. Internet w obrazkach
przypadku lepiej sprawdzi się efekt płaskorzeźby. Owalne obrazki przedstawiające na przykład osiągnięcia cywilizacyjne ludzkości czy wytwory przemysłu prezentują się szczególnie dobrze po nałożeniu na nie filtra dającego efekt powierzchni pokrytej pęcherzykami lub bąbelkami. Na rysunku 4.7 przedstawiono kilka miniatur zdjęć różnych ptaków. Każda z miniatur ma owalny kształt, a ponadto została wzbogacona o cień oraz wypukłą krawędź. Podobny efekt można bardzo łatwo uzyskać w aplikacji Photoshop: zmieniamy tło w warstwę, wybieramy narzędzie Zaznaczanie eliptyczne (przy tworzeniu kilku miniatur powinno się ustawić na stałe parametry określające wymiary elipsy — w ten sposób otrzymamy zestaw grafik o identycznych kształtach), odwracamy zaznaczenie i usuwamy tło. Po wycięciu odpowiedniego owalu należy rozwinąć menu Warstwa/Styl warstwy i wybrać z niego efekty Cień oraz Faza i płaskorzeźba. Za pomocą wymienionych filtrów uzyskamy miłe dla oka wrażenie trójwymiarowości miniatur.
Rysunek 4.7. Zestaw owalnych miniatur, których wygląd został poprawiony odpowiednimi efektami graficznymi
Sztuka kreatywnego tworzenia miniatur
|
157
Poniżej zamieszczam listę czynności, które należy wykonać, by stworzyć ładne, owalne miniatury.
1. Z tła edytowanego zdjęcia należy zrobić warstwę. 2. Korzystając z narzędzia Zaznaczanie eliptyczne (przy tworzeniu kilku miniatur warto ustawić
stałe parametry dla elipsy zaznaczenia, aby wszystkie miniatury miały dokładnie ten sam kształt), należy, za pomocą klawiatury bądź myszy, wybrać odpowiedni fragment edytowanej fotografii.
3. Trzeba odwrócić zaznaczenie. Wykonuje się to, wybierając opcję Odwrotność z rozwijalnego menu Zaznacz.
4. Zaznaczony obszar trzeba usunąć, wciskając klawisz Delete albo korzystając z opcji Wytnij znajdującej się w menu Edycja.
5. Na tym etapie należy nałożyć na obrazek odpowiednie efekty (Warstwa/Styl warstwy/Cień oraz Warstwa/Styl warstwy/Faza i płaskorzeźba).
6. Trzeba dobrać takie ustawienia dla obydwu efektów, by uzyskać zadowalający efekt.
Identyczne ustawienia warto zastosować w przypadku wszystkich miniatur składających się na jeden zestaw.
7. Należy usunąć nadmiar tła. Robi się to, korzystając z opcji Obraz/Przytnij (wystarczy zgodzić się na zastosowanie przez program ustawień domyślnych opcji).
8. Jeśli chce się, aby zachowana została przezroczystość występująca w obrębie miniatur, należy
je zapisywać do plików typu PNG. Miniatury można również spłaszczać i zapisywać jako JPEG, dbając o to, by kolor widniejącego na nich tła był taki sam jak kolor strony, na której zostaną umieszczone.
Gdy już powycinamy miniatury ze zdjęć, możemy umieścić je na stronie WWW, posługując się tą samą techniką, która sprawdza się w przypadku zagnieżdżania w obrębie witryn obrazków prostokątnych. Przecież w praktyce nie ma różnicy między prostokątami, w które wpisano miniaturki w kształcie elipsy, i miniaturami po prostu prostokątnymi. W dalszej części tego rozdziału opiszę, w jaki sposób owalne miniaturki umieszcza się na własnoręcznie wykonanych stronach-galeriach. Na rysunku 4.8 widać przykładowy układ miniatur w kształcie elipsy (lewa część rysunku) oraz pełnowymiarową fotografię (prawa część rysunku). Rysunek 4.8 odkrywa przed nami dość istotny aspekt tworzenia miniatur-wycinanek: który z fragmentów oryginalnego zdjęcia powinien znaleźć się na miniaturce? W lewym dolnym rogu zestawu miniatur przedstawionego na rysunku 4.8 znajduje się wizerunek dziwacznie wyglądającej ptasiej głowy, z której wystaje kępka piór. Ptak będący właścicielem pióropusza nie jest bynajmniej głównym tematem oryginalnego zdjęcia, na podstawie którego powstała miniatura, co można sprawdzić na rysunku 4.9, niemniej jednak jego „fryzura” przyciąga wzrok i wzbudza ciekawość, w związku z czym stanowi lepszy materiał na miniaturkę niż właściwy obiekt uwieczniony na fotografii. Główny temat zdjęcia ani nawet jego środek nie zawsze najlepiej nadają się do tego, by na ich bazie tworzyć miniaturę. Miniaturki nie tylko stanowią podgląd tego, co możemy zobaczyć na oryginalnej fotografii, lecz także same w sobie służą do przekazywania takich czy innych przesłań. Ponadto powinny zachęcać osoby przeglądające naszą stronę WWW do klikania ich i oglądania pełnowymiarowych zdjęć.
158
|
Rozdział 4. Internet w obrazkach
Rysunek 4.8. Owalne miniatury i otwarte pełnowymiarowe zdjęcie
Rysunek 4.9. Wybieranie odpowiedniego fragmentu zdjęcia, który stanie się miniaturą
Miniatury-wycinanki warto wykonywać zwłaszcza wtedy, gdy oryginalna fotografia po zmniejszeniu wygląda po prostu kiepsko (na przykład zacierają się widoczne na niej detale). Zamiast zmniejszać zdjęcie, lepiej wyciąć z niego fragment stanowiący dobrą zapowiedź całości i na jego bazie stworzyć miniaturę. Nie trzeba wycinać kawałków w kształcie owalu — jeśli ktoś chce, może wykrawać z fotografii prostokąty. Oczywiście nie warto się ograniczać, do dyspozycji mamy bowiem przeróżne formy, na przykład trójkąty oraz inne wielokąty albo kontury elementów układanki lub narzędzi ogrodniczych.
Sztuka kreatywnego tworzenia miniatur
|
159
Innym rodzajem miniatur są „plasterki” — pionowe bądź poziome paski wycięte ze zdjęć. Plasterek może mieć dowolną szerokość oraz przedstawiać praktycznie którąkolwiek część fotografii. Paski bardzo łatwo umieszcza się w obrębie witryn — zazwyczaj ustawia się je niczym kolumny bądź wiersze tabelki, w zależności od tego, czy przedstawiają pionowe, czy też poziome wycinki oryginalnych zdjęć. Plasterki wyglądają szczególnie dobrze wtedy, gdy każdy z nich da się łatwo oddzielić wzrokiem od pozostałych i gdy wszystkie razem tworzą spójną galerię. Na rysunku 4.10 widać pięć miniatur będących fragmentami zdjęć przedstawiających kwiaty (każda miniaturka ma dorysowany cień, dla którego ustawiono wartość parametru oświetlenia równą 90°).
Rysunek 4.10. Miniatury-plasterki utworzone z pięciu zdjęć, na których uwieczniono kwiaty
160
|
Rozdział 4. Internet w obrazkach
Powiększające się miniatury Najprostszą metodą łączenia miniatur z oryginalnymi fotografiami jest tworzenie na ich bazie odnośników hipertekstowych. Kliknięcie takiego odnośnika powoduje otwarcie zdjęcia w nowym oknie przeglądarki. Przedstawione tu rozwiązanie nie jest skomplikowane i sprawdza się w przypadku wszystkich typów urządzeń, za pomocą których może być przeglądana strona WWW. Ponadto nie ma znaczenia, czy ktoś porusza się po witrynie, korzystając z myszy, czy też używając klawiatury. Zwykłe odnośniki całkiem nieźle nadają się do tworzenia galerii (oprogramowanie do projektowania prezentacji obrazów omówię w dalszej części tego rozdziału). Korzystanie z odnośników hipertekstowych jest niezłym rozwiązaniem również w przypadku zdjęć zagnieżdżanych w tekście, które w założeniu da się powiększyć. Oto przykładowa linia kodu pozwalającego na utworzenie odnośnika omawianego typu:
Taki kod, jak ten podany wyżej, bywa niekiedy irytujący. Załóżmy, że czytamy jakiś tekst, w którym zagnieżdżono zdjęcia. Kliknięcie zdjęcia powoduje otwarcie się w używanym przez nas oknie przeglądarki nowej strony WWW, w związku z czym do zapoznawania się z treścią tekstu możemy powrócić dopiero po obejrzeniu oryginalnej wersji interesującej nas fotografii. Trudno taką metodę zapoznawania się z zawartością strony WWW nazwać wygodną. Dlatego też przy tworzeniu witryn internetowych warto dbać o to, by klikanie odnośników powodowało otwieranie się nowych okien przeglądarki lub nowych zakładek w obrębie używanego okna. W tym celu można skorzystać z atrybutu target znacznika a. Tak wygląda kod, w którym znalazł się wspomniany atrybut:
Niestety, nawet to rozwiązanie nie jest najszczęśliwsze, bo zmusza osobę przeglądającą naszą stronę do przełączania okien lub zakładek zawsze wtedy, gdy chce ona jednocześnie oglądać zdjęcia i zapoznawać się z pozostałą zawartością witryny. Istnieje także inny argument przemawiający za tym, by nie korzystać z atrybutu target. Otóż nie jest on prawidłowym składnikiem języka XHTML. Problem ten można rozwiązać za pomocą skryptów JavaScript — skrypty te mogą być wykorzystywane do dodawania omawianego atrybutu do wszystkich znaczników a, co nie jest działaniem nieprawidłowym z punktu widzenia XHTML. Aby uzupełnić znaczniki a atrybutem target za pomocą skryptu, trzeba go napisać tak, żeby analizował cały kod strony, wyszukiwał wspomniane znaczniki, sprawdzał, czy po stronie klienta uaktywniona została opcja obsługi skryptów… No dobrze, mamy tu do czynienia z kolejnym nie najlepszym rozwiązaniem problemu obrazów i witryn internetowych. Moją ulubioną metodą radzenia sobie z kwestią grafik na stronach WWW jest tworzenie dwóch wersji każdej z witryn: wersji z odnośnikami hipertekstowymi dla wszystkich tych, którzy podczas przeglądania stron korzystają tylko z klawiatury bądź przeglądarki z wyłączoną obsługą JavaScript, oraz wersji przeznaczonej dla pozostałej grupy osób odwiedzających moje serwisy, opartej na bibliotekach JavaScript umożliwiających otwieranie obrazków bezpośrednio na stronie. Stworzyłam nawet swoją własną aplikację do powiększania grafik w obrębie witryny — jej kod omówię w dalszej części tej książki. Ponadto istnieją bardzo dobre gotowe biblioteki, które świetnie sobie radzą z podobnymi zadaniami. Korzysta się z nich wyjątkowo łatwo, wystarczy bowiem w kodzie nagłówka strony WWW dopisać zaledwie kilka dodatkowych linijek.
Powiększające się miniatury
|
161
Jedną z aplikacji, o których tu mowa, jest Lightbox2, stworzona przez Lokesha Dhakara. Wszystkie elementy potrzebne do jej działania można znaleźć w folderach przeznaczonych do ściągania na dysk twardy komputera. Aby użyć aplikacji, należy umieścić foldery z jej składnikami na serwerze wraz z plikami witryny oraz dodać podane niżej cztery linijki kodu do sekcji HEAD strony WWW.
Aplikacja korzysta z bibliotek JavaScript o nazwach Prototype i Scriptaculous. Jeśli podczas tworzenia strony użyto którejś z wymienionych bibliotek (lub swojej własnej), należy sprawdzić, czy aplikacja działa z nią prawidłowo. Po dodaniu skryptu do plików witryny powiększanie miniatur trzeba aktywować poprzez dopisanie atrybutu rel="lightbox" we wszystkich znacznikach a zamykających znaczniki typu img. Jeśli poszczególnym zdjęciom chcemy nadać tytuły, możemy wzbogacić znaczniki a o atrybut title="Jakiś tytuł".
Kliknięcie miniatury powoduje pojawienie się na stronie WWW półprzezroczystej nakładki, w której obrębie znajduje się powiększone zdjęcie (rysunek 4.11).
Rysunek 4.11. Zdjęcie otwarte po kliknięciu miniatury — działanie aplikacji Lightbox2
Oprócz Lightbox2 istnieją i inne aplikacje służące do powiększania miniatur zagnieżdżonych na stronach WWW. Niektóre, na przykład Highslide, wyświetlają ciekawe animacje podczas otwierania zdjęć oryginalnych rozmiarów oraz udostępniają opcje przewijania obrazów. W internecie można znaleźć dziesiątki podobnych aplikacji — wystarczy w wyszukiwarce wpisać zapytanie „JavaScript miniatury”.
162
|
Rozdział 4. Internet w obrazkach
Aplikacja Lightbox2 jest dostępna pod adresem http://www.huddletogether.com/projects/ ´lightbox2/. Highslide można pobrać ze strony http://highslide.com/ i używać za darmo do rozbudowywania witryn niekomercyjnych.
Wszystkie efekty, które można zastosować do powiększania miniatur, sprawdzają się równie dobrze w przypadku obrazów zagnieżdżonych w tekście lub umieszczonych pomiędzy dowolnymi elementami strony WWW. Dobrze jest pamiętać o tym, że sposób, w jaki pokazuje się zdjęcie, może być równie znaczący, co jego temat.
Umieszczanie zdjęć na stronach: okraszanie tekstu obrazami Każdy z nas doskonale wie, że w gazetach i magazynach umieszczane są zdjęcia lub inne obrazy przedstawiające opisywane zdarzenia czy miejsca lub uzupełniające przekaz płynący z artykułów. Od bardzo dawna tekst wzbogaca się różnego rodzaju grafikami. Robi się to nie tylko w przypadku poradników i instrukcji obsługi, w celu rozwiązania problemów z opisem takich czy innych zagadnień natury technicznej. Zdjęcia towarzyszące informacjom oraz opowieściom o rozmaitych wydarzeniach nie tylko pomagają określić kontekst słownej wypowiedzi, lecz również dają ich odbiorcom wyobrażenie na temat opisywanych sytuacji. Ludzie pisali obrazkami, zanim stworzyli abstrakcyjne języki i alfabety. Przez te wszystkie lata rozwoju naszej cywilizacji bynajmniej nie przestaliśmy potrzebować wizualnego potwierdzenia faktów zawartych w opowieściach. W różnych pracach pisanych grafiki pojawiają się po to, by przyciągnąć wzrok czytelnika, żeby urozmaicić długie fragmenty tekstu i wreszcie aby delikatnie zaakcentować sedno przekazu płynącego ze słów. Obrazy okraszające dzieła pisane można porównać do przypraw. Wszak to właśnie przyprawy wprowadzają rozróżnienie wśród niezliczonych udanych przepisów kulinarnych na te bardzo dobre i doskonałe. Nawet szalenie popularna seria książek o Harrym Potterze nie została pozbawiona ilustracji — pojawiają się one na początku każdego rozdziału, żeby pomóc nam wyobrazić sobie bohaterów opowieści.
Podstawy umieszczania grafik na stronach WWW Dodawanie zdjęć do fragmentów tekstu nie jest niczym trudnym — wystarczy użyć znacznika img, by w dowolne miejsce w tekście wstawić grafikę. Style CSS natomiast umożliwiają zapisywanie w kodzie strony informacji o tym, jak przeglądarka powinna ustawiać obrazek względem bloków tekstu. Warto również pamiętać o korzystaniu z atrybutu alt znacznika img, ułatwiającego przeglądanie strony wszystkim tym, którzy nie mogą jej po prostu zobaczyć. Znacznik img nie jest znacznikiem blokowym. Na rysunku 4.12 można zobaczyć, w jaki sposób tekst poprzedzony został obrazkiem wstawionym z użyciem prostego znacznika img. Położenie obrazów względem tekstu reguluje się stylami CSS. Za pomocą stylów obrazki „oblewa się” tekstem z prawej lub lewej strony. W istocie, „oblana” tekstem grafika wygląda tak, jak gdyby słowa ją opływały. Ponadto grafiki możemy „wylewać” w obrębie witryny. Jeśli
Umieszczanie zdjęć na stronach: okraszanie tekstu obrazami
|
163
Rysunek 4.12. Zdjęcie jako fragment akapitu, umieszczone w tekście z użyciem domyślnego stylu
wylejemy obrazek z prawej strony, tekst ustawi się przy jego lewej krawędzi, jeżeli zaś zdecydujemy się wylać go z lewej strony, słowami zostanie oblany jego prawy bok. Aby Czytelnik mógł zobaczyć, jak to wszystko działa, poniżej zamieszczam przykładowy kod, w którym znacznik img z odpowiednimi ustawieniami stylów umieszczono bezpośrednio przed znacznikiem wydzielającym akapit tekstu p:
Przy widocznych wyżej ustawieniach odstęp między zawartością znacznika img a tekstem zostanie ustawiony domyślnie. Aby zwiększyć odstęp, należy określić szerokość marginesu otaczającego grafikę. Poniżej widać linię kodu, w której do obrazka dodano margines o szerokości 5 pikseli (efekt działania kodu został przedstawiony na rysunku 4.13):
Rysunek 4.13. Fragment witryny WWW z obrazkiem umieszczonym z lewej strony
164
|
Rozdział 4. Internet w obrazkach
Tekst widoczny na rysunku 4.13 pochodzi ze słynnego generatora Lorem Ipsum, uwielbianego przez projektantów stron internetowych takich jak Czytelnik i ja. Bloków tekstu z Lorem Ipsum używam do testowania wyglądu wszystkich tworzonych przez siebie witryn. W niniejszej książce pojawi się więcej rysunków przedstawiających fragmenty stron WWW z tekstem wygenerowanym za pomocą Lorem Ipsum. Z omawianej usługi można korzystać po wejściu na stronę http://www.lipsum.pl/.
Podany przeze mnie przykładowy kod można by nieco zmodyfikować — umieścić obrazek z prawej strony witryny oraz utworzyć marginesy lewy i górny o szerokości 0 pikseli, a prawy i dolny o szerokości 5 pikseli. Oczywiście w trakcie projektowania strony WWW staramy się ograniczyć korzystanie ze stylów na poziomie znaczników HTML, żeby w przyszłości móc łatwiej i szybciej dokonywać wszelkich zmian w dokumencie. W związku z tym warto zdefiniować klasy z ustawieniami właściwymi dla dwóch umiejscowień obrazka w obrębie witryny: prawego i lewego. Definicje klas zapiszemy w arkuszu stylów. Poniżej zamieszczam przykładowe klasy: img.prawy { float: right; margin: 0 0 5px 5px; } img.lewy { float: left; margin: 0 5px 5px 0; }
Korzystając z klas w CSS, możemy bardzo łatwo dokonywać globalnych modyfikacji ustawień dla wszystkich obrazków umieszczonych w obrębie witryny. Rozwiązanie to świetnie się sprawdza, gdy chcemy szybko zmienić wartości rozmaitych atrybutów odpowiedzialnych m.in. za tła obszarów, wewnątrz których znajdują się grafiki, tworzenie ramek wokół obrazków oraz dodawanie do nich tzw. wewnętrznego marginesu. Oczywiście wcale nie musimy umieszczać obrazków bezpośrednio w tekście. Możemy zapomnieć o oblewaniu grafik tekstem i, na przykład, dbać o to, by miały one szerokość równą szerokości akapitów. Takie podejście do prezentowania obrazów wcale nie oznacza braku kreatywności z naszej strony. Więcej na ten temat napiszę w dalszej części niniejszego rozdziału, na razie jednak chciałabym się skupić na zagadnieniu łączącym kwestie oblewania CSS, zagnieżdżania obrazów w tekście i polecenia przełamania akapitu.
Umiejscawianie obrazów w rzędach Korzystanie z programów służących do automatycznego tworzenia galerii obrazów i pokazów slajdów irytuje mnie z jednego zasadniczego powodu: wygenerowane przez nie fragmenty stron WWW niezmiennie zawierają tabele, za pomocą których zestawom grafik nadaje się określony rozkład w obrębie przestrzeni prezentacji. Dlaczego nie jestem zwolenniczką używania tabel do układania zdjęć w galerie? Przecież korzystając z nich ma się pełną kontrolę nad rozkładem obrazów w obrębie witryny internetowej… Tabele, które znamy z dokumentów HTML, wymyślono po to, byśmy przechowywali w nich dane tablicowe, na przykład jakieś wpisy zapisywane w bazie danych. Tak właśnie tabelki interpretowane są przez aplikacje odczytujące zawartość stron WWW oraz roboty silników
Umieszczanie zdjęć na stronach: okraszanie tekstu obrazami
|
165
wyszukiwarek (oraz inne) skanujące witryny w poszukiwaniu niezbędnych informacji. Wszystkie automaty natrafiające na tabele traktują je jak sposób grupowania określonego typu danych, dlatego też wykorzystywanie tabelek do tworzenia galerii stanowi poważny błąd semantyczny z punktu widzenia składni HTML. Obrazków z całą pewnością nie możemy zaliczyć do danych typu tablicowego. Nawet jeśli nie chcemy zastanawiać się nad kwestią semantyki HTML, powinniśmy zdawać sobie sprawę z tego, że tabele bynajmniej nie są niezbędne do układania grafik w galerie. Wzajemne ustawienie kilku obrazów możemy regulować tą samą techniką, którą posłużyłam się wcześniej, by umieścić zdjęcie wewnątrz bloku tekstu. Na listingu 4.1 widać kod przykładowego dokumentu HTML z trzema niewielkimi obrazkami ustawionymi poziomo jeden za drugim. Aby ułatwić sobie ich zagnieżdżanie w odpowiednim miejscu witryny zawierającej tekst, zamknęłam je wewnątrz znaczników div. Listing 4.1. Trzy grafiki ustawione poziomo jedna za drugą z wykorzystaniem CSS
Zwracam uwagę Czytelnika na to, że wszystkie obrazki ustawiłam po lewej stronie. Każda z grafik została za pomocą stylów zmuszona do układania się możliwie jak najbardziej po lewej stronie i wypychania następujących po niej elementów witryny w prawo. Zdjęcie przedstawiające kardynała znalazło się z prawej strony fotografii, na której widnieje kaczka karolinka, czapli zaś należy szukać na lewo od kaczki. Porządek, w jakim obrazki pojawią się na stronie, będzie w tym wypadku odwrotny do kolejności ich ładowania się w obrębie witryny. Wiersz obrazków kończy się znacznikiem br z wartością "clear:both" atrybutu style. Cecha clear zapobiega ustawianiu kolejnych elementów witryny z prawej i (lub) lewej strony elementu, po którym pojawił się znacznik br z atrybutem style. Cesze clear możemy przypisać jedną z wartości: left, right, both, none (wartość domyślna). Dzięki clear mamy pewność, że miejsce zarezerwowane na określony ciąg obrazków nie zostanie zajęte przez inne elementy witryny (pozostała zawartość strony WWW jest „zrzucana” pod wiersz z obrazkami). Cecha float sprawia, że niektóre elementy witryny nie ustawiają się w zgodnie z panującym w jej obrębie porządkiem. Gdybym skorzystała z cechy float do rozmieszczenia obrazków na stronie WWW i jednocześnie nie posłużyła się prawidłowo własnością clear w znaczniku br, poziome rzędy zdjęć zaczęłyby bardzo brzydko „przepychać się” z występującą po nich zawartością tworzonego przeze mnie dokumentu HTML. Cecha clear pozwala dosłownie czyścić miejsca, w których mają pojawić się kolejne elementy witryny. Za pomocą opisanej wyżej techniki można stworzyć kilka wierszy złożonych z obrazków. Poniżej zamieszczam kod źródłowy, który obrazuje metodę umieszczania na stronie WWW dwóch rzędów grafik. Jak widać, w drugim rzędzie znalazły się te same obrazki co w pierwszym, przy czym zdjęcie kardynała przeniosłam do środka linii, a fotografie kaczki karolinki i czapli zamieniłam miejscami. Efekt działania kodu został przedstawiony na rysunku 4.14. Oto omawiany kod:
166
|
Rozdział 4. Internet w obrazkach
Rysunek 4.14. Fragment strony WWW, na której znajdują się dwa rzędy zdjęć. Odległości między elementami witryny i ogólny ich układ uzyskano za pomocą CSS
Kluczową kwestią podczas korzystania z CSS do tworzenia wierszy z obrazkami jest używanie kontenerów, za pomocą których można ustawiać całkowitą szerokość wierszy, oraz wartości float: left atrybutu style znacznika img (wartość ta ustawia obrazki możliwie jak najbliżej lewej strony witryny). Każdy wiersz grafik kończy się znacznikiem br, wewnątrz którego zobaczyć można cechę clear. Bez tego fragmentu kodu szeregi obrazków nachodziłyby na siebie, ponieważ nic nie ustawiałoby niektórych z nich pod innymi.
Umieszczanie zdjęć na stronach: okraszanie tekstu obrazami
|
167
Zwracam uwagę Czytelnika na fakt, że nie korzystałam z wartości right właściwości float. Nie powinno się tego robić z tej przyczyny, że cecha float powoduje maksymalne możliwe spychanie elementu strony WWW do prawej lub lewej krawędzi tej strony. Obrazki nie zawsze równomiernie wypełniają obszar roboczy (bądź obszar prezentacji) wydzielony w obrębie witryny, jeśli więc postanowimy umieścić je z prawej strony, między ostatnią grafiką (tą, wobec której nie zastosowaliśmy wartości float atrybutu style) a lewym marginesem witryny powstanie brzydka „dziura”. Arkuszy stylów CSS używam nie tylko do zagnieżdżania miniatur na stronach WWW, lecz także wtedy, gdy chcę jakimś większym obrazem złamać monotonię bloku tekstu znacznych rozmiarów. Oczywiście tworzone przez siebie grafiki prezentuję również na inne sposoby, o których więcej napiszę w dalszej części rozdziału.
Sztuka układania zdjęć na stronach Jaka jest różnica między spożywaniem posiłków w domu a stołowaniem się w restauracji? To jasne — w restauracji ktoś za nas przygotowuje jedzenie, a potem sprząta po obiedzie. Nie o to mi jednak chodzi. Istotną różnicą jest sam sposób podawania posiłków. Nawet w tanich restauracjach nierzadko widujemy dania przystrojone natką pietruszki lub nawet plasterkiem jakiegoś owocu. W bardziej ekskluzywnych lokalach umiejętność właściwej prezentacji jedzenia podnosi się do rangi sztuki. Kunszt ten moglibyśmy nazwać sztuką serwowania dań. Jedzenie podaje się na wielu talerzach i półmiskach w atrakcyjnej oprawie nie po to, by doliczyć do rachunku klienta jeszcze kilkadziesiąt złotych lub zaspokoić jego snobistyczny gust. Istnieją praktyczne przyczyny takiego postępowania. Otóż potrawy, które powinny być ciepłe, podaje się na talerzach ogrzanych, zaś te, które najlepiej smakują na zimno, na talerzach schłodzonych. Ponadto dba się o to, by dania, które nie powinny być mieszane, spoczywały na osobnych półmiskach. Po co tyle zachodu? Ludziom prowadzącym dobre restauracje chodzi o to, żeby serwować klientom smaki i aromaty w jak najbardziej kontrolowany sposób (na przykład ciasto czekoladowe polewa się polewą malinową). Niemniej jednak chyba najważniejszym powodem, dla którego kucharze aż tak dbają o wygląd przygotowywanych przez siebie dań, jest chęć zapewnienia spożywającemu posiłek jak najgłębszych doznań wykraczających poza zakres bodźców odbieranych zmysłami smaku i węchu. Fotografie można porównać do potraw. Zbyt często zdarza nam się umieszczać na stronach WWW zdjęcia i nie zwracać uwagi na nic, co wykracza poza dodanie do owych zdjęć ramek lub cieni. Wplatanie fotografii w tekst to nie tylko sposób na uatrakcyjnienie opowiadanej historii, lecz również sposobność do dania upustu swojej kreatywności w dziedzinie przygotowywania obrazów do prezentacji. Rozwój fotografii cyfrowej oraz metod zarządzania dużymi liczbami zdjęć i publikowania obrazów w internecie sprawił, że obserwujemy istny „wyścig zbrojeń”: wygrywa ten, kto umieści w sieci WWW najwięcej zdjęć. Pęd do zapełnienia witryn swoimi zdjęciami odbiera ludziom całą radość, jaką mogliby czerpać z pracy nad wyglądem każdej z wykonanych przez siebie fotografii.
168
|
Rozdział 4. Internet w obrazkach
Wzornik w kształcie drabinki Moje życie kręci się wokół warstw. Narzędzia pozwalające tworzyć i edytować warstwy są chyba najbardziej przydatnymi opcjami spośród tych, które oferują nam programy do obróbki grafiki rastrowej. Korzystając z warstw, możemy tworzyć i zapisywać na dysku twardym komputera wzorniki wielokrotnego użytku. Za każdym razem, gdy chcemy użyć danego wzornika, wystarczy wkleić go w edytowane zdjęcie jako nową warstwę. Wzornik daje się przesuwać i ustawiać na fotografii we wszystkie strony, aż do chwili, gdy będziemy zadowoleni z jego umiejscowienia. Na rysunku 4.15 widać kilka „plakietek” wyciętych z tego samego zdjęcia i umieszczonych w obrębie witryny WWW. Ponieważ plakietki wycinałam z fotografii, korzystając ze wzornika i nie zmieniając ich położenia względem siebie, odległości między nimi odpowiadają odstępom dzielącym je na oryginalnym obrazie.
Rysunek 4.15. „Plakietki” będące elementami tego samego zdjęcia, wykorzystane jako separator dwóch bloków tekstu
Wzornik to po prostu długi prostokąt, w którym wycięto kilka równo oddalonych kwadratów o takich samych wymiarach. Prostokąt ten musi być umieszczony na przezroczystym tle. Aby użyć tak przygotowanego wzornika, należy najpierw otworzyć w edytorze zdjęć obraz, z którego chce się wykroić plakietki, a następnie jego tło zamienić w warstwę. Po wykonaniu opisanych czynności pozostaje tylko skopiować i wkleić wzornik w edytowaną fotografię. Trzeba pamiętać o tym, że wzornik powinien zostać wypełniony kolorem znacząco różniącym się od barw widocznych na zdjęciu (rysunek 4.16). W tym momencie nie pozostaje już nic innego, jak użyć Różdżki (lub innego dostępnego w edytorze obrazów narzędzia do tworzenia zaznaczeń) do „zaznaczenia” wzornika, po czym wzornik po prostu usunąć, uzyskując w ten sposób oddzielone od siebie kawałki fotografii będące plakietkami. Następnie można pozbyć się zbędnej reszty zdjęcia i skorzystać ze stylu warstwy o nazwie Faza i płaskorzeźba, żeby nieco uwypuklić plakietki. Niestety, problemy z obsługą kanałów alfa formatu PNG w przeglądarce Internet Explorer 6.x musimy brać pod uwagę nie tylko podczas tworzenia cieni obrazów, lecz również nakładania na obrazki wspomnianego wyżej efektu. W związku z tym niektórzy mogą chcieć spłaszczyć grafikę z plakietkami i zapisać ją do pliku typu JPEG.
Sztuka układania zdjęć na stronach
|
169
Rysunek 4.16. Wycinanie plakietek za pomocą wcześniej przygotowanego wzornika
Oto instrukcja, jak wykonać plakietki:
1. Należy utworzyć wzornik w postaci prostokąta z powycinanymi okienkami, które później posłużą do wykrojenia odpowiednich fragmentów z dowolnej fotografii.
2. Zdjęcie, z którego mają zostać wycięte plakietki, trzeba zamienić w warstwę (jeśli nie zrobiło się tego wcześniej).
3. Przygotowany uprzednio wzornik należy skopiować i wkleić jako nową warstwę w edytowaną fotografię.
4. Przesuwając wzornik nad zdjęciem, trzeba ustawić go tak, by w jego okienkach pojawiły się odpowiednie fragmenty fotografii.
5. Po właściwym umiejscowieniu wzornika należy wypełnić go kolorem niewystępującym na edytowanym zdjęciu, a następnie połączyć warstwę fotografii z warstwą wzornika.
6. Wzornik należy zaznaczyć za pomocą dowolnego działającego lokalnie narzędzia do tworzenia zaznaczeń obszarów jednokolorowych. Przygotowując przykładowe obrazy do tego rozdziału, posługiwałam się narzędziem Różdżka, dostępnym w aplikacji Photoshop.
7. Kolejnym krokiem na drodze do uzyskania plakietek jest usunięcie z edytowanego obrazu wzornika oraz niepotrzebnej części zdjęcia.
8. Plakietki są prawie gotowe. Wystarczy tylko poprawić ich wygląd poprzez nałożenie
na nie jakiegoś filtra, na przykład efektu o nazwie Faza i płaskorzeźba znanego z programu Photoshop.
Tak przygotowana grafika z plakietkami świetnie nadaje się do urozmaicenia dużego bloku tekstu, ponieważ widoczne na niej obiekty nie są na tyle duże, by odciągały uwagę internauty odwiedzającego stronę WWW od właściwej jej treści. Plakietki wykonane na bazie odpowiednio dobranych zdjęć wydatnie wzbogacają przekaz płynący z tekstów opowiadających różne
170
|
Rozdział 4. Internet w obrazkach
historie. Oczywiście, jeśli tylko chcemy, obrazki z plakietkami możemy zmniejszać, aby jeszcze mniej rzucały się w oczy. Na stronie WWW Novell dostępny jest świetny poradnik dotyczący uzyskiwania efektu kafelków (lub płaskorzeźb) w programie GIMP (http://www.novell.com/coolsolutions/ ´feature/17391.html). Ów poradnik został napisany w języku angielskim.
Wariacją opisanej techniki tworzenia plakietek może być metoda wykonywania grafik, na których, wraz z plakietkami, znalazłby się odpowiednio zmodyfikowany wzornik. Na rysunku 4.17 znalazł się przykładowy obrazek przedstawiający plakietki połączone z wzornikiem. Aby go utworzyć, skorzystałam z innej niż ostatnio fotografii, lecz z tego samego wzornika, który widać na rysunku 4.16. Wzornik wygląda, jakby był z metalu, ponieważ warstwę z nim odpowiednio zmodyfikowałam stylami warstwy Cień, Faza i płaskorzeźba oraz Nałożenie gradientu (rysunek 4.18). Fotografia widoczna w okienkach wzornika została odpowiednio przycięta, żeby spod niego nie wystawała. Po odcięciu od zdjęcia jego zbędnych części obydwie warstwy — warstwę fotografii oraz warstwę wzornika — połączyłam.
Rysunek 4.17. Fotografia przedstawiająca mewy pocięta na okienka i obramowana „metalowym” wzornikiem
Postępując zgodnie z opisanymi wyżej instrukcjami, Czytelnik może stworzyć ciekawe graficzne przerywniki, które urozmaicą stronę WWW. W dalszej części tego rozdziału opiszę techniki wykonywania grafik bardziej przyciągających uwagę, a tym samym w większym stopniu wpływających na ogólny kontekst ozdabianej nimi witryny.
Podarte zdjęcia Popularną metodą uatrakcyjniania zdjęć i innych grafik, m.in. zrzutów ekranu, jest nadawanie im wyglądu podartych fotografii. Nierówne, poszarpane krawędzie sprawiają, że niektóre zdjęcia wyglądają ciekawiej i zarazem bardziej trójwymiarowo. Efekt przedartego zdjęcia można uzyskać na wiele różnych sposobów, jednakże ja opiszę tylko jeden — najprostszy. Przykład zdjęcia zmodyfikowanego metodą, którą zamierzam omówić, widać na rysunku 4.19 (fotografia przedstawiająca stado mew została wykonana na Florydzie). Granica rozdarcia zdjęcia biegnie poniżej linii wody i — co istotne — nie ma kształtu utworzonego przez falę morską.
Sztuka układania zdjęć na stronach
|
171
Rysunek 4.18. Dzięki opcji Styl warstwy dostępnej w programie Photoshop prosty wzornik można zmienić w „metalową” ramkę
Rysunek 4.19. Podarta fotografia wykonana za pomocą programu Photoshop
172
|
Rozdział 4. Internet w obrazkach
Aby uzyskać efekt podartego zdjęcia, „utworzyłam” linię rozdarcia za pomocą narzędzia o nazwie Lasso wielokątne. Zaznaczenie poprowadziłam po piasku, a potem zamknęłam, oddzielając tym samym dolną część fotografii od górnej. Zaznaczony fragment zdjęcia usunęłam. Po usunięciu dolnej części fotografii dla odmiany zaznaczyłam górną jej część, z wyjątkiem wąskiego paska biegnącego wzdłuż krawędzi rozdarcia; niezaznaczony pozostał obszar o grubości mniej więcej 10 pikseli, biegnący wzdłuż całego zdjęcia. Utworzywszy opisane zaznaczenie, skorzystałam z opcji odwracania zaznaczenia — po dokonaniu przeze mnie tej operacji jedynym zaznaczonym fragmentem zdjęcia stał się pasek stanowiący jego dolną krawędź (rysunek 4.20).
Rysunek 4.20. Fotografia, której znaczną część „oderwano” za pomocą narzędzia o nazwie Lasso i na której zaznaczono krawędź rozdarcia
Następnie na zaznaczony obszar nałożyłam filtr Falowanie (Filtr/Zniekształcanie/Falowanie), dla którego z listy rozwijalnej Rozmiar wybrałam opcję Średni oraz ustawiłam Wartość równą 100%. Oczywiście warto poeksperymentować z ustawieniami lub nawet wypróbować inne filtry, na przykład Morskie fale. Zdjęcie o zmodyfikowanej filtrem krawędzi przekształciłam w warstwę, a następnie, korzystając z narzędzia Różdżka, zaznaczyłam widoczny pod nim jednokolorowy obszar. Zaznaczony fragment grafiki usunęłam i uzyskałam w ten sposób ładnie wyglądającą, nieregularną krawędź fotografii. Z menu Styl warstwy wybrałam opcję Cień; Rozmiar cienia ustawiłam na 5 pikseli, natomiast Kąt na 90° (rysunek 4.21). Na tym etapie pozostaje już tylko spłaszczyć stworzoną grafikę i zapisać ją do pliku JPEG, lub zachować jej częściową przezroczystość i skorzystać z możliwości zachowania zdjęcia w formacie PNG.
Sztuka układania zdjęć na stronach
|
173
Rysunek 4.21. Zdjęcie po dokonaniu modyfikacji polegających na nałożeniu filtra Falowanie na krawędź rozdarcia, usunięciu dolnej partii tła i dodaniu cienia
Oto podsumowanie opisanych wyżej czynności, których wykonanie jest niezbędne bądź wskazane, jeśli chce się uzyskać efekt podartej fotografii:
1. Należy nadać tłu edytowanego obrazu kolor biały. 2. Za pomocą narzędzia Lasso wielokątne (lub dowolnego innego pozwalającego uzyskać podobny efekt) trzeba „narysować” na zdjęciu krawędź rozdarcia.
3. Należy zaznaczyć krawędź rozdarcia. Zaznaczenie powinno mieć szerokość równą około 10 pikseli.
4. Na zaznaczoną krawędź należy nałożyć filtr o nazwie Falowanie (Filtr/Zniekształcanie/
´Falowanie). Warto eksperymentować z ustawianiem różnych wartości zniekształcenia obrazu aż do chwili uzyskania w pełni zadowalającego efektu.
5. Na tym etapie grafikę należy przekształcić w warstwę. W następnej kolejności, za pomocą narzędzia Różdżka, trzeba zaznaczyć dolną, jednolicie białą część obrazka i ją usunąć.
6. Warto uzyskaną grafikę wzbogacić o cień warstwy. Efekt Cień jest dostępny w menu Styl
warstwy (cień widoczny na przykładowych rysunkach ma Rozmiar 5 pikseli; wartość parametru Kąt wynosi 90°).
7. Jeśli otrzymany obrazek chce się zapisać do pliku JPEG, należy go uprzednio spłaszczyć. Oczywiście efekt przedartego zdjęcia nie jest jedyną metodą interesującego modyfikowania obrazów. W następnym podrozdziale napiszę, w jaki sposób sprawić, by fotografia wyglądała, jakby ją ktoś złamał.
174
|
Rozdział 4. Internet w obrazkach
Pęknięty obraz Jedną z niezbyt skomplikowanych metod nadawania zdjęciom ciekawego wyglądu jest umieszczanie na nich nierównego pęknięcia o gładkich krawędziach. Pęknięcie może być zwykłą ozdobą fotografii lub symbolem, jeśli umieścimy je na zdjęciu z wiecu wyborczego lub przedstawiającym budynek, który niedawno rozebrano. Technikę tworzenia pęknięcia obrazu opiszę na przykładzie fotografii przedstawiającej mewy (innej niż ta, która pojawiła się w poprzednim podrozdziale) — widać na niej jakby dwie grupy ptaków: ptaki chodzące po plaży i dopiero wzbijające się w powietrze oraz te lecące nad plażą. Wystarczy bliżej przyjrzeć się wspomnianemu zdjęciu, by zauważyć na nim pusty pas piasku, idealnie oddzielający mewy, które jeszcze znajdują się na ziemi, od tych, które szybują. Ów pas jest świetnym miejscem do przeprowadzenia linii pęknięcia obrazu, co można zobaczyć na rysunku 4.22.
Rysunek 4.22. Efekt pękniętego zdjęcia
Aby uzyskać efekt pęknięcia fotografii, należy narysować na niej linie pęknięcia. Można to zrobić za pomocą narzędzia Lasso wielokątne. Warto zadbać o to, żeby utworzone linie nie miały tego samego kształtu, chcemy bowiem nie tylko zaakcentować pęknięcie, lecz również sprawić, by wyglądało tak, jakby w jego miejscu brakowało niewielkiej części zdjęcia (rysunek 4.23). Następnie trzeba wykonać duplikat istniejącej warstwy. Widoczną na duplikacie dolną część „złamanego” zdjęcia trzeba zaznaczyć, przy użyciu narzędzia Lasso, i usunąć. Zaznaczenie wykonane Lassem nie musi być dokładne w obszarze pęknięcia — po usunięciu dolnego fragmentu fotografii wystarczy użyć Różdżki do zaznaczenia i usunięcia niepotrzebnego białego obszaru. Sztuka układania zdjęć na stronach
|
175
Rysunek 4.23. Proces tworzenia pęknięcia na zdjęciu
Kolejnym krokiem jest dodanie cienia do górnej części zdjęcia. Tworząc przykładowy „złamany” obrazek w oknie efektu Cień, ustawiłam Kąt równy 90°. Dla opcji Rozmiar i Odległość przyjęłam wartość 10 pikseli. Po wprowadzeniu odpowiednich ustawień nie pozostaje już nic innego, jak tylko połączyć dwie warstwy.
Nakładanie efektów na wiele zdjęć Uwielbiam eksperymentować z nakładaniem różnych efektów na fotografie, ale nie to jest głównym powodem, dla którego decyduję się modyfikować ich wygląd. Przypomnijmy sobie o tym, że tworzenie prezentacji obrazów można porównać ze sztuką estetycznego serwowania posiłków — efekty graficzne nakładane na zdjęcia mają podnosić wartość tekstów, w których te zdjęcia się pojawiają. Myślenie takie prowadzi nas do stwierdzenia, że umieszczenie na jednej stronie WWW wielu zdjęć, z których każde zostałoby zmodyfikowane w inny sposób, tak by wszystkie razem do siebie pasowały, powinno dać niezwykle ciekawy rezultat. Trzy zdjęcia mew (dwa, które Czytelnik miał już okazję zobaczyć, i jedno, które pojawi się nieco później) świetnie nadają się do tego, by opatrzyć nimi tekst traktujący o jakiejś społeczności, a to dlatego, że wspomniane ptaki są zarówno stadne, jak i kłótliwe. Pierwsza fotografia ukazuje zgodne stado mew, na drugiej uwieczniony został równy marsz ptaków w jednym i tym samym kierunku, trzecia zaś przedstawia sytuację, gdy część z nich zdecydowała się odlecieć, część wciąż odpoczywa na ziemi, a jeszcze inna część spaceruje lub rozważa podążenie za oddalającą się grupą. Opisane wyżej zdjęcia zostały poddane operacji dopasowywania kolorów, dokładnie omówionej w rozdziale 3. tej książki. Następnie pierwsze z nich wzbogaciłam o cień, drugie przekształciłam tak, by wyglądało na złamane, a trzeciemu nadałam wygląd fotografii, której fragment 176
|
Rozdział 4. Internet w obrazkach
oderwano. Zdjęcie pozbawione dolnej części siłą rzeczy musi być ostatnim w zestawie trzech i pojawić się na końcu artykułu, ponieważ występuje na nim biały obszar znacznych rozmiarów, który wyglądałby dziwnie, gdyby znalazł się pośrodku bloku tekstu. Umieszczenie go właśnie na końcu tekstu spowoduje nadanie całemu artykułowi kształt zbliżony do strzałki, co z kolei może prezentować się bardzo dobrze. Jeśli dzięki modyfikacji wyglądu zdjęć chcemy utworzyć z nich oryginalną, ciekawą galerię, musimy zadbać przede wszystkim o to, by zdjęcia te dobrze wyglądały jako grupa, przy czym nie wystarczy ujednolicić ich kolorystyki. Przy nakładaniu na fotografie filtrów wymagających określenia położenia źródła światła (na przykład Cień) powinniśmy upewnić się, że dla wszystkich zdjęć źródło światła będzie takie samo. Jeżeli zaś decydujemy się zróżnicować parametry oświetlenia dla poszczególnych zdjęć, musimy zrobić to tak, żeby różnice w wyglądzie fotografii można było uznać za efekt wynikający z układu i wyglądu strony WWW, na której obrazy publikujemy. Cień rzucany przez każdą z trzech grafik umieszczonych na rysunku 4.24 bez żadnego tekstu został usytuowany pod nią (dla wszystkich zdjęć ustawienia opcji takich jak Kąt czy Rozmiar są dokładnie takie same). Ponadto fotografie mają tę samą szerokość, kolorystykę i jasność, co — jak pisałam wcześniej — jest bardzo ważne. Podczas oglądania zdjęć przedstawiających stado mew można dojść do wniosku, że każde z nich jest całkiem niezłe jako praca indywidualna, niemniej jednak fotografie te prezentują się naprawdę dobrze dopiero wtedy, gdy wszystkie tworzą zwartą całość. Jako galeria mogą stanowić doskonałe rozszerzenie odpowiedniego tekstu. Istnieją inne metody modyfikowania wyglądu zdjęć niż te, które opisałam w tym rozdziale. Można, na przykład, podzielić fotografię na kawałki lub „połamać” ją wzdłuż naturalnych linii, takich jak horyzont. Tak uzyskane kawałki nadają się do tego, by umieścić je w odpowiedniej kolejności na stronie WWW. Prawda jest taka, że jeśli myślimy o zrobionych przez siebie zdjęciach w kontekście wykraczającym poza zwyczajne zapełnianie nimi kartonowych pudełek, a ponadto chcemy prezentować je w ciekawej oprawie, mamy nieskończenie wiele możliwości poprawiania ich wyglądu przeróżnymi efektami graficznymi. Odpowiednie łączenie zdjęć i efektów przydaje się również podczas pracy z całymi galeriami, którym chce się nadać wyjątkowy charakter. Oczywiście najprostszą metodą tworzenia galerii jest korzystanie z programów generujących je automatycznie. Oprogramowanie takie opiszę w dalszej części tego rozdziału. Istnieje niezliczona liczba wtyczek, poradników i aplikacji, które pomogą nam w modyfikowaniu wyglądu fotografii. Na zdjęciu możemy dodać linie podkreślające ruch biegnącego psa lub tak zmienić wygląd oczu i pyszczka kota, by wydawało się, że zwierzę „wychodzi” ze strony WWW i wpatruje się w przeglądającą ją osobę — wystarczy w oknie wyszukiwarki internetowej wpisać zapytanie „efekty fotograficzne” i przygotować się na spędzenie kilku tygodni przed komputerem. Odkrywając świat efektów graficznych, które można nakładać na obrazki, trzeba pamiętać o tym, że modyfikacje mające poprawić wygląd fotografii nie powinny jej zaciemniać ani też wpływać negatywnie na wygląd strony WWW, na której została zamieszczona. Bardzo wiele radości daje zniekształcanie grafik i tworzenie na nich szalonych wirów, lecz jeśli efekty takie w żaden sposób nie wzbogacają przekazu płynącego z obrazów lub z treści witryny, wkraczamy na grząskie terytorium chomików biegających w kółkach oraz animowanych jednorożców, o których co nieco napisałam w rozdziale 1. Sztuka układania zdjęć na stronach
|
177
Rysunek 4.24. Każde ze zdjęć zostało zmodyfikowane w inny sposób, lecz wszystkie tworzą jedną dobrze wyglądającą galerię
178
|
Rozdział 4. Internet w obrazkach
Warto wiedzieć, po co w ogóle na zdjęcia nakłada się efekty graficzne. Ponadto dobrze jest wyobrazić sobie oczekiwany rezultat pracy nad wyglądem fotografii jeszcze przed przystąpieniem do jej edytowania.
Galerie i pokazy slajdów wygenerowane programowo Jeśli pragniemy uraczyć fanów naszej twórczości pokazem zdjęć, najprościej będzie skorzystać z programu, który automatycznie wygeneruje odpowiednią prezentację na bazie wskazanego zestawu fotografii. Jeżeli zdecydujemy się na używanie aplikacji do tworzenia prezentacji obrazów, będziemy mogli zadecydować, czy chcemy, żeby nasza galeria składała się z miniaturek, które daje się powiększać do pełnowymiarowych grafik, czy też bardziej odpowiada nam koncepcja pokazu slajdów zmieniających się automatycznie w określonych odstępach czasu lub otwieranych po kliknięciu odpowiedniej ikony w specjalnym pasku nawigacyjnym. Istnieją aplikacje, których jedynym przeznaczeniem jest tworzenie pokazów slajdów i galerii zdjęć. Podobne funkcje znajdziemy ponadto w wielu edytorach grafiki oraz programach służących do zarządzania archiwami obrazów — czasami funkcji tych trzeba poszukać, ponieważ nie rzucają się w oczy.
Tworzenie prezentacji obrazów za pomocą edytorów i menedżerów obrazów W większości menedżerów obrazów znajdziemy opcje umożliwiające grupowanie grafik w galerie bądź uruchamianie pokazu slajdów, niemniej jednak nie wszystkie ze wspomnianych programów pozwalają tworzyć galerie i prezentacje zdjęć nadające się do publikacji w sieci WWW. Tak się jednak składa, że obydwa programy do zarządzania archiwami fotografii omówione przeze mnie w rozdziale 3. oferują funkcję generowania samodzielnych, niezależnych pokazów obrazów, przy czym Lightroom jest łatwiejszy w obsłudze i ma bardziej intuicyjny interfejs niż Aperture. Jeśli chcemy stworzyć za pomocą aplikacji Ligtroom prezentację zdjęć, którą będzie można umieścić na stronie internetowej, wystarczy zaznaczyć interesujący nas zestaw fotografii i kliknięciem przejść do zakładki Web. Otrzymamy w ten sposób galerię wygenerowaną z domyślnymi ustawieniami — taką, jaką widać na rysunku 4.25. W zakładce Web można zmienić standardowy wzorzec prezentacji na inny (możemy wybrać między innymi, czy powinna być ona dokumentem HTML, czy też pokazem działającym w oparciu o technologię Flash). Ponadto możliwa jest modyfikacja kolorystyki galerii oraz układ zdjęć wchodzących w jej skład. Tworzenie pokazów fotografii za pomocą aplikacji Aperture nie jest niczym trudnym, gdy już znajdzie się odpowiedni przycisk przełączający ją we właściwy tryb pracy. Rysunek 4.26 przedstawia program Aperture z uaktywnioną funkcją generowania pokazów fotografii. Funkcja ta nosi nazwę Web Gallery; włącza się ją kliknięciem niewielkiej ikony znajdującej się pomiędzy kilkoma podobnymi do siebie innymi ikonami (na rysunku właściwy przycisk zaznaczono żółtą strzałką). Po przejściu do panelu Web Gallery okazuje się, że tworzenie w Aperture niezależnych galerii nie jest skomplikowane, choć zrazem nie zostało rozwiązane aż tak dobrze, jak w aplikacji Lightroom. Użytkownik może wybrać określony styl pokazu zdjęć i zająć się wprowadzaniem
Galerie i pokazy slajdów wygenerowane programowo
|
179
Rysunek 4.25. Panel programu Lightroom, w którym ustawia się opcje wyglądu prezentacji obrazów przygotowywanej z myślą o publikacji w sieci WWW
ustawień związanych z układem miniatur na stronie (na przykład warto określić, ile wierszy i kolumn miniatur powinno znaleźć się na jednej stronie galerii), a następnie przejść do edycji metadanych (tytuł, podtytuł, prawa autorskie, opis). Dodatkowo można ustalić, które z metadanych powinny być wyświetlane przy poszczególnych fotografiach (podpis, słowa kluczowe, informacje typu EXIF itd.). Należy pamiętać, że wyświetlenie wszystkich informacji najprawdopodobniej wprowadzi niemały bałagan w galerii. Po ukończeniu pracy nad wyglądem przygotowywanej prezentacji obrazów można zapisać ją na dysku twardym swojego komputera lub skorzystać z usług hostingowych serwisu MobileMe. Cechą Aperture, którą można uznać zarówno za zaletę, jak i wadę, jest jego ścisłe powiązanie z innymi produktami Apple. Na przykład, galerie stworzone za pomocą tego programu można umieszczać bezpośrednio w serwisie MobileMe. Ponadto Aperture współpracuje z systemem skryptów AppleScript wchodzącym w skład systemu operacyjnego Mac OS X. To znaczy, że możemy dodawać do niego nowe funkcje, takie jak Publish for iPhone (skrypt jest dostępny na stronie http://automator.us/aperture/iphone.html). Wspomniana funkcja przydaje się podczas budowania stron WWW przystosowanych specjalnie do przeglądania w urządzeniach iPhone. Oczywiście rodzi się pytanie, dlaczego ktokolwiek miałby chcieć tworzyć galerie internetowe z myślą o użytkownikach tylko jednego typu urządzeń zapewniających dostęp do sieci WWW. Jeśli chodzi o aplikację Lightroom, nie zaskakuje fakt, że interfejs dostępnego w niej panelu służącego do generowania internetowych galerii obrazów jest niezwykle intuicyjny — firma Adobe dba o to, by implementowane w jej produktach funkcje związane z tworzeniem pokazów
180
|
Rozdział 4. Internet w obrazkach
Rysunek 4.26. Tworzenie internetowej galerii obrazów w programie Aperture
zdjęć przeznaczonych do publikacji w sieci WWW były naprawdę przydatne. Zarówno Photoshop, jak i Photoshop Elements oferują bardzo użyteczne i zarazem łatwe w obsłudze opcje umożliwiające kreowanie galerii internetowych. W programie Photoshop galerie tworzy się poprzez wybranie odpowiedniej opcji z menu Automatyzuj (Plik/Automatyzuj). We wspomnianym menu znajdziemy opcje takie jak Scal jako HDR (tworzenie obrazów spełniających standard High Definition), Łączenie obrazów, Prezentacja PDF oraz Internetowa galeria zdjęć. Wybór ostatniej z wymienionych funkcji spowoduje otwarcie się okienka, w którym można dokonać zarówno wyboru typu prezentacji (do dyspozycji mamy szablony napisane w HTML i Flash), jak i modyfikacji ustawień szablonu (nazwa prezentacji, jej kolorystyka itp.). Okno opcji Internetowa galeria zdjęć jest widoczne na rysunku 4.27. Żadna z omówionych tu aplikacji nie daje użytkownikowi tak dużych możliwości jak Photoshop Elements 5.0. Korzystając ze wspomnianego programu, wygenerujemy prezentację przeznaczoną do publikacji w sieci WWW lub przeglądania lokalnego, która spełni wszystkie nasze oczekiwania. Jedną z moich ulubionych funkcji dostępnych w Elements jest możliwość stworzenia filmu z zestawu fotografii. Film taki, wzbogacony wybranym przez siebie podkładem muzycznym, mogę obejrzeć z ekranu mojego szerokoekranowego telewizora HD podłączonego do komputera. W tak luksusowych warunkach naprawdę przyjemnie przebiera się zdjęcia i podejmuje decyzje, które z nich warto zostawić, a których należy się bezpowrotnie pozbyć. Interesującą nas opcję w Elements znajdziemy, rozwinąwszy menu Create w module Organizer. Spośród dostępnych funkcji należy wybrać Photo Galleries. Spowoduje to uruchomienie Photo Galleries Wizard, czyli kreatora galerii, który można zobaczyć na rysunku 4.28.
Galerie i pokazy slajdów wygenerowane programowo
|
181
Rysunek 4.27. Okno opcji Internetowa galeria zdjęć, dostępnej w programie Photoshop
Rysunek 4.28. Kreator galerii Photo Galleries Wizard programu Photoshop Elements 5.0
182
|
Rozdział 4. Internet w obrazkach
Kreator galerii pozwala wybrać układ miniatur na stronie tworzonej prezentacji (do dyspozycji mamy, na przykład, szablony, w których obrębie miniaturki zdjęć są ustawiane w ciąg klatek filmowych; klatki filmowe mogą pojawić się w górnej lub dolnej części galerii albo po którejś z jej stron). Korzystając z kreatora, mamy wpływ nie tylko na rozkład, lecz również na rozmiar miniatur. Dolna część okna Photo Galleries Wizard została zarezerwowana na opcje wyglądu przygotowywanej galerii. Hobbystycznie zajmuję się ręcznym szyciem książek, dlatego też moim ulubionym stał się szablon o nazwie Hand Made Paper (papier czerpany). W lewej części okna kreatora znajduje się panel, za pomocą którego do prezentacji dodaje się fotografie. W galeriach można umieszczać pojedyncze zdjęcia lub całe katalogi obrazów. Po wybraniu odpowiedniego szablonu prezentacji i dodaniu do niego fotografii należy kliknąć przycisk Next Step >. Na tym etapie tworzenia galerii nie pozostaje nam już nic innego, jak tylko zająć się dopracowywaniem dzieła, polegającym na określeniu nazwy prezentacji i ustawieniu takich jej parametrów, jak podkład muzyczny, czas wyświetlania pojedynczego slajdu, kolorystyka czy czcionka użyta do wyświetlania podpisów (rysunek 4.29).
Rysunek 4.29. Finalizowanie pracy nad internetową galerią obrazów tworzoną w programie Photoshop Elements
Utworzoną prezentację obrazów można uruchomić przed zapisaniem na dysku twardym w celu sprawdzenia, czy nie wymaga ona wprowadzenia jakichś dodatkowych poprawek. Gdy już jesteśmy pewni, że galeria prezentuje się świetnie, nie pozostaje nam nic innego, jak tylko zapisać ją na dysku komputera i — jeśli chcemy — udostępnić innym ludziom przy użyciu opcji
Galerie i pokazy slajdów wygenerowane programowo
|
183
dostępnych w programie Elements (jedną z funkcji jest wysyłanie prezentacji bezpośrednio na serwer FTP, na którym znajduje się prowadzona przez nas strona WWW).
Wyspecjalizowane aplikacje przeznaczone do tworzenia galerii obrazów Istnieje mnóstwo darmowych programów oraz nieodpłatnie udostępnianych wersji próbnych płatnych aplikacji przeznaczonych specjalnie do tworzenia rozmaitych, bardziej albo mniej skomplikowanych pokazów zdjęć. Darmowe oprogramowanie wygeneruje dla nas zarówno galerie będące dokumentami HTML, jak i prezentacje opierające się na technologii Flash. Jednym z narzędzi do tworzenia prezentacji obrazów jest napisany w języku Java program o nazwie Gallery Constructor. Dostępne są wersje tego programu działające pod systemami Windows, Linux i Mac OS X. W tej książce opisana została wersja napisana z myślą o Windows. Aplikację Gallery Constructor można pobrać ze strony http://www.through-the-lens.net/ ´cms/index.php?page=33 (witryna w języku angielskim). Dla poszczególnych wersji działających pod różnymi systemami operacyjnymi udostępniono instrukcje instalacji.
Jest coś, co wyróżnia Gallery Constructor spośród wielu podobnych jej aplikacji. Otóż zaimplementowano w niej obsługę formatu RAW. Dlatego zapewne chętnie sięgną po nią wszyscy ci, którzy czasami chcieliby tworzyć galerie z obrazów zapisanych do plików typu RAW bez uprzedniej ich obróbki. Po uruchomieniu aplikacji można utworzyć w niej nowy projekt galerii — wystarczy otworzyć odpowiedni katalog zawierający obrazy. Gallery Constructor automatycznie wyświetli miniatury zdjęć, jeśli takowe znajdują się w eksplorowanym folderze (rysunek 4.30). Po otwarciu w programie katalogu z fotografiami należy przejść do zakładki Gallery Template, żeby zmodyfikować domyślny szablon prezentacji. Można, między innymi, nadać tytuł tworzonej galerii albo określić maksymalną liczbę miniatur, które zostaną wyświetlone na każdej jej stronie. W zakładce Thumbnail Workflow znajdziemy opcje, dzięki którym da się określić, jak powinny wyglądać miniatury, natomiast zakładka Image workflow służy do regulowania ustawień związanych z wyświetlaniem pojedynczych fotografii. Podczas pracy w Gallery Constructor można korzystać z podglądu obrazów, a także regulować takie ich parametry, jak poziom gamma, kontrast, jasność oraz nasycenie (rysunek 4.31). Ponadto przygotowywaną prezentację uruchamia się bez zapisywania jej na dysku twardym komputera. Po ustawieniu wszystkich opcji związanych z wyglądem galerii można ją zapisać na dysku twardym komputera i jednocześnie umieścić jej kopię bezpośrednio na serwerze FTP. Gallery Constructor pozwala określać reguły wyświetlania pojedynczych zdjęć oraz całych ich grup. Podczas korzystania z omawianego programu niekiedy pojawiają się kłopoty wynikające z tego, że program nieprawidłowo zarządza pamięcią, na szczęście jednak na stronie domowej projektu można znaleźć rozwiązania tego typu problemów. Ponadto Czytelnik powinien wiedzieć, że Gallery Constructor nie jest aplikacją działającą szybko, szczególnie gdy chce się za jej pomocą generować pokazy zdjęć zapisanych w formacie RAW.
184
|
Rozdział 4. Internet w obrazkach
Rysunek 4.30. Efekt przeglądania zawartości katalogu ze zdjęciami w programie Gallery Constructor
Rysunek 4.31. Galeria zdjęć stworzona w programie Gallery Constructor Galerie i pokazy slajdów wygenerowane programowo
|
185
Każdy, kto chciałby używać innego niż Gallery Constructor programu do tworzenia prezentacji obrazów, powinien zainteresować się aplikacją PostcardViewer. PostcardViewer, podobnie jak Gallery Constructor, współpracuje z różnymi systemami operacyjnymi, a ponadto współdziała z większością oprogramowania opisanego w rozdziale 3. tej książki. PostcardViewer to samodzielna przeglądarka zdjęć napisana w języku Flash, ale także skrypt stworzony w technologii PHP, który wystarczy umieścić w katalogu zawierającym zdjęcia, by móc je oglądać. Wypróbowałam wersję aplikacji napisaną w PHP — użyłam jej do stworzenia pokazu fotografii, które akurat znajdowały się na moim serwerze. Aby zacząć korzystać ze skryptu PHP, trzeba pobrać z internetu i rozpakować zawierające go archiwum, a następnie zawartość rozpakowanego katalogu umieścić na serwerze. Zdjęcia, które chcemy przeglądać za pomocą PostcardViewer, należy przekopiować do podkatalogu images. Nie obędzie się również bez ściągnięcia i rozpakowania aplikacji buildgallery.php. Wspomniany plik, służący do ustawiania opcji przeglądarki PostcardViewer, trzeba umieścić w tym samym katalogu, w którym znalazła się zawartość folderu postcardviewer. Niezbędna dokumentacja jest dostępna na stronie WWW projektu. Aplikację i instrukcje, jak z niej korzystać, można znaleźć pod adresem http://www. ´airtightinteractive.com/projects/postcardviewer/ (strona w języku angielskim).
W katalogu z plikami aplikacji PostcardViewer znajdziemy między innymi plik o nazwie imagedata.xml. Za pomocą klienta FTP, z którego korzystamy, powinniśmy udzielić prawa do zapisu tego pliku wszystkim jego użytkownikom. W pliku tym przechowywane są informacje niezbędne do poprawnego działania przeglądarki obrazów. Oczywiście imagedata.xml można edytować samemu — po otwarciu go zobaczymy listę nazw plików graficznych oraz dane związane z wymiarami wyświetlanych obrazków. Na rysunku 4.32 widać galerię fotografii stworzoną za pomocą PostcardViewer. Rysunek 4.33 przedstawia tę samą galerię, lecz po powiększeniu jednego ze zdjęć. Istnieje wiele prostych, działających w różnych środowiskach (m.in. Windows, Mac OS, Linux) narzędzi do tworzenia galerii, niemniej jednak każdy, kto pragnie publikować w sieci WWW wielkie zbiory fotografii, powinien rozważyć korzystanie z oprogramowania bardziej rozbudowanego oraz dającego możliwość sprawniejszego zarządzania obrazami. Jedną z najlepszych witryn zawierających listę dostępnego oprogramowania do tworzenia galerii zdjęć jest About.com. Ściślej — trzeba wejść na stronę http://graphicssoft.about. ´com/od/webgallery/Web_Photo_Gallery_Creation_and_Automation_Tools.htm (serwis prowadzony w języku angielskim).
Aplikacje do tworzenia galerii, działające po stronie serwera Jeśli dysponujemy miejscem na serwerze, możemy tworzyć prezentacje naszych obrazów za pomocą jednej z wielu dostępnych na rynku aplikacji działających po stronie serwera. Dwiema dobrze znanymi aplikacjami wspomnianego typu, służącymi do generowania galerii zdjęć, są 186
|
Rozdział 4. Internet w obrazkach
Rysunek 4.32. Zdjęcia otwarte za pomocą PostcardViewer
Gallery i Coppermine. Obydwie zostały napisane w języku PHP i działają w większości istniejących systemów operacyjnych. Poza tym niektóre systemy zarządzania treścią stron WWW, na przykład WordPress i Drupal, umożliwiają przesyłanie grafik na serwer oraz ich organizowanie. Za ich pomocą można dodawać zdjęcia do wpisów robionych na stronie WWW, a także generować całe galerie obrazów. Prawdziwym gigantem w dziedzinie zarządzania zdjęciami, działającym po stronie serwera, jest program Gallery, który od zawsze wyróżnia się na tle podobnego do niego oprogramowania wielkimi możliwościami. Zarazem jednak nie był (i nadal nie jest) najprostszy w obsłudze. Co prawda istnieją dziś instrukcje w prosty sposób, krok po kroku, opisujące proces instalowania Gallery, niemniej jednak przed przystąpieniem do pracy z omawianym programem trzeba utworzyć na serwerze bazę danych oraz mieć możliwość modyfikowania plików i katalogów. Większość instrukcji podaje się w wierszu poleceń, ale Gallery da się zainstalować za pomocą FTP. Gdy powstawała niniejsza książka, dostępne były trzy wersje omawianej aplikacji: Gallery 1, Gallery 2 (tę wersję zamierzam opisać) i Gallery Remote, działająca po stronie klienta. Jeśli chcemy zainstalować Gallery po raz pierwszy, w całości od nowa, powinniśmy skupić się na Gallery 2.
Aplikacje do tworzenia galerii, działające po stronie serwera
|
187
Rysunek 4.33. Zdjęcia otwarte za pomocą PostcardViewer Aplikację Gallery można pobrać ze strony http://gallery.menalto.com. Wskazane jest, aby przed przystąpieniem do instalacji programu Gallery Czytelnik sprawdził, czy na serwerze, z którego korzysta, możliwe jest jej przeprowadzenie. W tym celu powinien skontaktować się z przedstawicielem firmy świadczącej usługi hostingowe i zapytać, czy Gallery zadziała na jego stronie WWW.
Podczas instalacji Gallery aplikacja sama sprawdza, czy serwer spełnia wszystkie wymagania niezbędne do jej prawidłowego działania. Należy jednak pamiętać, że przed przystąpieniem do instalacji omawianego programu najpierw trzeba utworzyć bazę danych. Większość serwisów świadczących usługi hostingowe udostępnia funkcję tworzenia baz danych, a także umożliwia korzystanie z kreatora instalacji, który zdejmuje z użytkownika ciężar dbania o sprawy czysto techniczne. Podczas instalacji MySQL nie musimy martwić się o dodatkowe moduły — wystarczy nam baza danych zainstalowana z domyślnym zestawem komponentów. Oto, co jest potrzebne, by aplikacja Gallery działała poprawnie: • system Unix bądź Windows; • serwer WWW, na przykład Apache lub IIS; • obsługa PHP (od lutego 2008 roku wymagana jest wersja 5 języka); • biblioteki umożliwiające obróbkę zdjęć (na większości stron WWW spotyka się Image-
Magick i (lub) GD);
• baza danych, na przykład wymieniona wyżej MySQL albo PostgreSQL, Oracle lub SQL
Server. 188
|
Rozdział 4. Internet w obrazkach
Aplikacja Gallery została przystosowana do pracy zarówno w środowisku Windows, jak i Unix. Większość firm udostępniających miejsce na serwerach korzysta z systemu Linux (Unix). W zasadzie wszystkie serwery udostępniane odpłatnie przez firmy hostingowe (może z wyjątkiem tych naprawdę najtańszych) spełniają wypisane wyżej wymagania. Niektóre firmy hostingowe oddają do dyspozycji swoich klientów aplikacje służące do zarządzania treścią stron WWW. Jeśli korzystamy z usług takiej właśnie firmy, prawdopodobnie możemy jednym kliknięciem odpowiedniego przycisku zainicjować automatyczną instalację Gallery. Dlatego też przed przystąpieniem do ręcznego instalowania omawianej Gallery warto sprawdzić, czy aplikacja ta nie jest częścią pakietu programów udostępnianych przez daną firmę.
Podczas przeprowadzania instalacji można ingerować w to, które moduły zostaną zainstalowane, a które nie. Lista komponentów jest dość długa, ale wiele spośród wpisów dotyczy zastępowania Gallery 1 aplikacją Gallery 2, opcji związanych z ustawieniami aparatów fotograficznych, integracji Gallery z zewnętrznymi narzędziami third-party itd. Zalecam uważne przejrzenie listy modułów i rozważne instalowanie komponentów programu — w razie potrzeby poszczególne opcje da się uaktywnić lub dezaktywować później. Gallery pozwala tworzyć wiele galerii jednocześnie, a każdą z nich można przechowywać w osobnym katalogu, opatrzyć innymi tytułem, opisem oraz słowami kluczowymi itp. Ponadto każda galeria może prezentować się inaczej niż pozostałe (dla każdej da się ustawić inny szablon wyglądu strony). Na rysunku 4.34 widać fragment zakładki Temat, w której zmienia się ustawienia szablonów, wchodzącej w skład panelu noszącego nazwę Administracja. Gallery to jedna z tych aplikacji, które da się niemal dowolnie konfigurować. Tę cechę programu można uznać jednocześnie za jego zaletę i wadę. Wszyscy ci, którzy chcą używać Gallery bez zagłębiania się w ustawianie licznych opcji, mogą skorzystać z gotowych szablonów galerii (tematów). Warto nieco obyć się z programem przed przystąpieniem do korzystania z jego bardziej zaawansowanych funkcji. Nowe tematy są dostępne pod adresem http://codex.gallery2.org/Gallery2:Themes. Wystarczy wybrać spośród wielu ten, który nam się podoba, i zainstalować go przy użyciu panelu Administracja (opcja Galeria/Moduły). Instalacja szablonów przebiega automatycznie. Każdy nowo zainstalowany szablon może posłużyć do zmiany wyglądu dowolnej istniejącej galerii. Po oswojeniu się z aplikacją Gallery i koncepcją szablonów warto spróbować stworzyć własne szablony stron zawierających zdjęcia. Istnieje kilka różnych sposobów dodawania zdjęć do albumu Gallery. Najprostszym z nich niewątpliwie jest dodawanie zdjęć bezpośrednio na stronę za pośrednictwem przeglądarki internetowej. Można przesyłać wiele zdjęć jednocześnie, a ponadto opatrywać je tytułami i opisami. Niektóre z szablonów pozwalają też na wyświetlanie metadanych przesyłanych fotografii. Zdjęcia możemy dodawać do albumu Gallery również za pomocą apletu Java, z kamery internetowej, z katalogu, w którym przechowujemy grafiki będące częścią strony WWW udostępnionej w internecie, eksportując je z Google Picasa lub korzystając z usługi udostępniania zdjęć zaimplementowanej w systemie Windows XP.
Aplikacje do tworzenia galerii, działające po stronie serwera
|
189
Rysunek 4.34. Panel kontrolny Administracja w aplikacji Gallery
Ostatnia z opcji staje się szczególnie przydatna, gdy fotografie zostały umieszczone na jakimś serwerze za pośrednictwem aplikacji udostępnianej w serwisie, w którym użytkownik założył swój internetowy pamiętnik, albo innego systemu zarządzania treścią stron WWW. Korzystałam z niej podczas pisania niniejszej książki — rysunki, które później znalazły się w książce, umieszczałam w specjalnie przygotowanym katalogu na serwerze WWW, by dostęp do nich mieli moi korektorzy techniczni. Po wskazaniu odpowiedniego katalogu w oknie programu Gallery pojawia się lista wszystkich znajdujących się w nim obrazów, przy każdym z obrazów zaś widnieje pole wyboru. Kliknięcie pola wyboru powoduje załadowanie się zaznaczonego zdjęcia w aplikacji Gallery (rysunek 4.35). Jeśli zależy nam na tym, żeby wydawało się, że dane zdjęcie pochodzi z albumu Gallery, a nie z oddzielnego katalogu, możemy skorzystać z symbolicznych linków. Przeprowadzanie opisanej tu procedury okazało się całkiem rozsądną metodą przeglądania rysunków z niniejszej książki w trakcie procesu ich obróbki. Jedną z niewątpliwych zalet opcji dodawania zdjęć do albumu Gallery z serwera lokalnego jest to, że całą ich grupę można bardzo szybko przesłać wprost do albumu za pomocą klienta FTP. Za wadę wspomnianej funkcji należy uznać to, że nie ma możliwości opatrywania poszczególnych grafik osobnymi tytułami i opisami. Oczywiście informacje te można uzupełnić po załadowaniu obrazów w Gallery. Rysunek 4.36 przedstawia galerię wygenerowaną za pomocą opisywanej aplikacji.
190
|
Rozdział 4. Internet w obrazkach
Rysunek 4.35. Dodawanie zdjęć z serwera lokalnego do albumu Gallery
Rysunek 4.36. Galeria stworzona w aplikacji Gallery. Galerii nadano wygląd szablonu (tematu) o nazwie Ajaxian
Aplikacje do tworzenia galerii, działające po stronie serwera
|
191
Odrobina kodu Jako ostatnią w tym rozdziale omówię metodę wyświetlania zdjęć na stronach WWW z wykorzystaniem krótkiego kodu umieszczanego bezpośrednio w kodzie źródłowym witryny. Kod, który omówię, sprawia, że fotografie wyświetlane są losowo. Z techniki tej korzystam od lat — dzięki niej mogę tworzyć wyświetlające się losowo pokazy zdjęć w pasku bocznym witryny, a także sprawić, żeby banery i tła w moich arkuszach stylów same się zmieniały. Nikt chyba nie wie, kto wymyślił i jako pierwszy zastosował skrypt PHP losujący zdjęcia. Tak czy owak, skrypt ten pojawia się w sieci WWW od dłuższego czasu i zyskał niemałą popularność, a to z tej przyczyny, że wiele pamiętników internetowych i innych serwisów działa w oparciu o technologię PHP. Jeśli strona internetowa została napisana z wykorzystaniem języka PHP, bardzo łatwo wzbogacimy ją o kod losujący obrazy. Wystarczy zdjęcia, które mają być wyświetlane za jego pomocą, zebrać w jednym katalogu (lokalnym względem witryny, w której obrębie mają się pojawić), a następnie zapisać treść listingu 4.2 w pliku umieszczonym tam, gdzie powinny wyświetlać się fotografie. Listing 4.2. Skrypt PHP wyświetlający na stronie WWW losowo wybrany obraz ", $imgname); ?>
Jeśli korzysta się z przedstawionego powyżej kodu, trzeba zmienić wartości zmiennych $dir i $url. Wartości powinny być odpowiednio: ścieżką dostępu do fizycznego katalogu z obrazkami oraz adresem internetowym katalogu. Domyślnie skrypt wyświetla tylko obrazy zapisane w formacie JPEG. Każdy, kto chce, by ów skrypt obsługiwał dodatkowe formaty, na przykład PNG albo GIF, powinien dodać właściwe wpisy w tablicy $exts (kolejne pozycje należy oddzielić przecinkami). array('jpg','gif','png');
Tak przygotowany skrypt umieszczony na stronie sprawia, że za każdym razem, gdy ktoś ją otwiera, wyświetlane są na niej obrazki wybierane losowo z przygotowanej puli. Jedna z odmian powyższego rozwiązania pozwala uzyskać efekt podobny do opisanego, tyle że w arkuszach stylów. Korzystam z niej, gdy chcę, żeby zmieniały się banery wyświetlane 192
|
Rozdział 4. Internet w obrazkach
w nagłówku i stopce mojej witryny. Aby zaimplementować opisywaną metodę wyświetlania obrazów na stronie WWW, należy utworzyć stronę aplikacji PHP (listing 4.3) i umieścić ją w katalogu, w którym znajdują się arkusze stylów oraz pliki graficzne. Listing 4.3. Modyfikujemy arkusz stylów tak, by losowo wyświetlał obrazy #header { background-repeat: repeat-x; background-position: top left; } #footer { background-repeat: no-repeat; }
Kod przedstawiony na powyższym listingu jest podobny do tego z listingu 4.2. Obydwa fragmenty kodu różnią się tym, że ten z listingu 4.3 napisano przy założeniu, że zdjęcia zostały umieszczone w katalogu lokalnym. Ponadto skrypt z listingu 4.3 zwraca typ zawartości CSS (pierwsza linia kodu): header('Content-type: text/css');
Jeśli chcemy korzystać z aplikacji PHP do modyfikowania arkuszy stylów, musimy sprawić, by wynikiem jej działania był kod typu CSS. Pozostała, nieomówiona przeze mnie część kodu wchodzącego w skład listingu 4.3 to mieszanka statycznego CSS i PHP służącego do generowania CSS. Aby korzystać jednocześnie z CSS statycznego i generowanego przez skrypt PHP, na początku głównego pliku CSS wpisuję linię (zgodnie z dokumentacją): @import "photographs.php";
Za każdym razem, gdy ktoś wejdzie na stronę WWW zmodyfikowaną zgodnie z przedstawionym przeze mnie opisem, tła nagłówka i stopki będą losowane z całego zestawu grafik. Z omówionej metody korzystałam zarówno wtedy, gdy chciałam, aby w obrębie mojej witryny wyświetlały się zdjęcia, które sama wykonałam (rysunek 4.37), jak i wtedy, gdy sięgałam po
Odrobina kodu
|
193
Rysunek 4.37. Dynamiczne zmiany w arkuszu stylów powodują losowe wyświetlanie się różnych banerów
fotografie będące własnością publiczną (na przykład zdjęcia zrobione za pomocą teleskopu Hubble’a oraz obrazy z serwisów NASA i NOAA). Tak naprawdę większość zdjęć udostępnianych przez agencje rządowe USA stanowi własność publiczną. Bez końca mogłabym pisać o fotografiach, ale czas przejść do omawiania innych typów grafiki rastrowej oraz podstaw grafiki wektorowej.
194
|
Rozdział 4. Internet w obrazkach
ROZDZIAŁ 5.
Grafika użytkowa
Zdjęcia stanowią tylko niewielką część pejzażu grafiki rastrowej. Inne jego fragmenty to przyciski, ramki, ilustracje i obrazki pochodzące nie z aparatów fotograficznych, lecz z programów do tworzenia grafiki. We wczesnym stadium swojego istnienia internet był wypełniony użytkowymi obrazkami. Nawet dziś, gdy w sieci WWW wielką karierę robi fotografia cyfrowa i nowoczesne rodzaje grafiki, niezmiennie potrzebujemy przycisków i zaokrąglonych rogów ramek. Wszyscy zazdrościmy prawdziwym artystom umiejętności kreowania przepięknej grafiki internetowej. Zarazem każdy z nas czasami ma natchnienie i przejawia artystyczne zacięcie — w takich chwilach zazwyczaj jednak tworzymy obrazki, których po prostu potrzebujemy, postępując zgodnie z zaleceniami ludzi bardziej od nas uzdolnionych, piszących liczne poradniki i instrukcje postępowania. Jaką grafikę tworzymy? Śliczne, lśniące przyciski, które nadają konkretny kształt stronom WWW, lustrzane odbicia tekstów i symboli upiększające nasze banery, obrazki nadające się na tła lub ramki witryn, cienie i refleksy sprawiające, że niektóre elementy serwisów internetowych wydają się być trójwymiarowe. Zdarza się, że nawet nagłówki bloków tekstu generujemy za pomocą programów do obróbki grafiki, choć tak naprawdę powinniśmy wystrzegać się podobnych praktyk. Nie wszystkie obrazki wchodzące w skład grafiki rastrowej to dzieła sztuki. Nie wszystkie tworzy się od zera. Na przykład, korzystamy niekiedy ze zrzutów ekranu, by zobrazować istnienie jakiejś funkcji w omawianym przez nas programie (pamiętajmy, by — w miarę możliwości — zaznaczać odpowiednie fragmenty zrzutów ekranu, żeby nasi czytelnicy nie musieli zbyt długo szukać tego, o istnieniu czego ich informujemy). Niektóre z aplikacji do robienia zrzutów ekranu pozwalają na dodawanie zaznaczeń na obrazkach bez potrzeby korzystania z dodatkowego oprogramowania, dzięki czemu ilustrację do tekstu wykonuje się jeszcze szybciej i łatwiej. Zanim jednak zajmiemy się zagadnieniami zrzutów ekranu i przycisków, zastanówmy się nad tym, jakimi narzędziami i technikami tworzy się grafikę rastrową. Na końcu niniejszego rozdziału wrócę do tego tematu i napiszę, w jaki sposób można przeanalizować obrazek znaleziony w sieci WWW (lub gdziekolwiek indziej) i powtórzyć kroki, które — tworząc go — wykonał jego autor. Dzięki tej wiedzy Czytelnik będzie mógł wykonać swoje wersje znalezionych grafik.
195
Skrzynka z narzędziami do obróbki grafiki: kształty, warstwy, gradienty i rozmycie Przykłady, które pokazuję i omawiam w tym rozdziale, bynajmniej nie wyczerpują tematu związanego z tworzeniem grafiki rastrowej. Prawdę mówiąc, stanowią one zaledwie zapowiedź efektów, które można by uzyskać dzięki wykorzystaniu wymienionych niżej narzędzi, a to dlatego, że postanowiłam opisać najbardziej podstawowe funkcje pozwalające osiągnąć taki czy inny efekt. Po zapoznaniu się ze wszystkimi przykładami, a także po przeczytaniu kilku poradników spośród wielu tekstów szkoleniowych dostępnych w sieci WWW Czytelnik zdobędzie wiedzę, dzięki której nie będzie musiał zaglądać do rozmaitych instrukcji za każdym razem, gdy zechce stworzyć jakiś obrazek od nowa lub — patrząc na istniejącą ilustrację — powielić efekty uzyskane przez jej autora. Cóż to za podstawowe narzędzia i funkcje, z których korzysta się podczas tworzenia większości grafiki internetowej i które można znaleźć niemal w każdym edytorze obrazów?
Warstwy Warstwy to podstawowe narzędzie, którego używa się podczas obróbki grafiki. Można, na przykład, utworzyć kilka osobnych obiektów na różnych warstwach, a potem przesuwać je względem siebie zupełnie niezależnie. Ponadto, korzystając z warstw, możemy dokonywać zmian w wyglądzie obrazów, które da się w razie potrzeby usunąć bez utraty całego efektu naszej pracy. Możemy również utworzyć aktywne zaznaczenie na jednej warstwie, a na innej wypełnić je jedną barwą lub gradientem barw. Po zapoznaniu się z treścią części książki poświęconej grafice rastrowej Czytelnik poczuje całym sercem, że warstwy to prawdziwi, serdeczni przyjaciele każdego użytkownika. W większości programów warstwy mają swoje własne menu. Zazwyczaj można je znaleźć w górnej części okna aplikacji.
Rozmycie gaussowskie Z tej opcji korzystałam podczas przygotowywania dwóch ostatnich rozdziałów tej książki: w rozdziale 3. opisałam tworzenie za jej pomocą nastroju na zdjęciach, a w rozdziale 4. podpowiedziałam, jak wzbogacić fotografie o cień. Omówione w tym rozdziale Rozmycie gaussowskie również będzie się zaliczało do podstawowych i często używanych narzędzi. W większości programów funkcję tę można znaleźć w menu filtrów lub efektów nakładanych na obrazy.
Prostokąty o zaokrąglonych rogach i inne kształty Prostokątów o zaokrąglonych rogach używa się podczas tworzenia przycisków i plakietek, a także jako elementów składowych większych projektów graficznych. Zazwyczaj uzyskuje się je za pomocą narzędzia zaznaczenia prostokątnego dostępnego we wszystkich edytorach grafiki rastrowej. W programie Photoshop zaznaczenie w kształcie prostokąta o zaokrąglonych rogach tworzy się następująco —najpierw rysuje się zwykły prostokąt narzędziem Zaznaczenie prostokątne, a potem korzysta z opcji Zaznacz/Zmień/Wygładź (aby zaokrąglić rogi prostokąta, trzeba podać odpowiednią wartość parametru zwanego promieniem próbki). W aplikacji Paint Shop Pro zaimplementowana została specjalna opcja, dzięki której możemy tworzyć prostokątne zaznaczenia o okrągłych rogach — nosi ona nazwę Zaokrąglony prostokąt. Z kolei w Paint.NET nie 196
|
Rozdział 5. Grafika użytkowa
znajdziemy żadnego narzędzia przystosowanego do zaznaczania obszarów w omawianym tu kształcie. Problem ten można dość łatwo rozwiązać. Wystarczy stworzyć jakiś prostokątny obiekt o zaokrąglonych rogach, a następnie zaznaczyć go Magiczną różdżką. W większości aplikacji do obróbki grafiki da się rysować nie tylko prostokąty o zaokrąglonych rogach, lecz również zwykłe prostokąty, elipsy i inne figury geometryczne. Warto wiedzieć, że niektórych kształtów należy szukać na przykład w menu wtyczek, a nie na pasku narzędzi. Jeśli chcemy narysować gwiazdę (lub inną figurę geometryczną) w programie GIMP, powinniśmy skorzystać z opcji Filtry/Renderowanie/Gfigury. Wybranie jej z menu spowoduje otwarcie się okna, w którym można stworzyć pożądany kształt.
Gradient Większość programów do obróbki grafiki oferuje narzędzia pozwalające wypełniać określoną przestrzeń gradientem barw. W niektórych aplikacjach wypełnienie gradientowe stanowi atrybut obiektu, na przykład prostokąta lub elipsy.
Style warstw W większości edytorów znajdziemy opcje umożliwiające ustawianie stylów dla warstw (m.in. dodawanie do warstwy cienia, połysku). Jeśli pracujemy w aplikacji Photoshop, opcji stylów warstw powinniśmy szukać w menu Warstwa (Warstwa/Styl warstwy). Użytkownik programu GIMP powinien wiedzieć, że ze stylów warstw korzysta się w nim za pośrednictwem rozszerzenia Sript-Fu o nazwie Warstwy, w Paint Shop Pro natomiast można uzyskać wszystkie efekty stylów warstw znane z aplikacji Photoshop. Twórcy większości poradników dostępnych w sieci zakładają, że odbiorcy ich tekstów korzystają z narzędzi, w których style warstw uzyskuje się podobnie jak w programie Photoshop. Dlatego też użytkownik oprogramowania innego niż słynny produkt Adobe czasami będzie musiał szukać informacji na temat tego, w jaki sposób dany efekt może uzyskać w swoim ulubionym edytorze grafiki rastrowej (na przykład, aby znaleźć informacje na temat tworzenia połysku warstwy w Paint Shop Pro, należy wpisać w okienko wyszukiwarki frazę „Paint Shop Pro połysk”). Istnieje strona internetowa, na której znajduje się mnóstwo cennych informacji na temat przenoszenia metod edycji obrazów i sposobów tworzenia efektów wizualnych z aplikacji Photoshop do Paint Shop Pro. Oto adres tej strony: http://paintshoppro.info/tutorials/ ´photoshop_to_paintshoppro_dictionary.htm (strona w języku angielskim). W dodatkach do niej można znaleźć rozszerzenie Styl warstwy do aplikacji GIMP.
Maski Maski są sposobem na ukrywanie lub odkrywanie całości warstwy, a następnie ukrywanie i odkrywanie jej dowolnych fragmentów. To, które kawałki danej warstwy zostaną odkryte, a które schowane, zależy od koloru zmian dokonywanych w jej wyglądzie. Maski świetnie nadają się do chronienia wybranych fragmentów obrazu przed modyfikacjami wyglądu określonej warstwy. Szczególnie przydają się wtedy, gdy chcemy nałożyć efekt połysku zaledwie na fragment edytowanej grafiki albo zmienić ustawienia parametrów, takich jak czas ekspozycji czy kolorystyka, tylko dla kawałka modyfikowanego obrazu. Zazwyczaj maskę dodaje się do warstwy, zmieniając jej właściwości bezpośrednio lub korzystając z menu Warstwy.
Skrzynka z narzędziami do obróbki grafiki: kształty, warstwy, gradienty i rozmycie
|
197
Przekształcenia Za pomocą narzędzi do przekształcania warstw możemy regulować wymiary obrazków (szerokość, wysokość albo obydwa parametry naraz), obracać niezależne zaznaczenia, ustawiać perspektywę dla obiektów, a także pochylać całe warstwy lub znajdujące się na niej zaznaczenia. Przekształcenia szczególnie przydają się podczas tworzenia odbić. Opisane funkcje są implementowane w edytorach na wiele różnych sposobów. Jeśli korzystamy z aplikacji Photoshop, przekształcenia znajdziemy w menu Edycja, w Paint Shop Pro natomiast stanowią one oddzielny pasek narzędzi, który pokazuje się po zrasteryzowaniu grafiki typu wektorowego. Aby dowiedzieć się, jak korzystać z poszczególnych narzędzi w takim czy innym programie, należy zapoznać się z jego dokumentacją. Metody tworzenia grafiki, które opiszę w dalszej części tego rozdziału, zostały opracowane w oparciu o opcje i funkcje dostępne w programach GIMP 2.4 i Photoshop. Oczywiście metody te z powodzeniem można stosować przy pracy z aplikacjami takimi jak Photoshop Elements czy Paint Shop Pro. Jeśli Czytelnik zechce opisane w niniejszym rozdziale techniki wypróbować za pomocą programów innych niż Photoshop czy GIMP, będzie musiał odpowiednio przystosować je do warunków pracy, jakie narzuci narzędzie wybrane do obróbki obrazów.
Pora zająć się tworzeniem grafiki. Reszta rozdziału, poczynając od następnego podrozdziału, została poświęcona zagadnieniom korzystania z rozmaitych opcji i funkcji w celu uzyskania określonych efektów wizualnych. Zabieramy się do roboty!
Lśniące przyciski: żelowe, mokre albo szklane Wszystkie lśniące przyciski, nieważne, czy nazwiemy je żelowymi, mokrymi, czy też szklanymi, są do siebie podobne. Zazwyczaj wyglądają trójwymiarowo, a na ich krawędziach pojawiają się słabe lub wyraźne refleksy. Błyszczące przyciski da się tworzyć niemal we wszystkich edytorach, w których zaimplementowane zostały obsługa warstw, gradientów, masek i krycia oraz filtr rozmywający obraz.
Tworzenie trójwymiarowego przycisku w aplikacji GIMP: błyszczący przycisk Dość popularne w sieci WWW stały się przyciski z refleksami świetlnymi. Wyraźne odbicie światła widoczne w górnej części przycisku sprawia, że wygląda on jak obiekt trójwymiarowy. Przykładowy przycisk omawianego typu można zobaczyć na rysunku 5.1.
Rysunek 5.1. Błyszczący przycisk z białym tekstem
198
|
Rozdział 5. Grafika użytkowa
Aby wykonać błyszczący przycisk w aplikacji GIMP, należy stworzyć nowy obraz. Obszar roboczy na tym obrazku powinien być na tyle duży, by można było wygodnie z niego korzystać. Niepotrzebne tło bez kłopotu usuniemy po ukończeniu pracy nad przyciskiem. Po otwarciu kanwy dla nowego obrazka tworzymy nową przezroczystą warstwę, a następnie, korzystając z narzędzia Zaznaczenie prostokątne, rysujemy prostokąt o szerokości 250 pikseli i wysokości 100 pikseli. Na pasku narzędzi odszukujemy opcję Zaokrąglaj rogi, zaznaczamy ją, a dla parametru o nazwie Promień wpisujemy wartość 40. Ponadto powinniśmy się upewnić, że zaznaczona została opcja Wygładzaj. Na początku pracy nad przyciskiem możemy narysować prostokąt o wymiarach nieco większych od docelowych — obrazy o znacznych rozmiarach edytuje się łatwiej niż małe. Właściwe wymiary należy nadać przyciskowi tuż przed wzbogaceniem go o tekst lub wklejeniem w niego innego obrazka. Oczywiście zamiast tworzyć większy prostokąt, można zwyczajnie powiększyć w edytorze obszar roboczy. W aplikacjach takich jak Photoshop, w których nie ma narzędzia do tworzenia zaznaczeń w kształcie prostokąta o zaokrąglonych rogach, można narysować odpowiednio wyglądający obiekt, zaznaczyć go i tak uzyskane zaznaczenie wykorzystać w dalszej pracy nad przyciskiem.
Jeśli mamy już zaznaczenie w odpowiednim kształcie, ustanawiamy barwę czarną kolorem pierwszoplanowym i klikamy opcję Wypełnij kolorem pierwszoplanowym (Edycja/Wypełnij kolorem pierwszoplanowym). Efekt opisanego działania został przedstawiony na rysunku 5.2.
Rysunek 5.2. Początkowy etap tworzenia przycisku Lśniące przyciski: żelowe, mokre albo szklane
|
199
Korzystając z narzędzia Zaznaczenie prostokątne (nie zmieniając jego ustawień), rysujemy kolejny prostokąt. Ten musi być nieco mniejszy od poprzedniego: jego wysokość powinna wynieść około 33 pikseli (czyli 1/3 wysokości czarnego prostokąta), a szerokość 230 pikseli. Nowy, mniejszy prostokąt umieszczamy tuż ponad dolną połową dużego prostokąta, tak jak zostało to pokazane na rysunku 5.3.
Rysunek 5.3. Prostokąt, który później stanie się odbiciem światła na powierzchni przycisku
Po utworzeniu małego prostokąta nie likwidujemy zaznaczenia, tylko dodajemy do obrazka kolejną przezroczystą warstwę. Teraz trzeba skorzystać z narzędzia Gradient. Ustawiamy dla niego kolory: tła — biały, pierwszoplanowy — czarny. Ponadto ustawiamy wartość równą 50% dla Krycia. Po dokonaniu modyfikacji parametrów narzędzia Gradient przeciągamy kursor (trzymając wciśnięty lewy przycisk myszy) pionowo od dolnego do górnego boku małego prostokąta. W ten sposób uzyskuje się plamę światła widoczną na przycisku. Na tym etapie pracy nie pozostaje już nic innego, jak tylko zmienić rozmiar przycisku (jeśli jest to konieczne) i opatrzyć go odpowiednim tekstem. Można również dodać do niego cień. Tworząc przykładowy przycisk użyłam czcionki Georgia o rozmiarze 66 pikseli — za pomocą białych liter napisałam na nim słowo „Zapisz”. Po ukończeniu pracy nad wyglądem przycisku aktywujemy warstwę, na której znajduje się duży prostokąt z zaokrąglonymi rogami stanowiący tło dla napisu „Zapisz”, a potem z menu Filtry wybieramy opcję Rzucanie cienia (Filtry/Światło i cień/Rzucanie cienia) i akceptujemy domyślne ustawienia parametrów funkcji (po 8 pikseli dla Przesunięć X i Y oraz 15 pikseli dla Promienia rozmycia). Można by dodatkowo na warstwę z tekstem nałożyć filtry Dodaj fazę oraz 200
|
Rozdział 5. Grafika użytkowa
Rzucanie cienia, na razie jednak pozostańmy przy koncepcji płaskich liter umieszczonych na wypukłym przycisku. Efekt postępowania zgodnie z powyższą instrukcją widać na przedstawionym wcześniej rysunku 5.1. Nadszedł czas, by usunąć oryginalne tło ze stworzonego przez nas obrazka — dzięki temu otrzymamy przycisk na tle przezroczystym. Teraz możemy grafikę zapisać do pliku PNG, co pozwoli zachować przezroczystość cienia rzucanego przez przycisk. Dodatkowo powinniśmy wziąć pod uwagę, że — o czym wspomniałam w rozdziale 4. — w przeglądarce Internet Explorer 6.x, wciąż bardzo popularnej, nie zaimplementowano obsługi przezroczystości kanału alfa, przez co nasz przycisk będzie wyglądał w niej okropnie. Dopóki Internet Explorer 6.x nie stanie się mniej popularny, najrozsądniej będzie pod nasze przyciski podkładać tło w kolorze tła witryny WWW, na której zamierzamy je umieścić. Tak przygotowane przyciski zapisujemy do plików w formacie JPEG. Jeśli zaś za wszelką cenę pragniemy zachować przezroczyste tło, nie pozostaje nam nic innego, jak zapisywać przyciski do plików typu GIF. Zauważyłam, że przyciski zapisane jako JPEG wyglądają dużo lepiej od tych zapisanych do plików GIF, dlatego też zazwyczaj wybieram pierwszą z przedstawionych tu metod zachowywania efektów mojej pracy. Przed zapisaniem przycisku do pliku w formacie JPEG upewniam się, że został on umieszczony na tle w kolorze tła właściwej strony internetowej, a następnie spłaszczam obraz, korzystając z opcji Obraz/Spłaszcz obraz. Używam również funkcji Autocrop Image. Podsumujmy czynności, które należy wykonać, by utworzyć przycisk.
1. Tworzymy nowy obraz. 2. Tworzymy prostokąt w takim kształcie, który odpowiada formie wymyślonego przez nas przycisku. Prostokąt nie musi być narysowany w skali 1:1 w stosunku do finalnej wersji przycisku.
3. Zaokrąglamy rogi prostokąta. 4. Wypełniamy prostokąt pożądanym kolorem. 5. Tworzymy drugi prostokąt. Powinien być on nieco węższy od pierwszego i mieć wysokość równą 1/3 jego wysokości.
6. Mniejszy prostokąt umieszczamy pośrodku większego. Następnie przesuwamy go w górę, tak by znalazł się on nieco ponad dolną połową dużego prostokąta.
7. Tworzymy drugą przezroczystą warstwę. 8. Mniejszy prostokąt wypełniamy gradientem (Krycie ustawione na 50%). 9. Na przycisku wpisujemy dowolny tekst. 10. Odcinamy nadmiar tła, tak by gotowy obrazek zawierał tylko przycisk i jego cień. Efekt
naszej pracy zapisujemy do pliku PNG, jeśli chcemy zachować przezroczystość, lub spłaszczamy i zapisujemy w formacie JPEG.
Tworzenie trójwymiarowego przycisku w aplikacji GIMP, podejście drugie: przycisk wklęsły Większość trójwymiarowych przycisków to przyciski wystające ze stron WWW, wypukłe jak kropla wody umieszczona na kartce papieru.
Lśniące przyciski: żelowe, mokre albo szklane
|
201
Jeśli umiemy tworzyć wypukłe elementy stron internetowych, nic nie stoi na przeszkodzie, by zacząć tworzyć również wklęsłe. Wklęsły przycisk został przedstawiony na rysunku 5.4. Odrzucając ograniczenia wynikające z naturalnej płaskości witryn WWW, nie powinniśmy wzbogacać swoich stron wyłącznie o elementy wypukłe, skoro wklęsłe wykonuje się równie łatwo.
Rysunek 5.4. Przycisk wklęsły
Aby wykonać wklęsły przycisk, tworzymy nowy obraz, a na nim rysujemy dokładnie taki sam czarny prostokąt o zaokrąglonych rogach jak ten, który pojawił się w poprzednim przykładzie. Przy aktywnym zaznaczeniu duplikujemy nowo utworzoną warstwę, po czym zmieniamy kolor wypełnienia widocznego na niej prostokąta na szary (#dddddd). Za pomocą myszy albo klawiatury przesuwamy szary prostokąt w dół, tak by odkrył jedną trzecią powierzchni czarnego prostokąta. Na warstwę z szarym prostokątem nakładamy filtr Rozmycie Gaussa (Filtry/Rozmycie/Rozmycie Gaussa), przyjmując wartości promienia rozmycia równe 75 pikseli (efekt użycia filtra widać na rysunku 5.5). Warto zwrócić uwagę na to, że rozmyciu uległa tylko ta część szarego prostokąta, która pozostała wewnątrz zaznaczenia. Jeśli Czytelnik zdecyduje się wykonać przycisk w innym edytorze obrazów, na przykład w aplikacji Photoshop, będzie musiał podać odpowiednio dobrane wartości liczbowe dla promienia rozmycia. Aby pozbyć się zbędnego fragmentu szarego prostokąta, odwracamy zaznaczenie (Zaznaczenie/Odwróć). Następnie aktywujemy warstwę z szarym prostokątem i wycinamy zaznaczony obszar, korzystając z funkcji Edycja/Wytnij. Na rysunku 5.6 przedstawiony został przycisk po wycięciu niepotrzebnego kawałka szarego prostokąta. Gdy przycisk jest już gotowy, możemy opatrzyć go tekstem. Wykonując przykładowy przycisk, użyłam czcionki Georgia o białych literach wielkości 67 pikseli. Jeśli Czytelnik pragnie wykonać przycisk identyczny z przykładowym, powinien na swoim obrazku napisać „Edytuj”. Należy pamiętać o tym, żeby nie umieszczać bloku tekstu dokładnie pośrodku przycisku. Tekst trzeba przesunąć nieco w lewo i w górę względem pozycji centralnej. Następnie na aktywną warstwę z tekstem nakładamy filtr Rzucanie cienia (Filtry/Światło i cień/ ´Rzucanie cienia); w okienkach Przesunięcie X, Przesunięcie Y oraz Promień rozmycia wpisujemy wartość 15. Cień sprawia, że przycisk wygląda bardziej trójwymiarowo. Pozostało już tylko zapisać efekt pracy. Obrazek można zapisać w którymś z omówionych wcześniej formatów. Dodatkowo warto pamiętać o podłożeniu pod przycisk odpowiedniego tła. Na rysunku 5.4 widać gotowy przycisk wykonany opisaną tu metodą (tło obrazka jest ciemnoszare). Cień rzucany przez litery tekstu w połączeniu z delikatnym cieniem utworzonym w początkowej fazie pracy nad przyciskiem nadaje obrazkowi głębię — wklęsłość, o której pisałam wcześniej. 202
Rysunek 5.6. Przycisk po wycięciu zbędnego fragmentu szarego prostokąta
Lśniące przyciski: żelowe, mokre albo szklane
|
203
Wrażenie głębi możemy stosować nie tylko wtedy, gdy tworzymy przyciski, lecz również kiedy wykonujemy inne elementy witryny internetowej. Na przykład, odpowiednio przygotowany, podłużny prostokąt bez zaokrąglonych rogów może stanowić swoiste wgłębienie w powierzchni witryny, świetnie nadające się do tego, by umieścić w nim jakiś tekst wymagający podkreślenia (tytuł, notę o prawach autorskich itd.). Oczywiście pasek mający być wklęsłym fragmentem strony WWW można wypełnić kształtami innymi niż litery, trzeba jednak pamiętać o tym, by owe kształty podkreślały efekt wgłębienia. Rysunek 5.7 przedstawia przykładowy pasek z obrazkami zamiast liter, wykonany w programie Photoshop (symbole uzyskałam za pomocą narzędzia Kształt własny). Aby nadać paskowi wygląd panelu pokrytego twardym plastikiem albo szkłem, wystarczy na jego górną część nałożyć efekt odbicia światła (rysunek 5.8). Iluzję refleksu otrzymuje się dzięki utworzeniu zaznaczenia części przycisku lub paska i wypełnieniu owego zaznaczenia przejściem kolorów od barwy białej do przezroczystości. Całkowite krycie dla gradientu powinno być ustawione na 50%. O odbiciach i refleksach więcej napiszę w dalszej części tego rozdziału.
Rysunek 5.7. Wklęsły pasek narzędzi, na którym widać różne symbole
Rysunek 5.8. Wklęsły pasek narzędzi, od którego odbija się światło 204 |
Rozdział 5. Grafika użytkowa
Poniżej zestawiam kroki, które trzeba wykonać, żeby utworzyć wklęsły przycisk.
1. Tworzymy nowy obraz. 2. Tworzymy prostokąt w kształcie, który będzie ostatecznym kształtem ukończonego przycisku. Prostokąt nie musi być wielkości przycisku.
3. Zaokrąglamy rogi prostokąta. 4. Wypełniamy prostokąt dowolnym wybranym przez siebie kolorem. 5. Wykonujemy duplikat warstwy z prostokątem. Nowy prostokąt wypełniamy barwą, która stanie się później jaśniejszą częścią przycisku.
6. Przeciągamy nowy prostokąt pionowo w dół. Ustawiamy go tak, by odkrył jedną trzecią powierzchni pierwszego prostokąta.
7. Przesunięty prostokąt modyfikujemy, nakładając na niego efekt rozmycia. Rozmycie powinno być znaczne (wpisujemy wysokie wartości dla parametru Promień rozmycia).
8. Przycinamy przesunięty prostokąt. Aby to zrobić, uaktywniamy niższą warstwę (tę z pierwszym prostokątem) i wybieramy dla niej opcję Warstwa/Przezroczystość/Dodaj do zaznaczenia. Następnie odwracamy zaznaczenie, przechodzimy do warstwy z przesuniętym prostokątem i odcinamy niepotrzebną część obrazka.
9. Dodajemy tekst. Na aktywną warstwę z tekstem nakładamy filtr Rzucanie cienia (Przesunięcie X, Przesunięcie Y, Promień rozmycia równe 15 pikseli).
Tworzenie trójwymiarowego przycisku w aplikacji GIMP, podejście trzecie: mokry przycisk Wykonanie wklęsłego przycisku to pierwszy krok do stworzenia przycisku mokrego, wodnego albo żelowego — możemy przyjąć dowolną nazwę. Przycisk taki wydaje się być miękki i wygląda, jakby został wypełniony przezroczystym płynem. Aby z przycisku wklęsłego zrobić mokry, wystarczy dodać cień pod jego najniższą, pierwszą warstwą (dla parametrów Przesunięć X i Y oraz Promienia rozmycia przyjmujemy wartość równą 8 pikseli) — w ten sposób niejako wyciągamy przycisk na powierzchnię strony WWW. Uzyskany przycisk będzie wyglądał jeszcze lepiej, jeśli wzbogacimy go o niewielki, podłużny refleks. Odbicie światła powinno być usytuowane przy górnej krawędzi przycisku; można je uzyskać techniką przedstawioną przeze mnie w podrozdziale, w którym opisałam proces tworzenia pierwszego z przykładowych przycisków. Rysunek 5.9 przedstawia przycisk wykonany na potrzeby poprzedniego podrozdziału, wzbogacony o refleks, widoczny przy jego górnej krawędzi, oraz cień.
Rysunek 5.9. Wklęsły przycisk zmieniony w przycisk wodny Lśniące przyciski: żelowe, mokre albo szklane
|
205
Czerń jest bardzo elegancka, nic więc dziwnego, że czarne przyciski prezentują się wyśmienicie, jednakże ludzie lubią również inne kolory. Podstawowa różnica między barwą czarną a innymi kolorami objawia się podczas tworzenia cienia rzucanego przez tekst umieszczany na przycisku. Otóż, jeśli wykonujemy przycisk, który nie ma być czarny, cieniom liter powinniśmy nadać ciemniejszy odcień koloru przycisku. Cienie służą w tym przypadku do podkreślenia, że część światła padającego na przycisk jest zatrzymywana przez widniejący na nim tekst. Inaczej mówiąc, w miejscach niedoświetlonych widzimy kolor podłoża, na którym położony został przycisk. Pozostały obszar znajdujący się za przyciskiem jest jaśniejszy, gdyż pada na niego intensywne światło. Efekt mokrego przycisku zastosowany podczas tworzenia przycisku kolorowego można zobaczyć na rysunku 5.10 — przedstawiono na nim wodniście niebieską wersję przycisku z napisem „Edytuj”.
Wykonamy teraz niebieski, mokry przycisk. Aby to zrobić, musimy stworzyć prostokąt z zaokrąglonymi rogami. Wypełniamy go kolorem ciemnoniebieskim (wartość właściwego koloru w zapisie heksadecymalnym wynosi 0c27ef). Zachowując aktywne zaznaczenie, duplikujemy warstwę, a duplikat wypełniamy jaśniejszym odcieniem koloru niebieskiego — morskim niebieskim (wartość 00ffff). Nowo powstałą warstwę przesuwamy pionowo w dół, tak by górna część widniejącego na niej prostokąta pokryła się z dolnym fragmentem prostokąta ciemnoniebieskiego (rysunek 5.11).
Na warstwę z jaśniejszym prostokątem nakładamy filtr Rozmycie Gaussa. Tym razem jednak przyjmiemy mniejszą wartość Promienia rozmycia (ja wpisałam wartość równą 55 pikseli). Po zmodyfikowaniu jasnoniebieskiego prostokąta filtrem rozmywającym aktywujemy warstwę z ciemniejszym prostokątem, a następnie zaznaczamy kanał alfa, wybierając opcję Warstwa/ ´Przezroczystość/Dodaj do zaznaczenia. Odwracamy zaznaczenie, przechodzimy do warstwy z jaśniejszym prostokątem i wycinamy niepotrzebny fragment obrazka (Edycja/Wytnij). Pora umieścić na przycisku tekst. Wybieramy tę samą czcionkę, której użyliśmy, tworząc przykładowy przycisk opisany w poprzednim podrozdziale, i wypisujemy na przycisku pożądane słowo lub słowa. Następnie tekst przesuwamy tak, by nie znajdował się dokładnie pośrodku przycisku. Na warstwę z tekstem nakładamy filtr Rzucanie cienia, przy czym za kolor cienia przyjmujemy barwę ciemniejszego z rysowanych wcześniej prostokątów (0c27ef). Efekt, jaki powinien otrzymać Czytelnik na tym etapie pracy, można zobaczyć na rysunku 5.12. W oknie filtra Rzucanie cienia wpisujemy wartość 15 dla parametrów Przesunięcie X, Przesunięcie Y i Promień rozmycia.
Rysunek 5.12. Dodawanie do przycisku cienia liter. Cień tekstu powinien mieć kolor ciemniejszego z dwóch prostokątów, na bazie których powstał przycisk
Następnym krokiem jest połączenie wszystkich widocznych warstw i nałożenie na obrazek zwykłego cienia, dla którego ustawiamy Przesunięcie X, Przesunięcie Y oraz Promień rozmycia równe 8 pikseli. Cień powinien być czarny. Nie pozostało już nic innego, jak tylko dorysować przy górnej krawędzi przycisku niewielki, podłużny prostokąt z zaokrąglonymi rogami. Robi się to za pomocą narzędzia Zaznaczenie Lśniące przyciski: żelowe, mokre albo szklane
|
207
prostokątne. Następnie tworzymy nową warstwę i, używając do tego celu funkcji Gradient, wypełniamy nowo powstały prostokąt przejściem od barwy ciemnoniebieskiej do jasnoniebieskiej. Ponieważ programy GIMP i Photoshop znacząco się różnią, napisałam instrukcję, która ułatwi Czytelnikowi wykonanie przycisku podobnego do tego z rysunku 5.10 za pomocą drugiej z wymienionych aplikacji.
1. Tworzymy nowy obraz. 2. Korzystając z narzędzia Zaokrąglony prostokąt, rysujemy przycisk o właściwych wymiarach
i o odpowiednim kształcie oraz kolorze. Z menu Warstwa wybieramy opcję Rasteryzuj/Kształt — w ten sposób tworzymy nową warstwę z narysowaną przez nas figurą. Warstwa ta jest umieszczana nad tłem edytowanego obrazka.
3. Narzędziem Różdżka zaznaczamy prostokąt. 4. Tworzymy nową warstwę. 5. Korzystając z narzędzia Wiadro z farbą, wypełniamy zaznaczony obszar na nowej warstwie wybranym przez siebie kolorem (kolor ten będzie odpowiednikiem barwy jasnoniebieskiej z omówionego wcześniej przykładu).
6. Za pomocą myszy lub klawiatury pionowo w dół przesuwamy prostokąt wypełniony
drugim kolorem. Dążymy do tego, by jego górny bok znalazł się na linii znaczącej połowę starszego z prostokątów.
7. Usuwamy zaznaczenie. Warstwą aktywną powinna być warstwa z nowszym prostokątem. 8. Na wyższą z warstw (nowszą) nakładamy filtr Rozmycie gaussowskie. Ja, tworząc przyciski w programie Photoshop, Promień ustawiam na około 27 pikseli.
9. Aktywujemy warstwę, na której znajduje się pierwszy (starszy) z prostokątów. 10. Za pomocą Różdżki zaznaczmy prostokąt. Z menu Zaznacz wybieramy opcję Odwrotność. 11. Wracamy do wyższej warstwy zawierającej jaśniejszą część przycisku. Naciskamy klawisz Delete na klawiaturze komputera lub wycinamy zaznaczenie. W ten sposób z drugiego, nowszego prostokąta zostaje tylko fragment mieszczący się wewnątrz obwodu pierwszej z narysowanych przez nas figur.
12. Wybieramy narzędzie Tekst i ustawiamy parametry czcionki (rodzina, rozmiar, kolor).
Zazwyczaj korzystam z czcionki Cooper Std. Gdybym chciała odtworzyć niebieski przycisk wykonany w aplikacji GIMP, posłużyłabym się tekstem w kolorze białym.
13. Aby otrzymać przycisk podobny do przykładowego przedstawionego w tym podrozdziale, wpisujemy tekst o treści „Edytuj”. W ten sposób powstaje nowa, czwarta już warstwa.
14. Z menu Warstwa wybieramy opcję Styl warstwy/Cień. Przesunięcie (Odległość) ustawiamy
na 25 pikseli, Rozmiarowi zaś przypisujemy wartość równą 5 pikselom. Cieniowi nadajemy kolor, którym wypełniony został pierwszy z prostokątów.
15. Refleks otrzymuje się następująco: tworzymy nową warstwę, wybieramy narzędzie Za-
okrąglony prostokąt i rysujemy mały prostokąt przy górnej krawędzi przycisku. Po zrasteryzowaniu warstwy, korzystając z narzędzia Różdżka, zaznaczamy nowo powstały prostokąt, a potem usuwamy warstwę.
16. Tworzymy nową warstwę, po czym narzędziem Gradient wypełniamy zaznaczenie. Przejście barw powinno przebiegać od koloru białego do przezroczystości.
208 |
Rozdział 5. Grafika użytkowa
17. Na tym etapie pracy nie pozostaje już nic innego, jak tylko ustalić kolor tła i spłaszczyć
obraz, by móc do przycisku dodać cień. Rysunek 5.13 przedstawia czerwono-różowy przycisk o dość ostrych rogach, rzucający cień, wykonany w programie Photoshop CS3. Na rysunku widać również okno Warstwy — Czytelnik może zaobserwować, jak powinna wyglądać struktura przycisku przed spłaszczeniem obrazu.
Rysunek 5.13. Błyszczący, mokry przycisk wykonany w programie Photoshop CS3
Każdy, kto chce zająć się tworzeniem przycisków, powinien poeksperymentować z różnymi zestawieniami kolorów. Warto sprawdzić nawet takie, które wydają się wyjątkowo dziwne. Do tej pory wszystkie omówione przeze mnie przykłady grafiki użytkowej miały kształty typowych przycisków. Czasami jednak chcemy nadać trójwymiarowy wygląd obiektom o innych kształtach. O tym, jak to zrobić, napiszę w następnym podrozdziale.
Nie tylko przyciski: plakietki i ikony Plakietki pojawiające się na stronach WWW i ikony, które widujemy w trakcie używania różnych aplikacji, są grafikami dwuwymiarowymi lub udającymi obiekty trójwymiarowe. Ich zadaniem jest przyciąganie uwagi oraz formułowanie prostych przekazów, a także kreowanie szaty graficznej witryn i programów. Korzystając z nich, możemy poinformować ludzi odwiedzających stronę, że oglądają wersję beta serwisu albo że w naszym sklepie internetowym właśnie zaczęła się wielka wyprzedaż, podkreślić wagę jakiegoś wydarzenia, zaznaczyć istotną dla nas datę w kalendarzu lub po prostu upiększyć witrynę.
Nie tylko przyciski: plakietki i ikony
| 209
Między plakietką a ikoną w aplikacji istnieje jedna zasadnicza różnica: plakietka, w przeciwieństwie do ikony, nie ma sprawiać wrażenia obiektu, który warto bądź należy kliknąć. A zatem czym ikona różni się od przycisku? Zazwyczaj nie widnieje na niej żaden tekst. O ile na przyciskach umieszcza się krótkie informacje o tym, co się stanie po ich kliknięciu, o tyle ikony to obiekty czysto graficzne. Ponadto przyciski cechują się dość charakterystycznym kształtem, natomiast ikony mogą przyjmować praktycznie dowolne formy (choć nie da się zaprzeczyć, że najbardziej popularne są ikonki kwadratowe). O efektach kliknięcia danej ikony informuje widniejący na niej znak graficzny (otwieranie aplikacji, zapisywanie do pliku itd.). W tym podrozdziale omówię plakietki. Do zagadnienia ikon wrócę w części rozdziału dotyczącej odtwarzania efektów graficznych zaobserwowanych na gotowych obrazkach stworzonych przez innych. W tym (i w następnym) podrozdziale pojawią się przykłady wykonane w aplikacji Photoshop. Zwracam uwagę Czytelnika na to, że po utworzeniu w niej jakiegoś kształtu trzeba go zrasteryzować, aby móc dokonywać jego dalszych modyfikacji. Dzieje się tak, ponieważ nowo narysowana figura geometryczna jest tworzona jako element grafiki wektorowej, natomiast my — stosując rozmaite funkcje w celu zmiany jej wyglądu — traktujemy ją jak obraz statyczny. Obraz przedstawiający jakiś kształt można zrasteryzować, klikając opcję Warstwa/Rasteryzuj/Kształt.
Nieco bardziej skomplikowany błyszczący kształt Dość typowym przykładem plakietki jest wieloramienna, przysadzista gwiazda wypełniona gradientem barw i opatrzona tekstem przekrzywionym względem poziomu o mniej więcej 45° (rysunek 5.14). Podobną plakietkę wykonuje się bardzo łatwo, szczególnie jeśli korzysta się z edytora obrazów, w którym zaimplementowana została obsługa funkcji mieszania warstw.
Rysunek 5.14. Gotowa plakietka 210
|
Rozdział 5. Grafika użytkowa
Na obiektach o prostych kształtach, takich jak elipsy czy prostokąty, efekt refleksów świetlnych uzyskuje się stosunkowo łatwo. Jednakże sprawy nieco się komplikują, gdy podobne wrażenie chcemy stworzyć, wykonując plakietkę o bardziej wyszukanej formie. Jednym ze sposobów nakładania cieni i odblasków na obrazki z figurami o rozmaitych kształtach jest obrysowanie fragmentu danej figury, po czym wykorzystanie obrysu do stworzenia trójwymiarowego cieniowania. Wspomnianą tu techniką posłużę się podczas wykonywania swojej pierwszej plakietki — dwunastoramiennej, masywnej gwiazdki. Z techniką tworzenia błyszczących plakietek, którą zamierzam opisać, zetknęłam się po raz pierwszy na popularnej stronie Scriptygoddess (http://www.scriptygoddess.com/ ´archives/category/photoshop-tutorial/). Serwis jest prowadzony w języku angielskim.
Wykonywanie plakietki w kształcie gwiazdy zaczynamy od utworzenia nowego obrazu — powinien być on kwadratem o bokach długości 600 pikseli. Grafikę będzie można później zmniejszyć, niemniej jednak większość pracy warto wykonać na stosunkowo dużej i przez to wygodnej powierzchni. Za kolor pierwszoplanowy przyjmujemy ciemną czerwień (wartość heksadecymalna proponowanej przeze mnie barwy to bb0000). W następnej kolejności powinniśmy zająć się narysowaniem gwiazdki o dwunastu bokach. W tym celu spośród narzędzi do kreślenia figur geometrycznych wybieramy Wielokąt. Wszystkim tym, którzy nie mieli okazji pracować w aplikacji Photoshop, łatwiej będzie szukać wspomnianego narzędzia, jeśli napiszę, że można znaleźć je w pasku o nazwie Narzędzia — znajduje się ono w zbiorze funkcji takich jak Prostokąt, Zaokrąglony prostokąt, Elipsa, Linia i Kształt własny (wszystkie wspomniane przyrządy rysownicze uruchamia się tym samym przyciskiem). Po wybraniu narzędzia Wielokąt trzeba zająć się ustawieniem jego opcji dostępnych w pasku Opcje. Najpierw należy ustawić liczbę ramion, wpisując wartość 12 w polu Boki. W Opcjach wielokąta zaznaczamy pole wyboru Gwiazda oraz w okienku Wcięcia boków wpisujemy wartość równą 25%. Czytelnik może narysować gwiazdkę dowolnej, wybranej przez siebie wielkości. Za pomocą narzędzia Gradient dodamy cień w dolnej części gwiazdy. W tym celu zaznaczamy gwiazdkę Różdżką, a potem tworzymy nową przezroczystą warstwę. Barwę czarną ustawiamy jako kolor tła i wewnątrz zaznaczenia narzędziem Gradient rysujemy pionową linię, tak by otrzymać płynne przejście barw od czerwonej do czarnej (rysunek 5.15). Na tym etapie pracy zaznaczenie powinno być wciąż aktywne. Zmniejszamy je, klikając opcję Zaznacz/Zmień/Zwężanie i w odpowiednim okienku wpisując wartość 5. Efekt opisanych działań można zobaczyć na rysunku 5.16. Z paska narzędzi wybieramy funkcję Zaznaczanie eliptyczne, a następnie, trzymając wciśnięte klawisze Alt i Shift, tworzymy zaznaczenie przecinające gwiazdę mniej więcej w połowie wysokości. To ważne, żeby podczas wykonywania opisanej czynności nie zapomnieć o wciśnięciu klawiszy Alt i Shift — ta kombinacja przycisków oraz narzędzie do tworzenia zaznaczeń pozwalają zaznaczyć obszar będący częścią wspólną nowego zaznaczenia oraz zaznaczenia istniejącego wcześniej. Po uzyskaniu odpowiedniego zaznaczenia do edytowanego obrazka dodajemy nową przezroczystą warstwę. Następnie na kolor tła wybieramy biel i wypełniamy zaznaczony obszar gradientem barw (przejście kolorów od czerwonego do białego). W ten sposób otrzymujemy jaśniejszy fragment gwiazdy widoczny na rysunku 5.17. Uzyskawszy efekt odblasku, usuwamy zaznaczenie (Zaznacz/Usuń zaznaczenie).
Nie tylko przyciski: plakietki i ikony
|
211
Rysunek 5.15. Ciemna, czerwona gwiazda narysowana z wykorzystaniem narzędzia Wielokąt
Rysunek 5.16. Zaznaczenie utworzone wewnątrz gwiazdki
212
|
Rozdział 5. Grafika użytkowa
Rysunek 5.17. Odblask wykonany za pomocą narzędzia Gradient
Pracę nad wyglądem plakietki kończy dodanie na obrazku cienia. Jednakże tym razem cień tworzymy bez przesunięcia, tak by otaczał on całą gwiazdkę (dla parametrów Odległość i Zasięg ustawiamy wartość równą 0, a w okienku parametru Rozmiar wpisujemy 9). Gotowa plakietka została przedstawiona na rysunku 5.18. Można umieścić na niej jakiś napis lub obrazek, o czym więcej napiszę w dalszej części tego rozdziału. Poniżej podaję zestawienie kroków wykonanych podczas tworzenia plakietki.
1. Tworzymy nowy obraz. 2. Rysujemy nową figurę geometryczną, na przykład dwunastoramienną gwiazdę. 3. Odpowiednią część obrazka, nad którym pracujemy, wypełniamy przejściem barw. Przejście (od koloru, którym wypełniliśmy plakietkę, do koloru czarnego) nanosimy na dolną połowę narysowanego przez siebie kształtu; najciemniejszy powinien być fragment plakietki znajdujący się przy jej dolnej krawędzi.
4. Zaznaczamy plakietkę, a potem zwężamy zaznaczenie o 5 pikseli. 5. Korzystając z narzędzia o nazwie Zaznaczanie eliptyczne, zaznaczamy górny fragment stworzonej przez siebie figury geometrycznej. Podczas rysowania zaznaczenia należy trzymać wciśnięte klawisze Alt i Shift. Zaznaczamy na tyle duży obszar obrazka, by uzyskać odpowiednią ilość miejsca, które stanie się oświetloną częścią plakietki. W wyniku wciśnięcia klawiszy Alt i Shift ostatecznie zaznaczony zostanie jedynie fragment obrazka będący obszarem wspólnym dwóch zaznaczeń: istniejącego wcześniej i właśnie tworzonego.
Nie tylko przyciski: plakietki i ikony
|
213
Rysunek 5.18. Ukończona błyszcząca gwiazdka rzucająca cień na podłoże
6. Dodajemy do obrazka nową przezroczystą warstwę, na której pojawi się odblask widoczny na gotowej plakietce. Następnie zaznaczenie wypełniamy gradientem kolorów. Przejście nanosimy na obrazek, tak by przebiegało od barwy, którą wstępnie wypełniliśmy stworzoną przez siebie figurę geometryczną, do koloru białego. Część plakietki znajdująca się przy jej górnej krawędzi powinna być najbardziej biała.
7. Wzbogacamy plakietkę o cień. Cień ten nie powinien być przesunięty w żadną ze stron, chcemy bowiem, żeby otaczał całą plakietkę.
Lekko połyskliwa zamiast błyszczącej Ciekawą wariacją plakietki opisanej w poprzednim podrozdziale może być plakietka mniej błyszcząca, zmatowiona. Umiejętność tworzenia takich plakietek przydaje się wtedy, gdy istnieje ryzyko, że zbyt mocno zaakcentowany blask pojawiający się na plakietce niekorzystnie wpłynie na wygląd umieszczonego na niej tekstu lub obrazka. Jeśli chcemy wykonać mniej błyszczącą wersję plakietki, której opis pojawił się w poprzednim podrozdziale, pracę nad nią powinniśmy zacząć od narysowania ciemnoczerwonej (bb0000), dwunastoramiennej gwiazdy. Następnie gwiazdkę musimy zaznaczyć za pomocą narzędzia Różdżka lub w dowolny inny sposób. Wybieramy z paska narzędzi Zaznaczanie eliptyczne i — trzymając wciśnięte klawisze Alt oraz Shift — tworzymy zaznaczenie dolnej części naszej plakietki. Dodajemy do obrazka nową przezroczystą warstwę, po czym wypełniamy zaznaczony fragment kolorem czarnym. Krycie warstwy ustawiamy na 40%. Efekt wykonania wymienionych do tej pory czynności można zobaczyć na rysunku 5.19. 214
|
Rozdział 5. Grafika użytkowa
Rysunek 5.19. Tworzenie warstwy cienia
Aby nałożyć na plakietkę odblask, powtarzamy kroki opisane powyżej (włącznie z dodaniem do obrazka nowej warstwy). Oczywiście zaznaczenie tym razem musimy wypełnić barwą białą, a nie czarną. Gdy cień i odblask będą już gotowe, powinniśmy złagodzić ich krawędzie; robimy to osobno dla obydwu warstw zawierających wspomniane efekty. Aktywujemy odpowiednią warstwę i nakładamy na nią filtr Rozmycie gaussowskie (przyjmujemy wysoką wartość promienia, na przykład 50 pikseli). Na rysunku 5.20 przedstawiony został efekt uzyskany po wykonaniu opisanych do tej pory czynności. Może zajść potrzeba oczyszczenia tła obrazka z wychodzących poza obwód plakietki fragmentów cienia i odblasku. Aby to zrobić, wystarczy aktywować pierwszą z warstw i za pomocą Różdżki zaznaczyć gwiazdkę, odwrócić zaznaczenie (Zaznacz/Odwrotność), przejść do warstwy z cieniem i wcisnąć na klawiaturze komputera przycisk Delete. Opisaną procedurę powtarzamy dla warstwy odblasku. Na tym etapie pracy dodajemy cień — taki jak w poprzednim podrozdziale lub przesunięty względem plakietki (rysunek 5.21). Doradzam Czytelnikowi eksperymentowanie z różnymi ustawieniami opcji stylów warstw oraz stylów krawędzi dostępnych w niektórych edytorach grafiki rastrowej. Na przykład, wrażenie trójwymiarowości dowolnego narysowanego kształtu można uzyskać w aplikacji GIMP za pomocą dodatku Layers. Wtyczka Layers przenosi do aplikacji GIMP style warstw znane z programu Photoshop.
Nie tylko przyciski: plakietki i ikony
|
215
Rysunek 5.20. Warstwy cienia i odblasku zmodyfikowane filtrem Rozmycie gaussowskie
Rysunek 5.21. Oto gwiazdka, która delikatnie połyskuje, zamiast błyszczeć
Rozmaite wariacje omawianej w tym rozdziale plakietki otrzymamy dzięki ustawieniu innych niż czerń i biel kolorów dla cienia i odblasku. Plakietka przedstawiona na rysunku 5.14 to plakietka lekko połyskująca. Widać na niej złoty odblask, wewnętrzny cień i tekst. Czerwona krawędź gwiazdy została uzyskana z wykorzystaniem opcji Zaznacz/Zmień/Zwężanie. 216
|
Rozdział 5. Grafika użytkowa
Poniżej znajduje się instrukcja tworzenia plakietki podobnej do tej, którą widać na rysunku 5.14.
1. Tworzymy nowy obrazek. 2. Rysujemy jakiś kształt, na przykład dwunastoramienną, wypełnioną kolorem gwiazdę. 3. Zaznaczamy narysowaną figurę geometryczną. 4. Z paska narzędzi wybieramy Zaznaczanie eliptyczne i — trzymając wciśnięte klawisze Alt oraz Shift — zaznaczamy dolną część przyszłej plakietki.
5. Tworzymy nową przezroczystą warstwę. W ustawieniach kolorów pierwszoplanowego
i tła przyjmujemy barwy: podstawową, którą wypełniliśmy narysowany przez siebie kształt, i zarezerwowaną dla cienia. Wypełniamy zaznaczony obszar.
6. Na warstwę z cieniem nakładamy filtr Rozmycie gaussowskie (Filtr/Rozmycie/Rozmycie gaussowskie). Zaczynając od wartości 25 pikseli, szukamy odpowiedniego ustawienia parametru promienia rozmycia.
7. Górną część plakietki modyfikujemy tak samo jak dolną, powtarzając kroki podane w punktach od 3. do 6. Tym razem jednak zamiast koloru cienia ustawiamy kolor odblasku.
8. Aktywujemy pierwszą z warstw utworzonych w trakcie pracy nad plakietką, zaznaczamy narysowaną na niej figurę geometryczną, a następnie odwracamy zaznaczenie.
9. Przechodzimy do warstwy z cieniem i wybieramy opcję Edycja/Wytnij. W ten sposób pozbywamy się zbędnych fragmentów cienia wychodzących poza obwód plakietki.
10. Aby usunąć z obrazka niepotrzebne fragmenty odblasku, warstwę zawierającą ów odblask modyfikujemy zgodnie z instrukcją podaną w punktach 8. i 9.
11. Dodajemy cień, efekty krawędzi i tekst. Czym różni się plakietka błyszcząca od lekko połyskującej? Delikatny połysk uzyskuje się poprzez nałożenie filtra rozmywającego na wypełnienie jednobarwne, równomierne, zaś efekt błyszczącej plakietki jest wynikiem wykorzystania wypełnienia gradientowego, które zachowuje wyraźne, ostre krawędzie odblasku. Plakietki połyskujące wyglądają jak wykonane z jakiegoś stosunkowo miękkiego materiału, na przykład niezbyt twardego plastiku lub zmatowionego aluminium albo tytanu, natomiast te błyszczące wydają się być twarde i wypolerowane, zupełnie jak szkło czy odpowiednio obrobiony metal. Zanim zakończę temat plakietek i przycisków, chcę zwrócić uwagę Czytelnika na jeszcze jeden element widoczny na rysunku 5.14. Otóż na przedstawionej plakietce znalazł się napis. W tym konkretnym przypadku pierwsza litera teksu jest dużo większa od pozostałych, a sam tekst został ustawiony pod kątem około 30° względem poziomu. Oczywiście Czytelnik nie musi umieszczać na swoich plakietkach tekstów zapisanych taką czcionką, jaką widać na rysunku 5.14. Warto też pamiętać, że plakietki z przekrzywionymi napisami wyglądają mniej porządnie niż te, na których litery stoją w linii poziomej. Plakietki można tworzyć za pomocą niezliczonych wtyczek do edytorów oraz generatorów dostępnych w sieci WWW (jeden z takich generatorów jest dostępny pod adresem http://www.web20badges.com/), według mnie jednak nie ma większej przyjemności niż całkowicie samodzielne tworzenie własnej grafiki.
Nie tylko przyciski: plakietki i ikony
|
217
Błyszczące przyciski i plakietki formalnie uznano za element Web 2.0, ale twórcy stron WWW korzystali z nich na długo przed pojawieniem się terminu Web 2.0, nic też nie zapowiada rychłego ich zniknięcia z witryn internetowych. Plakietki i przyciski nie opuszczą stron WWW, dopóki popularności nie zdobędzie jakaś nowa odmiana grafiki internetowej, na przykład omówiona w rozdziale 6. grafika wektorowa. Innymi bardzo popularnymi elementami serwisów internetowych uznawanymi za część Web 2.0 są odbicia, które omówię za chwilę.
Refleksje na temat refleksów i kilka dodatkowych słów na temat cieni Odbicia stały się niezwykle popularne z dwóch powodów: po pierwsze prezentują się bardzo dobrze, a po drugie łatwo się je tworzy. Aby osiągnąć efekt odbicia na obrazku, trzeba skorzystać z nieomówionych przeze mnie dotąd funkcji edytorów grafiki rastrowej, takich jak maski warstw i transformacje (przekształcenia). Wszystkie odbicia pojawiające się na stronach WWW można podzielić na dwa typy. Odbicia pierwszego typu tworzy się dla prostych obiektów; nie są one niczym więcej niż tylko efektami zastosowania bardziej skomplikowanej techniki dodawania cieni do elementów edytowanego obrazka. Omówię kilka wersji takich właśnie odbić. Jeśli chcemy, żeby kilka pierwszych przykładowych odbić omówionych w tym podrozdziale wyglądało bardziej jak cienie niż jak odbicia, powinniśmy nałożyć na nie filtr Rozmycie gaussowskie oraz zmienić ich kolor na neutralny szary.
Drugim typem odbić są odbicia lustrzane, najlepiej pasujące do obiektów wyglądających na trójwymiarowe. Odbicia lustrzane dobrze prezentują się również w zestawieniu z obiektami zawierającymi takie elementy składowe, które — stając się fragmentami odbić — sprawiają, że odbicia te nie wydają się być zaledwie cieniami. Nie istnieją ani dobre, ani złe sposoby tworzenia odbić. Wszystko zależy od tego, jaki efekt chcemy osiągnąć i czy jesteśmy zadowoleni z ostatecznego rezultatu naszej pracy. Zalecam Czytelnikowi, by — jeśli zdecyduje się wzbogacić jakiś obrazek o odbicie — wypróbował wiele różnych technik tworzenia refleksów i wybrał tę, która okaże się najlepsza.
Odbicie jako obraz widziany w lustrze Najprostsze odbicia tworzy się następująco: wykonujemy duplikat warstwy z obiektem, którego odbicie chcemy uzyskać, duplikat ten odbijamy w pionie, a następnie ustawiamy dla niego krycie na poziomie 50% lub mniejszym. Wspomnianą metodę tworzenia odbić omówię na przykładzie obrazka przedstawiającego tekst umieszczony na niebieskim tle. Rysunek 5.22 pokazuje gotową grafikę, na której widać napis i jego odbicie, wykonaną w programie Photoshop.
218
|
Rozdział 5. Grafika użytkowa
Rysunek 5.22. Gotowe odbicie
Pracę zaczynamy od utworzenia nowego obrazu o szerokości 550 pikseli i wysokości 380 pikseli. Tło obrazka powinno być białe. Wybieramy narzędzie Tekst z paska narzędzi, a następnie, korzystając z czcionki o nazwie Cooper Std Bold (wielkość liter: 60 pikseli, wartość heksadecymalna koloru czcionki: 000066), na obrazku zapisujemy tekst „Ala ma kota”. Umieszczenie napisu na obrazku spowoduje automatyczne utworzenie nowej warstwy. Aktywujemy tę warstwę i wykonujemy jej duplikat. Uzyskaną w ten sposób kopię podstawowej warstwy odbijamy w pionie, klikając opcję Edycja/Przekształć/Odbij w pionie. Korzystając z narzędzia Przesunięcie, przesuwamy odbicie w dół, tak by dolne części obydwu napisów (oryginalnego i odbitego) delikatnie się ze sobą stykały (rysunek 5.23). Następnie zmieniamy wartość parametru krycia dla warstwy odbicia. Jeśli Czytelnik pragnie otrzymać grafikę wyglądającą tak, jak ta przedstawiona na rysunku 5.22, w okienku, w którym ustawia się wartość parametru Krycie, powinien wpisać 10%. Odbicie uzyskane opisaną przeze mnie metodą umieszczone na jednolitym tle wygląda dość płasko, a poza tym zupełnie nie sugeruje położenia źródła światła padającego na litery oryginalnego napisu. Dla lepszego efektu tło odbicia zazwyczaj wypełnia się gradientem barw. Można również podzielić tło obrazka na dwie części i każdą z nich pokryć innym kolorem. W takim przypadku górną część wypełnia się barwą jasną, a dolną jej głębszym odcieniem. Zobaczmy, jak napis z odbiciem będzie się prezentował na dwubarwnym tle. Aby to zrobić, jako kolor pierwszoplanowy ustawiamy morski (wartość heksadecymalna: 13f4e1), a także wybieramy z paska narzędzi Zaznaczanie prostokątne. Następnie zaznaczamy górną część obrazka, tak by dolna krawędź zaznaczenia znajdowała się nieco ponad linią oddzielającą napis oryginalny od jego odbicia. Korzystając z narzędzia Wiadro z farbą wypełniamy kolorem niebieskim warstwę, tak jak to pokazano na rysunku 5.24. Refleksje na temat refleksów i kilka dodatkowych słów na temat cieni
|
219
Rysunek 5.23. Obrazek, na którym kopię warstwy z tekstem odbito w pionie i odpowiednio przesunięto
Rysunek 5.24. Wypełniona kolorem górna część obrazka przedstawiającego przykładowy napis i jego odbicie
220
|
Rozdział 5. Grafika użytkowa
Po wypełnieniu fragmentu obrazka pożądaną barwą odwracamy zaznaczenie i jako kolor pierwszoplanowy ustawiamy jasny niebieski (wartość heksadecymalna: 01b4dd). Kolorem tym wypełniamy dolną część tworzonej grafiki. Doradzam Czytelnikowi wypróbowanie rozmaitych barw — ciemnych i jasnych, a także sprawdzenie, jak omawiany przykładowy obrazek prezentuje się z tłem wypełnionym gradientem kolorów. Z opisanej w tym podrozdziale techniki tworzenia odbić można korzystać podczas wykonywania grafik, na których widać cienie rzucane przez rozmaite obiekty. Właśnie efektem cienia zamierzam zająć się w następnej części rozdziału.
Odbicie jako cień rzucany przez obiekty We wcześniej omawianych przykładach niejednokrotnie pojawiały się cienie, teraz jednak stworzę cień nieco innego rodzaju, będący w gruncie rzeczy pewną wariacją odbicia. Czym różni się cień obiektu od jego odbicia? Mówiąc o odbiciu, miałam i mam na myśli lustrzane odbicie. Powstaje ono wtedy, gdy jakiś obiekt spoczywa na płaszczyźnie odbijającej światło (światło pada zarówno na płaszczyznę odbijającą, jak i na znajdujący się na niej obiekt). Cień natomiast tworzy się wtedy, gdy obiekt zostaje oświetlony od tyłu. O cieniu takim nie można bynajmniej powiedzieć, że jest identyczny jak obiekt, który go rzuca. Oczywiście istnieje jeszcze jedna zasadnicza różnica między odbiciem i cieniem. Odbicie oddaje szczegóły swojego pierwowzoru, natomiast cień zachowuje zaledwie kontury obiektu, który go rzuca. W tej chwili wolę jednak skupić się na zagadnieniach związanych z kształtem i perspektywą, nie zaś na omawianiu kwestii szczegółów widocznych na różnych obiektach, ich odbiciach i rzucanych przez nie cieniach.
Jeśli chcemy stworzyć cień, musimy zadbać o to, żeby był on odpowiednio zniekształcony w porównaniu do obiektu oryginalnego. Zniekształcenie staje się szczególnie wyraźne wtedy, gdy źródło światła znajduje się blisko poziomej płaszczyzny, na której spoczywa dany obiekt. Przy tworzeniu cienia powinniśmy pamiętać o tym, że ta jego część, która styka się z obiektem oryginalnym, musi mieć tę samą szerokość, co ów obiekt. Ponadto należy przeskalować wysokość odbicia — zwiększyć ją lub zmniejszyć, określając tym samym nasze położenie względem obiektu. Jeśli chcemy stworzyć realistyczny cień, musimy pamiętać, że źródło światła znajdujące się blisko płaszczyzny poziomej, na której spoczywa obiekt, powoduje wydłużenie się i rozmycie cienia; źródło światła ustawione wysoko daje w rezultacie cień krótki, ciemny i wyraźny. Wróćmy do przykładu omówionego przeze mnie w poprzednim podrozdziale. Cień, który stworzyliśmy, możemy przeskalować i zniekształcić tak, by uzyskać na obrazku iluzję trzeciego wymiaru. Zanim jednak dokonamy jakichkolwiek zmian w wyglądzie cienia, ustawmy białe tło dla edytowanej grafiki — dzięki temu efekty naszej pracy będą lepiej widoczne. Po ustawieniu odpowiedniego koloru tła musimy zrasteryzować tekst, który znajduje się na warstwie zawierającej odbicie. Następnie wybieramy opcję Edycja/Przekształć/Perspektywa. Wokół odbicia pojawią się linie przekształceń widoczne na rysunku 5.25. Wystarczy przeciągnąć lewy dolny róg prostokąta złożonego z linii przekształceń w kierunku bliższej krawędzi obszaru roboczego, by napis zmienił kształt.
Refleksje na temat refleksów i kilka dodatkowych słów na temat cieni
|
221
Rysunek 5.25. Nadawanie perspektywy cieniowi
Korzystając z funkcji Edycja/Przekształć/Skaluj, zmieniamy wymiary cienia. Jeśli źródło światła znajduje się na jednej płaszczyźnie poziomej z oświetlanym przez nie obiektem, cienie są długie, jeżeli zaś cokolwiek oświetlamy niemal pionowo z góry, cienie są małe, krótkie. Aby uzyskać efekt zbliżony do przedstawionego na rysunku 5.26, Czytelnik powinien przesunąć w dół dolny koniec pionowej linii przekształceń. Za każdym razem, gdy tworzymy cień jakiegoś obiektu, powinniśmy wypróbować kilka wariantów jego długości oraz perspektywy i wybrać ten, który najbardziej nam odpowiada.
Rysunek 5.26. Gotowy obrazek, na którym widać dwukolorowe tło, słońce częściowo ukryte za horyzontem i odpowiednio ukształtowany cień, na który nałożony został filtr Rozmycie gaussowskie
222
|
Rozdział 5. Grafika użytkowa
Po odpowiednim ukształtowaniu cienia możemy go, wraz z oryginalnym napisem, nałożyć na stworzone wcześniej dwubarwne tło. Można także nieco zmodyfikować cały obrazek — dorysować na nim białe słońce w połowie schowane za horyzontem. Warto też nałożyć filtr Rozmycie gaussowskie na warstwę z cieniem — dzięki temu cień będzie wyglądał jeszcze lepiej (rysunek 5.26). Za pomocą tych kilku narzędzi, którymi posługiwaliśmy się do tej pory, jesteśmy w stanie dokonać nieskończonej liczby modyfikacji naszego obrazka. W przykładach, które omówiłam dotychczas, pojawiały się tylko cienie. W kilku kolejnych mniej uwagi poświęcę cieniom, a więcej odbiciom.
Odbicie, które naprawdę jest odbiciem Nie wszystkie odbicia prezentują się wspaniale. Przy tworzeniu odbicia powinniśmy się starać, żeby nie wyglądało ono jak zwykły cień. Innymi słowy, dobrze jest zadbać o to, by na odbiciu znalazły się takie elementy obiektu oryginalnego, które podkreślą jego charakter. Dla przykładu, jeśli mamy do czynienia z jednobarwnym napisem, przed stworzeniem jego odbicia powinniśmy dodać do niego jakiś akcent w innym kolorze. Regułę tę zobrazuję, wykonując kolejny przykładowy obrazek. Ponieważ w poprzednim podrozdziale pojawiła się grafika w barwach morza, teraz przeniesiemy się do lasu — gotowy zielony napis z odbiciem można zobaczyć na rysunku 5.27. Zwracam uwagę Czytelnika na jasnobrązowy liść widoczny za tekstem.
Rysunek 5.27. Gotowe odbicie na tle szaro-białego gradientu
Aby wykonać obrazek podobny do przedstawionego na rysunku 5.27, skorzystamy z tej samej czcionki, której użyliśmy do tworzenia przykładowej grafiki z poprzedniego podrozdziału. Otwieramy nowy obraz o szerokości 600 pikseli i wysokości 400 pikseli (chcemy, żeby tło obrazka było białe), po czym ustawiamy nowy kolor czcionki. Litery powinny być ciemnozielone (wartość heksadecymalna koloru, którego użyłam przy tworzeniu przykładowej grafiki, to 11600e) i mieć taki sam rozmiar, jak litery widoczne na niebieskim obrazku z poprzedniego podrozdziału. Po napisaniu na obrazku tekstu „Ala ma kota” tworzymy nową przezroczystą warstwę i wybieramy z paska narzędzi Kształt własny. Ponieważ tym razem postanowiliśmy umieścić na naszym obrazie motyw roślinny, z menu rozwijalnego dostępnego w opcjach funkcji Kształt
Refleksje na temat refleksów i kilka dodatkowych słów na temat cieni
|
223
własny wybieramy symbol źdźbeł trawy. Za kolor pierwszoplanowy przyjmujemy beż (wartość heksadecymalna: d6bd8d) i rysujemy kępę trawy. Symbol powinien być nieco wyższy od najwyższej z liter składających się na napis. Ponadto należy go umieścić w pustym miejscu między dwoma słowami (rysunek 5.28).
Rysunek 5.28. Ala znów „ma kota”. Tym razem oprócz kota ma również roślinkę
W oknie Warstwy zaznaczamy wszystkie warstwy z wyjątkiem tła, a następnie scalamy je. Dzięki temu odbicie będziemy tworzyć tylko dla jednej warstwy, a nie dla kilku osobno. Wykonujemy duplikat nowej warstwy (Warstwa/Powiel warstwę), po czym odbijamy go w pionie, korzystając z funkcji Edycja/Przekształć/Odbij w pionie. Odbicie przesuwamy w dół, tak by nasz obrazek wyglądał jak ten przedstawiony na rysunku 5.29. Odbicie obiektu pojawiające się na błyszczącej powierzchni zazwyczaj nie wygląda dokładnie tak samo, jak ów obiekt. Co więcej, gdy oddalamy się od tego obiektu lub zmieniamy kąt jego obserwacji, odbicie staje się coraz bardziej niewyraźne. Oczywistym jest, że prawidłowość tę musimy brać pod uwagę przy tworzeniu odbicia na obrazkach. Jednocześnie należy pamiętać, że odbicie — jeśli ma wyglądać realistycznie — powinno znikać stopniowo. Efekt stopniowego znikania odbić można uzyskać za pomocą masek warstw i narzędzia Gradient. Aktywujemy warstwę zawierającą odbicie napisu, a potem nakładamy na nią maskę (Warstwa/ Maska warstwy/Ukryj wszystko). Po wybraniu wspomnianej opcji na warstwie pojawi się czarna maska, której zadaniem jest ukrycie zawartości tej warstwy (rysunek 5.30). Ustawiamy kolor tła na czarny, a kolor pierwszoplanowy na biały. Upewniwszy się, że maska jest aktywna, wypełniamy ją liniowym przejściem barw (narzędzie Gradient). Chcemy, żeby przejście biegło od koloru pierwszoplanowego do koloru tła. Wypełnienie tworzymy, rysując pionową linię: początek linii powinien znaleźć się powyżej widocznego tekstu, jej koniec zaś
224 |
Rozdział 5. Grafika użytkowa
Rysunek 5.29. Tekst i jego odbicie
Rysunek 5.30. Nakładanie maski warstwy całkowicie ukrywającej odbicie napisu
Refleksje na temat refleksów i kilka dodatkowych słów na temat cieni
|
225
należy umieścić mniej więcej w połowie wysokości napisu odbitego. W wyniku przeprowadzenia opisanej operacji odbicie stanie się jaśniejsze niż tekst oryginalny, a poza tym będzie znikało w pewnej odległości od napisu głównego, tak jak to przedstawiono na rysunku 5.31.
Rysunek 5.31. Znikające odbicie uzyskane za pomocą maski warstwy oraz narzędzia Gradient
Aby ukończyć pracę nad wyglądem grafiki, wystarczy dodać do niej dowolne tło jedno- lub dwukolorowe albo wypełnione gradientem kolorów. Jeśli Czytelnik chce uzyskać taki sam obrazek jak ten, który widać na rysunku 5.27, powinien wypełnić tło przejściem barw od szarej pierwszoplanowej (cccccc) do białej. Tło będzie wyglądało identycznie jak na przykładowej grafice, jeśli zostanie pokryte odpowiednim gradientem liniowym. Właściwe przejście barw można uzyskać, rysując na obrazku pionową linię łączącą jego dolną krawędź z górną. To ważne, by rysowanie kreski zacząć w dolnej części grafiki. Oczywiście zalecam Czytelnikowi wypróbowanie alternatywnych metod tworzenia tła. Niejednokrotnie zaskakujące okazuje się być to, jak bardzo różne rozwiązania barwne wpływają na nastrój edytowanego obrazu. Chciałabym zwrócić uwagę Czytelnika na kilka kwestii związanych z odbiciami. Po pierwsze, w czasie wykonywania odbić różnych obiektów nie zawsze trzeba modyfikować ich wygląd poprzez dodawanie do nich akcentów kolorystycznych lub wrażenia trójwymiarowości. Efekt odbicia można uzyskać w wyniku pracy z jednobarwnym tekstem, wystarczy tylko zadbać o odpowiednie znikanie zawartości zduplikowanej i odbitej warstwy. Po drugie, odbicia można modyfikować za pomocą funkcji takich jak Perspektywa czy Skaluj. Nie robiłam tego, kiedy tworzyłam przykładową grafikę do tego podrozdziału, ponieważ uważam, że wspomniane narzędzia bardziej nadają się do wykonywania cieni niż odbić, jednak Czytelnik ma prawo myśleć inaczej. Zajmowanie się grafiką internetową powinno iść w parze z rozwijaniem swojego gustu i odkrywaniem własnych upodobań.
226
|
Rozdział 5. Grafika użytkowa
Ostatni przykład, który omówię, obrazuje metodę tworzenia odbić obiektów ustawionych skośnie względem obserwatora. Kiedy patrzy się na takie obiekty, odnosi się wrażenie, że ogląda się je nieco z boku.
Odbicia zrzutów ekranu i obrazków Opisane przeze mnie metody tworzenia odbić można nieco skomplikować i zarazem uatrakcyjnić. Po pierwsze, bardziej interesujące jest wykonywanie odbić obiektów o kolorowej i pełnej szczegółów powierzchni; do tego typu obiektów zaliczają się, na przykład, książki otwarte na stronach z obrazkami i tekstem. Po drugie zaś, obiekty, których odbicia pragniemy stworzyć, zawsze można ustawić tak, by oglądająca je osoba patrzyła na nie z jakiejś ciekawej perspektywy. Oczywiście regułom perspektywy podlegają wtedy nie tylko same obiekty, lecz również ich odbicia. Rysunek 5.32 przedstawia dość ciekawą grafikę z odbiciem. Widoczny na niej obiekt (w tym wypadku jest to strona internetowa wydawnictwa Helion) wydaje się stać na jednej ze swych ostrych krawędzi, co nadaje mu trójwymiarowy wygląd. Efekt ten uzyskałam, przekrzywiając obrazek z witryną tak, by oglądającej go osobie wydawało się, że widzi plastikową plakietkę ustawioną na błyszczącym blacie biurka. Przekrzywienie strony WWW względem płaszczyzny ekranu monitora znacząco wpłynęło na kształt jej odbicia, natomiast umiejscowiony za nią rozmyty, niewyraźny cień sprawia, że wydaje się ona stykać z poziomą powierzchnią pod kątem 90°.
Rysunek 5.32. Pionowo ustawiony zrzut ekranu z odbiciem i cieniem
Opisana wyżej metoda prezentowania obrazów jest stosowana do tworzenia ciekawych grafik ze zrzutów ekranu, na których widać okna rozmaitych aplikacji oraz strony WWW, a także z książek, czasopism, magazynów i zdjęć. Z całą pewnością można o niej powiedzieć, że jest
Refleksje na temat refleksów i kilka dodatkowych słów na temat cieni
|
227
przydatna — obrazy przedstawiane jako plastikowe plakietki stojące na połyskliwych powierzchniach wyglądają interesująco, zarazem jednak ich zawartość nie ginie w natłoku kolorów i efektów wizualnych. Ponadto korzystanie ze wspomnianej metody nie jest banalne z punktu widzenia edycji grafik. Żeby wykonać obrazek podobny do tego przedstawionego na rysunku 5.32, musimy wybrać jakieś zdjęcie lub zrobić zrzut ekranu podczas przeglądania interesującej nas strony WWW. Jeśli Czytelnikowi zależy na tym, by stworzona przez niego grafika w jak najmniejszym stopniu różniła się od przykładowej, powinien zrobić zrzut ekranu serwisu internetowego wydawnictwa Helion. Oczywiście nie istnieje możliwość wykonania dokładnie takiego samego obrazka jak ten z rysunku 5.32, ponieważ zawartość serwisu firmy Helion ciągle się zmienia. Po otwarciu w edytorze grafiki wybranego przez nas zrzutu ekranu (albo zdjęcia) tworzymy nowy obraz. Obraz ten powinien być białym kwadratem o boku długości 1200 pikseli — należy pamiętać, by zapewnić sobie znaczną ilość miejsca roboczego. Kolejnym krokiem, który musimy wykonać, jest zmniejszenie zrzutu ekranu. Szerokość przeskalowanej grafiki nie powinna przekraczać 800 pikseli. Po wykonaniu opisanych czynności grafikę zaznaczamy i kopiujemy do nowo utworzonego, pustego jak dotąd obrazu. Następnie upewniamy się, że aktywna jest warstwa zawierająca zrzut, i wybieramy z menu Edycja opcję Przekształć/Pochyl. Lewy górny róg prostokąta utworzonego przez linie przekształceń przeciągamy pionowo w dół, a lewy dolny nieco w górę — w ten sposób nadajemy odpowiedni kształt naszej grafice; prawej strony zrzutu nie modyfikujemy. Po uzyskaniu efektu zbliżonego do przedstawionego na rysunku 5.33 zatwierdzamy modyfikacje dokonane w wyglądzie grafiki.
Rysunek 5.33. Pochylony zrzut ekranu
228
|
Rozdział 5. Grafika użytkowa
Ponownie kopiujemy oryginalny, niezmieniony zrzut ekranu, wklejamy go do dokumentu roboczego, odbijamy w pionie i przeciągamy w dół, tak by jego prawy górny róg niemal stykał się z prawym dolnym narożnikiem zrzutu o zmienionym kształcie (rysunek 5.34).
Rysunek 5.34. Obszar roboczy zawierający oryginalny zrzut ekranu i jego odbicie
Oryginalny zrzut ekranu i jego odbicie muszą ściśle przylegać do siebie odpowiednimi krawędziami. Wbrew pozorom dopasowywanie obydwu obrazków nie jest banalnie proste. Na pierwszy rzut oka wydaje się, że wystarczy skorzystać z narzędzia Pochyl w celu zmodyfikowana kształtu górnej krawędzi odbicia (chcemy bowiem, żeby obie grafiki się zetknęły), lecz tak naprawdę nawet po dopasowaniu górnej części odbicia do dolnej części oryginalnego zrzutu ekranu obrazki będą znacznie się od siebie różniły. Mimo że dolny fragment odbicia nie będzie widoczny na ostatecznej wersji tworzonego przez nas obrazka, i tak musimy odpowiednio zmodyfikować jego kształt za pomocą funkcji Pochyl. Pamiętajmy, że nie wystarczy, aby górna krawędź odbicia przylegała do dolnego boku oryginalnego zrzutu ekranu; zawartość obydwu grafik również powinna pasować do siebie kształtem i wielkością. Ustawiona do góry nogami kopia zrzutu ekranu ma być dokładnym lustrzanym odbiciem kopii stanowiącej główny element tworzonego przez nas obrazka. Właściwe ustawienie względem siebie obydwu kopii zrzutu ekranu może okazać się znacznie łatwiejsze po włączeniu opcji Pokaż/Siatka z menu Widok. Dzięki siatce możemy sprawdzić, czy odpowiednie fragmenty oraz boczne krawędzie dwóch grafik znajdują się w odpowiednich miejscach, tak jak na rysunku 5.35.
Refleksje na temat refleksów i kilka dodatkowych słów na temat cieni
|
229
Rysunek 5.35. Odpowiednie ustawienie oryginalnego zrzutu ekranu i jego odbicia
Następny krok jest bardzo prosty. Na warstwę z odbiciem nakładamy maskę, a następnie, korzystając z narzędzia Gradient (kolor tła — czarny, kolor pierwszoplanowy — biały), wypełniamy ją przejściem barwnym. Po dokonaniu opisanych zmian widoczna powinna być tylko górna część odbicia. Jeśli Czytelnik pragnie stworzyć grafikę podobną do przykładowej, powinien uaktywnić warstwę tła i wypełnić ją odpowiednim gradientem (na kolor pierwszoplanowy należy wybrać jasnoniebieski o wartości heksadecymalnej cbd8e2, zaś kolorem tła musi być biel). Prawidłowy rezultat opisanych tu działań można zobaczyć na rysunku 5.36. Grafikę, na której widnieje zrzut ekranu wraz z odbiciem, można wzbogacić o cień strony WWW. Jeśli chcemy dodać cień do stworzonego obrazka, musimy narysować na nim ciemnoszary prostokąt o wymiarach zbliżonych do wymiarów zrzutu ekranu, a następnie zrasteryzować go. Korzystając z narzędzi Obróć i Pochyl dostępnych w menu Przekształć (Edycja/Przekształć), dopasowujemy cień do miejsca, w którym powinien się on znaleźć. Ustawianie cienia można sobie ułatwić — wystarczy przenieść zawierającą go warstwę między warstwy oryginalnego zrzutu ekranu i odbicia. Ponadto, podczas ustalania odpowiedniego kąta ułożenia cienia, warto przeciągnąć dolną jego część przed zrzut ekranu — dzięki temu widać, jak układa się on w obszarze znajdującym się za zrzutem ekranu (rysunek 5.37).
230
|
Rozdział 5. Grafika użytkowa
Rysunek 5.36. Grafika z odbiciem i tłem wypełnionym odpowiednim gradientem barw niebieskiej i białej
Rysunek 3.37. Tworzenie cienia rzucanego przez stojący zrzut ekranu
Refleksje na temat refleksów i kilka dodatkowych słów na temat cieni
|
231
Gdy już ustawimy cień pod odpowiednim kątem do warstwy z oryginalnym zrzutem ekranu, powinniśmy go przeskalować i przemieścić tak, by w całości znalazł się za owym zrzutem. Pamiętajmy, że na tym etapie jego obróbki cień wcale nie musi wyglądać idealnie, ponieważ i tak nałożymy na niego filtr Rozmycie gaussowskie. W oknie ustawień parametrów filtra powinniśmy wpisać wysoką wartość promienia rozmycia, chodzi bowiem o to, żeby raczej zasugerować istnienie cienia na edytowanym obrazie, a nie wykonać jego dokładne odwzorowanie. Minimalna wartość promienia rozmycia, od jakiej warto zacząć eksperymenty z rozmywaniem ciemnoszarego prostokąta, to 50 pikseli. Po utworzeniu cienia scalamy wszystkie warstwy i przeskalowujemy wykonaną grafikę tak, by jej wymiary spełniały nasze oczekiwania. Oto stworzyliśmy zrzut ekranu, którym naprawdę możemy chwalić się na swojej stronie WWW. Opisana powyżej technika modyfikowania wyglądu obrazów świetnie nadaje się do prezentowania szerszej publiczności nowych projektów witryn internetowych oraz wizualnych walorów rozmaitych aplikacji. Oczywiście metodę tę możemy stosować także do obróbki zdjęć i innych płaskich obrazów.
Analiza istniejących projektów Pomysł na wykonanie projektu stojącego obrazu witryny internetowej, którego wykonanie — z dodaniem perspektywy, odbicia i cienia — opisywałam w poprzednim podrozdziale, zrodził się, gdy zobaczyłam w sieci stronę programu iTunes firmy Apple (widoczną na rysunku 5.38). Inspirację dla wielu moich projektów zaczerpnęłam ze stron internetowych, które odwiedziłam, z wyglądu aplikacji, z którymi miałam do czynienia, czy systemów, na których pracowałam. Być może nie jestem tak staranna, jak autorzy znajdowanych przeze mnie grafik, ale żadna z moich prac nie wystraszyła jeszcze dziecka ani nie sprawiła, że dorosły popłakał się ze śmiechu. Taki efekt mnie zadowala, szczególnie że eksperymentowanie z nowymi pomysłami daje mi dużo radości. „Eksperymentowanie daje dużo radości” jest tu kluczową frazą.
Rysunek 5.38. Strona Apple iTunes, która posłużyła za wzór mojego projektu stojącej witryny
232
|
Rozdział 5. Grafika użytkowa
Wspominałam już wcześniej, że praca z różnymi rodzajami grafiki i opanowanie technik obróbki obrazu, które opisałam w tym rozdziale — mam tu na myśli tworzenie cienia i refleksów za pomocą Rozmycia gaussowskiego, dodawanie głębi za pomocą narzędzia Gradient, używania narzędzi zaznaczeń do stworzenia obszarów cienia i światła na powierzchni obiektu, stosowanie warstw i masek oraz narzędzi transformacji — wypacza sposób spoglądania na otaczający świat. Wiedza ta sprawia, że znalazłszy w sieci udany przykład grafiki, człowiek zaczyna się zastanawiać, w jaki sposób mógłby osiągnąć coś podobnego. Kopiowanie obrazów umieszczanych na cudzych stronach WWW stanowi naruszenie postanowień prawa autorskiego, chyba że twórca grafiki udziela pozwolenia na używanie jego pracy. Co więcej, dokładne odwzorowanie oglądanej gdzieś grafiki również pogwałca prawo autorskie, chyba że oryginalny obraz jest tematem przykładu i został do niego dołączony jako próbka. Ale już uczenie się z istniejących prac, analizowanie wyglądu grafiki umieszczanej w sieci — dostrzeganie miejsc, w których pojawia się wypełnienie gradientowe, określanie, w jaki sposób osiągnięto efekt oświetlenia czy jak uzyskano ładne obramowanie — cieszy się powszechną akceptacją, a nawet jest oczekiwane. We wcześniejszym podrozdziale, poświęconym tworzeniu wklęsłego przycisku, umieściłam obrazy dwóch pasków narzędzi, z których drugi wyglądał, jakby był zrobiony z twardego, wypolerowanego plastiku. Efekt ten osiągnęłam, dodając na rysunku jasny obszar imitujący intensywne odbicie światła na powierzchni przycisku. Inspirację stanowiła dla mnie grafika umieszczona na stronie odtwarzaczy Microsoft Zune, widoczna na rysunku 5.39. Jasny promień odbijający się od powierzchni odtwarzaczy dostarcza oglądającemu informacji na temat ich budowy — panel przedni jest wykonany z płaskiego, twardego plastiku.
Rysunek 5.39. Grafika ze strony poświęconej odtwarzaczom Microsoft Zune z efektem odbicia światła od twardej, plastikowej powierzchni
Dzięki temu obrazowi poznałam nowy sposób zaznaczania przejścia między tylną ścianą a podłożem. Efekt szarego, rozmytego cienia pojawiającego się za dolną krawędzią odtwarzaczy przechodzący następnie (jak sądzę) w niknące gradientowo odbicie urządzeń sprawia, że patrzący instynktownie wyznacza granicę styku obydwu powierzchni. Analiza istniejących projektów
|
233
Ale uważny obserwator zauważy, że na tej ilustracji coś się nie zgadza. Wystarczy przyjrzeć się jej dłużej, by zauważyć, że światło odbijające się od powierzchni Zune pada pod kątem, ale ich cień pada już prosto. Nie należy obawiać się eksperymentowania z efektami odbicia, cieniami, błyskami światła czy jaśniejszymi powierzchniami, jak długo pamięta się o jednym — wszystkie efekty muszą ze sobą współgrać. Należy raz ustalić położenie źródła światła na grafice i zapewnić, by wygląd wszystkich jej elementów odpowiadał temu założeniu.
W końcu okazuje się, że zainteresowanie grafiką przenosi się na wszystkie dziedziny życia, a każda napotkana ilustracja wywołuje lawinę myśli, których celem jest odtworzenie kroków niezbędnych do uzyskania identycznego efektu. To samo dotyczy przedmiotów otaczających nas w rzeczywistości. Skażeni grafiką, zastanawiamy się, jak przenieść oglądane obiekty do dwuwymiarowego świata stron internetowych. Czasami wystarczy po prostu zrobić im zdjęcie, które zrzutuje przestrzeń trójwymiarową na płaszczyznę. Można też łączyć fragmenty zdjęć z narysowanymi tłami. Dodam jeszcze, że w trakcie pracy nad osiągnięciem zamierzonych efektów warto zapisywać sobie na kartce wszystkie wykonane kroki. Nie należy polegać zbytnio na zapisach w historii edytora grafiki czy widoku warstw, a nawet na ich nazwach. W ogóle nie wolno posługiwać się komputerem do robienia notatek. Robienie odręcznych notatek daje czas do namysłu, pozwala zastanowić się, jakie będą skutki zastosowania takiego czy innego narzędzia. Metoda ta pozwala w razie potrzeby odtworzyć poszczególne kroki prowadzące do uzyskania pożądanego efektu, ale czasem też bywa źródłem całkiem nowych pomysłów. Dzięki notatkom na papierze unika się także konieczności ciągłego przełączania pomiędzy oknami edytorów grafiki i tekstu. Pora rzucić okiem na ostatnią porcję grafiki rastrowej w tym rozdziale i przygotować się do wkroczenia w świat wektorów. Nieuchronnie zbliża się moment zmiany tempa marszu.
W jednej chwili — zrzuty ekranu Ta książka jest pełna grafiki. Umieszczane w niej ilustracje to w większości zrzuty ekranu pokazujące różne etapy tworzenia czy przekształcania grafiki, ale też końcowe efekty mojej pracy. Narzędzie, którym robiłam zrzuty ekranu, pozwala też tworzyć grafikę na potrzeby sieci. Jedyna różnica polega na tym, że grafikę umieszczaną na stronach internetowych zapisuje się zazwyczaj w formacie JPEG, który nie sprawdza się najlepiej podczas przygotowywania publikacji do druku. System operacyjny oferuje zazwyczaj jakieś narzędzie do przechwytywania wyglądu ekranu. W systemie Windows wystarczy nacisnąć klawisz Print Screen (czasem oznaczany Prt Sc lub Prt Scr), by zapisać w schowku wygląd całego ekranu. Tak przechwycony obraz można potem wkleić w okno dowolnego edytora grafiki. System autorstwa Apple udostępnia użytkownikom narzędzie Grab, za którego pomocą można, między innymi, tworzyć zrzuty ekranu. Grab oferuje użytkownikom zapisywanie dowolnie zaznaczonego fragmentu ekranu, pojedynczego okna lub całości widocznego obrazu. Poza tym użytkownik może skorzystać z funkcji automatycznego wykonania zrzutu z opóźnieniem, dzięki czemu zdoła uchwycić na rysunku kursor w miejscu, w którym zechce go ustawić.
234 |
Rozdział 5. Grafika użytkowa
Obydwa narzędzia sprawdzają się bardzo dobrze, jednak żadne z nich nie oferuje bardziej zaawansowanych opcji. Żadne też nie pozwala wprowadzić na wykonany zrzut dodatkowych informacji. Programy pisane z myślą o wykonywaniu zrzutów ekranu oferują też dodatkową opcję — pozwalają wykonywać filmy pokazujące, krok po kroku, sposób pracy z aplikacjami. Zapis tego typu, tak zwany screencast, pojawia się bardzo często w różnego rodzaju samouczkach. Podczas pisania tej książki tworzyłam zrzuty ekranu za pomocą specjalnie do tego przeznaczonych aplikacji — cieszącego się ogromną popularnością programu SnagIt firmy TechSmith, pracującego w systemie Windows, aplikacji FastStone Capture, również w systemie Windows, i wersji beta oprogramowania firmy Plasq, Skitch — oraz posługując się wbudowanymi narzędziami systemów operacyjnych. Wszystkie trzy są dość wygodne, choć niepozbawione drobnych dziwactw. Próbną wersję programu SnagIt można pobrać ze strony http://www.techsmith.com/ ´screen-capture.asp. Znajdują się na niej także filmy instruktażowe oraz dokumentacja programu. Aplikacja FastStone Capture znajduje się na stronie http://www.faststone. ´org/FSCaptureDetail.htm. Jest to również trzydziestodniowa wersja testowa. Program Skitch (http://skitch.com/) pobiera się za darmo ze strony http://skitch.com/signup/.
Aplikacja SnagIt to prawdopodobnie jeden z najpopularniejszych programów tego typu. Używanie go jest niezmiernie intuicyjne. Wykonywanie zrzutów ekranu odbywa się za pomocą jednego z oprogramowanych skrótów klawiszowych lub bezpośrednio z okna programu. Aplikacja pozwala robić zrzuty przedstawiające całe okno, zaznaczać pewien obszar, a nawet wykonać zrzut całego ekranu, co widać na rysunku 5.40.
Rysunek 5.40. Wygląd głównego okna narzędzia tworzenia zrzutów ekranu programu SnagIt
W jednej chwili — zrzuty ekranu
|
235
W aplikacji można zdefiniować własne skróty klawiszowe, można też ustalić czas „zwolnienia migawki”, by zdążyć przenieść kursor w obszar wykonywania zrzutu. Ta opcja przydaje się szczególnie wtedy, gdy chce się zilustrować konkretne działanie lub wykonać zrzut z widocznym rozwiniętym menu. Program daje również możliwość dodawania różnego rodzaju opisów. Opisom mogą towarzyszyć strzałki, mogą one mieć postać zwykłego tekstu lub tekstu otoczonego wybraną ramką. Sam zrzut z ekranu daje się ozdobić za pomocą wielu efektów, w tym popularnego, a może wręcz nadużywanego, efektu oderwanej krawędzi. Poza tym do programu można dodawać własne biblioteki, pozwalające później umieszczać na rysunkach większe strzałki i kursory, które zresztą czytelnik widywał na kartach tej książki. Rysunek 5.41 przedstawia wygląd okna aplikacji SnagIt w chwili dodawania opisu zrzutu z ekranu. Nie polecam robienia tego w domu.
Rysunek 5.41. Interfejs edycji programu SnagIt
Po skończeniu pracy z obrazem jej efekty można zapisać na dysku komputera, wysłać pocztą elektroniczną albo umieścić na serwerze FTP. Można nawet zapisać wynik pracy w formatach właściwych aplikacjom pakietu Microsoft Office, ale to już materiał na inną książkę. Aplikacja FastStone Capture oferuje te same opcje tworzenia zrzutów ekranu, co program SnagIt. Pozwala też definiować własne skróty klawiszowe, nie pozbawia jednocześnie użytkownika możliwości pracy z małym, zupełnie nienachalnym menu, które daje dostęp do wszystkich narzędzi. Podobnie do opisywanej poprzednio aplikacji, FastStone Capture daje możliwość modyfikowania przechwyconego obrazu. Na rysunku 5.42 widać okno, które pojawia się po wykonaniu zrzutu ekranu. Dostępne w nim opcje pozwalają przekształcić przechwycony obraz do odcieni szarości lub sepii, przyciąć go, wysłać za pomocą aplikacji IM albo zapisać w formacie dokumentu pakietu Microsoft Office. Kliknięcie przycisku Paint powoduje otwarcie programu Microsoft Paint, co przyprawia mnie o dreszcz przerażenia, więc staram się omijać go, jak tylko mogę. 236
|
Rozdział 5. Grafika użytkowa
Rysunek 5.42. Okno edycji aplikacji FastStone Capture Nie było moim zamiarem obrażanie czcigodnego programu Microsoft Paint, jednej z pierwszych aplikacji systemu Windows. Choć wydaje mi się ona zbyt ograniczona, okazuje się, że jej możliwości wystarczają zupełnie, by odtworzyć portret Mony Lizy, czego dowodzi ten film umieszczony w serwisie YouTube: (http://www.youtube.com/ ´watch?v=uk2sPl_Z7ZU).
FastStone Capture umożliwia także dodanie do zrzutu efektu postrzępionej krawędzi, choć opcje, jakie oferuje w tym względzie są bardzo skromne, jeśli porównać je z możliwościami aplikacji SnagIt. Kliknięcie przycisku Draw otwiera kolejne okno aplikacji (rysunek 5.43), pozwalające umieszczać na zrzucie tekst, kształty, strzałki, a nawet dodawać wyróżnienie. Tak jak SnagIt, aplikacja dodaje bardzo gustowne cienie pod strzałkami i kształtami. Obydwa opisane tu narzędzia przypadły mi do gustu. Podoba mi się również zasada, na jakiej udostępniane są trzydziestodniowe wersje próbne. Inne narzędzia w wersjach próbnych pozwalają dodawać na obrazie słowo „trial” lub w inny sposób oznaczać zdjęcie, co moim zdaniem zaprzecza idei wersji testowej oprogramowania.
W jednej chwili — zrzuty ekranu
|
237
Rysunek 5.43. Aplikacja Draw programu FastStone Capture
FastStone Capture oferuje niedostępną w SnagIt opcję przechwytywania zaznaczenia dowolnego obszaru ekranu, za to brak w nim narzędzia przechwytywania przewijanej strony WWW. Obydwa programy pozwalają ustawić czas, po którym automatycznie zostanie wykonany zrzut, ale wydaje mi się, że łatwiej jest korzystać z tej funkcji w programie FastStone Capture. SnagIt pozwala dołączać własne biblioteki graficzne, za to FastStone Capture jest o połowę tańszy, choć tak naprawdę obydwa nie są nazbyt drogie. Obydwa narzędzia mają jedną zasadniczą wadę — działają jedynie w systemie Windows. Prawda jest niestety taka, że większość aplikacji tego typu działa jedynie w systemie firmy Microsoft. Dlatego też tak bardzo ucieszyła mnie wiadomość, którą otrzymałam od jednego z odwiedzających moją stronę, że pojawiła się wersja beta programu wykonującego zrzuty ekranu, działającego w systemie Mac OS. Użytkownik mojej strony był na tyle uprzejmy, że przysłał mi zaproszenie do wypróbowania tej aplikacji. Skitch pod wieloma względami odbiega znacznie od aplikacji wykonujących zrzuty ekranu, do których przywykła większość użytkowników komputerów. Jego twórcy postanowili uwzględnić w swoim projekcie założenia ideologii Web 2.0, dlatego też program poza tym, że pozwala zapisywać obrazy na dysku komputera, jednocześnie umożliwia wysłanie ich do sieciowego konta MySkitch. Co więcej, narzędzie to przechowuje historie ostatnio wykonywanych projektów, więc zawsze można zajrzeć pod jego podszewkę, by sprawdzić ostatnie zrzuty ekranu, które można nawet edytować. Rysunek 5.44 przedstawia główne okno edycji tego programu wraz z widocznymi w nim narzędziami rysowania, pozwalającymi dodawać strzałki, ramki czy etykiety. Rysunek 5.45 ukazuje wygląd historii edycji. 238
|
Rozdział 5. Grafika użytkowa
Rysunek 5.44. Główne okno programu Skitch
Rysunek 5.45. Okno historii
W jednej chwili — zrzuty ekranu
|
239
Skitch nie oferuje tak bogatych opcji przechwytywania obrazów jak FastStone Capture czy SnagIt, ponieważ jego twórcy skupili się raczej na społecznej roli swojej aplikacji. Niestety pewne rozwiązania wynikające z założeń ideologii Web 2.0 mogą być nieco irytujące. Na przykład jedyną metodą zapisania zrzutu w formacie JPEG czy PNG jest przeciągnięcie go i upuszczenie w wybranym folderze. Mimo to uważam, że Skitch może w pełni konkurować z innymi aplikacjami tego typu, i bardzo cieszę się, że wreszcie coś zaczęło się dziać w tej dziedzinie w świecie Macintoshów. Nie należy mylić tego, co chcielibyśmy znaleźć w narzędziu, z tym, czego od niego potrzebujemy. Potrzebujemy aplikacji, która potrafiłaby zapisać zrzut ekranu razem z kursorem, uchwycić wygląd okna aplikacji w trakcie wykonywania pewnych zadań, na przykład z rozwiniętym menu. Przyjemnie jest móc skorzystać z różnych opcji przechwytywania obrazu, na przykład uwieczniania samego okna aplikacji czy obszaru dowolnego zaznaczenia, ale bez nich też da się skutecznie pracować. W większości przypadków wystarczy przechwycić wygląd całego ekranu, a potem wyciąć jego odpowiedni fragment. Metoda ta nie sprawdza się jedynie w przypadku okien o zaokrąglonych rogach. Aplikacja wykonująca zrzut ekranu nie potrzebuje również opcji dodawania efektów na krawędziach obrazu ani rzucania cienia, ponieważ te można wykonać własnoręcznie. Gdy się nad tym zastanowić, opcja dodawania opisów jest także zbędna, gdyż zrzut z ekranu da się otworzyć w edytorze graficznym, jak każdy inny obraz, a tam można już wprowadzać do woli strzałki, ramki, opisy na osobnych warstwach czy tworzyć cienie. Do wprowadzania tekstu czy innych dodatkowych elementów grafiki służą potężne edytory stworzone właśnie z myślą o takich pracach. Ale oczywiście, gdy projektuje się pokaz, wygodniej jest posłużyć się narzędziem, które wykona całą pracę przy okazji przechwytywania zrzutów ekranu. No, dobrze. Wystarczy już wywodów na temat grafiki rastrowej przynajmniej do czasu, gdy przyjdzie się nam zająć dynamicznym zmienianiem wyglądu obrazów. Teraz zaś nadeszła pora, by przyjrzeć się podstawom grafiki wektorowej.
240 |
Rozdział 5. Grafika użytkowa
ROZDZIAŁ 6.
Wektorowo — początki i języki znaczników
Siła grafiki wektorowej polega na tym, że rysunek wykonany w tej technice może zostać zmieniony do dowolnych rozmiarów — małych czy dużych — bez straty jakości obrazu. Działanie to wynika z obiektowego zapisu całego rysunku, w którym pojawiają się definicje typu „narysuj linię łączącą punkty A i B”, a różnica sprowadza się do odległości dzielącej te punkty. Nie istnieje coś takiego jak niska, średnia czy wysoka jakość grafiki wektorowej. Ona zawsze jest najwyższej jakości. Projektant stron WWW powinien pamiętać o jeszcze jednej zalecie grafiki wektorowej. Przesyłanie nawet stosunkowo dużych i złożonych obrazów okazuje się zajmować mniejszą część pasma niż przesyłanie zbliżonych rozmiarami grafik rastrowych. Co więcej, grafika wektorowa z łatwością poddaje się wszelkim rodzajom manipulacji, zarówno po stronie serwera, jak i na stronie, na której się znajduje. Można oczywiście generować dynamicznie grafikę rastrową, na przykład obrazy JPEG, jednak proces ten jest niepomiernie bardziej złożony niż tworzenie grafiki wektorowej, na przykład pliku SVG. Chris Lilley i Dieter Weidenbrück przedstawili na sympozjum XML Europe 2001 pracę pod tytułem „WebCGM and SVG: A Comparison” omawiającą wymagania, którym powinna sprostać grafika wektorowa tworzona na potrzeby sieci: • skalowalność, • wydajność, • możliwość zmian, • możliwość odwoływania się do poszczególnych obiektów, • integracja z innymi elementami stron WWW.
To, co sprawdzało się w roku 2001, sprawdza się również dziś. Mimo że praca ograniczała się do omówienia dwóch konkretnych formatów, WebCGM oraz SVG (Scalable Vector Graphics), do jej idei odwołują się także język VML (Vector Markup Language) oraz formy trójwymiarowe — język VRML (Virtual Reality Modeling Language) i X3D. W tym rozdziale przyjrzę się pokrótce niektórym ze wspomnianych tu formatów i omówię właściwe dla nich formy grafiki wektorowej. Pozostałą część rozdziału poświęcę wstępowi do tworzenia grafiki wektorowej w moim ulubionym formacie — SVG. 241
WebCGM Czy ktokolwiek słyszał w ogóle o WebCGM? Raczej nikt, poza osobami śledzącymi pilnie wszystkie doniesienia o nowych specyfikacjach wydawane przez konsorcjum W3C i ludźmi mocno zaangażowanymi w sprawy świata grafiki komputerowej. Skrót nazwy pochodzi od słów Computer Graphics Metafile, czyli metaplik grafiki komputerowej, a specyfikacja WebCGM 1.0 obowiązuje od 1999 roku. Istnieje także specyfikacja WebCGM, która otrzymała rekomendację w roku 2007. Informacje o tym formacie można znaleźć na stronach organizacji W3C pod adresem http://www.w3.org/Graphics/WebCGM/.
Format WebCGM wywodzi się z niezwiązanej z zagadnieniami sieciowymi specyfikacji CGM — standardu ISO stworzonego w 1987 roku. Mimo tak doskonałego pochodzenia standard ten nie osiągnął nigdy, o ile mi wiadomo, takiej popularności, by którakolwiek z przeglądarek oferowała jego obsługę. Istnieją oczywiście wtyczki i narzędzia pozwalające tworzyć zawartość zapisywaną zgodnie ze standardem WebCMG. Format SVG, który opiszę w dalszej części tego rozdziału, również szczyci się rekomendacją konsorcjum W3C w dziedzinie grafiki wektorowej. Rodzi się zatem pytanie — po co aż dwa formaty? Żeby było ciekawiej, na konferencji XML Europe 2004 pojawił się jeszcze jeden odczyt, autorstwa Loftona Hendersona i Dietera Weidenbrücka (zakładam, że to ten sam pan Weidenbrück, o którym pisałam kilka akapitów wcześniej; oryginalną pracę można znaleźć pod adresem http://idealliance.org/papers/dx_xmle04/papers/02-02-03/02-02-03.html). W streszczeniu pracy można przeczytać: W 2003 roku autorzy niniejszej pracy postanowili udzielić obiektywnej odpowiedzi na ciągle powracające pytanie o przyczynę istnienia dwóch standardów grafiki wektorowej rekomendowanych przez W3C — WebCGM i SVG. W skrócie można powiedzieć, że WebCGM został zaprojektowany z myślą o rysunkach technicznych, natomiast SVG miało służyć wykonywaniu prac bardziej artystycznych. WebCGM nie jest prostym formatem. Sama próba odnalezienia przykładów jego użycia i lepszego zrozumienia ich działania okazuje się być zadziwiająco skomplikowana. Ponieważ format ten został przeznaczony do tworzenia bardziej złożonych i technicznych rysunków — wykorzystują go przede wszystkim pracownicy przemysłu motoryzacyjnego, lotniczego i naftowego i nie przeznaczają swoich prac do publikacji w przeglądarkach internetowych — nie będę wspominała o nim więcej. Każdy, kto dysponuje wolnym czasem — dużą jego ilością — i pragnie dowiedzieć się więcej na ten temat, powinien zacząć swoje poszukiwania od stron W3C. Radzę też przygotować sobie termos z dużą ilością kawy lub mnóstwo puszek innych napojów o wysokiej zawartości kofeiny.
Formaty trójwymiarowe Zanim nastała era panowania języka XML, w czasach, gdy sieć była jeszcze w powijakach, miałam okazję pracować z plikami formatu VRML. Do dziś nie mogę zrozumieć, dlaczego ten język tworzenia grafiki trójwymiarowej popadł w prawie zupełne zapomnienie, szczególnie że zaliczał się on do narzędzi o wyższym stopniu zaawansowania. 242 |
Rozdział 6. Wektorowo — początki i języki znaczników
Dziś grafika trójwymiarowa pozwala tworzyć portale społecznościowe, jak choćby niezmiernie popularny Second Life, a przecież idea zbliżona do tego drugiego życia — idea miejsca, w którym ludzie mogliby spotykać się reprezentowani przez trójwymiarowe awatary — zrodziła się przeszło dziesięć lat temu i to właśnie VRML miał zapewnić nam jej ziszczenie. Była to prawdziwie ekscytująca technologia, ciesząca się rosnącym zainteresowaniem i nagle prace nad nią zostały zarzucone niemal z dnia na dzień. Dlaczego? Istnieje kilka przyczyn. Pojawiły się problemy z działaniem kodu, obsługą go w przeglądarkach (a w zasadzie z jej brakiem) oraz pojawienie się na horyzoncie morderczego formatu Macromedii — Flash. Jednakże główną przyczyną upadku formatu VRML była jego specyfikacja. Dokumentacja języka pozostawiała bardzo wiele szczegółów jego implementacji w gestii twórców przeglądarek, a jak widzieliśmy już nieraz w przeszłości — na przykładach języków skryptowych, arkuszy CSS czy kodu HTML — to nigdy nie jest rozsądnym rozwiązaniem. Wszędzie tam, gdzie twórcy przeglądarek mogą zastosować odmienne rozwiązania, zastosują je na pewno. Pamiętam, z jakim trudem przyszło mi uruchomić mój projekt „lavalamp” w więcej niż jednym kliencie VRML. Muszę stwierdzić, że ważniejsze formaty trójwymiarowe, w przeciwieństwie do formatu WebCGM, cieszą się rosnącą popularnością, a coraz lepszą ich obsługę zawdzięczamy niewielkiej, lecz prężnie działającej grupie entuzjastów grafiki trójwymiarowej. Ich wysiłki skupiały się początkowo na pierwszej wersji języka VRML i jego następcach (VRML97), a dziś swoją uwagę poświęcają przede wszystkim następcy VRML, formatowi X3D. Informacje na temat starszych wersji VRML oraz formatu X3D można znaleźć na stronach organizacji Web3D Consortium pod adresem http://www.web3d.org/.
Format X3D charakteryzuje się większą niż w przypadku VRML precyzją implementacji składni. Ponadto deklaracja obiektów X3D korzysta już z poprawnej składni XML, a nie, jak miało to miejsce w przypadku VRML, z nawiasów klamrowych. Jednocześnie składnia X3D umożliwia posługiwanie się klasycznym zapisem VRML. Oto przykład kodu X3D zapisanego w sposób charakterystyczny dla VRML. Podany fragment definiuje dwa obiekty — Transform i Cone. Pierwszy z nich odpowiada za ustawienie oświetlenia i orientacji obiektu, jakim jest stożek (Cone). Transform { rotation 0 0 1 3.14159 translation 0 2.4 0 children Shape { appearance Appearance { material Material { diffuseColor 1 1 1 transparency 0.2 } } geometry Cone { bottomRadius 0.4 height 0.5 } } }
Formaty trójwymiarowe
| 243
Przykład składni XML przedstawiłam na listingu 6.1. Pochodzi on ze strony Web3D Consortium. Wyświetla układ złożony z czerwonej kuli i niebieskiego sześcianu ustawionych na czarnym tle. Listing 6.1. Format X3D zapisany w standardzie XML, wyświetlający niebieski sześcian i czerwoną kulę xmlns:xsd='http://www.w3.org/2001/XMLSchema-instance' xsd:noNamespaceSchemaLocation='http://www.web3d.org/specifications/x3d-3.0.xsd'>
Przykład ten, renderowany w przeglądarce Firefox za pomocą wtyczki Flux firmy Media Machines, przedstawiłam na rysunku 6.1. Tworzenie kodu w formacie XML ma tę przewagę nad pisaniem go w języku VRML, że uzyskaną w ten sposób aplikację można umieścić bezpośrednio w źródle strony HTML. Możliwość umieszczania kodu nowej specyfikacji w kodzie strony WWW jest kluczową funkcją z punktu widzenia użyteczności formatu. Cechę tę opiszę szerzej w trakcie omawiania zalet grafiki SVG.
244 |
Rozdział 6. Wektorowo — początki i języki znaczników
Rysunek 6.1. Niebieski sześcian i czerwona kula wyświetlone za pomocą wtyczki Flux firmy Media Machines w przeglądarce Firefox
Mimo że największe przeglądarki nie oferują w tej chwili wbudowanej obsługi formatów X3D czy VRML, efekt kompilacji kodu trójwymiarowej grafiki można otwierać za pomocą różnych wtyczek. Specjalnie dla języka VRML97 napisano wtyczkę do przeglądarki Firefox, Cortona VRML, działającą zarówno na komputerach PC, jak i na komputerach Mac. Pod systemem Windows działa także wtyczka SwirlX3D stworzona z myślą o przeglądarkach Internet Explorer oraz Mozilla. Wystarczy spróbować uruchomić którykolwiek z przykładów grafiki trójwymiarowej, a odpowiednia wtyczka zostanie odnaleziona automatycznie. Trzecie rozszerzenie (wraz z dołączoną galerią) to produkt firmy Media Machines, wtyczka Flux, działająca zarówno w przeglądarkach IE, jak i Firefox w systemie Windows. Klienta Cortona VRML można pobrać ze strony http://www.parallelgraphics.com/products/ ´cortona/. Wtyczka SwirlX3D jest dostępna na stronie http://www.pinecoast.com/swvdow ´nload.htm. Wtyczkę Flux firmy Media Machines można pobrać ze strony http://www. ´mediamachines.com/download1.
W sieci znajduje się też spora liczba przykładów umieszczonych na różnych stronach internetowych. Można również znaleźć samouczki poświęcone tworzeniu grafiki w obydwu formatach. Poszukiwania przykładów warto rozpocząć od zapoznania się z pracami zamieszczonymi na stronie Web3D Consortium. Większość z nich stworzono w formacie X3D osadzonym w kodzie XHTML, ale zazwyczaj towarzyszy im odsyłacz do wersji napisanej w VRML97. Rysunek 6.2 przedstawia jeden z takich plików uruchomiony w przeglądarce Firefox. Praca zawiera animację ryby. Dostępne z boku okna przyciski fly, walk i study pozwalają zmieniać 1
Firma Media Machines została zakupiona przez firmę Vivaty, która obecnie nie wspiera już silnika Flux, a skupia się na własnej platformie nazwanej Vivaty — przyp. red.
Formaty trójwymiarowe
| 245
Rysunek 6.2. Aplikacja VRML przedstawiająca rybę otwarta za pomocą wtyczki Cortona w przeglądarce Firefox
położenie kamery (dwa pierwsze) i obracać obiekt (ostatni). Wygląd aplikacji po obróceniu obiektu umieściłam na rysunku 6.3.
Rysunek 6.3. Ryba stworzona w języku VRML, obrócona w taki sposób, by trójwymiarowy charakter pracy stał się w pełni widoczny 246 |
Rozdział 6. Wektorowo — początki i języki znaczników
Ponieważ żadna z wiodących na rynku przeglądarek nie oferuje własnej obsługi specyfikacji grafiki trójwymiarowej, a praca nad pojedynczymi nawet obiektami tego typu jest zajęciem bardzo złożonym, nie będę więcej zajmować się tym tematem. Warto jednak sprawdzić działanie wtyczek do przeglądarki Firefox i możliwości, jakie dają przykłady umieszczone na wspomnianych wcześniej stronach. Przygotowanie przeglądarki do pracy z grafiką trójwymiarową nie zajmuje dużo czasu, a zabawa z przykładami daje radość na kilka godzin. Każdy zainteresowany pracą z grafiką 3D może poszukać dostępnych w sieci samouczków i samodzielnie wypróbować możliwości tej technologii (sugeruję zacząć od SwirlX3D na stronie http://www. swirlx3d.com/). Kod grafiki trójwymiarowej nie wymaga kompilowania, potrzebna jest wyłącznie przeglądarka zdolna przetwarzać pliki VRML czy X3D. W najgorszym razie uda się chociaż poukładać kostkę Rubika za pomocą aplikacji widocznej na rysunku 6.4.
Rysunek 6.4. Układanie kostki Rubika na stronach Media Machines, w przeglądarce Firefox wyposażonej we wtyczkę Flux
Mimo braku obsługi specyfikacji grafiki trójwymiarowej wiodące przeglądarki oferują obsługę dwuwymiarowej grafiki wektorowej zapisanej w formacie XML — no, prawie — i na tym właśnie skupię się w dalszej części tego rozdziału. Rozpocznę od sierotki Marysi tych formatów — VML.
Język VML Grafika wektorowa, ze swej natury, jest dynamiczna, a to oznacza, że istnieje wyłącznie w postaci tekstu, poleceń i definicji obiektów, dopóki odpowiednia aplikacja nie wykona ich interpretacji i nie wyświetli wizualnej formy pliku. W przypadku zapisywania grafiki w postaci języków znaczników obrazy są zapisywane za pomocą znaczników XML, bez użycia narzędzi programowania, ale efekt końcowy jest identyczny — ładny obrazek. Język VML
|
247
Publikacja pierwszej wersji specyfikacji XML w 1998 roku spowodowała nagły wzrost zainteresowania technologią w kontekście zapisywania w ten sposób grafiki wektorowej. Główny problem polegał oczywiście na tym, że różni ludzie mieli odmienne wizje „doskonałego” języka znaczników grafiki wektorowej.
Wpływ systemu operacyjnego Specyfikacje narzędzi do tworzenia grafiki trójwymiarowej w sieci są doskonałym przykładem jeszcze jednego aspektu umieszczania obrazów na stronach internetowych, który jednak nie ma nic wspólnego z samą siecią — wpływu obsługi grafiki w różnych systemach operacyjnych. Łatwiej jest stworzyć wtyczkę obsługującą grafikę trójwymiarową dla przeglądarek Internet Explorer i Firefox działających w systemie Windows, niż napisać taką aplikację dla samej tylko przeglądarki Firefox, ale uruchamianej w systemach Windows i Mac, nie wspominając już o komplecie Windows, Mac i Linux. Wspominałam o tych kłopotach w rozdziale 2., gdy zajmowałam się wpływem systemu operacyjnego na wygląd grafiki. Jak widać, problemy te nie dotyczą wyłącznie grafiki rastrowej. Dlatego też, przed przystąpieniem do podejmowania decyzji dotyczących prac graficznych oraz przed tworzeniem grafiki, warto zastanowić się nie tylko nad tym, w jakich przeglądarkach będzie ona wyświetlana, ale też nad tym, w jakich systemach będą one pracować.
Microsoft, Macromedia i inne przedsiębiorstwa połączyły swoje siły w pracy nad stworzeniem jednego z pierwszych języków działających w oparciu o specyfikację XML — języka VML (Vector Markup Language). Do dziś jego obsługę zapewnia wyłącznie Microsoft — w aplikacjach pakietu Office i przeglądarce Internet Explorer. Specyfikacja języka VML jest dostępna na stronie http://www.w3.org/TR/NOTE-VML. Dokumentacja firmy Microsoft jest dostępna na stronie http://msdn2.microsoft.com/en-us/ ´library/bb264280.aspx, przy czym należy pamiętać, że firma Microsoft lubi czasami przenosić jej zasoby pod inne adresy.
Istotną zaletą VML jest to, że był on projektowany jako rozszerzenie HTML, a nie jako język przeznaczony do osobnego użytku. Dzięki temu umieszczanie go w kodzie strony okazuje się stosunkowo proste.
Podstawy VML Na początku należy dodać do otwierającego znacznika html definicję przestrzeni nazw vml:
Znacznik head zawiera definicję zachowania pozwalającego przeglądarce interpretować i przetwarzać polecenia VML w sposób dla niej właściwy:
Obiekty języka VML są definiowane w postaci znaczników XML, a właściwości tych obiektów stają się atrybutami znaczników. Podany poniżej fragment kodu rysuje owalny kształt o wysokości 100 pikseli i szerokości 200 pikseli, wypełniony kolorem czerwonym, obramowany 10-pikselową kreską:
248 |
Rozdział 6. Wektorowo — początki i języki znaczników
W kodzie pojawia się znacznik oval, którego obramowanie definiują atrybuty strokecolor (kolor) oraz strokeweight (grubość). Kolor wypełnienia owalu oczywiście jest określany atrybutem fillcolor, natomiast atrybut style definiuje wymiary znacznika, a więc również całego owalu. W atrybucie style można także zapisać położenie znacznika, ale w tym przykładzie jest on pozycjonowany względnie. Owal zostaje umieszczony wewnątrz znacznika p, aby pokazać, jak łatwo można umieszczać kod VML w znacznikach HTML. Podsumuję informacje o wspomnianych dotąd atrybutach. style
Określa typowe dla arkusza CSS ustawienia stylu — szerokość, wysokość i położenie. fillcolor
Definiuje kolor wypełnienia obiektu. strokecolor
Określa kolor linii obramowania obiektu niezamkniętego. strokeweight
Określa grubość linii obramowania obiektu niezamkniętego. Poza owalem istnieje jeszcze kilka innych predefiniowanych kształtów. Poniżej znajduje się kod rysujący prostokąt o szerokości 400 pikseli, wysokości 100 pikseli, wypełniony kolorem żółtym, obramowany na czarno.
Prostokąt o zaokrąglonych rogach uzyskamy w wyniku użycia znacznika roundrect. W znaczniku tym pojawia się jeden nowy atrybut — arcSize — przyjmujący wartość procentową, określającą krzywiznę zaokrąglenia rogów. Wartość 1.0 odpowiada narysowaniu okręgu. Mniejsze wartości spowodują stworzenie prostokąta o zaokrąglonych rogach. W przypadku niepodania wartości atrybutu przeglądarka posłuży się wartością domyślną — 20% (0.2).
Linię rysuje się, podając wartości atrybutów from i to, które są współrzędnymi punktu rozpoczynającego rysowanie linii i kończącego rysowanie go.
Linie łamane, złożone z kilku połączonych odcinków, uzyskuje się za pomocą znacznika polyline:
Język VML
| 249
Ten fragment kodu rysuje niebieską gwiazdę, kształt niczym nieobramowany o szerokości i wysokości 200 pikseli. Współrzędne punktów zostały umieszczone w atrybucie points. Każda para zawiera współrzędną x oraz współrzędną y. Każda wartość współrzędnej jest oddzielona od sąsiadujących z nią wartości przecinkami. W przytoczonym fragmencie pojawiają się dwa nowe atrybuty, stroke, przyjmujący wartość none, dzięki któremu kształt pojawia się w oknie przeglądarki bez żadnego obramowania, oraz fill, ustawiony na wartość true, definiujący kształt wypełniony kolorem. Następny z predefiniowanych kształtów, curve, przypomina atrybutami znacznik polyline. Różni się od wspomnianego dwoma dodatkowymi atrybutami — control1 oraz control2 — przyjmującymi wartości współrzędnych punktów kontrolnych krzywej Béziera.
Ten fragment kodu rysuje odwrócony, żółty uśmiech. Punkty kontrolne spełniają funkcję punktów przyciągania krzywej. Wystarczy wyobrazić sobie kawałek gumki rozciągniętej między dwoma punktami zaczepienia. Gdy chwyci się ją palcami obu rąk w dwóch miejscach i pociągnie w górę lub w dół, otrzyma się ilustrację sposobu działania atrybutów control1 i control2. Ostatnim z predefiniowanych kształtów jest łuk uzyskiwany za pomocą znacznika arc, przyjmującego dwa atrybuty opisujące początek i koniec rysowania łuku — startangle oraz endangle.
Listing 6.2 zawiera kod strony WWW, na której pojawiają się wszystkie opisywane dotąd obiekty. Każdy z nich jest umiejscawiany w oknie przeglądarki za pomocą współrzędnych bezwzględnych, więc kod jest jasny i przejrzysty. Zwracam uwagę na brak definicji typu dokumentu DOCTYPE oraz definicję przestrzeni nazw v zamiast vml — to obojętne, którą będziemy się posługiwać, jak długo zachowamy spójność w całym kodzie strony. Listing 6.2. Przykładowa strona wyświetlająca różne kształty stworzone w języku VML VML — przykład
250
|
Rozdział 6. Wektorowo — początki i języki znaczników
Jak widać, język VML nie jest nadmiernie skomplikowany, jedynie nieco rozwlekły. Wynik uruchomienia strony w przeglądarce Internet Explorer przedstawiłam na rysunku 6.5.
Rysunek 6.5. Przykłady predefiniowanych kształtów języka VML
W następnym podrozdziale opiszę jedną z bardziej złożonych struktur specyfikacji tego języka. Język VML
|
251
Krótko o zaawansowanych możliwościach VML Gdyby tworzenie grafiki wektorowej w VML miało ograniczać się do używania kształtów predefiniowanych, język ten zakończyłby swoją karierę już dawno. Nie można oczywiście wykluczyć, że takie rozwiązanie byłoby jedynie z pożytkiem dla świata, gdyż obecnie wydaje się, że wyłącznie Microsoft posługuje się tym narzędziem, jednak historia pokazuje, że sam Microsoft wystarcza, by utrzymywać język VML przy życiu. Ponieważ VML jest jedynym językiem znaczników obsługiwanym przez przeglądarkę Internet Explorer, wydaje się całkiem rozsądnym poznać go trochę głębiej, a może nawet dobrze się przy tym bawić. Język VML oferuje również znacznik shape. Dzięki niemu można utworzyć obraz o dowolnym kształcie, co pozwala uciec od kształtów predefiniowanych. Przykładem jego wykorzystania może być poniższy fragment kodu tworzący żółty trójkąt:
Wartości M oraz L atrybutu path definiują wygląd kształtu. Patrząc od lewej strony — kolejne elementy ścieżki pojawiają się zgodnie z następującymi komendami: • przesunięcie pióra do współrzędnych 0,200; • rysowanie linii wychodzącej z punktu początkowego i kończącej się w punkcie 100,0; • rysowanie linii kończącej się w punkcie 200,200; • zamknięcie linii (X); • koniec linii (E).
Polecenie rysowania linii (L) stosuje się do kolejnych par współrzędnych tak długo, aż pojawi się nowe polecenie atrybutu path. Oczywiście po wykonaniu żmudnej pracy kreślenia nowego kształtu, aby wykorzystać go ponownie w innym miejscu, należałoby skopiować i wkleić wszystkie polecenia. Wygodniej byłoby pracować ze znacznikiem shape, gdyby możliwe było zapisanie raz zdefiniowanego kształtu i potem jedynie odwoływanie się do tej definicji w miejscach, w których jest to konieczne. W tym momencie na scenę wkracza znacznik shapetype. Praca ze znacznikiem shapetype nie odbiega od zasad, które obowiązują dla znacznika type. Jedyna różnica między nimi polega na tym, że znacznik shapetype służy do przechowywania szablonu nowego kształtu, a nie faktycznego umieszczania go w oknie przeglądarki. Jednym z jego atrybutów jest parametr id, pozwalający nadać znacznikowi unikalną nazwę. Wywołanie szablonu odbywa się w atrybucie type znacznika shape poprzez podanie tej właśnie nazwy:
Przedstawiony fragment kodu rysuje dwa żółte trójkąty — pierwszy mieści się w kwadracie o boku 50 pikseli, drugi wpisuje się w prostokąt o wymiarach 200×100 pikseli. Po stworzeniu kształtu nie trzeba ograniczać się wyłącznie do wypełniania go jednolitym kolorem. Zamiast dodawać kolejne atrybuty do znacznika kształtu, można zamknąć w nim inny znacznik, który zmodyfikuje znacznik rodzica. W ten sposób zdefiniowany wcześniej 252
|
Rozdział 6. Wektorowo — początki i języki znaczników
trójkąt zostanie wypełniony gradientowym przejściem pomiędzy barwą niebieską a czerwoną o kryciu określonym parametrem 50%.
Znacznik pozwalający modyfikować wypełnienie kształtu nosi, bardzo rozsądnie, nazwę fill. To jeszcze nie wszystko na temat kształtów. Czasami pojawia się potrzeba wprowadzenia do rysunku bardziej złożonej formy, zbudowanej z większej liczby obiektów. W takich przypadkach można posłużyć się znacznikiem group, którego rola ogranicza się do magazynowania dowolnej liczby innych znaczników, lecz dzięki niemu można traktować je jako całość. Poniższy kod definiuje żółty trójkąt, po czym łączy kilka narysowanych trójkątów w całość:
Listing 6.3 przedstawia kod rysujący wszystkie opisane tu bardziej zaawansowane obiekty języka VML na jednej stronie WWW. Wynik otwarcia jej w przeglądarce umieściłam na rysunku 6.6. To bardzo prosta strona, która przede wszystkim ma pokazać sposób działania obiektów tego języka, niż faktycznie coś stworzyć. Listing 6.3. Próbka możliwości języka VML i jego bardziej zaawansowanych obiektów VML — przykład
Język VML
|
253
Rysunek 6.6. Próbki zaawansowanej grafiki VML
To jedynie krótki opis możliwości, jakie oferuje język VML, mający jednocześnie dać wgląd w jego składnię. Oczywiście wygląd przykładów można podziwiać wyłącznie w przeglądarce Internet Explorer uruchomionej w systemie Windows. Użytkownicy systemów operacyjnych Mac OS i Linux mogą zastanawiać się teraz, w jaki sposób sprawdzić działanie opisywanych przeze mnie przykładów w przeglądarce Internet Explorer, skoro ich komputery nie mają zainstalowanego systemu Windows. W internecie można znaleźć serwisy specjalizujące się w umieszczaniu zrzutów ekranu wyglądu strony uruchamianej w różnych przeglądarkach. Jednym z takich serwisów jest BrowserShots dostępny pod adresem http://browsershots.org/. Serwis ten, w przeciwieństwie do innych, jest darmowy. Nie da się sprawdzić w tych serwisach działania aplikacji dynamicznych, ale bez problemu uda się sprawdzić wygląd stron zawierających kod VML, SVG oraz znacznik canvas (przykłady z tego i następnych dwóch rozdziałów), otwartych w przeglądarce IE. Poza tym wiele sieciowych narzędzi sprawdzających zgodność kodu ze standardami, na przykład Total Validator, oferuje możliwość podejrzenia wyglądu strony w konkretnej przeglądarce. Należy przy tym pamiętać, że strony te mają przede wszystkim sprawdzać zgodność kodu ze specyfikacją, a nie robić zrzuty ekranu, więc nie należy nadużywać cierpliwości ich twórców prośbami wykonania kilku zrzutów dziennie.
Język VML żyje dzięki zastosowaniom w programach pakietu Office i działaniu w przeglądarce IE. Jednak żadna inna firma nie deklaruje chęci używania go, a nawet sam Microsoft nie chce ujawnić, czy jego obsługa pojawi się w kolejnych wersjach aplikacji. Może zatem się okazać, że język VML jest już martwy za życia, ponieważ nie pojawiają się przed nim żadne nowe drogi rozwoju. Dziś i jutro grafiki wektorowej w sieci to domena języka SVG, którego możliwości opiszę w następnym podrozdziale.
254 |
Rozdział 6. Wektorowo — początki i języki znaczników
Witaj, SVG! W tym samym czasie, gdy Microsoft i inne przedsiębiorstwa zgłosiły do organizacji W3C specyfikację języka VML, Adobe, Sun i ich współpracownicy przysłali do konsorcjum projekt języka PGML (Precision Graphics Markup Language). Organizacja W3C, postawiona przed faktem istnienia dwóch konkurencyjnych specyfikacji, znalazła trzecią opcję — powołała do życia język łączący w sobie pewne elementy VML i PGML, czyli SVG (Scalable Vector Graphics). Wiele z opisanych już pomysłów języka VML — użycie XML, predefiniowane obiekty, transformacje, możliwość zmieniania i grupowania elementów rysunku — zostało przeniesionych do specyfikacji SVG. Główna różnica między obydwoma językami polega na tym, że VML był projektowany jako rozszerzenie języka HTML, natomiast SVG posługuje się zupełnie nieznanymi dotąd poleceniami XML. Mimo wszystkich łączących je podobieństw można śmiało stwierdzić, że SVG jest znacznie potężniejszym narzędziem graficznym niż VML. Ważniejsze zaś jest to, że język ten stał się obowiązującym już standardem i większość liczących się przeglądarek oferuje — przynajmniej częściowo — wbudowaną obsługę jego poleceń. W chwili oddawania książki do druku istniał niestety jeden wyjątek od tej reguły — Internet Explorer. Najlepszym sposobem na oswojenie się ze składnią SVG będzie skok na głęboką wodę — zmierzymy się ze wszechobecnym przykładem „Witaj, świecie!”.
Pierwsza aplikacja Zmagania z SVG zacznę od stworzenia samodzielnego dokumentu XML w formacie SVG. W następnym rozdziale opiszę różne sposoby osadzania kodu SVG w dokumencie HTML, na razie jednak będę zajmować się samym SVG, niepowiązanym w żaden sposób ze stronami HTML czy XHTML. Pierwszym kontaktem z SVG, jaki proponuję moim Czytelnikom, będzie wariacja klasycznej aplikacji SVG „Witaj, świecie!” pisanej przez programistów na początku pracy z nową technologią. W prezentowanej przeze mnie wariacji pojawia się mały obraz kuli ziemskiej (dzięki uprzejmości NASA) otoczonej trzema elipsami, dzięki czemu cała kompozycja przypomina stylizacją symbol atomu. Pod grafiką znajduje się napis „Witaj, świecie!” sformatowany czcionką Times New Roman. Kod odpowiadający za stworzenie tej grafiki umieściłam na listingu 6.4. Jak widać, język SVG nie jest ani zbyt skomplikowany, ani specjalnie rozwlekły. Listing 6.4. Aplikacja „Witaj, świecie!” w postaci strony SVG
Kod przykładu jest w pełni zgodny ze specyfikacją SVG i nie zawiera żadnych błędów, dziwić może zatem brak deklaracji typu dokumentu DOCTYPE znanej z innych plików tworzonych w językach XML. Dawniej wprowadzałam do dokumentów SVG deklarację typu dokumentu w postaci:
Na stronach projektu Mozilla SVG znalazłam odnośnik do bardzo pomocnej strony Jonathana Watta, zawierającej wskazówki dotyczące tworzenia prezentacji w języku SVG. Jedną z bardzo przydatnych rad okazało się być zalecenie nieużywania definicji typu dokumentu DOCTYPE. A oto uzasadnienie: Deklaracje typu dokumentu SVG wywołują tyle kontrowersji, że SVG Working Group zdecydowała nie dodawać DTD do mającego pojawić się wkrótce standardu SVG 1.2. Co więcej, członkowie SVG WG zalecają usuwać deklarację typu dokumentu z plików tworzonych w standardach SVG 1.0 oraz SVG 1.1. Należy natomiast zawsze podawać wartości atrybutów version oraz baseProfile nadrzędnego znacznika svg (…). Takie uzasadnienie wydało mi się logiczne, więc zarzuciłam umieszczanie definicji typu DOCTYPE w swoich dokumentach SVG. Strona projektu Mozilla SVG znajduje się pod adresem http://www.mozilla.org/projects/svg/. Wskazówki Jonathana Watta można znaleźć na stronie http://jwatt.org/svg/authoring/.
Stosując się do wspomnianej rady, dodałam w otwierającym znaczniku svg następujące wpisy: version="1.1" definiujący zgodność ze standardem SVG 1.1 oraz baseProfile="full". Wartość atrybutu baseProfile określa jeden z podzbiorów poleceń języka SVG. Temat ten poruszę w podrozdziale „Specyfikacje SVG — Full, Tiny i Basic”. Kod dokumentu SVG umieszcza się pomiędzy znacznikami svg niezależnie od tego, czy dokument jest samodzielnym plikiem, czy też kod osadza się w pliku HTML. Przestrzeni nazw przypisuje się alias, na przykład xlink dla określeń XLink, który następnie pojawia się w różnych znacznikach i ich atrybutach: xlink:href="helloworld.png"
Jeden ze zbiorów słownictwa może stać się zbiorem domyślnym, co znaczy, że nie będzie potrzebować on aliasu. W omawianym przypadku zbiorem tym jest składnia języka SVG. W ciele dokumenty SVG pojawia się sekcja definicji, określona znacznikiem defs, zawierająca definicję obiektu ellipse. Żaden z kształtów tworzonych wewnątrz znaczników defs nie pojawia się w oknie przeglądarki. W znacznikach tych pojawiają się definicje obiektów umieszczanych w dalszych częściach strony. Predefiniowany kształt elipsy pojawia się w dokumencie trzy razy. Wykorzystuję go do zaznaczenia orbit wokół obrazu Ziemi. Położenie elips określiłam za pomocą poleceń rotacji i przesunięcia.
256
|
Rozdział 6. Wektorowo — początki i języki znaczników
Obraz kuli ziemskiej jest zapisany w pliku PNG. Do kodu SVG wprowadzam go jako wartość atrybutu znacznika img. Tekst „Witaj, świecie!” został podany w znaczniku text. O atrybutach obydwu znaczników już za chwilę. Kod przedstawiony na listingu 6.4 uruchamia się bezpośrednio w przeglądarce z wbudowaną obsługą plików SVG. Wynik jego otwarcia w przeglądarce Opera przedstawiłam na rysunku 6.7. Identyczny efekt osiągnie się w każdej z wymienionych przeglądarek: • Camino i Firefox autorstwa Mozilli, • Opera w wersji 8 i wyższych, • Konqueror z zainstalowaną odpowiednią wtyczką, • Internet Explorer z zainstalowaną wtyczką, • Safari w wersji 3.0 lub wyższej.
Rysunek 6.7. Pierwsza aplikacja SVG — „Witaj, świecie!”
Firma Adobe stworzyła wtyczkę pozwalającą otwierać aplikacje SVG w przeglądarkach nieobsługujących samodzielnie języka SVG. Wtyczka ta współpracuje także z przeglądarką Internet Explorer. Niestety w styczniu 2009 roku Adobe wycofuje się z jej dalszego rozwijania. Pozostaje mi mieć nadzieję, że gdy książka ta ukaże się na rynku, plik instalacyjny będzie nadal dostępny w sieci, ewentualnie pojawi się jakiś inny produkt pozwalający uruchamiać kod SVG w przeglądarkach bez wbudowanej jego obsługi. Microsoft nie zapowiada wprowadzenia obsługi tego formatu ani nie dołączył takiej deklaracji do specyfikacji pierwszej wersji beta przeglądarki IE8. Witaj, SVG!
|
257
Pozostałe przeglądarki oferują obsługę większości funkcji SVG. Wyjątkiem są bardziej zaawansowane narzędzia. Różnice pojawiają się też w wyniku rozwijania obsługi dla różnych specyfikacji SVG — SVG Full lub SVG Tiny.
Specyfikacje SVG — Full, Tiny i Basic Przykład aplikacji „Witaj, świecie!” korzysta z założeń implementacji pełnej specyfikacji SVG 1.1. Specyfikacja SVG 1.1 zyskała rekomendację konsorcjum W3C w 2003 roku. Ze względu na coraz większe zainteresowanie konsumentów możliwościami urządzeń przenośnych rozpoczęto prace nad dwiema nowymi specyfikacjami, przeznaczonymi do wykorzystania w aplikacjach uruchamianych w telefonach komórkowych oraz innych urządzeniach przenośnych, na przykład PDA. Pierwsza ze wspomnianych specyfikacji to SVG Tiny, druga to SVG Basic. Obydwie zyskały rekomendację w styczniu 2007 roku. Specyfikacje SVG tworzone z myślą o urządzeniach przenośnych powstały w oparciu o założenia, że urządzenia te mają procesory o ograniczonych możliwościach obliczeniowych, dysponują niewielką ilością pamięci, niewielkim źródłem zasilania i wąskim pasmem przesyłu danych (na powyższe cechy wskazują odpowiednie fragmenty specyfikacji), więc działanie wszystkich aplikacji internetowych musi podlegać pewnym ograniczeniom. Nie są one bynajmniej bardzo restrykcyjne, co można stwierdzić, przyglądając się przykładom animacji SVG spełniającym założenia specyfikacji Tiny. Przykłady takie można znaleźć choćby na stronie http://www.tinyline.com/svgt/samples/ ´samples/index.html. Zostały stworzone za pomocą narzędzi TinyLine SVG, zaprojektowanych specjalnie z myślą o pisaniu aplikacji SVG dla urządzeń przenośnych.
Podstawowa różnica między poszczególnymi specyfikacjami polega na wsparciu dla obiektowego modelu dokumentu (DOM) oraz obsłudze skryptów. W rozdziałach tym i następnym skupię się na zagadnieniach związanych z tworzeniem statycznej grafiki SVG, której poprawną interpretację — w większym lub mniejszym stopniu — zapewniają wszystkie interesujące mnie przeglądarki. To prowadzi nas do kolejnego pytania — na ile przeglądarki internetowe spełniają wymogi specyfikacji SVG?
Obsługa w przeglądarkach Wymieniłam już przeglądarki, które w ogóle potrafią interpretować kod SVG. Nie napisałam natomiast, że żadna z nich nie oferuje obsługi całego standardu. Właściciel strony CodeDread, Jeff Schiller, umieścił na niej ciągle aktualizowany wykres przedstawiający stopień implementacji obsługi standardu SVG w różnych przeglądarkach (również tych, które działają jedynie dzięki odpowiednim wtyczkom). Dane do wykresu pochodzą z wyników przeprowadzenia zestawu testów dostępnych na stronie http://www.w3.org/Graphics/ ´SVG/Test/. Testy te są ogólnie dostępne, więc każdy może wykonać je samodzielnie i porównać wyniki z kontrolnym obrazem PNG.
258
|
Rozdział 6. Wektorowo — początki i języki znaczników
Każdy, kto lubi pracować nad kodem SVG, powinien zapoznać się z zawartością strony CodeDread (http://www.codedread.com/). Wykres przedstawiający stopień implementacji obsługi SVG w różnych przeglądarkach znajduje się na stronie http://www.codedread. ´com/svg-support.php.
Czerwone linie wykresu odpowiadają negatywnemu wynikowi testu, zielone oznaczają wynik pozytywny. Rysunek 6.8 przedstawia wyniki testów, a jeśli spojrzeć, ile miejsca zajmują obszary czerwone, można śmiało stwierdzić, że przed twórcami przeglądarek jeszcze daleka droga.
Rysunek 6.8. Wyniki uruchomienia zestawu testów dla specyfikacji SVG 1.1 w kilku przeglądarkach oraz dla różnych wtyczek
W 2008 roku standard SVG został uwzględniony w teście Acid3 prowadzonym w ramach projektu Web Standards, dzięki czemu prace nad jego implementacją stały się priorytetem dla twórców przeglądarek Firefox, Safari (Webkit) i Opera. (Więcej informacji na temat testu Acid3 można znaleźć na stronie http://www.webstandards.org/action/acid3/). Obecnie obsługa SVG stoi w przeglądarkach na takim poziomie, że w zupełności wystarcza na — a nawet wykracza poza — potrzeby mojej twórczości na stronach WWW. Przeglądarki oraz inne aplikacje oferujące obsługę technologii SVG potrafią poprawnie interpretować obiekty predefiniowane, grupowanie, polecenia obsługi tekstu, definicje kształtów użytkownika (oraz ponowne ich użycie), transformacje (na przykład rotację) oraz różne filtry. Poza drobnymi różnicami w wyświetlaniu czcionki, aplikacja „Witaj, świecie!” będzie wyglądała tak samo w przeglądarkach Opera 9.5, Safari 3 oraz Firefox 3. Mimo to zawsze można wprowadzić pewne poprawki, zastosować bardziej ambitne efekty i dynamiczne zmiany grafiki za pomocą skryptów JavaScript. Wszystko to opiszę w dalszych rozdziałach, teraz zaś zajmę się tymi aspektami statycznego SVG, które działają w różnych przeglądarkach. Witaj, SVG!
|
259
Kształty SVG Język SVG daje możliwość używania kilku predefiniowanych kształtów, podobnych do opisywanych już kształtów języka VML — rect (prostokąt), circle (koło), ellipse (elipsa), line (linia), polyline (łamana) i polygon (wielokąt). Każdy z tych kształtów to osobny znacznik XML, mający kilka różnych atrybutów, którymi określa się wygląd i zachowanie rysowanej figury. Na listingu 6.4 pojawił się znacznik ellipse, którym rysowałam trzy elipsy otaczające wizerunek kuli ziemskiej.
Atrybutami znacznika są id, fill, rx, ry, stroke i stroke-width. To nieliczne spośród atrybutów znacznika ellipse, a część z nich zalicza się także do atrybutów pozostałych znaczników. Oto w jaki sposób wpływają one na wygląd rysowanej figury. id rx ry
Dzięki wartości tego atrybutu uzyskuje się dostęp do znacznika. Poziomy promień elipsy (jej szerokość). Pionowy promień elipsy (jej wysokość).
fill
Jeden z wielu atrybutów rysujących. Pozwala wypełnić wnętrze kształtu kolorem (domyślna wartość tego atrybutu to black).
stroke
Kolejny atrybut rysujący. Pozwala wprowadzić kontur figury (domyślna wartość none).
stroke-width
Określa szerokość konturu.
Nie wspomniałam tu o kilku innych atrybutach, których nie trzeba określać jawnie, gdyż mają przypisane im odpowiednie wartości domyślne, umożliwiające poprawne wykonanie kodu. Są to, na przykład, atrybuty cx i cy, definiujące współrzędne środków osi X i osi Y elipsy. Jeżeli nie zostaną jawnie określone, przeglądarka wykona kod, posługując się ich domyślnymi wartościami, czyli 0 (zero).
Identyfikatory URI oraz ponowne wykorzystanie dzięki znacznikom defs i use Specyfikacja SVG 1.1. dopuszcza posługiwanie się identyfikatorami URI (Uniform Resource Identifier), by uzyskać dostęp do obiektów w zewnętrznych lokalizacjach. W aplikacji „Witaj, świecie!” pojawiają się dwa takie identyfikatory. Jeden z nich daje dostęp do kształtu eliptycznego, a drugi pozwala otworzyć zewnętrzny dokument. Zamiast powielać na rysunku kształt elipsy, stworzyłam jej szablon i umieściłam go w znacznikach defs. Znaczniki te pełnią rolę kontenera dla definicji wszystkich obiektów, które nie będą rysowane na stronie natychmiast. Dzięki temu udaje się utrzymać prostotę kodu SVG i jednocześnie tworzyć skomplikowane grafiki składające się z definiowanych wcześniej elementów, nadających się do ponownego wykorzystania. 260
|
Rozdział 6. Wektorowo — początki i języki znaczników
Dostęp do zdefiniowanego uprzednio kształtu elipsy uzyskuje się za pomocą właściwego jej identyfikatora podanego w atrybucie id. Odwołanie do tego atrybutu wykonuje się za pomocą innego znacznika, use, którego działanie sprowadza się do użycia szablonu zdefiniowanego we wcześniejszej wersji dokumentu. Znacznik use uzyskuje dostęp do szablonu za pomocą atrybutu XLink, xlink:href. Zaletą stosowania szablonów poszczególnych elementów grafiki jest to, że zmiana wyglądu wszystkich elementów grafiki korzystających z tego samego szablonu wymaga od programisty wprowadzenia modyfikacji w jednym tylko punkcie kodu. Ponieważ elipsa jest kształtem predefiniowanym, mogłam od ręki zmienić kolor na zielony (bardzo popularny w dzisiejszych czasach), zwiększyć szerokość krawędzi, wydłużyć cały kształt, zmienić kolor pędzla i ustawić inny stopień krycia, a wszystkie te zmiany pojawiły się w każdym eliptycznym kształcie grafiki.
Rysunek 6.9 przedstawia wygląd strony po wprowadzeniu opisanych zmian. Jak widać, w znaczący sposób zmodyfikowały one trzy figury, a przecież pojawiły się tylko w jednym miejscu kodu. W przypadku tworzenia bardzo skomplikowanych grafik, składających się z dziesiątek identycznych elementów, znaczniki defs stają się niezastąpionym narzędziem.
Rysunek 6.9. „Witaj, świecie!” — już po zmianach
Przy każdym odwołaniu do definicji elipsy pojawia się identyczna transformacja, powodująca obrócenie elipsy w jej układzie współrzędnych. O sposobie posługiwania się tym narzędziem napiszę w następnym podrozdziale.
Witaj, SVG!
|
261
Układ współrzędnych, grupowanie obiektów i ich obracanie Grafiki SVG są wyświetlane w obszarze, który określa się mianem kanwy SVG. Za wygląd całości grafiki odpowiada ustawienie okna roboczego (ang. viewport), czyli rozmiar przypisany znacznikowi svg pojawiającemu się na początku aplikacji „Witaj, świecie!”. Wszystkie fragmenty grafiki mogą pojawić się w nim w całości lub też zostać odpowiednio przycięte, jeżeli ich wymiary przekroczą rozmiar okna roboczego. Położenie każdej elipsy w obszarze roboczym jest definiowane za pomocą współrzędnych układu definiowanych wartościami atrybutów x oraz y. Wartości te regulują położenie lewego górnego rogu prostokąta, w który wpisana jest elipsa. Poza zastosowaniem tych definicji posłużyłam się także atrybutem transform, który pozwolił mi obrócić każdy z kształtów. Ciekawą cechą wspomnianej transformacji jest to, że obraca ona układ współrzędnych powiązany z kształtem, a nie sam kształt (czego można by się spodziewać). W omawianym przykładzie układ współrzędnych każdej z elips został najpierw obrócony, a następnie przesunięty, dzięki czemu elipsy zostały obrócone i przesunięte w obrębie nowego układu współrzędnych.
Operację transform stosuje się przed przesunięciem kształtu w nowe położenie czy zmianą skali jego wymiarów. W tym przypadku elipsa jest obracana o 90° w kierunku przeciwnym do kierunku ruchu wskazówek zegara wewnątrz nowego układu współrzędnych, którego początek przypada w punkcie 100,100 układu poprzedniego (przypominam, że domyślne wartości atrybutów cx oraz cy to 0,0). Następną operacją jest przesunięcie elipsy o 30 pikseli wzdłuż osi X oraz o 400 pikseli w lewą stronę osi Y. Przesunięcie „w górę” jest definiowane względnie i odnosi się do domyślnego układu współrzędnych, którego początek przypada w punkcie (0,0) — wartości osi X rosną w dół, a wartości osi Y rosną w prawo. Temat ten omówię dużo obszerniej w rozdziale 7., jednak już teraz uprzedzam, że skutkiem ubocznym takiego działania atrybutu transform jest spore zamieszanie w kwestii tego, jakich konkretnie zmian się właśnie dokonuje. Przykładowo, mogłoby się wydawać, że aby zmienić położenie w pionie elipsy obróconej o 90°, należy zmienić wartość x atrybutu translate. Okazuje się jednak, że nowy układ współrzędnych powiązany z obiektem został obrócony razem z nim o 90°, więc przesunięcie obiektu w górę wymaga tak naprawdę przesunięcia go w bok, wzdłuż osi X. Owszem, to powoduje dużo zamieszania. Najlepszym rozwiązaniem wydaje się pokazanie wykresu z wyróżnionymi osiami i przekształcenie go za pomocą atrybutu transform. Listing 6.5 przedstawia kod odpowiedniej aplikacji SVG. Listing 6.5. Wpływ atrybutu transform na wygląd układu współrzędnych
W tym przykładzie wprowadziłam kolejny znacznik języka SVG — g, czyli znacznik grupujący. Znacznik ten przechowuje inne znaczniki SVG, które są od chwili przypisania ich do jednej grupy, traktowane jako całość. W kodzie listingu 6.5 grupę taką tworzą dwie linie i elipsa. Linie symbolizują osie układu współrzędnych obszaru roboczego SVG — niebieska linia to oś X, a czerwona to oś Y. Zielona elipsa, dodana tu dla orientacji, przypomina kształt znany już z przykładu „Witaj, świecie!”. Cała grupa została umieszczona w znaczniku defs. Pierwsze wykorzystanie tak zdefiniowanej grupy ogranicza się do narysowania wszystkich jej elementów w niezmienionej postaci. Drugie jej użycie podlega już transformacji — najpierw obróceniu całości, a potem na przesunięciu do nowego położenia. Rysunek 6.10 przedstawia wygląd grupy zaraz po utworzeniu i po dokonaniu transformacji. Zwracam uwagę na to, że rysowany za pomocą aplikacji układ współrzędnych odpowiada dokładnie nowemu układowi współrzędnych powiązanemu z obiektem po dokonaniu transformacji.
Rysunek 6.10. Emulacja obiektu w układzie współrzędnych, który zostaje poddany obrotowi i przesunięciu
Teraz chyba łatwiej przychodzi zrozumienie przesunięć poziomych elips „w górę” i „w dół” w przykładzie „Witaj, świecie!”. Przesunięcie elipsy w górę wymaga poruszenia jej wzdłuż osi X, a nie wzdłuż osi Y.
Style, jednostki i kolory Język SVG dopuszcza również posługiwanie się atrybutem style w sposób właściwy dla ustawień arkusza CSS. Zamiast określać w poprzednim przykładzie wartości atrybutów fill czy stroke-width, mogłam po prostu dodać je do atrybutu style:
Witaj, SVG!
|
263
Jeff Schiller zniechęca jednak w swoim poradniku wszystkich chętnych do używania tego atrybutu i nie można odmówić mu racji. Mechanika arkuszy CSS wywodzi się z idei oddzielenia formy prezentowania zawartości strony od jej części merytorycznej, co nie przywodzi na myśl zasad funkcjonowania SVG. Poza tym twórcy specyfikacji CSS nie zalecają stosowania atrybutu style wewnątrz poszczególnych znaczników kodu HTML, ponieważ jest to działanie pozbawione sensu — skoro decydujemy się w ogóle na stosowanie atrybutów CSS, oznacza to, że za wygląd strony odpowiadać będzie osobny arkusz stylów i to właśnie w nim będą dokonywane zmiany wpływające na wygląd strony. Wprowadzanie atrybutu style do poszczególnych znaczników kodu HTML sprawi, że ewentualną zmianę ustawień trzeba będzie powielać kilkakrotnie. Rozumowanie to odnosi się także do specyfiki kodu SVG. Definiowaniem wyglądu strony za pomocą arkusza CSS zajmę się w następnym rozdziale. Warto jednak pamiętać, że ustalenie wartości atrybutu style w pojedynczym znaczniku kodu pozwala zastąpić wartość przypisaną w arkuszu stylów. To, co odróżnia właściwość projektową SVG (jak określa się czasami atrybuty) od atrybutu style arkusza CSS, to konieczność definiowania jednostek w tym ostatnim, taka konieczność nie zachodzi w specyfikacji SVG. W przykładzie „Witaj, świecie!” niektóre atrybuty znaczników mają podane jednostki, inne zaś nie. Brak jednostek przy wymiarach oznacza, że będą one rysowane w tak zwanych jednostkach użytkownika, czyli równoważniku pikseli. Można oczywiście posłużyć się innymi jednostkami miary — na przykład em, pt, mm czy in — ale wtedy trzeba podać je jawnie. Inne przypadki, o ile pozostają w zgodzie ze specyfikacją właściwości projektowej SVG, nie wymagają podawania jednostek. To prowadzi mnie do ostatniego atrybutu, o którym chciałam napisać w tym rozdziale — do atrybutu color. Tak jak ma to miejsce w przypadku znaczników CSS, znacznikom SVG można przypisywać konkretne nazwy kolorów, ale można też podawać ich wartości w zapisie heksadecymalnym (#00ff00) czy w postaci wartości modelu RGB (rgb(0,0,0)). Wszystkie znaczniki, które w ogóle mogą przyjmować jakiś kolor, poprawnie zinterpretują dowolny z tych zapisów. Poniższe wiersze tworzą identyczny czerwony prostokąt obramowany czarnym konturem:
W przykładzie „Witaj, świecie!” pojawiły się jeszcze inne elementy graficzne, choćby umieszczony w kodzie plik graficzny czy odpowiednio sformatowany tekst, ale o nich napiszę w rozdziale 7. W całości zostanie on poświęcony bardziej szczegółowemu poznaniu specyfikacji SVG. Mam nadzieję, że ten krótki wstęp rozbudzi apetyty Czytelników i zachęci ich do dalszej lektury.
264 |
Rozdział 6. Wektorowo — początki i języki znaczników
ROZDZIAŁ 7.
Obóz szkoleniowy neofitów SVG
Skalowalną grafikę wektorową (ang. Scalable Vector Graphics — SVG) darzę szczególnym sentymentem. Otrzymywanie przepięknych grafik z małych plików XML daje mi wyjątkową satysfakcję. Co więcej taki plik bez trudu generuje się po stronie serwera i równie łatwo modyfikuje po stronie klienta. Grafice w sieci nadal brakuje narzędzi, które pozwoliłyby osadzać ilustracje bezpośrednio na stronie, usuwając w ten sposób potrzebę tworzenia odsyłaczy do oddzielnych plików, oraz takich, które pozwalałyby na wprowadzanie zmian w osadzonej na stronie grafice już po załadowaniu strony. Nie dysponując takimi narzędziami, ludzie skazani są na używanie rozwiązań zewnętrznych, na przykład aplikacji Flash czy apletów Java. Technologia SVG kazała czekać na siebie wyjątkowo długo. Prace nad nią rozpoczęto jeszcze w ubiegłym wieku, ale producenci wiodących na rynku przeglądarek internetowych dopiero od kliku lat umieszczają w kodach swoich produktów pewne elementy technologii SVG. Dotychczas użytkownicy internetu byli uzależnieni od różnych pluginów (wtyczek) instalowanych w przeglądarkach, a osoby korzystające z przeglądarki Microsoft Explorer są nadal na nie skazani. Świat odnotował jednak pewien postęp, gdyż twórcy pozostałych popularnych przeglądarek — Firefoxa, Opery i Safari — są mocno zaangażowani w projekt SVG i rozpoczęli już działania mające udowodnić ich oddanie temu projektowi. Ideę skalowalnej grafiki wektorowej przedstawiłam już w poprzednim rozdziale, prezentując w nim niezależną stronę WWW z napisem „Witaj świecie!”. W tym rozdziale zagłębię się w szczegóły zagadnień omawianych w rozdziale wcześniejszym, zaś w dalszej części książki przedstawię metody tworzenia dynamicznych aplikacji, posługujących się technologią SVG. Rozdział ten zawiera ogólnie rozumiane wstępne informacje dotyczące skalowalnej grafiki wektorowej, włącznie z podaniem kilku edytorów pozwalających tworzyć pliki SVG. Ponieważ książka obejmuje sobą szeroki zakres materiału, nie mogę pozwolić sobie na szczegółowe opisywanie technologii SVG. Zainteresowani tym tematem powinni poszukać bardziej wyczerpujących informacji, na przykład w doskonałej książce J. Eisenberga SVG Essentials (O’Reilly) lub w SVG Programming: The Graphical Web Kurta Cagle’a (Apress).
265
Różne specyfikacje SVG ― Full, Basic i Tiny Standard SVG powstał w oparciu o specyfikację standardu XML. Oznacza to, że przede wszystkim każda aplikacja SVG musi spełniać wymogi XML. Zgodność z XML oznacza także, że aplikacja SVG może korzystać ze wszystkich narzędzi XML dostępnych na serwerze i w przeglądarce internetowej. Informacja ta jest o tyle ważna, że istnieje naprawdę szeroki wachlarz narzędzi obsługujących format XML, więc nie ma potrzeby ponownie tworzyć parserów czy innych aplikacji, które miałyby współpracować z kolejnym formatem. Standard SVG został stworzony przez organizację W3C i jest przez nią ciągle rozwijany. Najnowsza z zalecanych wersji specyfikacji SVG została oznaczona numerem 1.1, ale jest już kandydat do wersji 1.2, specyfikacja występująca obecnie pod nazwą SVG Tiny. SVG Tiny to podzbiór pełnej specyfikacji SVG stworzony specjalnie z myślą o przenośnych urządzeniach najnowszej generacji, charakteryzujących się ograniczonymi zasobami pamięci. Pojawienie się specyfikacji SVG 1.0 wywołało obawy, że standard ten jest nadmiernie „rozrośnięty”, przez co może mieć problemy ze spełnieniem oczekiwań szerszej rzeszy użytkowników. Wraz z udostępnieniem specyfikacji w wersji 1.1, organizacja W3C przekazała użytkownikom zupełnie nową definicję typu dokumentu (ang. Document Type Definition ― DTD) dla standardu SVG. Definicja typu dokumentu obejmowała pełną specyfikację, specyfikację podstawową (Basic), przeznaczoną dla urządzeń przenośnych wyższej klasy oraz specyfikację SVG Tiny stworzoną z myślą o urządzeniach przenośnych z ograniczonymi zasobami pamięciowymi, na przykład o telefonach komórkowych (specyfikacje Basic i Tiny pojawiły się pierwotnie pod wspólną nazwą SVG Mobile 1.1). Wraz z rozpoczęciem prac nad specyfikacją SVG 1.2 stworzono oddzielną specyfikację dla standardu SVG Tiny, która następnie stała się podstawą prac nad specyfikacją 1.2. W ten sposób model ograniczony, jakim jest SVG Tiny przekształci się w pełni wartościowy produkt, zamiast cofać się w kierunku większych ograniczeń, jak miało to miejsce w przypadku specyfikacji 1.1. W tym rozdziale oraz w pozostałych częściach książki zakładam, że wykorzystywany przeze mnie kod SVG ma spełniać standardy opisane w pełnej specyfikacji 1.1. Więcej informacji na temat specyfikacji standardu SVG oraz nowinek z nim związanych można znaleźć na stronie internetowej organizacji W3C poświęconej standardowi SVG: http://www.w3c.org/Graphics/SVG/.
Obsługa standardu w przeglądarkach ― nieprzystępność czy integracja? Nie wszystkie przeglądarki internetowe obsługują standard SVG w jednakowym stopniu; Internet Explorer, na przykład, w ogóle nie posiada zaimplementowanej obsługi SVG. Większość z pozostałych popularnych przeglądarek radzi sobie z wyświetlaniem niezależnych plików SVG, ale wyświetlanie grafiki SVG, która została umieszczona w kodzie strony w każdej z nich wygląda inaczej. Przykład „Witaj świecie” z rozdziału 6. to niezależny dokument SVG, czyli plik o rozszerzeniu .svg zapisany w typie image\svg+xml standardu MIME. Takie samodzielne pliki SVG mogą być odczytywane bezpośrednio lub udostępniane na stronie WWW w znacznikach embed lub 266
|
Rozdział 7. Obóz szkoleniowy neofitów SVG
object, ewentualnie w znaczniku iframe. Znacznik embed jest obecnie uznawany za przestarzały a znacznik iframe nie jest zgodny z XHTML Strict, choć przechodzi poprawnie ocenę zgodności ze standardem XHTML Transitional. Jedynie znacznik object spełnia wymogi stan-
dardu XHTML 1.0 Strict. Znacznik ten jest poprawnie rozpoznawany przez przeglądarki Firefox 2.x oraz 3, Safari 3.x oraz Operę 9.x, dlatego też właśnie z jego pomocą będę umieszczać na stronach internetowych autonomiczne pliki SVG.
Umieszczanie grafiki SVG na stronie WWW za pomocą znacznika object Gdy dysponuje się już właściwym i działającym plikiem SVG (poprawność działania sprawdza się najlepiej otwierając ten plik bezpośrednio w przeglądarce, o której wiadomo, że obsługuje grafiki SVG), można zająć się umieszczeniem go w docelowej stronie internetowej. Na początek proponuję przyjrzeć się listingowi 7.1, który przedstawia sposób umieszczania grafiki SVG na stronie WWW w znaczniku object. Znacznik ten został zmodyfikowany ustaleniem atrybutu style, który odpowiada za ustalenie wysokości i szerokości powierzchni wyświetlania oraz definiuje jej krawędź. Zewnętrzny plik SVG to znany już z rozdziału 6. drugi z przykładów „Witaj świecie”. Listing 7.1. Umieszczanie zewnętrznego pliku SVG na stronie WWW za pomocą znacznika object Osadzanie plików SVG na stronach WWW
Rysunek 7.1 przedstawia efekt działania kodu tej strony w przeglądarce Safari 3.1 uruchomionej pod systemem Windows. Różni się on nieco od przykładów demonstrowanych w poprzednim rozdziale. Bez zmian pozostały jedynie ramki otaczające rysunek. Opisywany tu przykład może być potraktowany jako HTML lub XHTML w zależności od rozszerzenia, z jakim zostanie zapisany plik oraz definicji typu dokumentu DOCTYPE. Osadzanie obiektów SVG na stronie WWW za pomocą znacznika object wiąże się z pewnymi ograniczeniami. Po pierwsze, jeśli plik SVG nie ma zdefiniowanego koloru tła, co ma na przykład miejsce, gdy twórca pliku chce osiągnąć efekt przezroczystości tła, wykorzystywana przeze mnie wersja przeglądarki Safari automatycznie ustawi kolor tła na biały. Jeśli plik SVG miał stanowić wierzchnią warstwę nakładaną na tło całej strony WWW, może to być źródłem pewnych problemów.
Obsługa standardu w przeglądarkach ― nieprzystępność czy integracja?
|
267
Rysunek 7.1. Plik SVG osadzony w kodzie dokumentu XHTML
Co więcej, rozmiar kontenera przechowującego grafikę SVG może wpływać na rozmiar wyświetlanej grafiki. Oba te czynniki zachowują się różnie w zależności od wykorzystywanej przeglądarki i tego, jak w pliku SVG zdefiniuje się graficzne okno robocze. W jednym z dalszych rozdziałów przedstawię przykład animowanego zegarka analogowego stworzonego w pliku SVG, który to plik po bezpośrednim otwarciu w przeglądarce wypełnia sobą całe jej okno, ale umieszczony w kodzie w znaczniku object pozwala się bardzo elegancko skalować. Umieszczanie plików SVG w kodzie strony HTML musi odbywać się za pomocą znacznika object (lub przestarzałego znacznika embed czy też nie spełniającego specyfikacji iframe), przy czym bynajmniej nie jest to rozwiązanie idealne. W końcu, jaki sens ma umieszczanie na stronie WWW grafiki wektorowej działającej zgodnie ze standardem XML, jeśli nie można wprowadzić jej kodu bezpośrednio do kodu strony dokumentu XHTML i uwzględniać go zarówno w przepływie układu strony, jak i manipulować nim za pomocą skryptu?
Osadzony kod SVG (Inline SVG) Aby móc umieścić dokument SVG bezpośrednio w kodzie strony WWW, strona ta musi być zdefiniowana jako dokument XHTML i spełniać specyfikację właściwą dla takich dokumentów. To właśnie możliwość wykorzystywania SVG na stronach internetowych skłoniła mnie do przekształcenia wszystkich moich prac do wersji zgodnej z XHTML 1.1 Strict, choć nie obyło się przy tym bez problemów. Szczęśliwie wszystkie najważniejsze przeglądarki radzą sobie z wyświetlaniem osadzonego kodu SVG, więc moje starania nie poszły na marne.
268 |
Rozdział 7. Obóz szkoleniowy neofitów SVG
Z poprawnym wyświetlaniem osadzonego kodu SVG radzą sobie wszystkie przeglądarki z wyjątkiem Internet Explorera, która to przeglądarka nie potrafi jeszcze obsługiwać typu MIME application/xhtml+xml dokumentu XHTML, więc czegóż wymagać od niej w sprawie SVG?
Obsługa dokumentów XHTML w przeglądarkach wygląda mniej więcej tak samo, jak odczytywanie przez nie dokumentów SVG ― nie wszystkie przeglądarki dają sobie z tym radę. Jednym z dziwactw przeglądarek jest to, że o ile poprawnie rozpoznają one dokumenty XHTML zapisane z rozszerzeniem .html, to niektóre nie będą potrafiły przetworzyć kodu SVG XML, jeśli będą uważały, że pracują z dokumentem HTML. Jednakże jeśli zdecydować się na zapisanie pliku z rozszerzeniem .xhtml lub też ― w przypadku dynamicznie generowanych danych wyjściowych ― skorzystać z typu zawartości XHTML, ryzykuje się, że niektóre przeglądarki potraktują kod XML jako XML właśnie, a nie jako znaczniki HTML sformatowane w postaci XML. Twórca stron internetowych staje zatem przed zadaniem ― jak stworzyć dokument XHTML, który będzie widziany jako HTML przez te przeglądarki, które nie obsługują XHTML, ale w tych, które potrafią to robić, będzie widziany jako dokument zgodny ze składnią XML. Rozwiązanie tej zagadki jest proste. Należy spytać przeglądarkę, co potrafi zrobić. Przeglądarka i serwer, porozumiewając się ze sobą, mogą dowiedzieć się od siebie naprawdę wielu rzeczy. Przykładowo serwer może dowiedzieć się od przeglądarki czy innej aplikacji po stronie klienta, czy ta przyjmuje konkretny typ zawartości. Informację tę uzyskuje się wysyłając z serwera zapytanie HTTP_ACCEPT. Typ zawartości dokumentu HTML to html/text, natomiast w dokumencie XHTML będzie on miał wartość application/xhtml+xml. Jeśli okaże się, że przeglądarka nie potrafi obsługiwać typu zawartości dokumentów XHTML, typ zawartości strony zostanie potraktowany jako html/text. W przeciwnym razie zostanie odczytana jako dokument XHTML. Niektóre z aplikacji działających w sieci WWW posługują się odpowiednimi wtyczkami, które sprawdzają, czy przeglądarka potrafi obsługiwać dokumenty XHTML i zwracają odpowiednią wartość typu zawartości. Jeden z moich blogów posługuje się taką właśnie wtyczką. Drugie wyjście to wprowadzenie zmian w pliku .htaccess, oczywiście przy założeniu, że firma zajmująca się hostowaniem strony pozwala na wykorzystywanie plików tego typu, a większość pozwala. Plik .htaccess pozwala określić, w jaki sposób serwer Apache będzie obsługiwać strony znajdujące się w danym katalogu lub podkatalogu, nie wpływając jednocześnie na obsługę plików umieszczonych w innych katalogach serwera. W ten sposób ludzie korzystający ze wspólnych usług hostingowych (czyli większość z nas) zyskują choć szczątkową kontrolę nad prowadzonymi przez siebie witrynami. W pliku .htaccess mogą znaleźć się dyrektywy RewriteRule oraz różnorodne warunki określające sposób wyświetlania strony, a serwer postąpi zgodnie z zawartymi w nim informacjami, by przetworzyć ją zgodnie z naszymi wymaganiami. Więcej informacji na temat osadzonego kodu SVG, standardu XHTML oraz takiego pisania strony, by obsługiwałą obie te technologie znajduje się pod adresem http://wiki. ´svg.org/Inline_SVG#XHTML_.28XML._29_vs_HTML SGV Wiki.
Dane wejściowe i wyjściowe plików .htaccess a także pojawiające się w nich reguły i warunki zdecydowanie nie zaliczają się do tematu, jakiemu poświęcona jest ta książka. W sieci można znaleźć niezliczone kursy, wystarczy jedynie wpisać w przeglądarce wyrażenie „htaccess kurs”. Teraz jednak wystarczy wiedzieć, że plik taki istnieje i aby zapewnić sobie funkcjonowanie kod
Obsługa standardu w przeglądarkach ― nieprzystępność czy integracja?
|
269
SVG zgodne z naszymi oczekiwaniami, należy umieścić w kodzie strony XHTML następujący skrypt. AddType text/html .xhtml RewriteEngine on RewriteBase / RewriteCond %{HTTP_ACCEPT} application/xhtml\+xml RewriteCond %{HTTP_ACCEPT} !application/xhtml\+xml\s*;\s*q=0 RewriteCond %{REQUEST_URI} \.xhtml$ RewriteCond %{THE_REQUEST} HTTP/1\.1 RewriteRule .* - [T=application/xhtml+xml]
Podstawowym zadaniem tego wpisu w pliku .htaccess jest dodanie typu MIME (zawartości) dokumentu XHTML dla rozszerzenia, jeśli takie w ogóle się pojawia (aplikacje dynamiczne nie zawsze posiadają rozszerzenie pliku). Następnie skrypt ten korzysta z żądania HTTP_ACCEPT, aby sprawdzić, czy aplikacja starająca się uzyskać dostęp do danych źródłowych potrafi obsługiwać dokumenty stworzone w standardzie XHTML. Jeśli tego nie potrafi, strona internetowa zostaje zwrócona w standardzie HTML. W przeciwnym razie zostanie ona potraktowana jako dokument XHTML. Jeżeli strona nie pojawi się w formacie XHTML, osadzony w jej kodzie kod SVG nie zadziała, ale przynajmniej wyświetli się pozostała jej zawartość. W rozdziale 6. pojawiło się stwierdzenie, że definicja typu dokumentu DOCTYPE nie jest niezbędna ani w plikach XHTML, ani w plikach SVG. Ta sama reguła pozostaje prawdą dla osadzonego kodu SVG, chyba że autorowi zależy na uzyskaniu certyfikatu zgodności ze specyfikacją standardu. Ponieważ staram się o uzyskanie takiego certyfikatu dla każdej mojej strony, umieszczam w kodzie specjalną definicję DOCTYPE, która pozwala na używanie zarówno SVG, jak i MathML.
Należy zdefiniować przestrzenie nazw zarówno dla składni XHTML, jak i dla składni SVG oraz dla każdego innego języka, jaki pojawi się w kodzie strony. Każda deklaracja przestrzeni nazw może pojawiać się we własnym znaczniku otwierającym — dla dokumentu XHTML będzie to znacznik html, dla kodu SVG będzie to znacznik svg. Jeżeli w kodzie strony pojawia się więcej niż jeden znacznik svg, warto rozważyć wprowadzenie przestrzeni nazw SVG do otwierającego znacznika html, tuż obok deklaracji przestrzeni nazw XHTML i deklaracji innych wykorzystywanych składni. Poniższe linijki pochodzą z nagłówków dokumentów moich stron WWW:
Tworzone przeze mnie dokumenty to pliki XHTML z osadzonym kodem SVG, co wyjaśnia, dlaczego zachowałam domyślną przestrzeń nazw dokumentów XHTML i przypisałam znacznik svg przestrzeni nazw SVG. Wprowadzanie bloku instrukcji SVG do dokumentu XHTML nie różni się znacznie od tworzenia takiego bloku w niezależnym dokumencie. Znacznik svg określa granice kanwy SVG, czyli powierzchni rysowania, więc wszystkie znaczniki SVG, które znajdą się wewnątrz granic znaczników będą musiały spełnić warunki określone atrybutami znacznika otwierającego.
270
|
Rozdział 7. Obóz szkoleniowy neofitów SVG
Listing 7.2 przedstawia kod strony sformatowanej zgodnie ze specyfikacją XHTML 1.1 zawierający dwa znaczniki svg, które pełnią rolę „obramowania” wyświetlanego tekstu. Kolor wypełnienia przestrzeni SVG odpowiada domyślnemu kolorowi tła znacznika div ― jest to kolor biały. Trzy podstawowe znaczniki kodu strony ― obramowania svg i znacznik div zawierający blok tekstu ― zostały otoczone czarnym obramowaniem o szerokości 1 piksela. Listing 7.2. Kod SVG osadzony „bezpośrednio” w dokumencie XHTML Osadzony kod SVG
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur tincidunt tempus quam. Maecenas iaculis arcu eget lorem. Suspendisse fermentum tortor sed odio. Mauris ut augue. Vestibulum ut metus. Proin ac diam ac justo tincidunt fermentum. Sed dictum ultricies odio. Proin viverra vehicula ligula. Aliquam erat volutpat. Etiam consectetuer pede eget tortor. Mauris id mi. Mauris dignissim pharetra massa. Donec sed erat sed tellus mollis tempor. Nunc sodales porta magna. Donec commodo velit ac mi. Praesent ultricies, libero a sagittis scelerisque, libero magna vulputate justo, et lacinia nulla ligula egestas metus. Pellentesque ligula. Vivamus rhoncus congue tortor. Praesent rutrum dignissim augue.
Obsługa standardu w przeglądarkach ― nieprzystępność czy integracja?
|
271
Rysunek 7.2 przedstawia wygląd opisanej tu strony wyświetlonej w przeglądarce Opera.
Rysunek 7.2. Dwa znaczniki SVG osadzone w dokumencie XHTML
W powyższym przykładzie warto zwrócić szczególną uwagę na wykorzystanie właściwości display:block selektora svg w kodzie CSS. Gdyby właściwości znacznika svg nie przypisać wartości wyświetlania blokowego, przeglądarka wyświetliłaby elementy SVG w linii. Ponieważ ten fragment strony jest wystarczająco szeroki, by pozwolić się „zawinąć”, rozsądnym wydaje się traktowanie go jako bloku. Takie rozwiązanie sprawia jednocześnie, że za obszarem SVG pojawia się dodatkowa pusta przestrzeń. Przestrzeń ta jest obszarem „wydłużenia dolnego” ― powierzchnią zarezerwowaną dla tego fragmentu tekstu, który wykracza poza linię pisma (na przykład „ogonek” litery g). Dzięki istnieniu tego obszaru fragmenty strony znajdujące się w znacznikach svg i div (oraz wszystkich tych, które pojawiłyby się po drugim znaczniku svg) nie będą ściśle do siebie przylegać. Znacznik wyświetlany w formie bloku jest traktowany podobnie jak znacznik div, przez co programista zyskuje lepszą kontrolę nad rozmieszczeniem poszczególnych elementów na stronie internetowej. Warto też zauważyć, że obramowanie znacznika div jest wliczane w szerokość pola nim ograniczanego, natomiast obramowanie znacznika svg pojawia się poza obszarem nim określanym. Dlatego też szerokość znacznika div zdefiniowałam jako 498 pikseli a szerokość każdego ze znaczników svg to pełne 500 pikseli.
272
|
Rozdział 7. Obóz szkoleniowy neofitów SVG
Dokładniej rzecz biorąc, szerokość obramowania znajduje się w połowie w obszarze definiowanym znacznikiem svg, a w połowie poza nim. Środek obramowania przypada dokładnie na granicy obszaru znacznika. W przypadku gdy obramowanie ma szerokość 1 piksela, minimalną możliwą wartość, nie można go podzielić, więc zostaje „wypchnięte” poza obszar objęty znacznikiem. Jeśli jednak szerokość będzie większa, część powierzchni zawartej w znaczniku zostanie wchłonięta, choć w mniejszym stopniu niż miałoby to miejsce w przypadku skorzystania ze znacznika kodu XHTML.
Poza tym, że listing 7.2 uczy, jak osadzać kod SVG bezpośrednio w dokumencie, jednocześnie pokazuje inną twarz grafiki SVG ― nie tylko taniej i dynamicznej alternatywy dla grafiki rastrowej, ale przede wszystkim grafiki, która staje się integralną częścią projektu strony internetowej. Wydaje mi się, że zbyt często pomija się tę stronę technologii SVG, więc w dalszej części tego rozdziału oraz w rozdziałach następnych postaram się podać przykłady jej wykorzystania.
Struktura przestrzeni SVG Choć kod z listingu 7.2 traktuje znacznik svg niczym znacznik div, technologia SVG posiada własną, w pełni kompletną specyfikację, a co za tym idzie, znacznik svg daje programiście znacznie bogatsze możliwości, niż wynikałoby to podanego wyżej przykładu. Przede wszystkim technologia SVG daje użytkownikowi możliwość ustalenia współrzędnych rysowanego obiektu. W oczy rzuca się głównie brak jawnie określonych jednostek, na przykład px, przy definiowaniu wysokości i szerokości obszaru obejmowanego znacznikiem svg. W przypadku podania samej wartości liczbowej, bez konkretnego wymiaru, specyfikacja SVG nakazuje posłużenie się domyślnymi jednostkami aplikacji klienta, czyli w przypadku przeglądarek internetowych, pikselami. Zdefiniowanie szerokości prostokąta rysowanego w SVG jako 500 jest równoznaczne z zastosowaniem zapisu 500px. Można oczywiście podać jednostki jawnie, ale nie jest to wymagane, co więcej ― opuszczenie jednostek nie jest oznaką złego stylu programistycznego i nie spowoduje utraty twarzy. Definiując znaczniki SVG, określa się jego wysokość i szerokość. Wartości te wyznaczają granice okna roboczego, czyli tego obszaru dokumentu SVG, który faktycznie pojawi się na monitorze osoby oglądającej daną stronę WWW. Wymiary okna roboczego można zdefiniować także podając je w wartościach procentowych, na przykład „100%”, jeśli grafika SVG ma zajmować całość określonego obszaru. Należy jednak pamiętać, że procentowe określanie wymiarów grafiki SVG może mieć wpływ na sposób jej wyświetlania w niektórych przeglądarkach. Przykładowo, w chwili pisania tej książki, przeglądarka Safari 3 nie wyświetlała gradientu barw, jeśli szerokość obiektu została wyznaczona procentowo. Specyfikacja SVG zakłada, że domyślne położenie okna roboczego określone jest zerową (0) wartością współrzędnej x oraz zerową (0) wartością współrzędnej y. Zwiększanie wartości x spowoduje przesunięcie obiektu w poziomie w prawo, natomiast zwiększanie wartości y skutkuje przesunięciem obiektu w pionie z góry na dół. Na rysunku 7.3 widoczne są trzy prostokąty. Wszystkie są tego samego rozmiaru, ale każdy z nich był rysowany z innego punktu początkowego. Pierwszy z prostokątów jest rysowany linią ciągłą i rozpoczyna się w punkcie (10,10). Drugi z nich, rysowany linią przerywaną, zaczyna się w punkcie (110, 110), natomiast trzeci, którego kontur wyznaczają kropki, bierze swój początek z punktu (210, 210).
W dalszej części rozdziału pokażę, jak zmieniać wartości współrzędnych w sposób opisany w przykładzie „Witaj świecie” z rozdziału 6. Układ współrzędnych daje nam do dyspozycji także atrybut viewBox oraz możliwość zachowywania proporcji obrazu zawartości obszaru SVG. O atrybucie viewBox napiszę w dalszej części tego rozdziału, w podrozdziale „Transformacje”.
Elementy technologii SVG Potęga SVG polega na jej prostocie. W dużej mierze opiera się także na fakcie, że można dzięki niej wykonywać duże rysunki, których wyświetlanie nie wymaga bardzo szybkiego łącza internetowego a efekt pracy pozwala się skalować od rozmiarów bardzo małych do niezmiernie wielkich bez utraty jakości. To właśnie ta ostatnia cecha sprawia, że grafika wektorowa, czyli między innymi SVG, ma ogromną przewagę nad grafiką rastrową, na przykład opisywanymi wcześniej obrazami JPEG. Skupię się przede wszystkim na tych fragmentach technologii SVG, które są obecnie obsługiwane przez przeglądarki z rodziny Mozilli, czyli na większości elementów zaliczanych do specyfikacji SVG 1.1. To w zupełności wystarczy, by rozpocząć naukę tego wspaniałego narzędzia. Obiekty SVG zaliczają się do kilku różnych kategorii: • zwykłe atrybuty, właściwe więcej niż jednemu obiektowi SVG, • obiekty wizualne, w tym kształty takie jak prostokąty, okręgi, dowolne obrazy, ścieżki
oraz tekst,
274
|
Rozdział 7. Obóz szkoleniowy neofitów SVG
• konstrukcje przetwarzania danych, na przykład możliwość łączenia obiektów w grupy czy
wykorzystywanie skryptów do dynamicznego zmieniania grafiki lub wykonywanie testów warunkowych, • elementy informacyjne, na przykład tytuły i metadane, • atrybuty widoczne, na przykład wypełnienia, gradienty lub filtry, • animacje SVG, nie zaimplementowane w starszych wersjach przeglądarki Firefox, ale czę-
ściowo działające już w najnowszej wersji, trzeciej, oraz częściowo działające w przeglądarkach Safari i Opera (przykłady znajdują się w rozdziale 8.). Powyższa lista nie odzwierciedla bynajmniej oficjalnego podziału, jest po prostu próbą usystematyzowania wszystkich składników, które tworzą technologię SVG i tak samo dobrym sposobem przedstawienia jej zalet, jak wszystkie inne. Wiele z podanych dalej przykładów to niezależne aplikacje SVG, co oznacza, że da się je uruchomić wewnątrz znacznika object lub embed w kodzie HTML. Wśród przykładów znajdzie się także kilka zastosowań osadzonego kodu SVG tam, gdzie takie wykorzystanie jest uzasadnione sposobem stosowania tej technologii.
Prostokąty, rysowanie, atrybuty Większość znaczników SVG dzieli wspólne atrybuty należące do jednej z głównych kategorii zdefiniowanych przez organizację W3C. Zamiast omawiać teoretycznie wszystkie atrybuty, postanowiłam zademonstrować ich działanie posługując się w tym celu jedną z najczęściej wykorzystywanych figur ― prostokątem. Prostokąty tworzy się w SVG za pomocą znacznika rect. Znacznik ten posiada zarówno atrybut width, wyznaczający szerokość figury, jak i atrybut height, określający jej wysokość. Przypisanie któremukolwiek z nich wartości zerowej (0) uniemożliwi narysowanie prostokąta. Prostokąt zajmuje określone miejsce w oknie roboczym. Atrybut x określa położenie jego lewego boku, a atrybut y określa położenie boku górnego. Poniższy kod rysuje kwadrat o boku 100 pikseli, którego górna krawędź znajduje się 10 pikseli poniżej górnej granicy obszaru rysowania a lewa krawędź jest odległa o 10 pikseli od lewej granicy obszaru rysowania.
Prostokąty mogą też mieć zaokrąglone rogi. Zaokrąglenie uzyskuje się stosując kształt eliptyczny, którego poziomy promień opisuje atrybut rx, a promień pionowy opisany jest atrybutem ry. Każdemu z tych atrybutów można przypisać inną wartość, ale efekt może okazać się co najmniej zabawny. Przykład prostokątów z zaokrąglonymi rogami jest widoczny na rysunku 7.4. Jest to efekt działania poniższych dwóch linijek kodu.
Zdefiniowanie identycznych promieni elipsy sprawia, że zaokrąglone rogi są gładkie, natomiast podanie dwóch różnych wartości atrybutów daje w efekcie rogi ostro zakończone. Przypomnę jeszcze raz atrybuty obiektu prostokąt.
Elementy technologii SVG
|
275
Rysunek 7.4. Dwa prostokąty, których zaokrąglone rogi mają różne i równe promienie krzywizny elipsy x
Położenie lewej krawędzi prostokąta w poziomie.
y
Położenie górnej krawędzi prostokąta w pionie. width
Szerokość obiektu. height
Wysokość obiektu. rx
Poziomy promień elipsy, którą zaokrągla się rogi prostokąta (jeśli zachodzi taka potrzeba). ry
Pionowy promień elipsy zaokrąglającej rogi. Widoczne na rysunku 7.4 figury są czarne, gdyż właśnie tym kolorem są domyślnie wypełniane wszystkie kształty mające atrybut wypełnienia. Kolory obramowania i wypełnienia należą do rodziny atrybutów rysowania. Do tej samej grupy zalicza się między innymi atrybuty fill, stroke oraz stroke-width. Większość implementacji technologii SVG obsługuje wszystkie atrybuty rysowania, czego nie da się już powiedzieć o atrybutach należących do innych grup, które opiszę w dalszej części rozdziału. Atrybuty rysowania fill i stroke przypominają bardzo analogiczne narzędzia z edytorów graficznych i rysowniczych — nazywane wypełnieniem i pędzlem — o których wspominałam w poprzednich rozdziałach. Atrybut fill służy do wypełniania wnętrza zamkniętego, określonego parametrami wymiarów obiektu, kształtu jednolitym kolorem. Atrybut stroke pozwala narysować kontur obiektu. Jeśli programista ustali szerokość konturu na więcej niż 1 piksel (minimalny wymiar na stronie WWW), krawędź obramowania przykryje częściowo obszar wypełnienia. Rzeczywisty rozmiar obiektu wypełnianego kolorem za pomocą atrybutu fill nie ulega zmianie, jednak rozmiar widziany na ekranie monitora zależy od szerokości konturu. Obramowanie zawsze umieszczane jest tak, by przykrywało sobą częściowo obszar obiektu, a częściowo wystawało poza niego. Parametry „pędzla” można zmieniać tak, by kontur został zaznaczony konkretnym wzorem lub by zmienił się on na łączeniach, jak miało to miejsce w opisywanym wcześniej przykładzie prostokątów z zaokrąglonymi rogami. Ponadto można też zmieniać stopień przezroczystości wypełnienia oraz konturu. Wszystkie atrybuty rysowania można definiować jako atrybuty znaczników albo jako ustawienia wewnątrz atrybutu style, jak ma to miejsce w kodzie CSS. Kolory w kodzie SVG zapisuje się albo w postaci wartości RGB, albo w postaci heksadecymalnej, albo jako jedną z dopuszczalnych nazw kolorów opisanych w tej samej specyfikacji, która obowiązuje dla CSS2. 276
|
Rozdział 7. Obóz szkoleniowy neofitów SVG
Organizacja W3C stworzyła listę nazw kolorów oraz odpowiadających im wartości RGB. Lista ta jest dostępna na stronie http://www.w3.org/TR/SVG11/types.html#ColorKeywords.
Najlepszym sposobem zapoznania się z działaniem atrybutów rysowania jest obejrzenie próbnika przedstawiającego różne kolory i rodzaje pędzli. Kod listingu 7.3 rysuje układ kilku prostokątów w różnych barwach obramowanych konturami o różnorodnych wzorach. Efekty obramowania uzyskuje się definiując wartości atrybutów stroke oraz stroke-width. Nie chciałam komplikować nadmiernie przykładowego kodu, dlatego też stworzyłam ogólną definicję prostokąta, zawierającą wszystkie nie mające znaczenia dla przykładu wartości parametrów. Tak przygotowana figura będzie pojawiać się wielokrotnie w całym przykładzie. Listing 7.3. Próbnik kolorów i pędzli SVG
W podanym przykładzie poza definicją prostokąta pojawiają się także bloki komentarzy XML ujęte w znacznikach oraz znacznik title — element bardzo zbliżony do takiegoż znacznika z języka HTML. W dokumencie SVG (lub w bloku kodu, jeśli jest on osadzony w stronie XHTML) może znaleźć się tylko jeden znacznik tytułu. Efekt działania kodu przedstawionego na listingu 7.3 w przeglądarce Fireox można zobaczyć na rysunku 7.5. Litery dodałam już później, tworząc zrzut z ekranu, aby ułatwić Czytelnikowi rozróżnienie poszczególnych fragmentów przykładu, gdyż będę je szczegółowo opisywać. Zaczynając od lewego górnego rogu: • prostokąt A wypełniony jest kolorem czerwonym (red), a jego obramowanie zostało nama-
lowane niebieskim (blue) pędzlem o szerokości 3 pikseli,
Elementy technologii SVG
|
277
• prostokąt B wypełniono kolorem żółtym, podając jego składowe RGB — 255,255,0. Figura
otoczona jest ciemnozieloną linią (kolor również zapisano w formacie RGB) o szerokości 6 pikseli, • prostokąt C jest koloru fioletowego (kolor zapisano w formacie heksadecymalnym), a jego
obramowanie jest ciemnoczerwone, szerokie na 8 pikseli, • prostokąt D wypełniono barwą o nazwie darkturqoise, po czym obramowano pędzlem
w kolorze firebrick. Pędzel został jednocześnie zmodyfikowany za pomocą atrybutu stroke-dasharray, który pozwala użyć wzoru pędzla zbudowanego z umieszczonych naprzemiennie segmentów kolorowych i bezbarwnych. W tym przypadku atrybutowi dasharray przypisano wartość 4,6,10, co skutkuje otrzymaniem wzoru złożonego z 4 kolorowych pikseli, 6 pikseli bezbarwnych i 10 pikseli kolorowych. Kombinacja ta następnie powtarza się, z tym że w drugim przebiegu 4 piksele są bezbarwne, 6 pikseli przyjmuje zdefiniowany kolor a kolejne 10 pikseli jest znów przezroczystych, • prostokąt E został zabarwiony kolorem oldlace, a następnie obramowany kreską o barwie
teal. Szerokość pędzla ustawiono na 8 pikseli, zaś rogi prostokąta zaokrąglono posługując się atrybutem stroke-linejoin, • prostokąt F ma kolor khaki, jego obramowanie, którego szerokość wynosi 15 pikseli, jest
barwy indigo. Obramowanie dodatkowo ma ustawioną połowiczną przezroczystość, uzyskaną ustawieniem atrybutu stroke-opacity na 50%. Zwracam tu szczególną uwagę na fakt, że przykryty obramowaniem fragment wypełnienia prostokąta jest spod niego częściowo widoczny. Rysunek 7.6 pokazuje powiększenie tegoż prostokąta, w którym dodatkowo zaznaczono miejsce nakładania się pędzla na wypełnienie czarno obramowanym prostokątem, • prostokąt G został wypełniony kolorem o nazwie gold i obramowany pędzlem koloru
midnihgtblue szerokim na 15 pikseli. Atrybuty pędzla to stroke-dasharray z parametrami 2,2,5 oraz strike-linejoin pozwalający zaokrąglić rogi figury. Przezroczystość wypełnienia wynosi 50% (.5).
Nie pokazałam jedynie efektów działania atrybutu wypełnienia ustawionego na wartość none, równoznaczną z utworzeniem obiektu pozbawionego koloru wypełnienia. Tak zdefiniowany prostokąt będzie niewidoczny, dopóki nie określi się dla niego obramowania. Chciałabym teraz przez chwilę zająć się atrybutem stroke-dasharray. Przykłady widoczne na rysunku 7.5 przedstawiają nieregularne, powtarzające się wzory zbudowane z umieszczonych naprzemiennie pól kolorowych i bezbarwnych, których szerokości zmieniają się w każdym powtórzeniu wzoru. Istnieje jednak lepiej zdefiniowany obiekt języka SVG — line — który także pozwala tworzyć wzory pędzli.
Linie, wzory pędzli i opisy kodu Obiekt linii w technologii SVG to prawdopodobnie najprostszy z możliwych do utworzenia obiektów. Wystarczy podać współrzędne początku linii w postaci x,y oraz takież współrzędne jej końca i to już wszystko. Widoczny poniżej kod powoduje wyświetlenie ukośnej linii zaczynającej się w punkcie 10,20 a kończącej się w punkcie 100,150:
278
|
Rozdział 7. Obóz szkoleniowy neofitów SVG
Rysunek 7.5. Efekt działania kodu z listingu 7.3
Rysunek 7.6. Powiększenie prostokąta F ukazujące nakładanie się pędzla na obszar rysowania
Elementy technologii SVG
|
279
W rzeczywistości jednak tak podany kod SVG nie wywoła żadnego efekt na ekranie użytkownika, ponieważ nie zdefiniowano w nim pędzla linii, a zatem nie zostanie stworzony żaden widoczny element tego obiektu. Figury, na przykład prostokąty czy koła, mają zdefiniowaną domyślna wartość wypełnienia, natomiast żaden ze znaczników nie ma domyślnie zdefiniowanej wartości pędzla. Skoro zaś wygląd linii w całości zależy od ustawień pędzla, należy wprowadzić do jej definicji odpowiedni parametr:
W poprzednim podrozdziale pokazałam kilka wzorów pędzli. Większość z nich była zupełnie nieregularna, gdyż nawet nie starałam się zachować żadnych pozorów równomiernego powtarzania się jakiejś sekwencji. Bardziej regularne wzory otrzymuje się, gdy wartością atrybutu są dwie identyczne liczby. Oto kod tworzący tradycyjne kropkowane obramowanie:
Aby stworzyć za pomocą atrybutu stroke-dasharray bardziej regularny wzór obramowania, należy podać w nim parzystą liczbę składowych ścieżki, po czym powtórzyć ją. Używanie tego atrybutu przypomina nieco wspinanie się po górach — pierwsza wartość to podejście pod szczyt, natomiast druga, identyczna, to zejście. Listing 7.4 przedstawia kod SVG rysujący pięć linii, każdą czarnym pędzlem o szerokości 4 pikseli, by wzór linii był bardziej czytelny. Każdy ze wzorów — poczynając od linii ciągłej, a na powtarzającej się regularnie sekwencji kropek i kresek kończąc — jest niepowtarzalny. W przedstawianym tu przykładzie pojawia się jeszcze jeden znacznik, desc. Umieszcza się w nim słowny opis działania kodu SVG, aby aplikacje w stylu screen reader1 mogły je odczytać. Listing 7.4. Różne rodzaje pędzli
1
Aplikacje dla osób niewidomych i niedowidzących, odczytujące zawartość okna widocznego na ekranie, na przykład okna przeglądarki — przyp. tłum.
280 |
Rozdział 7. Obóz szkoleniowy neofitów SVG
Rysunek 7.7 przedstawia efekt wywołania tego kodu w przeglądarce Firefox. Ustalenie szerokości pędzla wpływa na wysokość wzoru, nie zmieniając jego kształtu. Zatem użycie szerokiego pędzla zaowocuje otrzymaniem „kosmatego” wzoru. Linie ciągłe zaznacza się zazwyczaj pędzlem szerszym.
Rysunek 7.7. Próbnik pędzli z listingi 7.4
Kolejnym wizualnym efektem, jaki można uzyskać pracując z obiektem line jest dodawanie strzałek na końcach linii. To jednak wiąże się zazwyczaj z wykorzystywaniem znacznika path, o którym napiszę w dalszej części tego rozdziału. Chciałabym wrócić na chwilę do rysunku 7.5, na którym umieściłam etykiety z literami pracując już w narzędziu do robienia zrzutów z ekranu. Należało w zasadzie wprowadzić tekst etykiet do kodu SVG. Takie postawienie sprawy nieuchronnie prowadzi do zagadnień związanych ze znacznikiem text, który opiszę szerzej już za chwilę.
Tekst Tworzenie napisów w SVG jest proste w obsłudze, a jednocześnie atrybuty znacznika text są na tyle rozbudowane, że zaspokoją potrzeby większości programistów. Znajdzie się wśród nich obsługa różnych języków, również tych, w których tekst zapisywany jest od strony prawej do lewej oraz tych, które mają inną orientację tekstu niż właściwą dla zbioru alfabetu łacińskiego. Książka ta skupia się wyłącznie na atrybutach tekstu właściwych dla podstawowego alfabetu łacińskiego i nie będzie zagłębiać się w takie aspekty atrybutów znacznika text jak tryb pisania.
Dla znacznika text, tak samo zresztą jak i dla pozostałych znaczników języka SVG, można zdefiniować odpowiednie atrybuty położenia czy barwy. Pożądane efekty wizualne uzyskuje się w sposób analogiczny do opisanego dla prostokątów czy linii, czyli za pomocą atrybutów fill i stroke. Standard SVG 1.1 ma niestety jedno ograniczenie, które czyni go uboższym Elementy technologii SVG
|
281
w stosunku do języka HTML — nie potrafi „zawijać” tekstu, co jest niezwykle irytujące. Na szczęście zawijanie tekstu ma wchodzić w skład specyfikacji SVG 1.2. Najprostszy przykład użycia znacznika text wymaga podania współrzędnych położenia. Pozostałym atrybutom przypisano wartości domyślne umożliwiające poprawne wyświetlanie tekstu. Poniższy kod tworzy napis zaczynający się w punkcie 50,50: Witaj świecie
Atrybuty położenia, x i y,wyznaczają lewy dolny kraniec linii pisma (w zależności od orientacji tekstu), czyli linii, do której wyrównywane są wszystkie litery. Podanie wartości tych atrybutów, a przynajmniej współrzędnej y, jest konieczne dlatego, że ich domyślnymi wartościami są współrzędne punktu 0,0, co oznacza, że linia pisma pokrywa się ze szczytem strony, przez co cały tekst wypada poza jej obszarem. Oczywiście nie należy zbytnio polegać na predefiniowanych wartościach domyślnych. Określenie współrzędnych początkowych linii pisma ustala położenie tekstu na stronie, ale sposób jego wyświetlania zależy od używanej przeglądarki. Rysunek 7.8 przedstawia ten sam tekst wyświetlany w przeglądarkach Firefox, Safari i Opera w systemie operacyjnym Windows. Jak widać, efekty działania kodu nie różnią się zbyt mocno.
Rysunek 7.8. Domyślna obsługa tekstu w przeglądarkach Firefox, Safai i Opera w systemie Windows
Atrybuty x i y mają jedną ciekawą właściwość. Oba mogą przyjmować wartości w postaci serii oddzielonych spacjami lub przecinkami liczb. Podanie takiej sekwencji powoduje, że każda z liczb zostaje przypisana odpowiadającej jej w kolejności literze, ustalając tym samym położenie litery na ekranie. Przypisanie atrybutowi x pojedynczej wartości informuje przeglądarkę, gdzie należy postawić pierwszy znak tekstu i że następne znaki będą od niego oddzielone domyślnie zdefiniowanymi odstępami. Brak tego parametru sprawi, że tekst zostanie wyświetlony z domyślną współrzędną poziomą równą zero (0). Podany poniżej fragment kodu przekształca pokazany wcześniej przykład w bardziej rozstrzelony tekst. Witaj świecie
Podanie alternatywy dla domyślnych odstępów między znakami to całkiem ciekawy pomysł. Niestety nie wszystkie przeglądarki potrafią właściwie interpretować ten zapis. Spośród testowanych przeze mnie aplikacji, poprawnie rozpoznała go jedynie Opera. Wynik tego eksperymentu można zobaczyć na rysunku 7.9. 282
|
Rozdział 7. Obóz szkoleniowy neofitów SVG
Rysunek 7.9. Interpretacja tablicy wartości atrybutu x w przeglądarce Opera
Jednak zamiast podawać osobno położenie każdego znaku, można zdefiniować po prostu długość całego napisu, określając wartość atrybutu textlength. Tekst zostanie rozmieszczony równomiernie na całej tej długości. Witaj świecie
Niestety, znów, w chwili oddawania książki do druku obsługa tego atrybutu została zaimplementowana wyłącznie w przeglądarce Opera. Podobnie wygląda sprawa obsługi atrybutu rotate, odpowiadającego za obracanie tekstu — jego wartości są interpretowane poprawnie wyłącznie w Operze i w Safari (im wyższa wersja przeglądarki, tym pewniejsze, że znacznik zostanie poprawnie zinterpretowany), natomiast Firefox w ogóle nie potrafi z nich skorzystać. Opisywany tu atrybut nie powoduje obrócenia całego słowa. Rotacji podlegają poszczególne jego litery. Ich orientacja zmienia się zgodnie z odpowiadającymi im kolejnością wartościami podanymi w tablicy. Rysunek 7.10 przedstawia tekst sformatowany atrybutami textlength oraz rotate, wyświetlany w przeglądarkach Opera i Safari. Witaj świecie
Poziom implementacji obsługi kodu SVG w przeglądarkach Firefox, Safari (Web-Kit) i Opera zmienia się w tak niesamowitym tempie, że przypuszczalnie w chwili, gdy książka ta trafi do rąk Czytelnika, wszystkie trzy przeglądarki będą bezbłędnie interpretować podawane przykłady.
We fragmencie kodu odpowiedzialnym za wyświetlenie napisów widocznych na rysunku 7.10 pojawia się jeden z wielu atrybutów tekstowych — font-size, który pozwala zmieniać rozmiar czcionki. Każdy kto miał okazję pracować z CSS z pewnością rozpozna większość atrybutów należących do tej grupy.
Elementy technologii SVG
| 283
Rysunek 7.10. Obsługa atrybutu w przeglądarce Opera
W przykładach tego oraz dalszych rozdziałów pojawią się następujące atrybuty znacznika text: font-family
Określa rodzinę czcionek, na przykład Arial czy serif (szeryfowe). font-size
Określa rozmiar czcionki oraz jej jednostkę (jeśli rozmiar nie jest podawany w pikselach). font-style
Zaimplementowane style to normal, oblique oraz inherit.
font-weight
Atrybut ten może przyjmować wartości liczbowe, na przykład 300, lub słowne, na przykład bold. text-anchor
Można przypisać mu wartość start, middle, end oraz inherit. Sposób działania poszczególnych atrybutów demonstruje listing 7.5 z kodem formatującym bardzo starą wypowiedź, którą większość z nas pamięta być może jeszcze ze szkoły. Zdanie to zostało powtórzone kilkukrotnie z różnymi ustawieniami atrybutów czcionki, dzięki czemu różnice w formatowaniu stają się wyraźnie widoczne. Dodałam do przykładu także kilka pokazywanych już wcześniej atrybutów rysowania, żeby urozmaicić trochę wygląd wyświetlanego tekstu.
284 |
Rozdział 7. Obóz szkoleniowy neofitów SVG
Listing 7.5. Zastosowanie atrybutów grup tekst i czcionka
Rysunek 7.11 pokazuje efekt działania kodu w przeglądarce Firefox 3. Zwracam szczególną uwagę na ostatni wiersz przedstawionego przykładu a konkretnie na znak wielkiej litery E ze znakiem silnego akcentu (É). W kodzie SVG znak ten otrzymuje się wpisując kombinację É. SVG jest formatem wywodzącym się z języka XML, więc obsługa znaków międzynarodowych bazuje na kodowaniu typu Unicode. W SVG zaimplementowano obsługę podstawowych stron kodowych UTF-8 i UTF-16, które zawierają znak É a także inne znaki z podzbioru ISO Latin Alphabet No 1. W skład tego podzbioru wchodzą zwykłe znaki ASCII, wprowadzane bezpośrednio z klawiatury, oraz znaki różnych alfabetów zachodnioeuropejskich: francuskiego, hiszpańskiego, fińskiego, niemieckiego i innych. Znajdują się w nim również symbole zastrzeżonego znaku towarowego, ochrony praw autorskich oraz niektóre symbole matematyczne.
Elementy technologii SVG
| 285
Rysunek 7.11. Wariacje na temat ozdobnych czcionek i tekstu Spis kodów pozwalających wprowadzać znaki w XML — kodów takich, jak ten, którym posłużyłam się, by wyświetlić znak É — znajduje się na stronie http://xml.coverpages.org/ ´xml-ISOents.txt.
Okręgi, elipsy i wypełnienia gradientowe Zbiór „podstawowych” kształtów SVG nie kończy się na liniach i prostokątach. Nikt nie poradziły sobie bez elips i okręgów. Podobnie, jak miało to miejsce w przypadku prostokąta, obydwa typy obiektów — circle oraz ellipse — mają zestaw własnych atrybutów, dzięki którym można modyfikować ich kształt, barwę oraz przezroczystość wypełnienia czy kolor i wzór obramowania. Poza tym okręgi i elipsy, jak wszystkie zamknięte kształty, można wypełniać gradientami, o czym opowiem w tym podrozdziale. Położenie okręgu określa się za pomocą atrybutów cx oraz cy odpowiadających współrzędnym środka figury. Rozmiar okręgu zależy od wartości atrybutu r, czyli jego promienia. Podany niżej kod rysuje okrąg o promieniu 20 pikseli, którego środek znajduje się w punkcie 30,30:
Elipsę opisują, poza współrzędnymi środka, długości dwóch wymiarów określających długość elipsy — w kierunku osi x oraz w kierunku osi y — rx i ry. Podany poniżej kod rysuje elipsę długą na 250 pikseli i wysoką na 100 pikseli ze środkiem przypadającym w punkcie 300, 200:
286
|
Rozdział 7. Obóz szkoleniowy neofitów SVG
Domyślne ustawienia wartości pozostałych atrybutów okręgu i elipsy sprawiają, że w efekcie otrzymuje się czarne kształty pozbawione jakiegokolwiek obramowania. Oba typy obiektów przyjmują wartości atrybutu fill, a także pozwalają ustawić wartości atrybutów pędzla. Jednak w dalszej części podrozdziału chciałabym zająć się czymś innym, a mianowicie wypełnianiem gradientowym. Wypełnienie gradientowe w SVG różni się od wypełniania jednym kolorem pod tym względem, że sam gradient jest oddzielnym znacznikiem, gradient. Gradienty definiuje się zazwyczaj wewnątrz znacznika SVG defs, gdzie nadaje się im unikalne identyfikatory korzystając w tym celu z atrybutu id. Identyfikator taki jest następnie przypisywany atrybutowi fill poleceniem o składni fill="url(#JakisId)", gdzie JakisId to właśnie identyfikator gradientu. Wypełnianie gradientowe w SVG poddaje się kontroli w stopniu znacznie większym niż analogiczne operacje przeprowadzane w innych aplikacjach, jednak w swej najprostszej postaci do jego opanowania wystarczy poznać tylko kilka podstawowych zasad. Aby uzyskać efekt standardowego, liniowego gradientu, należy utworzyć dwa znaczniki stop. Będą one określać, w którym miejscu ma rozpocząć się przechodzenie gradientowe między kolorami oraz to, jakie kolory mają się w nim pojawić. Przedstawiony poniżej fragment kodu tworzy wypełnienie gradientowe rozpoczynające się na początku elipsy (0%) i kończące się na końcu jej długości (100%). Kolory to niebieski o odcieniu „aqua” i fioletowy. Gradient wypełnia elipsę stworzoną w poprzednim przykładzie:
Można też używać wielu kolorów, wystarczy zdefiniować dla każdego z nich oddzielny znacznik stop.
Gradient przebiega domyślnie wzdłuż linii prostej, rozpoczynając się kolorem początkowym, a kończąc na ostatniej ze zdefiniowanych barw. Ustalając wartości początkowe i końcowe atrybutów nowej linii, x1,y1 oraz x2,y2, można zmienić prostą, wzdłuż której będzie rozpinać się gradient. Wypełnienie gradientowe pojawia się domyślnie wzdłuż linii poziomej, co oznacza, że wartości początkowe i końcowe atrybutu y są identyczne. Efekt równomiernego rozprowadzenia koloru z góry na dół jest równoznaczny z użyciem ustawienia 50% dla y1 i y2 oraz 0% dla x1 i 100% dla x2. Aby osiągnąć efekt wypełnienia gradientowego w pionie, należałoby ustalić wartości x1 i x2 na 50%, a wartości y1 i y2 odpowiednio na 0% i 100%. Można też odwrócić kierunek przepływu gradientu w obu kierunkach zamieniając kolejność przypisania wartości 100% i 0%. Jeśli przejście między kolorami ma rozpoczynać się wcześniej lub później, wystarczy zmienić jedną z wartości granicznych (lub obie) na liczbę z przedziału od 0% do 100%. Przykładowo, w przypadku wypełniania gradientem okręgu, jego „rogi”, w których powinno zacząć się wypełnianie, nie są w ogóle brane pod uwagę. Aby silniej zaznaczyć przejście między kolorami, należy przypisać mu wartości początkową i końcową z zakresu pomiędzy 0% a 100%. Elementy technologii SVG
|
287
Na listingu 7.6 pokazano kod wyświetlający kilka elips wypełnionych dwukolorowym gradientem (przejście między żółcią a czerwienią). Najpierw utworzony został jeden podstawowy gradient, na podstawie którego tworzone są później gradienty pochodne o różnych zestawach wartości x1,y1,x2,y2. Gradienty pochodne odwołują się do gradientu podstawowego za pomocą atrybutu href języka XLINK. Wreszcie gradient podstawowy i jego pochodne zostają wykorzystane do wypełnienia sześciu elips. Listing 7.6. Ustawianie właściwości liniowego wypełnienia gradientem
Teraz warto przyjrzeć się rysunkowi 7.12. Pierwsza elipsa obrazuje przypadek domyślnego gradientowego przechodzenia kolorów. Druga elipsa odtwarza ten sam efekt, korzystając z ustawień wartości początkowej i końcowej y na 50%. Trzecia i czwarta elipsa to przykłady efektu gradientu, gdy wartości x1 i x2 są ustalone na poziomie 50%, przez co zmiana koloru następuje wzdłuż osi pionowej: w jednym przypadku z góry na dół, a w drugim odwrotnie. Wreszcie w ostatniej parze figur wypełnienie gradientowe przebiega wzdłuż przekątnej, w obydwu przypadkach z lewej górnej strony do prawej dolnej. Jedyną różnicą jest ustalenie punktów początku i końca przejścia barw. Strzałki dodane w procesie obrabiania zrzutów z ekranu pokazują, że punkty początkowy i końcowy przejścia kolorów pierwszej elipsy wypadają poza jej obszarem, natomiast w przypadku drugiej z elips mniej więcej mieszczą się w jej obrębie. Dlatego też wrażenie zmiany kolorów w ostatniej elipsie jest silniejsze. Gdyby wypełnianym obiektem był prostokąt bez ściętych kątów, nie byłoby potrzeby korzystania z tak wysuniętych punktów granicznych przejścia barw. 288 |
Rozdział 7. Obóz szkoleniowy neofitów SVG
Rysunek 7.12. Dostosowywanie parametrów wypełnienia gradientowego w elipsie
Kolejną wariacją możliwości korzystania z wypełnienia gradientowego jest atrybut spreadMethod odpowiedzialny za sterowanie efektami barwnymi poza obszarem przejścia gradientowego, gdy wartości krańcowe tego ostatniego znajdują się w przedziale od 0% do 100%. Atrybut ten może przyjmować następujące wartości: reflect
Odbicie ustalonego wzoru.
pad
Pokrycie obszaru poza gradientem najbliższym sąsiadującym kolorem.
repeat
Powtórzenie ustalonego wzoru.
Listing 7.7 przedstawia kod jeszcze jednej strony SVG, wyświetlającej tym razem trzy ustawione w rzędzie koła wypełnione trzema, a nie jak dotąd miało to miejsce dwoma, kolorami. Ciemny odcień niebieskiego jest środkowym kolorem przejścia, dzięki czemu lepiej widać efekty działania atrybutu spreadMethod. Atrybutowi temu przypisywano kolejno wartości: reflect, pad oraz repeat i w takiej też kolejności ustawione są trzy koła. Listing 7.7. Zmienianie wyświetlania gradientu za pomocą atrybutu spreadMethod
Rysunek 7.13 przedstawia efekt działania kodu. Każde z kół zostało podpisane odpowiadającą mu wartością atrybutu spreadMethod.
Rysunek 7.13. Przykład działania trzech możliwych ustawień atrybutu spreadMethod
Ostatnią metodę wypełniania gradientem, o której chcę opowiedzieć stosuje się za pomocą znacznika radialGradient. Pozwala ona wypełnić obiekt gradientem radialnym. Punkty graniczne rozprzestrzeniania się barw tego znacznika ustawia się identycznie jak w znaczniku linearGradient. Nie ma także różnic w używaniu atrybutu spreadMethod. Różnica pojawia się na poziomie pozostałych atrybutów pozwalających uzyskać barwne przejścia za pomocą znacznika radialGradient. Rozmiary powierzchni, w której pojawi się wypełnienie gradientowe definiuje się atrybutami cx oraz cy. Promień wypełnienia radialnego określa się atrybutem r. Atrybuty fx i fy ustalają położenie punktu centralnego rozchodzenia się barw. Są one szczególnie ważne, gdy gradient ma wywołać wrażenie „błyszczenia” obiektu, który wypełnia. Nie wszystkie przeglądarki obsługują podane tu atrybuty w identyczny sposób. Opera w wersji 9.x prawie zupełnie nie radziła sobie z wyświetleniem efektów działania atrybutu spreadMethod w przypadku gradientów radialnych. Safari obsługiwała wyłącznie wartość pad, a Firefox zdał ten test bez zarzutów.
Ostatnim przykładem tego podrozdziału będzie listing 7.8, który demonstruje użycie znacznika radialGradient do wypełnienia wnętrz czterech kół. Każde z wypełnień gradientowych będzie charakteryzować się innymi wartościami atrybutów. Pierwsze koło pokazuje wygląd
290
|
Rozdział 7. Obóz szkoleniowy neofitów SVG
ustawień domyślnych wypełnienia gradientowego. Druga ilustracja przedstawia koło wypełnione gradientem radialnym, którego atrybuty cx i cy zostały wyzerowane a atrybut spreadMethod otrzymał wartość repeat. Wypełnienie trzeciego koła ma przesunięty punkt centralny o 30% wzdłuż obydwu osi, wartości atrybutów cx i cy zmienione na 20% i promień ustawiony na 100%. Taki dobór parametrów sprawia, że gradient wywołuje wrażenie dobijania się światła w jednym punkcie, przez co koło wydaje się być trójwymiarową kulą. Efekt ten został jeszcze mocniej podkreślony na ostatniej ilustracji, w której te same atrybuty wypełnienia gradientowego pojawiły się w zestawieniu z przejściem między bielą, a czernią. Listing 7.8. Wypełnienie gradientem radialnym o różnych wartościach atrybutów
Rysunek 7.14 przedstawia widok tego kodu wywołanego w oknie przeglądarki Firefox 3. Niestety, również i tutaj, jak w przypadku innych znaczników, różne przeglądarki różnie interpretują znacznik radialGradient. Nieścisłości mogą występować nawet pomiędzy wersjami tej samej przeglądarki w tym samym systemie operacyjnym, a już na pewno będą widoczne w różnych systemach operacyjnych. Przeglądarka Opera nie wyświetla gradientu na drugim kole, czasem nie radzi sobie z tym również Safari (np. w Windows), ale możliwe, że obecnie jest już wersja tej przeglądarki (i innych), która poprawnie interpretuje ten znacznik. Gradienty i pojedyncze barwy to nie jedyne rodzaje wypełnienia obiektów, jakie dopuszcza SVG. Można też tworzyć wypełnienia powtarzających się wzorów, co postaram się opisać w następnym podrozdziale. Opowiem w nim również o ostatnich z podstawowych obiektów SVG — łamanych (polyline) i wielokątach (polygon).
Elementy technologii SVG
|
291
Rysunek 7.14. Różne rodzaje wypełniania gradientem radialnym
Łamane i wielokąty Łamane i wielokąty to proste narzędzia pozwalające tworzyć kształty tak regularne, jak i nieregularne. Kształty te mogą być wypełniane (polygon) lub pozbawione wypełnienia (polyline). Oba znaczniki przyjmują argumenty w postaci atrybutów punktowych, czyli par liczb x,y, oddzielonych od siebie spacjami (na przykład 500,50 400,300). Znacznik polygon automatycznie domyka kształt obiektu łącząc pierwszy jego punkt z punktem ostatnim; znacznik polyline nie potrafi tego zrobić. Obydwa znaczniki pozwalają ustalić wartość atrybutu stroke, lecz tylko wielokąt może mieć zdefiniowane wypełnienie. Właściwości tych znaczników najlepiej jest pokazać na przykładzie. Listing 7.9 przedstawia kod rysujący zarówno wielokąt, jak i łamaną. Wielokąt został wypełniony kolorem morskim (seagreen) i obramowany odcieniem niebieskiego o nazwie aqua. Łamanej nadałam kolor niebieski. Oba kształty są równoległobokami. Listing 7.9. Równoległoboki rysowane za pomocą znaczników polyline i polygon
Oba kształty umieściłam na rysunku 7.15. Warto zauważyć, że pierwszy i ostatni punkt wielokąta są ze sobą połączone, natomiast łamana tworzy kontur otwarty. W kodzie podanym na listingu 7.9 atrybut fill znacznika polyline ma przypisaną wartość "none". Brak wypełnienia został zadeklarowany jawnie, gdyż w przeciwnym razie przeglądarka próbowałaby wypełnić kształt niezależnie od rodzaju obiektu, co doprowadziłoby do uzyskania ciekawych, aczkolwiek niekoniecznie pożądanych efektów. Znacznik polygon pozwala zdefiniować regułę wypełnienia (fill-rule). Jeśli boki rysowanej nim figury tworzą jeden wielokąt, można zażądać, by jego powierzchnia została wypełniona kolorem w zależności od tego, czy atrybut fill-rule otrzyma wartość "nonzero" czy "evenodd" — wartość "nonzero" sprawi, że wielokąt zostanie wypełniony kolorem, wartość "evenodd" pozostawi obszar wypełnienia pustym. Jednak metoda ta może czasami prowadzić do dziwnych efektów. Jeśli boki figury rysowanej znacznikiem polygon tworzą kilka małych wielokątów, 292
|
Rozdział 7. Obóz szkoleniowy neofitów SVG
Rysunek 7.15. Dwa równoległoboki — użycie znaczników polygon i polyline
znacznik zażąda utworzenia zamkniętego obiektu poprzez połączenie pierwszego punktu z ostatnim. Przeglądarka zastosuje najprostsze rozwiązanie, wybierając najkrótszy odcinek łączący te dwa punkty, więc wszędzie tam, gdzie pojawi się przecięcie boków, pojawi się także wypełnienie. Programista otrzyma więc mnóstwo małych, kolorowych figur, zamiast jednego dużego wielokąta. Łamane będą wypełniać otoczony sobą kształt, chyba że atrybutowi fill zostanie nadana wartość "none". Automatyczne domykanie wielokątów może prowadzić do nieoczekiwanych efektów, więc najlepiej jest domykać go własnoręcznie.
Wielokąty i łamane przyjmują współrzędne rysownia w postaci tablicy par liczb x,y. Pary te można oddzielać spacjami, przecinkami, umieszczać w nowych wierszach, jednak współrzędne danego punktu muszą zawsze być oddzielone od siebie przecinkiem. Do rysowania bardziej złożonych kształtów służy znacznik path. To z niego właśnie korzysta znakomita większość programów graficznych. O jego możliwościach napiszę w dalszej części tego rozdziału.
Elementy technologii SVG
|
293
Obraz Specyfikacja technologii SVG dopuszcza umieszczanie w niej elementów rastrowych. Do kodu wprowadza się je znacznikiem image. Znacznik ten pozwala umieścić w dokumencie SVG dowolną liczbę plików JPEG czy PNG. Teoretycznie w ten sam sposób można wprowadzać do dokumentu obrazy opisane rozszerzeniem SVG, lecz obsługa tej funkcji jest na razie ograniczona, więc skupię się teraz na dołączaniu w ten sposób grafiki w formatach JPEG i PNG. Opera w wersji 9.x potrafi poprawnie otwierać grafikę SVG umieszczoną w znaczniku image, więc wszystkich zainteresowanym tym tematem polecam przeprowadzanie testów w Operze.
Przykład „Witaj świecie”, znany już z poprzedniego rozdziału, wprowadzał w ten sposób do kodu zdjęcie kuli ziemskiej.
W jednym z poprzednich akapitów wspominałam o rodzajach obsługiwanych przez znacznik image plików graficznych (JPEG oraz PNG). Nie napisałam natomiast, że znacznik ten rozpoznaje również pliki GIF, choć specyfikacja W3C o tym nie wspomina. Sposób otwierania pliku za pomocą znacznika image zależy od ustawień jego atrybutów. Jeśli kontener obrazu różni się wymiarami od swojej zawartości, obraz zostanie automatycznie przeskalowany tak, by optymalnie wykorzystać dostępną mu przestrzeń. Można jednak kontrolować wygląd grafiki, ustalając zachowanie jej proporcji, do czego służy atrybut preserveAspectRatio. To dość złożone zagadnienie, wymagające zrozumienia idei okna roboczego i poznania zasad używania atrybutu viewBox. Opiszę ten problem w osobnym podrozdziale, zaraz po omówieniu zagadnień związanych ze znacznikiem path.
Grupy i SVG w roli kontenerów Znaczniki SVG można rozpatrywać oddzielnie lub jako grupę. Znacznik pełniący rolę kontenera, w którym grupuje się inne znaczniki SVG to po prostu g. Jego użycie jest równie proste, co jego nazwa — znaczniki, które mają utworzyć grupę powinny znaleźć się pomiędzy otwierającym i zamykającym znacznikiem g:
Grupę definiowaną znacznikiem g można modyfikować dowolną liczbą atrybutów, ustalając jej styl, sposób animowania czy transformacji. Znacznik grupy nie jest jedynym rozwiązaniem pozwalającym łączyć kilka innych znaczników SVG. Ten sam efekt można osiągnąć tworząc zagnieżdżone dokumenty SVG:
294 |
Rozdział 7. Obóz szkoleniowy neofitów SVG
W podanym przykładzie w znaczniku svg pojawiają się dwa atrybuty — x i y — które ustalają położenie znacznika svg na kanwie nadrzędnego kodu SVG. W podrozdziale poświęconym atrybutowi viewBox zagnieżdżone znaczniki svg posłużą mi do zademonstrowania idei zachowywania proporcji obrazu.
Ścieżki, wzory i markery Linia jest narzędziem prostym w użyciu, lecz daje bardzo ograniczone możliwości rysowania. Łamane i wielokąty pozwalają tworzyć bardziej złożone kształty, jednak nie takie, w których „pióro” musiałoby oderwać się od kanwy i przenieść z jednego jej miejsca w inne nie pozostawiając po sobie żadnego śladu. Narzędzie ścieżki (path) pozwala uniknąć wszystkich tych ograniczeń. Dzięki niemu można rysować dowolną liczbę połączonych ze sobą lub zupełnie swobodnych punktów, skomplikowane linie a nawet całe obrazy, które można wypełniać kolorami. Ścieżka, w przeciwieństwie do opisywanych w poprzednim podrozdziale wielokątów i łamanych, nie pobiera serii punktów do połączenia. Ścieżka pobiera sekwencję poleceń, które wykonuje, by stworzyć rysunek lub rysunki. Polecenia te rozróżniają wielkość znaków i rysują, posługując się zarówno krzywymi, jak i liniami prostymi. Złożone rysunki, jak te, które opiszę w dalszej części tej książki, są zawsze wynikiem korzystania z poleceń znacznika path.
Podstawowe polecenia ścieżek Polecenia związane ze znacznikiem path pozwalają przesuwać „pióro” i rysować linie proste lub krzywe. Polecenia te rozróżniają wielkość liter — wydawane małymi literami posługują się względnym układem odniesienia, wydawane wielkimi literami korzystają z bezwzględnego układu współrzędnych. Oto spis podstawowych poleceń. M lub m
Polecenie przesuwania (moveto) — w jednostkach bezwzględnych lub względnych — przemieszcza cyfrowe pióro w nowe położenie, dając początek osobnej ścieżce. L lub l
Polecenie rysowania lineto (w jednostkach bezwzględnych lub względnych) rysuje linię łączącą pierwotne położenie pióra z punktem, do którego zostaje ono przesunięte. Z lub z
Domyka bieżącą podścieżkę prostą łączącą punkt, w którym w danej chwili znajduje się pióro z punktem startowym. Ścieżkę definiuje się jako wartość atrybutu d (od angielskiego słowa data — dane). Ścieżka podlega modyfikacji wszystkimi opisanymi poprzednio wartościami atrybutów fill i stroke. Istotą posługiwania się narzędziem ścieżki jest rozróżnienie poleceń wydawanych w bezwzględnym układzie współrzędnych od tych, które wydaje się względem bieżącego punktu. Można stosować je naprzemian, ale z pewnością nie wolno ich pomylić. Zasadę działania znacznika path demonstruje listing 7.10 zawierający kod dokumentu SVG rysującego zielony domek z dwoma żółtymi oknami i takimi samymi drzwiami. W kodzie pojawiają się dwie ścieżki — jedna rysująca zielony dom i druga, której zadaniem jest narysować
Ścieżki, wzory i markery
|
295
żółte drzwi o okna. Jak już wspominałam, ścieżki, w przeciwieństwie do wielokątów, nie muszą domykać rysowanej figury. W przykładzie pojawiają się także polecenia bezwzględne, M i L, niezbędne do stworzenia całości rysunku. Nie mogę sobie wprost wyobrazić, by udało się znaleźć narzędzie prostsze w obsłudze. Listing 7.10. Dom narysowany poleceniami znacznika path
Trzy oddzielne ścieżki odpowiadające za rysowanie okien i drzwi pojawiają się w oddzielnych wierszach kodu. SVG zezwala na opuszczenie części wiersza w cudzysłowie do nowej linii, ponieważ tzw. „białe znaki”, czyli spacje, tabulacja czy przenoszenie do nowej linii, umieszczane w łańcuchu danych nie stanowią dla SVG żadnej przeszkody. Poszczególne pary wartości można oddzielać od siebie przecinkami, jeśli zapis kodu stanie się przez to czytelniejszy. Ostatnia podścieżka korzysta dodatkowo z polecenia zamknięcia (z), łącząc ostatni punkt figury z pierwszym. Na rysunku 7.16 widać nieskomplikowany obrazek domku narysowany za pomocą tych dwóch ścieżek.
Rysunek 7.16. Dom narysowany za pomocą znacznika path
296
|
Rozdział 7. Obóz szkoleniowy neofitów SVG
Poza wspomnianymi już poleceniami, programista ma do dyspozycji dwa zestawy poleceń skrótowych: H lub h n
Rysuje linię poziomą do n
V lub v n
Rysuje linię pionową do n
Polecenia rysowania linii i przesuwania potrafią interpretować współrzędne kolejnych punktów podawane w tablicy, dzięki czemu nie trzeba wciąż powtarzać polecenia. Jednakże taki uproszczony zapis sprawia, że zapis znacznika path staje się trudniejszy do odczytania dla innych ludzi. Oczywiście gdyby życie składało się z samych kątów prostych i takich linii, nikt nie musiałby martwić się o to, czy garnitur dobrze na nim leży. Narysowanie krzywej za pomocą maleńkich odcinków prostej byłoby prawdziwą męczarnią. Na szczęście twórcy SVG pomyśleli o daniu programistom polecenia rysowania krzywej, które działa w znaczniku path. Ścieżki w SVG potrafią interpretować trzy rodzaje krzywych, których szczegółowy opis znajduje się w następnych podrozdziałach. Polecenia rysowania krzywych eliptycznych Polecenia te, jeśli otrzymają jako parametr promienie elipsy rx oraz ry i wartość kąta obrotu wokół osi x, rysują wycinek elipsy między dwoma punktami. Polecenia rysowania krzywych Béziera trzeciego stopnia Polecenia te służą do rysowania krzywych Béziera, pobierając jako parametry współrzędne punktu końcowego oraz współrzędne dwóch punktów kontrolnych — jednego z początku krzywej, a drugiego z jej końca. Polecenia rysowania krzywych Béziera drugiego stopnia Rysuje krzywą Béziera w oparciu o współrzędne punktu końcowego i punktów kontrolnych.
Ścieżka łuku elipsy Rysowanie łuku eliptycznego rozpoczyna się od wywołania polecenia A albo a, gdzie rozmiar litery oznacza wartości bezwzględne lub względne, jak miało to miejsce w podawanych poprzednio poleceniach. łuk taki jest fragmentem konkretnej elipsy, określanej podaniem długości jej promienia wzdłuż osi x (rx) oraz promienia wzdłuż osi y (ry). Poza tym należy podać wartość parametru x-axis-rotation, określającego obrót elipsy względem istniejącego układu współrzędnych, large-arc-flag, który przyjmuje wartość 0, jeżeli łuk rozpina się na kącie 180° lub mniejszym, lub, w przeciwnym razie, wartość 1 i wreszcie współrzędne x,y punktu końcowego. Listing 7.11, będący przykładem działania opisywanego tu narzędzia, zawiera kod rysujący koło — „elipsę”, z której będą wycinane odpowiednie łuki. Kod zawiera polecenia rysowania kilku odrębnych ścieżek widocznych na rysunku 7.17. Listing 7.11. Parametry niezbędne do narysowania łuku eliptycznego
Rysunek 7.17. Koło i kilka narysowanych wokół niego łuków
Pierwsza ścieżka rysuje łuk wychodzący z najniżej położonego punktu okręgu i biegnący w lewą stronę. Łuk ten — zaznaczony ciągłą niebieską linią i takim samym wypełnieniem — łączy się z dwoma odcinkami wychodzącymi ze środka okręgu. Atrybut sweep-flag przyjmuje wartość 1, co powoduje, że łuk jest rysowany zgodnie z ruchem wskazówek zegara. Drugi łuk został zaznaczony czerwoną przerywaną linią. Parametry opisujące go są takie same z wyjątkiem atrybutu large-arc-flag, który został ustawiony na wartość 1. Oznacza to, że łuk będzie większy niż 180°. Atrybut sweep-flag ma nadal wartość 1, czyli ten łuk również jest rysowany zgodnie z ruchem wskazówek zegara. W efekcie otrzymujemy krzywą będącą dopełnieniem poprzednio narysowanego łuku ale w odbiciu lustrzanym. Trzeci z łuków został narysowany zieloną kropkowaną linią, która odcina się wyraźnie na niebieskim wypełnieniu pierwszego kształtu. Łuk ten jest identyczny z niebieską krzywą; różni je jedynie wartość parametru sweep-flag, która w tym przypadku została ustawiona na 0, przez co łuk został narysowany przeciwnie do ruchu wskazówek zegara.
298 |
Rozdział 7. Obóz szkoleniowy neofitów SVG
Ostatnia krzywa, fioletowy wzór kreska-kropka, została narysowana przy ustawieniu atrybutu sweep-flag na wartość 0, przez co jest ona rysowana przeciwnie do ruchu wskazówek zegara, oraz z atrybutem large-arc-flag ustawionym na wartość 1, dzięki czemu polecenie rysowania elipsy zatoczyło prawie pełen łuk (z wyjątkiem odcinka pierwszej krzywej).
Krzywe Béziera drugiego stopnia Krzywe Béziera to najprostszy rodzaj krzywych. Do ich narysowania wystarczy podać odpowiednie polecenie — Q lub q (w zależności od tego, czy współrzędne podawane są bezwzględnie, czy względnie) — po którym pojawią się dwie pary liczb —współrzędne punktu kontrolnego i współrzędne punktu końcowego krzywej. Krzywą taką można porównać do elastycznego drutu, który chwyta się gdzieś pomiędzy jego końcami tak, że końcówki te łagodnie i z gracją opadają po obydwu stronach punktu mocowania. Poniższy kod tworzy krzywą Béziera w kształcie płatka kwiatu — krzywa jest odbita wzdłuż linii poziomej:
Wygląd krzywej Béziera nie jest przypadkowy. Wystarczy wyobrazić sobie linię prostą, której jeden koniec przypada w połowie między początkiem krzywej a punktem kontrolnym, a drugi koniec znajduje się w połowie pomiędzy punktem kontrolnym a końcem krzywej. Linia ta przebiega w połowie odległości, jaka dzieli punkt kontrolny i podstawę, z której wychodzą obydwa końce krzywej. Teraz wystarczy znaleźć środek symetrii tego odcinka, by wyznaczyć najwyższy punkt krzywej. W ten sposób, bez zgadywania, można określić jej kształt. Listing 7.12 zawiera kod rysujący cztery różne krzywe Béziera drugiego stopnia. Różnice wynikają z podania innych współrzędnych punktu kontrolnego w każdym z poleceń rysowania krzywej. Listing 7.12. Cztery różne krzywe Béziera drugiego stopnia ?xml version="1.0" standalone="no"?>
Rysunek 7.18 przedstawia cztery różne krzywe. Trzy pierwsze rysunki zostały opatrzone liniami wyznaczającymi punkty charakterystyczne krzywej. Na rysunkach tych pojawiają się kolorowe linie: szara linia postaci kropka-kreska to podstawa łącząca początek i koniec krzywej, czerwone przerywane linie to styczne do punktów ograniczających krzywą zbiegające się w punkcie kontrolnym, niebieska kropkowana linia jest najważniejsza z całej konstrukcji uzupełniającej. Niebieska linia powstaje po znalezieniu środkowych odcinków łączących krańce krzywej z punktem kontrolnym. Z połączenia tych dwóch punktów powstaje odcinek stykający się z krzywą w połowie jej długości. Oznacza to, że cały proces można odwrócić — mając daną krzywą Béziera drugiego stopnia, można obliczyć wartości potrzebne do jej narysowania.
300 |
Rozdział 7. Obóz szkoleniowy neofitów SVG
Rysunek 7.18. Krzywe Béziera z wyznaczonymi punktami charakterystycznymi i ich współrzędnymi
Ostatnia krzywa z przykładu nie została opisana. To zadanie pozostawiam Czytelnikowi, by mógł spróbować swoich sił w skalowalnej grafice wektorowej. Poza normalnym poleceniem rysującym krzywą Béziera drugiego stopnia istnieje także polecenie skrótowe, T lub t (w zależności od tego, czy współrzędne podawane są w układzie bezwzględnym czy względnym), które pozwala stworzyć odbicie lustrzane poprzednio narysowanej krzywej — wystarczy podać jej punkt końcowy:
W listingu 7.12, czyli opisywanym wcześniej przykładzie rysowania domku, oraz na listingu w następnym rozdziale pojawia się znacznik transform, o którym napiszę w podrozdziale „Transformacje”.
Krzywe Béziera trzeciego stopnia Polecenie rysowania krzywych Béziera trzeciego stopnia — C lub c — przypomina poniekąd polecenie rysowania krzywych stopnia drugiego, z tym że przyjmuje ono współrzędne dwóch punktów kontrolnych, z których jeden znajduje się w pobliżu początku krzywej, a drugi przypada pod koniec krzywej. Punkty te mogą znajdować się daleko od siebie lub też być bardzo bliskimi sąsiadami, mogą nawet znajdować się po przeciwległych stronach krzywizny.
Ta krzywa rozpoczyna się w punkcie o współrzędnych (100,100) i kończy w punkcie o współrzędnych (400,100). Jej pierwszy punkt kontrolny opisuje para liczb (250,0), natomiast drugi z punktów kontrolnych ma współrzędne (300,0).
Ścieżki, wzory i markery
|
301
Określanie kształtu krzywej trzeciego stopnia na podstawie polecenia ją rysującego, czy też proces wyznaczania parametrów tegoż polecenia na podstawie kształtu krzywej nie jest już tak proste, jak w przypadku krzywej drugiego stopnia. W tym celu należy narysować linię łączącą obydwa końce krzywej oraz linię łączącą obydwa jej punkty kontrolne z końcami krzywej. Następnie trzeba narysować odcinek łączący połowę odległości między jednym końcem krzywej a najbliższym mu punktem kontrolnym z punktem leżącym w połowie odległości między obydwoma punktami kontrolnymi, by potem poprowadzić z tego punktu odcinek łączący go z połową odległości pomiędzy drugim końcem krzywej a najbliższym mu punktem kontrolnym. Wtedy można narysować linię łączącą środki utworzonych właśnie odcinków. Połowa krzywej przypada w połowie tej linii. Listing 7.13 przedstawia kod rysujący dwie zupełnie różne krzywe Béziera trzeciego stopnia. Punkty kontrolne pierwszej krzywej leżą na tej samej wysokości i są równoodległe od krańców krzywej. W przypadku drugiej krzywej pierwszy punkt kontrolny jest wysunięty bardziej w lewo niż kraniec tej krzywej, a drugi punkt kontrolny, znajdujący się po drugiej stronie podstawy krzywej, wykracza daleko poza jej kraniec. Listing 7.13. Dwie krzywe Béziera trzeciego stopnia z pomocniczymi prostymi
Czerwona przerywana linia widoczna na rysunku 7.19 łączy obydwa końce krzywej z punktami kontrolnymi, natomiast niebieska kropkowana linia łączy środki odcinków wyznaczonych czerwoną łamaną. Pomarańczowa linia w stylu kreska-kreska-kropka wyznacza punkty środkowe odcinków narysowanych na niebiesko. Jej położenie określa punkt środkowy krzywej. Linia ta jest mało widoczna na drugiej ilustracji, ponieważ pokrywa się ona z krzywą, której punkt środkowy leży na linii podstawy. Uproszczona metoda rysowania krzywej trzeciego stopnia, wywoływana poleceniem S lub s, powtarza fragment krzywej do pierwszego punktu kontrolnego. Programista musi podać współrzędne drugiego punktu kontrolnego i nowego punktu końcowego:
302
|
Rozdział 7. Obóz szkoleniowy neofitów SVG
Rysunek 7.19. Dwie krzywe Béziera trzeciego stopnia wyznaczonymi punktami środkowymi
Ścieżki, markery i groty strzałek Ścieżki określające kolejność wykonywanych kroków czy wyznaczające trasę na mapie powinny mieć jakieś oznaczenie kierunku. W tym celu stworzono znacznik marker. Markery to w rzeczywistości wzory utworzone z kółek i strzałek, którymi można oznaczyć początek ścieżki (kółko), kolejne jej fragmenty i koniec (groty strzałek). Po zdefiniowaniu wzoru, można używać go z następującymi atrybutami: marker-start, marker-midle oraz marker-end. Markerów można używać w połączeniu ze ścieżkami, łamanymi, wielokątami i liniami. Znacznik circle doskonale nadaje się do oznaczenia początku linii. Poniższy kod tworzy okrągły marker początku linii.
Atrybuty markerWidth oraz markerHeight określają szerokość i wysokość okna roboczego. Jeżeli wymiary kółka wykraczałyby poza obszar okna roboczego, ekran pozostałby pusty. Atrybuty refX oraz refY ustalają wzajemne położenie kółka i ścieżki w taki sposób, że początek ścieżki znajduje się dokładnie w centrum kółka. Oczywiście okrągłe oznaczenie początku to tylko część tworzenia oznaczeń kierunku — na drugim końcu linii powinien znaleźć się grot strzałki. Podany poniżej fragment kodu SVG zmienia stworzony wcześniej obraz tak, by na ekranie pojawiła się linia rozpoczynająca się kółkiem i zakończona grotem strzałki.
Ścieżki, wzory i markery
| 303
Kółko rysowane jest za pomocą atrybutu marker-start, natomiast strzałka powstaje za pomocą atrybutu marker-end. Dzięki temu program wykonujący kod SVG wie, jak rozmieścić poszczególne elementy rysunku. Do narysowania grotu strzałki posłużył znacznik path. Ustawione w nim wartości atrybutów refX oraz refY gwarantują, że grot będzie ściśle przylegać do linii tworzącej strzałkę. Ostateczny efekt widoczny jest na rysunku 7.20.
Rysunek 7.20. „Strzałka”, której linię i grot stworzono znacznikiem path, a początkowe kółko — znacznikiem circle
Oczywiście jeżeli ścieżka, do której dodaje się wskaźniki kierunku, jest kręta, warto umieścić na niej dodatkowe markery pomiędzy punktem początkowym a punktem końcowym. Zadanie to można zrealizować posługując się znacznikiem midMarker. Ponieważ strzałki mogą wskazywać różne kierunki, atrybut orient markera (odpowiedzialny za ustalanie kierunku) przyjmuje wartość "auto", dzięki czemu strzałka zawsze ustawia się we właściwym kierunku, zgodnym z kierunkiem linii. Listing 7.14 przedstawia kod takiej właśnie krętej linii z naniesionymi na nią znacznikami kierunku. Listing 7.14. Kręta ścieżka ze znacznikami kierunku
„Zakręty” ścieżki zostały uzyskane poleceniami rysowania łuków eliptycznych a strzałki kierunkowe zostały dodane na początkach i końcach krzywych. Rysunek 7.21 ukazuje efekt wykonania powyższego kodu.
304 |
Rozdział 7. Obóz szkoleniowy neofitów SVG
Rysunek 7.21. Kręta ścieżka z dodanymi oznaczeniami kierunku
Pozostał już tylko jeden aspekt stosowania znacznika path, po omówieniu którego zajmę się ostatnim ważnym zagadnieniem SVG — transformacjami i niezastąpionym atrybutem viewBox.
Ścieżki w roli wzorów Ścieżki przydają się naprawdę do wszystkiego. Można je przesuwać, formować, kształtować a nawet wystrzelić niczym strzałę. Poza tym ścieżki mogą posłużyć do tworzenia wzorów będących jeszcze jedną formą wypełnienia. Obsługa wzorów została zaimplementowana w przeglądarkach Opera i Safari 3, a także w Firefoksie 3. Definicja wzorów pojawia się tam, gdzie umieszczana była definicja markerów, czyli pomiędzy znacznikami defs. Znacznikom wzoru, pattern, przypisane są następujące atrybuty — width i height, czyli parametry określające szerokość i wysokość pola, w którym ma pojawić się wypełnienie oraz para współrzędnych x i y wyznaczająca punkt początkowy rysowania wzoru. Dodatkowo programista ma do dyspozycji atrybut patternUnits, który może przyjmować wartości "objectBoundingBox" lub "userSpaceOnUse". Pierwszy z nich określa wymiary wzoru na podstawie wymiarów pola wypełnienia, zaś drugi bazuje na wykorzystywanym przez użytkownika układzie współrzędnych. Kod widoczny na listingu 7.15 rysuje wzory zbudowane z nałożonych na siebie dwóch ścieżek, różniące się wyłącznie ustawieniem atrybutu patternUnits. Oba wzory posłużyły do wypełnienia konkretnej figury — prostokąt jest wypełniony wzorem, którego atrybut patternUnits przyjmuje wartość objectBoundingBox a okrąg wzorem, w którym ten sam atrybut ma wartość userSpaceOnUse. Wynik działania kodu widać na rysunku 7.22. Ścieżki, wzory i markery
| 305
Rysunek 7.22. Wypełnianie kształtów wzorami zbudowanymi ze ścieżek Listing 7.15. Dwa kształty wypełnione wzorami zdefiniowanymi przez użytkownika
Przykład ten jest o tyle ciekawy, że wystarczy zmienić rozmiar okna przeglądarki, by zaobserwować, jak zmienia się wzór wypełniający koło, który bazuje przecież na „współrzędnych użytkownika”. Ponieważ aplikacja przyjmuje domyślną wartość szerokości na 100%, zmiana rozmiarów okna przeglądarki zmienia domyślną szerokość, co z kolei wpływa na wygląd wzoru.
306
|
Rozdział 7. Obóz szkoleniowy neofitów SVG
Ponowne spotkanie z oknem roboczym i atrybutem viewBox W większości przypadków nie ma potrzeby ingerowania w domyślny układ współrzędnych stosowany w SVG. Wystarczy jedynie podać początkowe wartości kanwy:
