Inkscape i obróbka obrazów: lekcja i ćwiczenia

Grafika wektorowa czy rastrowa

To najważniejsze rozróżnienie w całym temacie. Od niego zależy, którego programu użyjesz i w jakim formacie zapiszesz plik.

Wektorowa (Inkscape)

Obraz to opis kształtów: "koło o takim środku i promieniu, wypełnione tym kolorem". Program liczy go na nowo przy każdym powiększeniu, więc zawsze jest ostry.

Dobra do: logo, ikon, przycisków, bannerów, diagramów.
Formaty: SVG.

Rastrowa (GIMP)

Obraz to siatka kolorowych punktów, czyli pikseli. Powiększenie ponad rozmiar oryginału rozmywa go lub pokazuje kwadraciki.

Dobra do: zdjęć i obrazów z bogatymi przejściami kolorów.
Formaty: JPG, PNG, WEBP, BMP.

Praktyczna reguła: logo rysuj w wektorze, a dla strony wyeksportuj do PNG w potrzebnym rozmiarze. Zdjęć nie da się sensownie zamienić na wektor.

Piksele, rozdzielczość i DPI

Wymiary w pikselach (np. 1024 x 768) mówią, ile punktów ma obraz. To jedyna liczba, która ma znaczenie na ekranie i na stronie WWW.
DPI (punkty na cal) ma znaczenie przy druku: to samo zdjęcie 3000 x 2000 px wydrukowane w 300 DPI ma 25 x 17 cm, a w 72 DPI ponad 105 x 70 cm i wyglądałoby na ziarniste.
Zmiana rozmiaru w dół (zmniejszanie) jest w porządku. W górę program musi zgadywać brakujące piksele, więc obraz traci jakość.
Proporcje (np. 4:3) to stosunek szerokości do wysokości. Zmiana rozmiaru bez zachowania proporcji rozciąga obraz. Dlatego najpierw przycinamy do właściwych proporcji, dopiero potem skalujemy.

Formaty plików

Format	Kompresja	Przezroczystość	Kiedy używać
`SVG`	wektor, plik to tekst	tak	logo, ikony, przyciski. Skaluje się bez utraty jakości
`JPG`	stratna	nie	zdjęcia. Im wyższa jakość, tym większy plik. Każdy kolejny zapis pogarsza obraz
`PNG`	bezstratna	tak	grafiki z ostrymi krawędziami, zrzuty ekranu, logo na stronie
`WEBP`	stratna albo bezstratna	tak	strony WWW. Zwykle mniejszy od JPG i PNG przy podobnej jakości
`BMP`	brak	zwykle nie	praktycznie nigdy w internecie. Plik jest ogromny
`XCF`	brak	tak	projekt GIMP z warstwami, do dalszej edycji

Zapis kontra eksport. W obu programach "Zapisz" tworzy plik projektu (SVG Inkscape albo XCF w GIMP), do którego wrócisz i dalej edytujesz. Plik do publikacji (PNG, JPG, WEBP) powstaje przez Eksportuj. Zawsze zachowaj plik projektu, bo z PNG nie odtworzysz warstw.

Skróty klawiszowe

Skróty potrafią przyspieszyć pracę kilkukrotnie. Poniżej te, które przydadzą się w ćwiczeniach. W różnych wersjach programu nazwy menu mogą się nieco różnić, ale skróty są stałe.

Inkscape

`S`	zaznaczanie
`R` / `E`	prostokąt / elipsa
`B`	pióro (krzywe i linie)
`T`	tekst
`G`	gradient
`Ctrl`+`Shift`+`F`	Wypełnienie i kontur
`Ctrl`+`Shift`+`M`	Przekształcenia
`Ctrl`+`Shift`+`A`	Wyrównanie
`Ctrl`+`Shift`+`L`	Warstwy i obiekty
`Ctrl`+`Shift`+`D`	Właściwości dokumentu
`Ctrl`+`Shift`+`E`	Eksport
`Ctrl`+`D` / `Ctrl`+`G`	powiel / grupuj
`Ctrl`+`Shift`+`C`	zamień obiekt na ścieżkę

GIMP

`Shift`+`C`	narzędzie Kadrowanie
`Ctrl`+`Shift`+`E`	Eksportuj jako
`Ctrl`+`Z` / `Ctrl`+`Y`	cofnij / ponów
`Ctrl`+`Shift`+`J`	dopasuj obraz do okna
`1`	powiększenie 100%
Skala obrazu, Poziomy, Wyostrzanie i Barwa-Nasycenie są w menu Obraz, Kolory i Filtry.

Podstawowe operacje edytorskie

Inkscape

Cel: nauka rysowania podstawowych kształtów i ich modyfikacji.

Uruchom Inkscape i utwórz nowy dokument.
Narysuj prostokąt (R), koło (E, przeciągnij z klawiszem Ctrl, żeby wyszło idealne koło) i linię (B: kliknij w punkt początkowy, kliknij w końcowy, zatwierdź Enter).
Zaznacz kształt narzędziem S i otwórz Wypełnienie i kontur (Ctrl+Shift+F). Na zakładce Wypełnienie zmień kolor wnętrza, na zakładce Kolor konturu kolor obrysu.
Na zakładce Styl konturu zmień grubość linii (na przykład 1 px, 4 px, 10 px) dla każdego obiektu. Linia bez konturu jest niewidoczna, więc upewnij się, że ma ustawiony kolor konturu.
Przekształć figury: skaluj uchwytami (z Ctrl zachowasz proporcje), kliknij obiekt drugi raz, żeby pokazać uchwyty obrotu i pochylenia, albo użyj okna Przekształcenia (Ctrl+Shift+M) z dokładnymi wartościami.

Na co uważać: prostokąt i koło to obiekty z własnymi parametrami (promień, zaokrąglenie). Po zamianie na ścieżkę traci się te parametry, więc rób to dopiero na końcu.

Zapisz projekt jako: kształty.svg (Ctrl+Shift+S, typ Inkscape SVG). Bezpieczniejsze na serwerach są nazwy bez polskich znaków, np. ksztalty.svg. Ustal z nauczycielem, którą wersję oddajesz.

Sprawdź się

Są trzy różne kształty: prostokąt, koło i linia. Każdy ma inny kolor wypełnienia i konturu. Grubości linii wyraźnie się różnią. Co najmniej jeden kształt jest przeskalowany, obrócony i pochylony.

Dodatkowo: w narzędziu prostokąta ustaw w pasku u góry Rx i Ry, żeby zaokrąglić rogi. Przyda się w ćwiczeniu 4.

Korzystanie z warstw

Inkscape

Cel: poznanie organizacji grafiki przy pomocy warstw.

Warstwy działają jak przezroczyste kartki ułożone jedna na drugiej. Wyższa zasłania niższą, a każdą można ukryć, zablokować i edytować osobno. Dzięki temu poprawiasz tło, nie ruszając napisu.

Utwórz nowy dokument i otwórz panel Warstwy i obiekty (Ctrl+Shift+L).
Dodaj warstwę: menu Warstwa → Dodaj warstwę. Utwórz trzy: Tło, Obiekty, Tekst. Kolejność w panelu jest kolejnością nakładania: Tło na dole, Tekst na górze.
Zaznacz warstwę w panelu i rysuj na niej: na Tło duży prostokąt, na Obiekty kilka kształtów, na Tekst napis (T).
Przy nazwie każdej warstwy kliknij ikonę oka (ukryj) i kłódki (zablokuj). Ukryj Obiekty, potem zablokuj Tło i spróbuj je zaznaczyć.
Przenieś obiekt na inną warstwę: zaznacz go i użyj Shift+Page Up albo Shift+Page Down.

Na co uważać: rysujesz zawsze na warstwie aktualnie zaznaczonej w panelu. Najczęstszy błąd to napis narysowany na warstwie Tło.

Zapisz projekt jako: warstwy.svg

Sprawdź się

Mam trzy warstwy o właściwych nazwach i w dobrej kolejności. Każda zawiera odpowiednie elementy. Umiem powiedzieć, co zmienia ukrycie, a co zablokowanie warstwy.

Dodatkowo: zmień kolejność warstw tak, żeby tło zasłaniało resztę, i zaobserwuj efekt.

Tworzenie banneru promocyjnego

Inkscape

Cel: zaprojektowanie banneru z tekstem i grafiką.

Otwórz Właściwości dokumentu (Ctrl+Shift+D). Jednostkę ustaw na px i wpisz wymiary 800 x 200.
Narysuj prostokąt na całą stronę jako tło. Najprościej ustawić mu w oknie Przekształcenia pozycję 0, 0 i rozmiar 800 x 200. Wypełnij go gradientem (G albo zakładka Wypełnienie → gradient liniowy).
Dodaj tekst hasła (T): krótki, duży, o wyraźnym kontraście z tłem. Dołóż 1 lub 2 elementy graficzne (kształty, ikona).
Cień: zaznacz tekst i wybierz Filtry → Cienie i poświaty → Cień. Nie przesadzaj, cień ma podkreślać, a nie zamazywać.
Wyrównaj elementy w oknie Wyrównanie (Ctrl+Shift+A).

Na co uważać: zanim wyślesz SVG komuś, kto nie ma Twojej czcionki, zaznacz tekst i zamień na ścieżki (Ścieżka → Obiekt na ścieżkę, Ctrl+Shift+C). Inaczej napis zmieni krój. Zrób to na kopii pliku, bo tekst przestanie być edytowalny.

Zapisz jako: banner_promocja.svg
Eksportuj do PNG: Ctrl+Shift+E, zakres Strona, 96 DPI daje dokładnie 800 x 200 px. Dla ekranów o dużej gęstości pikseli wyeksportuj drugą wersję w 192 DPI (1600 x 400 px).

Sprawdź się

Dokument ma 800 x 200 px, a PNG ma te same wymiary. Tekst jest czytelny na tle. Jest cień lub inny efekt, ale banner nie jest przeładowany. Mam zapisany SVG (projekt) i osobny PNG (do publikacji).

Projektowanie przycisków

Inkscape

Cel: stworzenie zestawu przycisków wektorowych.

Utwórz nowy dokument. Narysuj prostokąt (R) i w pasku u góry ustaw zaokrąglenie rogów (Rx i Ry, na przykład 12).
Wypełnij go gradientem liniowym od jaśniejszego do ciemniejszego odcienia tego samego koloru. Dodaj cienki kontur.
Napisz tekst „Start” (T) i wyśrodkuj go względem przycisku w oknie Wyrównanie: zaznacz oba obiekty, ustaw Względem: Ostatnio zaznaczony, kliknij wyśrodkowanie w poziomie i w pionie.
Zgrupuj przycisk z napisem (Ctrl+G), powiel (Ctrl+D) i przesuń kopię. Zmień tekst na „Kontakt”, potem „Więcej”. Powielanie gwarantuje, że wszystkie przyciski mają identyczny rozmiar.
Ustaw trzy przyciski w równych odstępach (Wyrównanie → rozmieść równomiernie).

Na co uważać: każdy przycisk to grupa. Jeśli chcesz zmienić tekst w środku, kliknij dwukrotnie grupę, żeby do niej wejść, albo użyj narzędzia tekstu bezpośrednio na napisie.

Zapisz jako: przyciski.svg
Eksportuj do PNG (Ctrl+Shift+E, zakres Zaznaczenie albo Rysunek).

Sprawdź się

Trzy przyciski mają ten sam rozmiar i zaokrąglenie. Napisy są dokładnie na środku. Gradient jest subtelny, a tekst czytelny.

Dodatkowo: zrób drugi zestaw w stanie "po najechaniu myszką" (ciemniejszy gradient). Tak wyglądają przyciski na prawdziwych stronach.

Zestaw przycisków — Przykładowe przyciski:

Podstawowe operacje na obrazach

GIMP

Cel: nauka przycinania, zmiany rozmiaru i zapisu pliku.

Otwórz zdjęcie w GIMP (Plik → Otwórz). Oryginału nigdy nie nadpisuj, wszystko zapisuj pod nową nazwą.
Wybierz Kadrowanie (Shift+C). W opcjach narzędzia zaznacz Stałe i wpisz proporcje 4:3. Zaznacz główny motyw i zatwierdź Enter.
Zmień rozmiar: Obraz → Skalowanie obrazu. Wpisz szerokość 1024 i wysokość 768. Jeśli po przycięciu do 4:3 łańcuszek przy wymiarach jest zamknięty, wysokość ustawi się sama.
W polu Interpolacja zostaw Sześcienna (dobra jakość przy zmniejszaniu) i kliknij Skaluj.
Wyeksportuj: Plik → Eksportuj jako (Ctrl+Shift+E), nazwa z rozszerzeniem .jpg, jakość około 85-90.

Dlaczego najpierw przycinamy do 4:3: 1024 x 768 to proporcje 4:3. Gdyby zdjęcie miało inne proporcje (np. 3:2 z aparatu) i odblokowano by łańcuszek, obraz zostałby rozciągnięty. Przycięcie do właściwych proporcji przed skalowaniem to pewny sposób na uniknięcie zniekształceń.

Zapisz jako: zdjecie_edycja.jpg

Sprawdź się

Wynik ma dokładnie 1024 x 768 px (Obraz → Skalowanie obrazu pokaże wymiary). Nic nie jest rozciągnięte ani spłaszczone. Oryginał jest nienaruszony.

Techniki poprawy zdjęć

GIMP

Cel: poprawa jakości zdjęcia.

Otwórz w GIMP rozmazane lub nijakie zdjęcie.
Poziomy: Kolory → Poziomy, kliknij przycisk Auto. GIMP ustawi zakres jasności tak, żeby wykorzystać cały zakres od czerni do bieli. Alternatywnie Kolory → Auto → Rozciągnij kontrast.
Ostrość: Filtry → Wzmocnienie → Wyostrzanie (maska wyostrzająca). Zwiększaj wartości małymi krokami, patrząc na powiększenie 100% (klawisz 1).
Nasycenie: Kolory → Barwa-Nasycenie, podnieś suwak Nasycenie umiarkowanie.
Porównaj przed i po: Ctrl+Z cofa, Ctrl+Y przywraca. W oknach filtrów pole Podgląd włącza i wyłącza efekt.

Na co uważać: wyostrzanie nie odtwarza szczegółów, których nie ma, tylko wzmacnia kontrast krawędzi. Przy zbyt mocnych ustawieniach wokół krawędzi pojawiają się jasne obwódki. Mocno poruszonego zdjęcia nie da się uratować. Za mocne nasycenie daje nienaturalne, "plastikowe" kolory, zwłaszcza na skórze.

Zapisz jako: poprawa.jpg

Sprawdź się

Zdjęcie ma pełny zakres jasności (nie jest szare ani wyprane). Krawędzie są wyraźniejsze, ale bez obwódek. Kolory są żywsze, ale naturalne.

Dodatkowo: wykonaj te same operacje w odwrotnej kolejności i porównaj wynik. Zwykle najpierw poprawia się poziomy, a wyostrza na końcu.

Zdjęcie po poprawie — Poprawione zdjęcie:

Konwersja formatów

GIMP

Cel: konwersja zdjęcia do różnych formatów i porównanie ich rozmiarów.

Otwórz obraz JPG w GIMP.
Wybierz Plik → Eksportuj jako (Ctrl+Shift+E). Zmień rozszerzenie nazwy na .png, kliknij Eksportuj i zatwierdź domyślne ustawienia.
Powtórz dla .bmp i .webp. Przy WEBP zostaw jakość na około 85.
W menedżerze plików sprawdź rozmiar każdego pliku (właściwości pliku) i wpisz go do tabeli poniżej.

Pliki: obrazek.png, obrazek.bmp, obrazek.webp

Plik	Rozmiar (KB)	Jaka część rozmiaru BMP
oryginał (JPG)		-
obrazek.png		-
obrazek.bmp		-
obrazek.webp		-

Na co uważać: rozmiary zależą od zdjęcia i ustawień jakości, więc u każdego wyjdą inne liczby. Zwykle BMP jest największy (bez kompresji), a WEBP bywa najmniejszy. Jeśli u Ciebie wyszło inaczej, sprawdź, czy przy eksporcie nie zmienił się poziom kompresji.

Odpowiedz w zeszycie

Dlaczego BMP jest tak duży? Którego formatu użyjesz do zdjęcia na stronie WWW i dlaczego? Którego użyjesz do logo z przezroczystym tłem? Co się stanie z jakością, jeśli JPG zapiszesz kilka razy pod rząd?