Strona 1

Baner witryny 33 i 1/3

2008-02-27 20:03:51

http://www.gajdaw.pl/gimp/baner-witryny-33-i-1-3/print.html

Baner witryny 33 i 1/3

Włodzimierz Gajda

Baner witryny 33 i 1/3 składa się z kilku wyciętych okładek płyt, jednej dużej płyty oraz kilku napisów. W projekcie

tym opowiem między innymi, w jaki sposób szybko i łatwo możesz wyciąć elementy z fotografii przedstawiających

przedmioty na jasnym tle.

1 lipca 2006 r.

Spis treści

1. Fotografie, od jakich rozpoczynamy oraz gotowy baner

2. Etap 1: wycinanie

3. Etap 2: elementy i napisy

4. Etap 3: wtopienie banera w białe tło

1. Fotografie, od jakich rozpoczynamy oraz gotowy baner

Rysunek 1. Otrzymujemy ten obraz

Strona 2

Baner witryny 33 i 1/3

2008-02-27 20:03:51

http://www.gajdaw.pl/gimp/baner-witryny-33-i-1-3/print.html

Strona 3

Baner witryny 33 i 1/3

2008-02-27 20:03:51

http://www.gajdaw.pl/gimp/baner-witryny-33-i-1-3/print.html

Rysunek 2. Zaczynamy od tych obrazĂłw

2. Etap 1: wycinanie

Pierwszym etapem pracy jest wycięcie elementów potrzebnych do przygotowania banera. Zadanie to omówię na

przykładzie okładki płyty Fleetwood Mac.

Otwórz plik

fleetwood-mac.jpg

.

Strona 4

Baner witryny 33 i 1/3

2008-02-27 20:03:51

http://www.gajdaw.pl/gimp/baner-witryny-33-i-1-3/print.html

Rysunek 3.

Wykonaj filtr, który automatycznie modyfikuje poziomów kolorów fotografii. Po wybraniu opcji Warstwa | Kolory |

Poziomy kolorów kliknij przycisk Automatycznie. Przycisk ten jest zaznaczony na ilustracji.

Strona 5

Baner witryny 33 i 1/3

2008-02-27 20:03:51

http://www.gajdaw.pl/gimp/baner-witryny-33-i-1-3/print.html

Rysunek 4.

Otrzymasz zdjęcie, którego kolorystyka jest bardziej kontrastowa.

Strona 6

Baner witryny 33 i 1/3

2008-02-27 20:03:51

http://www.gajdaw.pl/gimp/baner-witryny-33-i-1-3/print.html

Rysunek 5.

Teraz wykonaj duplikat warstwy o nazwie Tło. W oknie warstw (skrót: Ctrl+L) naciśnij przycisk Utworzenie

duplikatu warstwy. W obrazie pojawi się nowa warstwa o nazwie kopia : Tło.

Strona 7

Baner witryny 33 i 1/3

2008-02-27 20:03:51

http://www.gajdaw.pl/gimp/baner-witryny-33-i-1-3/print.html

Rysunek 6.

Teraz na duplikacie, czyli na warstwie o nazwie kopia : Tło wykonaj filtr Rozmycie Gaussa o parametrach 5. Po

wywołaniu opcji Filtry | Rozmycie | Rozmycie Gaussa ustal parametry tak, jak to pokazano na poniższej ilustracji.

Strona 8

Baner witryny 33 i 1/3

2008-02-27 20:03:51

http://www.gajdaw.pl/gimp/baner-witryny-33-i-1-3/print.html

Rysunek 7.

Otrzymasz obraz, w którym kontury są nieco rozmyte.

Strona 9

Baner witryny 33 i 1/3

2008-02-27 20:03:51

http://www.gajdaw.pl/gimp/baner-witryny-33-i-1-3/print.html

Rysunek 8.

Wybierz teraz narzędzie do zaznaczania sąsiadujących obszarów.

Strona 10

Baner witryny 33 i 1/3

2008-02-27 20:03:51

http://www.gajdaw.pl/gimp/baner-witryny-33-i-1-3/print.html

Rysunek 9.

Kliknij podwójnie w ikonę narzędzia w oknie głównym GIMP-a, a następnie zmień próg na 15.

Rysunek 10.

Jeśli teraz klikniesz w biały obszar zdjęcia, to zaznaczony zostanie bardzo duży biały obszar. Wyjątkami będą

wyłącznie narożniki. Przytrzymując na klawiaturze klawisz Shift klikaj narzędziem w białe, niezaznaczone obszary

fotografii. Postępuj tak dotąd, aż zaznaczony zostanie cały biały obszar otaczający zdjęcie.

Zaznaczanie to ma być oczywiście wykonane na rozmytej warstwie. Dzięki rozmyciu, zaznaczone obszary nie będą

zawierały malutkich dziur, a zaznaczony kształt będzie dość gładki, a nie poszarpany.

Strona 11

Baner witryny 33 i 1/3

2008-02-27 20:03:51

http://www.gajdaw.pl/gimp/baner-witryny-33-i-1-3/print.html

Rysunek 11.

Przy zaznaczeniu pomocnym może się okazać powiększenie widoku zdjęcia przy pomocy przycisku +. Do

pomniejszania służy przycisk -.

Strona 12

Baner witryny 33 i 1/3

2008-02-27 20:03:51

http://www.gajdaw.pl/gimp/baner-witryny-33-i-1-3/print.html

Rysunek 12.

Z narzędzia do zaznaczania sąsiadujących obszarów korzystamy — w połączeniu z klawiszem Shift — aż do

momentu, gdy zaznaczymy cały biały obszar zdjęcia.

Strona 13

Baner witryny 33 i 1/3

2008-02-27 20:03:51

http://www.gajdaw.pl/gimp/baner-witryny-33-i-1-3/print.html

Rysunek 13.

Teraz odwróć zaznaczenie (Zaznaczenie | Odwróć; skrót: Ctrl+I). Następnie zmniejsz o 10 pikseli (Zaznaczenie |

Zmniejsz). Na koniec zaokrągl, podając jako parametr 5 pikseli (Zaznaczenie | Zaokrągl).

W ten sposób otrzymasz zaznaczoną okładkę płyty. Dzięki zaokrągleniu, zaznaczenie będzie miało miękki brzeg.

Strona 14

Baner witryny 33 i 1/3

2008-02-27 20:03:51

http://www.gajdaw.pl/gimp/baner-witryny-33-i-1-3/print.html

Rysunek 14.

Przechodzimy do skopiowania zaznaczenia. Zmień warstwę aktywną na warstwę Tło.

Strona 15

Baner witryny 33 i 1/3

2008-02-27 20:03:51

http://www.gajdaw.pl/gimp/baner-witryny-33-i-1-3/print.html

Rysunek 15.

Skopiuj zaznaczenie z bieżącej warstwy do schowka (Ctrl+C), po czym wklej je, umieszczając w nowym obrazie

(Edycja | Wklej jako nowy).

Strona 16

Baner witryny 33 i 1/3

2008-02-27 20:03:51

http://www.gajdaw.pl/gimp/baner-witryny-33-i-1-3/print.html

Rysunek 16.

W obrazie tym zaznacz wszystkie nieprzezroczyste piksele. Służy do tego operacja Kanał alfa na zaznaczenie,

dostępna w menu kontekstowym warstwy w oknie warstw.

Strona 17

Baner witryny 33 i 1/3

2008-02-27 20:03:51

http://www.gajdaw.pl/gimp/baner-witryny-33-i-1-3/print.html

Rysunek 17.

W obrazie zaznaczona zostanie cała okładka płyty. Obraz ten poza okładką płyty nie zawiera niczego, nawet tła.

Można się o tym przekonać powiększając widok.

Strona 18

Baner witryny 33 i 1/3

2008-02-27 20:03:51

http://www.gajdaw.pl/gimp/baner-witryny-33-i-1-3/print.html

Rysunek 18.

Otrzymany obraz zapisz w pliku

fleetwood-mac.xcf

. Obraz taki jest bardzo wygodny w użyciu. Ilekroć

będziesz potrzebował okładki płyty Fleetwood Mac wystarczy, że otworzysz plik

fleetwood-mac.xcf

i

wykonasz operację kopiowania do schowka.

Opisana metoda wykorzystuje rozmywanie Gaussa do usunięcia małych dziurek w zaznaczonym obrazie oraz do

wygładzenia kształtu selekcji. Spróbuj poeksperymentować zmieniając stopień rozmycia oraz próg narzędzia do

zaznaczania sąsiadujących obszarów. W przypadku fotografii zawierających jednolite, wyraźne tło metoda taka

sprawdza się doskonale.

W identyczny sposób przygotuj wycięte fragmenty z pozostałych sześciu ilustracji. Wycięte fragmenty zapisuj zawsze

w plikach o maksymalnej rozdzielczości. Jeżeli potrzebny będzie wycięty element mniejszych rozmiarów, to

Strona 19

Baner witryny 33 i 1/3

2008-02-27 20:03:51

http://www.gajdaw.pl/gimp/baner-witryny-33-i-1-3/print.html

wystarczy wykonać skalowanie. Odwrotne przekształcenie — z małej fotografii duży element — jest o wiele bardziej

trudne.

3. Etap 2: elementy i napisy

Utwórz nowy biały obraz o wymiarach 780×140.

Rysunek 19.

Do obrazu tego wklej sześć okładek płyt. Okładki te umieść na nowych warstwach. Przed wklejeniem przeskaluj je

do szerokości 100 pikseli.

Rysunek 20.

Korzystając z narzędzia do przesuwania warstw wklejone miniaturki okładek ułóż w lewym górnym narożniku.

Strona 20

Baner witryny 33 i 1/3

2008-02-27 20:03:51

http://www.gajdaw.pl/gimp/baner-witryny-33-i-1-3/print.html

Rysunek 21.

Zmień nazwy warstw. Nazwij je zgodnie z nazwami wykonawców płyt. Warstwę, na której znajduje się okładka

płyty The Beatles (odczytana z pliku

the-beatles.xcf

przygotowanego procedurą opisaną w etapie pierwszym z

pliku

the-beatles.jpg

) nazwij the beatles.

Strona 21

Baner witryny 33 i 1/3

2008-02-27 20:03:51

http://www.gajdaw.pl/gimp/baner-witryny-33-i-1-3/print.html

Rysunek 22.

Teraz wklej wycięte zdjęcie płyty. Zdjęcie to przed wklejeniem przeskaluj do szerokości 800 pikseli.

Rysunek 23.

Wybierz narzędzie do zmiany perspektywy.

Rysunek 24.

Strona 22

Baner witryny 33 i 1/3

2008-02-27 20:03:51

http://www.gajdaw.pl/gimp/baner-witryny-33-i-1-3/print.html

Narzędziem tym zmień perspektywę warstwy z powiększonym zdjęciem płyty. Punkty sterujące zmianą perspektywy

ustaw zgodnie z poniższym wzorem.

Rysunek 25.

Warstwę ze zdjęciem płyty przemieść na samą górę w oknie warstw, tak, by przysłaniało ono okładki płyt. Przesuń je

na prawo.

Rysunek 26.

Dodaj do obrazu napis 33 i 1/3 wykonany dużymi literami koloru białego.

Strona 23

Baner witryny 33 i 1/3

2008-02-27 20:03:51

http://www.gajdaw.pl/gimp/baner-witryny-33-i-1-3/print.html

Rysunek 27.

W oknie warstw wykonaj operację przekształcania napisu 33 i 1/3 w zaznaczenie. Wykorzystaj poznaną już operację

Kanał alfa na zaznaczenie.

Następnie zaznaczenie powiększ o 6 pikseli i zaokrągl o 3. Tak otrzymane zaznaczenie wypełnij kolorem

czerwonym na nowej warstwie.

Rysunek 28.

Warstwa z kolorem czerwonym musi oczywiście znajdować się poniżej warstwy z białym tekstem 33 i 1/3.

Strona 24

Baner witryny 33 i 1/3

2008-02-27 20:03:51

http://www.gajdaw.pl/gimp/baner-witryny-33-i-1-3/print.html

Rysunek 29.

Teraz do obrazu dodaj czarny napis Katalog Płyt Różnych oraz trzy białe napisy: 33 i 1/3, 45 oraz 78.

Rysunek 30.

Strona 25

Baner witryny 33 i 1/3

2008-02-27 20:03:51

http://www.gajdaw.pl/gimp/baner-witryny-33-i-1-3/print.html

W ten sposób baner jest niemalże skończony. Pozostało jedynie wtopienie go w białe tło.

4. Etap 3: wtopienie banera w białe tło

Zmień widoczność warstw. Ukryj białe tło oraz czarny napis Katalog płyt różnych.

Rysunek 31.

Magiczną różdżką do zaznaczania sąsiadujących obszarów kliknij w szachownicę reprezentującą obszar

przezroczysty. Zaznaczeniu ulegnie cały obszar przezroczysty.

Rysunek 32.

Teraz zaznaczenie odwróć a następnie:

zmniejsz o 5,

zaokrągl o 30,

Strona 26

Baner witryny 33 i 1/3

2008-02-27 20:03:51

http://www.gajdaw.pl/gimp/baner-witryny-33-i-1-3/print.html

wyostrz (Zaznaczenie | Wyostrz),

zaokrągl o 5.

Powinieneś otrzymać selekcję przedstawioną na poniższym rysunku.

Rysunek 33.

Selekcją tą wypełnij kolorem białym na nowej, przezroczystej warstwie umieszczonej na samym wierzchołku stosu

warstw.

Rysunek 34.

Zmień widoczność warstw tak, by widocznymi były jedynie warstwy ze zdjęciem płyty oraz z dodaną biała obwódką.

Strona 27

Baner witryny 33 i 1/3

2008-02-27 20:03:51

http://www.gajdaw.pl/gimp/baner-witryny-33-i-1-3/print.html

Rysunek 35.

Stosując odręczne zaznaczanie obszarów zaznacz fragment pokazany na rysunku.

Rysunek 36.

Na koniec zaznaczony fragment skopiuj z warstwy z płytą i wklej na nową warstwę.

Strona 28

Baner witryny 33 i 1/3

2008-02-27 20:03:51

http://www.gajdaw.pl/gimp/baner-witryny-33-i-1-3/print.html

Rysunek 37.

Do zakończenia banera wystarczy przesunąć ostatnio wklejony element oraz zmienić widoczność warstw.

lp.

Przykład

1.

Fotografie

2.

Gotowy baner w formacie XCF

Tabela 1. Przykłady do pobrania