GIMP

Edytor grafiki

Program wymagany przez CKE w standardzie wyposażenia pracowni egzaminacyjnej w kwalifikacji E.14. i EE.09. (darmowa alternatywa dla Adobe Photoshop) zawodu Technik informatyk oraz module ICDL/ECDL Edycja Obrazów.
Licencja:  GNU

Systemy:  Windows 7-10,
Strona programu: www.gimp.org

Modyfikowanie grafiki na potrzeby strony WWW

Tworząc stronę lub aplikację internetową często musimy wykonać proste operacje graficzne. Najczęściej dotyczą one zmiany rozmiaru i/lub korekty obrazu. Darmowy edytor GIMP swobodnie do tego wystarczy. Dziś mała ściągawka z typowych operacji wykorzystywanych przy przygotowaniu zdjęć, grafik lub zrzutów ekranowych.
Wykonaj poniższe ćwiczenia na przykładowych obrazach (możesz wykorzystać pliki darmowych grafik i zdjęć z serwisu pl.freeimages.com dawniej sxc.hu).

 Kadrowanie

1. Wybierz z przybornika narzędzie Kadrowanie.
2. Zaznacz prostokątny obszar obrazu i zatwierdź.

 Skalowanie

1. Z menu Obraz wybierz Skaluj obraz....
2. W oknie Skalowanie obrazu ustaw parametr (jeden, drugi zostanie dobrany automatycznie) Wysokość lub Szerokość i naciśnij przycisk Przeskaluj.

Obrót i odbicie

1. Z menu Obraz wybierz Przekształcenie i odpowiednią operację.
2. Wyeksportuj obraz. Z menu Plik wybierz Wyeksportuj do. W oknie Eksport obrazu wpisz nazwę pliku i określ lokalizację a następnie naciśnij przycisk Wybór typu pliku (Według rozszerzenia). Z listy Typ pliku wybierz odpowiedni format (zdjęcia: Obraz JPEG, grafika: Obraz PNG, animacja Obraz GIF). W kolejnym oknie naciśnij przycisk Wyeksportuj.

Dopełnienie obrazu

1. Z menu Obraz wybierz Wymiary Płótna....
2. W oknie Ustawienie wymiarów płótna obrazu ustaw: Szerokość i Wysokość, naciśnij przycisk Wyśrodkuj (opcjonalnie), zatwierdź przyciskiem Zmień rozmiar.
3. Ustaw kolor tła, który będzie kolorem dopełnienia.
4. Z menu Obraz wybierz Spłaszcz obraz.

Zadanie

1. Utwórz stronę internetową zawierającą zestawienie (porównanie) obrazów oryginalnych i przekształconych.

Modyfikowanie zdjęć na potrzeby strony WWW

Korekta

Retusz

1. Wybierz miękki pędzel.
2. Naciśnij przycisk Klonowanie.
3. Przytrzymaj klawisz Ctrl i kliknij miejsce źródła klonowania.
4. Klikając zamaluj obszar docelowy (unikaj pociągnięć).

Usuwanie czerwonych oczu

1. Wybierz Zaznaczanie eliptyczne i zaznacz obszar do korekty.
2. Z menu Filtry, z listy Uwydatnienie wybierz Usuwanie efektu czerwonych oczu....
3. W oknie ustaw parametr Próg i zatwierdź przyciskiem OK.

Głębia kolorów

1. Z menu Kolory wybierz Poziomy....
2. Ustaw Poziomy wejściowe po analizie histogramu (przesuń uchwyty czarnego i białego punktu i korekty Gamma) i naciśnij przycisk OK.
3. Korekta kolorów można wykonać wykorzystując funkcje automatyczne z menu Kolory wybierając z listy Automatycznie odpowiednią opcję lub ręcznie za pomocą Balans kolorów.

Zadanie

Utwórz stronę internetową zawierającą zestawienie (porównanie) obrazów oryginalnych i przekształconych.

Tło tonalne strony internetowej

Klasyczna metoda tworzenia tonalnego tła strony internetowej, polega na wykonaniu grafiki o 1px szerokości lub wysokości (w zależności od układu) i zdefiniowaniu stylu CSS, który ten motyw powtórzy.
Przykład 1

1. Uruchom edytor graficzny GIMP.
2. Z menu Plik wybierz Nowy.
3. W oknie Utworzenie nowego obrazu ustaw atrybuty Szerokość i Wysokość na 100 px i zaakceptuj przyciskiem OK.
   
4. Na przyborniku kliknij przycisk Gradient a oknie dokowanym Edytor gradientów.
5. Kliknij przycisk koloru aktywnego i ustaw jego wartość na rgb(51, 51, 51).
6. Kliknij przycisk koloru tła i ustaw jego wartość na rgb(204,204,204).
7. Wypełnij (przeciągnij myszką pionowo) gradientem obraz.
8. Z menu Obraz wybierz Wymiary płótna... i ustaw szerokość na 1px.
9. Wyeksportuj obraz do pliku tlo1.png.
   
10. Utwórz plik strony internetowej p1.html i zdefiniuj styl CSS definiujący tło:
    body {
    background: url(tlo1.png) repeat-x rgb(204,204,204);
    }

Zadanie

Wykonaj  grafikę, która będzie motywem tła strony internetowej z wykorzystaniem powtarzania pionowego. Sprawdź efekt na przykładowej stronie.

Teoria
Tło i obramowanie w CSS3

Kształty i figury geometryczne

Przykład 1

1. Uruchom edytor graficzny GIMP.
2. Z menu Plik wybierz Nowy.
3. W oknie Utworzenie nowego obrazu ustaw atrybuty Szerokość 300 px i Wysokość na 100 px i zaakceptuj przyciskiem OK.
4. Używając różnych narzędzi zaznaczania  utwórz kształty i figury geometryczne z wykorzystaniem opcji z menu Edycja i różnych parametrów narzędzia Rysuj wzdłuż zaznaczenia (jeśli kompozycja tego wymaga włącz przyciąganie do siatki i ustal jej parametry).
5. Wyeksportuj obraz do pliku figury.png.
6. Opublikuj plik na stronie internetowej:
   <img src="figury.png" width="300" height="100" alt="Kształty i figury">

 Zadanie

Wykonaj  grafikę (inną niż prostokąt) z przezroczystym tłem. Efekt opublikuj na przykładowej stronie z tłem tonalnym.

Teoria

http://plotkarka.eu/PI/html5/obrazy.html

Wielkość ma znaczenie

Facebook

Zdjęcie w tle

Jakie są wymiary zdjęcia profilowego i zdjęcia w tle strony?

Zadanie

1. Utwórz zdjęcie w tle o rozmiarze 849 x 313 (wykonaj podstawowe operacje skalowanie, kadrowanie i inne z zależności od potrzeb).
2. Zapisz w pliku w formacie JPG.
3. Opcjonalnie  opublikuj pliki w serwisie społecznościowym.

Grafika posta

Obrazy w serwisie Facebook mogą być maksymalną szerokość 476 px. O ile jest to możliwe warto przyjąć taką wysokość (kadrowanie w kwadracie miniatur).

Zadanie

1. Utwórz grafikę o rozmiarze 476 x 476 (wykonaj podstawowe operacje skalowanie, kadrowanie i inne z zależności od potrzeb).
2. Zapisz w pliku w formacie PNG.
3. Opcjonalnie  opublikuj pliki w serwisie społecznościowym.

Rozmiar ma znaczenie

Korzystając z serwisów społecznościowych, aplikacji internetowych często musimy przygotować zdjęcie profilowe, które będzie identyfikować naszą osobę. Obrazy te są skalowane i prezentowane w różnych rozdzielczościach (rozmiarach), czasem są kadrowane w kole.

Ikona strony

Favicon

Ikona strony wyświetlana przed tytułem zakładki (okna), historii przeglądanych stron, ulubionych, w wynikach wyszukiwania,  spełnia ważną rolę w identyfikacji. Jest to mały obraz o rozdzielczości 16x16 piksela, najczęściej w formacie PNG.
Wykonamy ikonę w technice pixel art z przezroczystym tłem.

Jak to się robi z modelką

czyli retusz fotografii  z wykorzystaniem warstw w edytorze GIMP

Pierwszym krokiem, który musimy wykonać to dokonanie wstępnej obróbki dotyczącej zmian rozmiaru i korekty, które zostały opisane w poprzednim wpisie (Modyfikowanie grafiki na potrzeby strony WWW).
Wartości  zawarte w przykładach należy zmodyfikować w zależności od zdjęcia i efektu, który chcemy uzyskać.
Oczywiście obowiązuje zasada "znaj umiar".

Animacja GIF

 z wykorzystaniem edytora GIMP

Animacje w formacie GIF są wykorzystywane do tworzenia ikon, przycisków, niewielkich banerów reklamowych i innych elementów animowanych strony internetowej.
Ponieważ animacja GIF może być publikowana w plikach poczty elektronicznej (np. E-mail marketing) i w portalu społecznościowym G+ (grafika w tle, wpisy), format ten przeżywa mały renesans.
Do poznania zasad jej tworzenia posłużymy się edytorem GIMP i poznanymi w poprzednich lekcjach umiejętnościami.

Przygotowanie plików przejść

1. Nasza animacja będzie wykorzystywać efekt przenikania do którego należy przygotować minimum 3 obrazy o takim sam rozmiarze.
2. Można przygotować mniejszą ilość obrazów, powielić warstwy i zastosować efekty edytora.

Przygotowanie animacji

1. Otwórz pierwszy obraz.
2. Kolejne obrazy otwórz w następujący sposób. Z menu Plik wybierz Otwórz jako warstwy... i wybierz obraz.
3. W oknie warstw uporządkuj kolejność (przyciski strzałek) i wykonaj korektę jeśli to konieczne.

Tworzenie i testowanie animacji

1. Z menu Filtry wybierz Animacja i efekt Przenikanie....
2. W oknie Przenikanie ustaw parametry animacji i zaakceptuj przyciskiem OK.
3. Z menu Filtry wybierz Animacja i opcję Odtwarzanie....
4. W oknie Odtwarzanie animacji ustaw parametry i zaakceptuj przyciskiem Odtwarzaj.

Eksportowanie i publikowanie

1.  Wyeksportuj obraz. Z menu Plik wybierz Wyeksportuj do. W oknie Eksport obrazu wpisz nazwę pliku i określ lokalizację a następnie naciśnij przycisk Wybór typu pliku (Według rozszerzenia). Z listy Typ pliku wybierz odpowiedni format Obraz GIF.
2. W oknie Eksport obrazu jako GIF zaznacz Jako animacja, ustaw parametry i naciśnij przycisk Wyeksportuj.
3. Otwórz animację w przeglądarce internetowej. Jeśli uzyskałeś oczekiwany efekt opublikuj animację na stronie internetowej.

Zadanie

 Utwórz:

• ikonę animowaną wykorzystując efekty edytora,
• logo animowane z przejściami wersji kolorystycznych,
• animację pokazującą kolejne kroki retuszu fotografii.

Opublikuj animacje na stronie internetowej.

Szparowanie

Technika szparowania

Szparowanie to precyzyjne wyodrębnienie fragmentu obrazu (zdjęcia, grafiki rastrowej).
Zaawansowane edytory grafiki posiadają narzędzia do automatycznej selekcji, które nie zawsze się sprawdzają. Dlatego w trudniejszych przypadkach trzeba zastosować odpowiednie techniki precyzyjnego szparowania. Efekt wykorzystuje się do tworzenia fotomontaży.

Przepisy na napisy

Kontynuując naszą przygodę z grafiką nauczymy się dziś jak pracować z narzędziem Tekst służącego do tworzenia tekstu ozdobnego i akapitowego. Zobaczymy co można uzyskać za pomocą efektów i innych funkcji edytora tworząc napisy ozdobne.
Należy pamiętać, aby tworząc tekst akapitowy nie używać w nim przekształceń i ozdobników. W szczególności dotyczy to nazw, danych kontaktowych oraz ważnych  informacji.