Warsztat

Termin grafika rastrowa (ang. raster graphics) lub grafika bitmapowa (ang. bitmap graphics) odnosi się do sposobu odwzorowania obrazów za pomocą siatki punktów, które nazywamy pikselami (ang. pixel = picture element). Piksele są najmniejszymi, niepodzielnymi elementami obrazu. Mogą przyjmować różne kolory.

Taki sposób tworzenia obrazów odzwierciedlony jest głęboko we współczesnej technice pozyskiwania oraz prezentacji obrazów. Weź mocną lupę (najlepiej zegarmistrzowską) i przyjrzyj się przez nią powierzchni ekranu swojego monitora. Zobaczysz coś takiego:

Piksele są tutaj tworzone przez trzy barwne paski (na niektórych monitorach ich kształt może być nieco inny, np. okrągły) w kolorach czerwonym (ang. R = red), zielonym (ang. G = green) i niebieskim (ang. B = blue). Monitor posiada możliwość sterowania jasnością świecenia każdego z tych 3 pasków kolorów. Powstaje w ten sposób kolor wypadkowy określający kolor piksela. Pikseli jest bardzo dużo i są malutkie, dlatego zwykle ich nie widzimy. Tę technikę tworzenia kolorów nazywamy techniką RGB od pierwszych liter angielskich nazw kolorów podstawowych.

Również pozyskiwanie obrazów oparte jest na rastrze. W aparacie cyfrowym lub kamerze obraz z obiektywu pada na przetwornik obrazu:

Jest to specjalizowany układ scalony. Powierzchnia przetwornika pokryta jest filtrem zbudowanym z punktów o trzech barwach podstawowych RGB. Pod każdym z tych punktów znajduje się mikroskopijny element światłoczuły mierzący natężenie światła, które przeszło przez filtr – uzyskuje się w ten sposób informację o natężeniu barwy podstawowej:

Punkty światłoczułe ułożone są w postaci rastra. Układ przetwornika odczytuje informacje o natężeniu światła w poszczególnych punktach tej matrycy i na tej podstawie generuje obraz zbudowany z pikseli RGB. Powstaje obrazek rastrowy, który później można wyświetlać na wyświetlaczu rastrowym.

Grafika rastrowa posiada kilka parametrów:

Rozdzielczość pozioma (ang. horizontal resolution) określa liczbę pikseli w poziomie, jaką posiada obrazek urządzenie obrazujące.

Rozdzielczość pionowa (ang. vertical resolution) określa liczbę pikseli w pionie.

Rozdzielczość obrazu (ang. picture resolution) to po prostu liczba pikseli w poziomie i pionie. Na przykład, standard telewizyjny HD TV określa rozdzielczość obrazu na 1920 x 1080 pikseli. W prostych telefonach komórkowych obraz ma rozdzielczość 320 x 240 pikseli, w smartfonach może to być np. 800 x 480 pikseli. Ogólnie, przy stałej wielkości fizycznej obrazu, im większa jego rozdzielczość, tym obraz posiada większą jakość (precyzyjniej oddaje szczegóły).

Liczba pikseli na cal (ang.PPI = pixels per inch) określa gęstość pikseli, a pośrednio również ich rozmiar fizyczny. Im większa rozdzielczość, tym obraz ma lepszą jakość, ponieważ piksele stają się mniej widoczne.

Rozdzielczość PPI dla danego urządzenia liczymy ze wzoru:

Na przykład:

Z grafiką rastrową spotkasz się, gdy będziesz chciał wyświetlać obrazy na wyświetlaczu rastrowym, np. typu Nokia 5110 (wyświetlacz z popularnych kiedyś telefonów komórkowych, dostępny obecnie na Allegro za około 12 zł):

---

Osobnym zagadnieniem jest kodowanie koloru pikseli. Wyróżnia się dwie podstawowe metody: paletową i RGB (istnieją również inne sposoby kodowania kolorów, przydatne przykładowo przy druku kolorowym).

W metodzie paletowej tworzy się określoną paletę kolorów, a następnie każdemu pikselowi zostaje przypisany numer koloru z tej palety. Numer ten jest kodowany dwójkowo. Liczba bitów określa maksymalną liczbę możliwych kolorów na obrazku:

Obrazki z paletowym kodowaniem koloru stosowane są do rysunków, napisów, itp.

Przy kodowaniu RGB piksele zawierają informację o natężeniu każdej z barw podstawowych. Dana reprezentująca piksel podzielona jest na trzy pola bitowe (czasem są to 4 pola, a czwarte pole reprezentuje tzw. kanał alfa, czyli przezroczystość piksela), które zawierają liczbę określającą natężenie barwy podstawowej. Aby zrozumieć, jak to działa, załóżmy, że piksele są kodowane 3 bitami, gdzie każdy oznacza włączenie (1) lub wyłączenie (0) barwy podstawowej R – czerwonej, G – zielonej, B –  niebieskiej:

Otrzymujemy 8 różnych kolorów: 2 x 2 x 2 = 8. Jeśli natężenie barwy podstawowej będziemy kodować za pomocą 2 bitów, to otrzymamy cztery natężenia: 00₂ = 0, 01₂ = 1, 10₂ = 2, 11₂ = 3. Da nam to 4 x 4 x 4 = 64 możliwe kolory. W rzeczywistych zastosowaniach każda barwa podstawowa kodowana jest za pomocą większej liczby bitów, np. dla 8 bitów otrzymujemy 16.777.216 kolorów, a to jest więcej niż potrafi rozróżnić oko człowieka. Obrazy RGB tak kodowane nazywamy grafiką True Color.

Obrazy RGB stosowane są do zdjęć cyfrowych.

Temat kodowania grafiki jest bardzo obszerny i wykracza poza ramy tego artykułu. Zainteresowanych odsyłam więc do materiałów powszechnie dostępnych w Internecie.

---

Grafika rastrowa nadaje się dobrze do zdjęć. Jednakże posiada swoje wady, które najczęściej ujawniają się przy różnych transformacjach. Spójrz na poniższe obrazki:

Po lewej stronie mamy oryginalny obrazek. Zmniejszamy go 4-ry razy, otrzymując obrazek środkowy. Co to znaczy: zmniejszyć obrazek rastrowy? Nie możemy zmniejszyć rozmiaru pikseli, ponieważ piksele posiadają stałe wymiary, które zależą od rozdzielczości wyświetlacza. Aby obrazek fizycznie był mniejszy na ekranie, musimy zmniejszyć jego rozdzielczość w pionie i poziomie. Czyli w tym przypadku każde 16 pikseli  (4 x 4) należy przekształcić w 1 piksel:

Oczywistym jest, że w pojedynczym pikselu nie zapamiętamy układu kolorów 16 pikseli pierwotnego obrazu. Komputer wyliczy dla niego jakiś kolor uśredniony:

W ten sposób otrzymamy mniejszy obrazek. Co się stanie, gdybyśmy zechcieli ten obrazek powiększyć czterokrotnie do rozmiaru pierwotnego? Efekt widzisz po prawej stronie. Obrazek utracił szczegóły. Dlaczego? Ponieważ z jednego piksela nie otrzymamy 16 pikseli o kolorach tak zróżnicowanych, jak na oryginalnym obrazie. Komputer wypełni te piksele kolorem jednolitym:

Następuje utrata jakości. Jest to nieodłączna cecha grafiki rastrowej.

Grafikę rastrową będziemy tworzyć i edytować za pomocą popularnego programu GIMP (GNU Image Manipulation Program). Jeśli jeszcze nie zainstalowałeś tego programu, to zrób to wg instrukcji podanej tutaj, a następnie wróć do kursu.

Nasz kurs nie jest pełnym kursem obsługi GIMP'a, ponieważ w projektach elektronicznych nie będziemy korzystać ze wszystkich jego możliwości, których jest całkiem sporo. Kurs ma na celu zaznajomić cię z podstawową obsługą tego programu oraz z jego funkcjami, które mogą być ci przydatne. Jeśli cię to zainteresuje, to bez problemu znajdziesz odpowiedni dla siebie kurs w Internecie. Program GIMP jest bardzo prosty, intuicyjny w obsłudze i nawet bez specjalnego kursu można się szybko nauczyć wykonywania podstawowych operacji.

Zaletą GIMP'a jest to, iż jest on dostępny zarówno w systemach Windows jak i w Linuksie, a dodatkowo nie musisz za niego płacić (chociaż dobrze byłoby przesłać autorom jakiś datek, co mogłoby ich zachęcić do pracy nad ulepszoną wersją).

Uruchom program GIMP. Przez pewien czas będzie się ukazywało okienko startowe: tutaj GIMP nie jest demonem szybkości i trzeba trochę poczekać, aż wszystkie składniki programu zostaną załadowane i uruchomione. Pamiętaj, że jest to program darmowy.

 

Gdy proces startu się zakończy, pojawi się okno robocze:

Nie maksymalizuj go, chyba że posiadasz monitor o bardzo dużym ekranie.

Aby rozpocząć naukę rysowania, musisz utworzyć nowy obrazek. Użyj opcji menu: Plik → Nowy... (lub naciśnij Ctrl+N).

Pojawi się okno dialogowe tworzenia nowego obrazu.

Jeśli klikniesz + przy Zaawansowanych opcjach, to uzyskasz dostęp do kilku dalszych opcji:

Na razie nic nie zmieniaj, kliknij myszką w przycisk OK. Plik obrazka zostanie utworzony i załadowany do edytora. Okienko robocze zmieni się następująco:

Budowa tego okna jest standardowa. U góry masz pasek z poleceniami menu. Gdyby ten pasek zniknął, to dostęp do menu umożliwi ci przycisk ze strzałką w lewym górnym rogu:

Widocznością elementów okna roboczego steruje menu Widok:

To na wypadek, gdyby ci coś zniknęło (uczniowie ciągle coś wyłączają, a później nie potrafią tego z powrotem przywrócić). Wiele opcji posiada skróty klawiaturowe. Te częściej używane warto sobie zapamiętać.

Na lewej i górnej krawędzi okna znajdują się linijki. Jednostkę ustalasz przyciskiem umieszczonym w dole okna. Po prawej stronie tego przycisku znajdziesz narzędzie do wyboru powiększenia:

W prawym górnym narożniku znajduje się narzędzie, które dopasowuje obrazek do aktualnych rozmiarów okienka, tzn. dopasowuje jego powiększenie, tak aby mieścił się cały w okienku i zajął jak największy jego obszar. Obrazek możesz szybko powiększać lub pomniejszać przez pokręcenie kółeczkiem myszki z wciśniętym klawiszem Ctrl.

Gdy obrazek jest powiększony i okienko pokazuje tylko jego fragment, to widoczny obszar obszar możesz szybko wybierać za pomocą narzędzia w prawym dolnym rogu (cztery strzałki niebieskie). Wskaż je, wciśnij lewy przycisk myszki, wybierz obszar i zwolnij lewy przycisk myszki – jest to dużo wygodniejsze od bawienia się suwakami przesuwu treści okienka:

Poćwicz sobie te opcje. Aby szybko przywrócić standardowy rozmiar okna i obrazka naciśnij klawisz 1 (przywraca powiększenie 100%), a następnie Ctrl+J (dopasowuje rozmiar okienka do aktualnej wielkości obrazka).

---

Do rysowania i obróbki grafiki potrzebne ci będą różna narzędzia. W tym celu musisz otworzyć okienko przybornika, które zwykle pojawia się po uruchomieniu programu, ale czasem może zniknąć, jeśli je niechcący wyłączysz (program zapamiętuje opcje pomiędzy kolejnymi uruchomieniami). Okienko przybornika otwierasz za pomocą opcji menu: Okna → Nowy przybornik. Warto zapamiętać sobie skrót klawiaturowy: Ctrl+B.

Poszerz okienko przybornika i umieść je, tak aby nie zasłaniało okna głównego z obrazkiem.

Oprócz przybornika będziesz potrzebował jeszcze okienka opcji narzędzi. Z menu wybierz: Okna → Dokowalne okna dialogowe → Opcje narzędzia. Na ekranie powinno pojawić się okienko dialogowe:

Zawartość tego okna zmienia się wraz z wyborem w przyborniku narzędzia rysunkowego. Teraz musisz wykonać "trudną" operację (sprawia wiele kłopotów uczniom, nie wiem dlaczego). Chwyć lewym przyciskiem myszki zakładkę Opcje narzędzia, która jest pod paskiem tytułowym (a nie pasek tytułowy, lecz zakładkę pod nim!!!) i przeciągnij ją na spód okna przybornika, po czym zwolnij lewy przycisk myszki. Okienko opcji narzędzia powinno zadokować w oknie przybornika:

Opanowanie tych wszystkich opcji to wiele miesięcy pracy z GIMP'em. Takich ambicji na tym kursie nie mamy. Będziemy zawsze opisywać tylko te najistotniejsze w miarę potrzeb. Resztę możesz opanowywać sam metodą eksperymentów lub korzystając z instrukcji do GIMP'a: menu Pomoc → Podręcznik użytkownika.

Na przyborniku kliknij w czarny prostokąt (wybór koloru). Pojawi się okno dialogowe zmiany aktywnego koloru:

Umieść je, tak aby nie zasłaniało innych okienek i pozostaw je na ekranie (nie zamykaj go). Wybór koloru opiszemy dokładnie w następnej lekcji.

Program GIMP masz teraz odpowiednio skonfigurowany do rozpoczęcia pierwszej lekcji. Zapraszam.