Technikum Klasa I 45 minut PP: II.3a | s. 344

Lekcja 32: Grafika wektorowa - roznice, projekty, formaty

Porownanie grafiki wektorowej i rastrowej, SVG, podstawy Inkscape

📋 Podstawa programowa: II.3a
InkscapeSVGgrafika wektorowawektor
00:00
Wprowadzenie
5 min
00:05
Teoria
15 min
00:20
Cwiczenia
15 min
00:35
Podsumowanie
10 min
📚

Teoria

▼

Czym jest grafika wektorowa?

Grafika wektorowa to rodzaj grafiki komputerowej, w ktorej obrazy sa opisane za pomoca obiektow matematycznych - linii, krzywych, wielokatow i innych ksztaltow zdefiniowanych rownaniami. W przeciwienstwie do grafiki rastrowej, grafika wektorowa nie sklada sie z pikseli, lecz z wektorow (sciezek definiowanych punktami i krzywymi Beziera).

Kluczowa zaleta grafiki wektorowej: Mozna ja skalowac do dowolnego rozmiaru bez utraty jakosci! Niezaleznie od tego, czy obraz ma 10 cm czy 10 metrow - krawedzie zawsze beda ostre i gladkie.

Grafika rastrowa vs. wektorowa - porownanie

CechaRastrowaWektorowa
PodstawaPikseleObiekty matematyczne
SkalowanieUtrata jakosciBez utraty jakosci
Rozmiar plikuZalezy od rozdzielczosciZalezy od zlozonosci
ZastosowanieZdjecia, fotografieLogotypy, ikony, ilustracje
EdycjaNa poziomie pikseliNa poziomie obiektow
ProgramyGIMP, PhotoshopInkscape, Illustrator

Formaty grafiki wektorowej

  • SVG (Scalable Vector Graphics) - otwarty standard W3C, oparty na XML. Mozna go edytowac nawet w edytorze tekstu! Uzywany na stronach internetowych.
  • AI (Adobe Illustrator) - natywny format programu Adobe Illustrator
  • CDR (CorelDRAW) - natywny format programu CorelDRAW
  • EPS (Encapsulated PostScript) - uniwersalny format wymiany grafiki wektorowej
  • PDF - moze zawierac zarowno grafike wektorowa, jak i rastrowa

Format SVG - blizej

SVG to format tekstowy oparty na XML. Prosty przyklad kodu SVG:

<svg width="200" height="200">
  <circle cx="100" cy="100" r="80"
    fill="blue" stroke="black" stroke-width="2"/>
  <rect x="50" y="50" width="100" height="100"
    fill="red" opacity="0.5"/>
  <text x="100" y="105" text-anchor="middle"
    fill="white">SVG!</text>
</svg>

Inkscape - darmowy edytor grafiki wektorowej

Inkscape to darmowy, otwarty program do tworzenia i edycji grafiki wektorowej, bedacy alternatywa dla Adobe Illustrator.

Podstawowe narzedzia Inkscape:

  • Strzalka wyboru (S) - zaznaczanie, przesuwanie, skalowanie obiektow
  • Edycja wezlow (N) - modyfikacja ksztaltu sciezek przez przesuwanie wezlow
  • Prostokar (R) - rysowanie prostokatow i kwadratow
  • Elipsa (E) - rysowanie elips i okregov
  • Gwiazda (*) - rysowanie gwiazd i wielokatow foremnych
  • Olowek (P) - rysowanie sciezek odrecznie
  • Pioro Beziera (B) - rysowanie precyzyjnych krzywych Beziera
  • Tekst (T) - wstawianie i edycja tekstu
  • Gradient - tworzenie przejsc kolorow na obiektach

Operacje na obiektach w Inkscape:

  • Grupowanie (Ctrl+G) - laczenie obiektow w grupe
  • Wyrownywanie - ustawianie obiektow wzgledem siebie
  • Operacje logiczne - suma, roznica, czesc wspolna, wykluczenie ksztaltow
  • Klonowanie - tworzenie kopii powiazanych z oryginalem
Kiedy uzywac grafiki wektorowej? Logotypy, ikony, infografiki, plakaty, wizytowki, banery reklamowe, schematy techniczne, mapy - wszedzie tam, gdzie potrzebna jest skalowalnosc i ostre krawedzie.
✏️

Zadania

▼
Latwe

Zadanie 1: Proste ksztalty w Inkscape

Otworz Inkscape i utworz nowy dokument A4. Narysuj: (a) prostokar z zaokraglonymi rogami, (b) elipse z gradientem, (c) gwiazde 6-ramienna, (d) wielokat foremny (szesciokat). Kazdy obiekt powinien miec inny kolor wypelnienia i obrys. Wyeksportuj do SVG i PNG.

Pokaz rozwiazanie 
1. Plik > Nowy > A4
2. Prostokar (R): narysuj prostokar
   - Na gornym pasku: zaokraglenie Rx=20, Ry=20
   - Kliknij na palecie kolorow (dol ekranu): niebieski
   - Shift+klik na palecie: obrys czarny
3. Elipsa (E): narysuj elipse
   - Obiekt > Wypelnienie i obrys
   - Wypelnienie: gradient liniowy (zielono-zolty)
4. Gwiazda (*): w gornym pasku: Narozniki=6, Stosunek=0.5
   - Kolor czerwony, obrys bialy
5. Gwiazda (*): Narozniki=6, zaznacz "Wielokat"
   - Kolor pomaranczowy
6. Plik > Zapisz jako > ksztalty.svg
7. Plik > Eksportuj obraz PNG > ksztalty.png
Srednie

Zadanie 2: Projektowanie logotypu

Zaprojektuj logotyp fikcyjnej firmy (np. kawiarni, studia graficznego, sklepu). Logo powinno zawierac: element graficzny (symbol/ikone), nazwe firmy, uzycie co najmniej 2 kolorow. Uzyj operacji logicznych (Sciezka > Suma/Roznica) do tworzenia ciekawych ksztaltow.

Pokaz rozwiazanie 
Przyklad: Logo kawiarni "CoffeeArt"
1. Narysuj elipse (filizanka widziana z gory)
2. Narysuj mniejsza elipse wewnatrz (kawa)
3. Sciezka > Roznica - utworz ksztalt filizanki
4. Dodaj uchwyt z krzywej Beziera
5. Nad filizanka narysuj 3 faliste linie (para)
   - Uzyj piora Beziera, wygladz krzywe
6. Narzedzie Tekst: wpisz "CoffeeArt"
   - Czcionka: elegancka, np. bezszeryfowa
7. Wyrownaj wszystkie elementy na srodku
8. Zgrupuj (Ctrl+G)
9. Zapisz jako SVG
Srednie

Zadanie 3: Kod SVG recznie

Otworz edytor tekstu (np. Notatnik++) i napisz recznie kod SVG, ktory zawiera: (a) prostokat niebieski, (b) kolko czerwone nalozone na prostokat, (c) tekst "Moj SVG" na srodku. Zapisz plik z rozszerzeniem .svg i otworz go w przegladarce.

Pokaz rozwiazanie 
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
     width="400" height="300" viewBox="0 0 400 300">
  <!-- Tlo -->
  <rect width="400" height="300" fill="#f0f0f0"/>
  <!-- Niebieski prostokat -->
  <rect x="50" y="50" width="300" height="200"
        fill="#3498db" rx="10" ry="10"/>
  <!-- Czerwone kolko -->
  <circle cx="200" cy="150" r="80"
          fill="#e74c3c" opacity="0.7"/>
  <!-- Tekst -->
  <text x="200" y="160" text-anchor="middle"
        font-size="30" fill="white"
        font-family="Arial">Moj SVG</text>
</svg>

Zapisz jako: moj_svg.svg
Otworz w przegladarce Chrome/Firefox.
Trudne

Zadanie 4: Infografika wektorowa

Zaprojektuj w Inkscape infografike na temat "Grafika rastrowa vs wektorowa". Powinna zawierac: tytul, co najmniej 4 punkty porownawcze z ikonami, przyklad skalowania (pikselizacja vs gladkosc), schemat kolorystyczny max 4 kolory. Format: A4 pionowo.

Pokaz rozwiazanie 
1. Nowy dokument A4 (210x297mm)
2. Tytul: "Rastrowa vs Wektorowa" - duza czcionka
3. Podziel strone na 2 kolumny (linia w srodku)
4. Lewa kolumna - Rastrowa:
   - Ikona: siatka pikseli (male kwadraty)
   - Punkt 1: "Piksele" + opis
   - Punkt 2: "Zdjecia" + opis
   - Przyklad powiekszenia: pikselizacja
5. Prawa kolumna - Wektorowa:
   - Ikona: krzywe Beziera
   - Punkt 1: "Obiekty matematyczne" + opis
   - Punkt 2: "Logo, ikony" + opis
   - Przyklad powiekszenia: gladkie krawedzie
6. Na dole: tabela porownawcza
7. Schemat kolorow: #2c3e50, #3498db, #e74c3c, #ecf0f1
8. Eksportuj jako SVG i PDF
🎥

Materialy wideo

▼
GRAFIKA RASTROWA vs GRAFIKA WEKTOROWA
Grafikomaniak
Jak Przerobić Grafikę Rastrową w Wektorową | Illustrator
Patryk Bernat
🎧

Podcasty

▼
✔️

Quiz - sprawdz sie!

▼
📜

Podstawa programowa

▼
← Lekcja 31: Grafika rastrowa Lekcja 33: Modelowanie 2D i 3D →