Grafika rastrowa

Lekcja: Grafika rastrowa – podstawy i zastosowania

Część teoretyczna

1. Co to jest grafika rastrowa?

Grafika rastrowa to rodzaj grafiki komputerowej, która jest zbudowana z pikseli – małych, prostokątnych elementów, tworzących obraz. Każdy piksel ma swój kolor i połączenie tysięcy, a nawet milionów pikseli tworzy obraz, który widzimy na ekranie. Grafika rastrowa jest najczęściej używana w fotografii cyfrowej, obrazach internetowych oraz w tworzeniu grafiki statycznej.

Cechy grafiki rastrowej:

  • Rozdzielczość: Jakość obrazu zależy od liczby pikseli na jednostkę powierzchni (PPI – pixels per inch).
  • Szczegółowość: Może wyświetlać bardzo skomplikowane i realistyczne obrazy.
  • Skalowanie: Powiększanie obrazu powoduje utratę jakości (obraz staje się „rozmazany”).

2. Rodzaje grafiki rastrowej

Grafika rastrowa dzieli się na różne typy w zależności od jej przeznaczenia i charakterystyki:

a) Grafika statyczna

Grafika statyczna to obrazy, które nie zawierają ruchu. Są one najczęściej używane w:

  • Zdjęciach cyfrowych
  • Ilustracjach
  • Tłach na stronach internetowych

Przykłady formatów:

  • JPEG: Kompresja stratna, idealny do zdjęć i obrazów o dużej liczbie kolorów.
  • PNG: Kompresja bezstratna, obsługuje przezroczystość.
  • BMP: Format bitmapowy, duży rozmiar plików, brak kompresji.
  • GIF: Używany do prostych obrazów, obsługuje 256 kolorów.

b) Grafika animowana

Choć to nie jest typowy przykład statycznej grafiki rastrowej, grafiki animowane, takie jak animowane GIF-y, także bazują na pikselach. Składają się z serii klatek, które tworzą wrażenie ruchu.

3. Zastosowania grafiki rastrowej

Grafika rastrowa znajduje zastosowanie w wielu dziedzinach:

  • Fotografia cyfrowa: Obróbka zdjęć w programach takich jak Photoshop czy GIMP.
  • Projektowanie stron internetowych: Tworzenie ikon, tła i grafik.
  • Reklama i marketing: Banery reklamowe, plakaty, ulotki.
  • Sztuka cyfrowa: Malowanie i rysowanie przy pomocy narzędzi cyfrowych.

4. Zalety i wady grafiki rastrowej

Zalety

  • Realistyczne odwzorowanie szczegółów
  • Szerokie zastosowanie
  • Dostępność różnych formatów

Wady

  • Powiększanie powoduje utratę jakości
  • Duże rozmiary plików
  • Ograniczona skalowalność

Ćwiczenia praktyczne

Ćwiczenie 1: Przegląd formatów graficznych

  1. Znajdź w Internecie obrazy w formatach JPEG, PNG i GIF.

  2. Zbadaj ich jakość i porównaj rozmiary plików.

  3. Zapisz swoje spostrzeżenia w tabeli, np.:
    Format JPEG Rozmiar pliku Mały Jakość Dobra Zastosowanie Zdjęcia i fotografie

Ćwiczenie 2: Tworzenie grafiki statycznej

  1. Za pomocą programu graficznego (np. GIMP, Paint.NET) stwórz prosty obraz, np. krajobraz.
  2. Zapisz go w różnych formatach (JPEG, PNG, BMP).
  3. Porównaj różnice w jakości i rozmiarze pliku.

Ćwiczenie 3: Zrozumienie pikseli

  1. Powiększ dowolny obraz w edytorze graficznym do poziomu, na którym widoczne są piksele.
  2. Wybierz kilka pikseli i spróbuj zmienić ich kolory, obserwując, jak wpływa to na cały obraz.

Ćwiczenie 4: Użycie grafiki rastrowej w HTML i CSS

  1. Stwórz prostą stronę internetową z obrazem rastrowym jako tłem. 
    <style>
    body {
        background-image: url('tlo.png');
        background-size: cover;
    }
</style>
  2. Dodaj inne elementy, takie jak tekst, i sprawdź, jak tło wpływa na czytelność strony.

Podsumowanie lekcji

Po tej lekcji uczniowie:

  • Zrozumieją, czym jest grafika rastrowa i jakie ma cechy.
  • Nauczą się rozróżniać formaty graficzne i wybierać odpowiednie do różnych zastosowań.
  • Poznają zalety i ograniczenia grafiki rastrowej.
  • Wykonają praktyczne ćwiczenia, które pogłębią ich wiedzę na temat tworzenia i wykorzystywania grafiki rastrowej w projektach.