458: Spróbuj sam - korzystanie z pędzli w Gimpie - cz. 5
Poprzednie części poradnika znajdziecie tutaj:
Część I - instalacja i używanie pędzli
Część II - modyfikacja i różne sposoby używania pędzli
Część III - wykorzystanie pędzli w praktyce (przykład ramki)
Część IV - tworzenie własnych pędzli
Tworzenie cienia pod smokiem
Otwieramy ramkę wybranego smoka (najlepiej na czarnym tle) i wykonujemy zrzut ekranu (print screen) za pomocą Painta lub jakiegokolwiek innego, przeznaczonego do tego programu. Można to zrobić bezpośrednio w Gimpie (Plik -> Pobierz -> Zrzut ekranu). Przycinamy powstały obrazek od góry i od lewej, tak, aby obciąć całą niepotrzebną ramkę - dzięki temu cień smoka w gotowej ramce będzie znajdował się we właściwym miejscu. Wygodnie jest to zrobić za pomocą Zaznaczenie prostokątne -> Obraz -> Kadruj według zaznaczenia. Obrazek zapisujemy jako .xcf, żeby zachować wszystkie dane.
Następnie wymazujemy tekst, zostawiając tylko smoka (wystarczy użyć szerokiego, czarnego pędzla). Zaznaczamy smoka (Możemy to zrobić za pomocą narzędzia "zaznaczanie wg. koloru", lub zaznaczyć czarne tło narzędziem "różdżka", potem wybrać Zaznaczenie -> Odwróć. Najlepiej poeksperymentować z narzędziami zaznaczania i progami czułości, bo każdy smok jest inny). Zaznaczenie nie musi być idealne, bo nie będziemy wycinać smoka, a jedynie tworzyć rozmyty cień, który może być lekko nieregularny.
Na wierzchu tworzymy nową, przezroczystą warstwę, nie rezygnując na razie z zaznaczenia.
Klikamy na nową warstwę (nazwijmy ją "cień") i wypełniamy zaznaczenie czarnym kolorem (lub, oczywiście, jakimś innym, jeśli chcemy kolorową poświatę). Wyłączamy widoczność tła, nie będzie nam na razie potrzebne.
Pracując nadal na warstwie "cień", wyłączamy zaznaczenie (zmieniając narzędzie na inne lub klikając Zaznaczenie -> Nic). Wybieramy opcję Filtry -> Rozmycie -> Rozmycie Gaussa, ustawiając wartość na ok. 10 px. (więcej o korzystaniu z rozmycia gaussa znajdziesz w poprzednich częściach poradnika).
Zmieniamy krycie warstwy tak, aby cień było dobrze widoczny, ale niezbyt przytłaczający (można to zrobić później, krycie warstwy będzie zależało od tła pod spodem).
Jeśli nawet przy 100% cień wydaje się zbyt blady, możemy skopiować warstwę, a potem skleić je w jedną (Prawym na warstwę -> Połącz w dół).
Następnie przezroczystą warstwę (najlepiej zapisać obrazek jako .xcf) możemy nałożyć na jakiekolwiek istniejące wcześniej tło lub wykorzystać cały plik do stworzenia nowego tła, przekładając na końcu warstwę z cieniem na samą górę. Tak, przykładowo, będzie wyglądać cień naszego smoka na gotowym tle (przed i po kliknięciu na menu):
Dzięki temu, że stworzyliśmy cień na osobnej warstwie, możemy go teraz przekolorować, korzystając z opcji Kolor -> Barwienie. Efekt przed i po kliknięciu menu:
Tworzenie obrazka do menu
Rozwijające się menu smoczej ramki możemy ozdobić dodatkowym tłem lub obrazkiem, także ruchomym. Abu stworzyć prosty obrazek w postaci obramowanego prostokąta, najpierw musimy wyliczyć wymiary. Pomoże nam w tym zrzut ekranu z otwartą smoczą ramką, przerzucony do Gimpa. Narzędziem "Zaznaczenie prostokątne" zaznaczamy rozmiar nowego obrazka - wymiary w pikselach podane są na dole okna z obrazkiem (długość maksymalna to 318px, maksymalna wysokość to ok.50px). Przycinamy obrazek (Obraz -> Kadruj według zaznaczenia).
Powstałą w ten sposób bazę kopiujemy (Warstwa -> Kopiuj warstwę), aby dodać przezroczystość (jako że pierwsza warstwa ma atrybut "tło", nie da się usunąć koloru gumką). Dopiero na drugiej, skopiowanej warstwie możemy użyć gumki. Warstwa nr 1, niepotrzebna, może zostać skasowana.
Teraz podzielimy sobie obrazek na cztery równe części. Dodajemy dwie prowadnice (linie pomocnicze) za pomocą opcji Obraz -> Prowadnice -> Nowa prowadnica w procentach (poziomą i pionową, po 50%). Prowadnice pomagają w symetrycznym rozmieszczeniu wzorów, ale nie będą widoczne na zapisanym obrazku.
Namalujemy tylko jedną część ramki obrazka, a następnie skopiujemy ją na pozostałe części (łatwy sposób na zachowanie symetrii). Wybieramy jakiś ozdobny pędzel i malujemy np. prawe dolne obramowanie. Możemy zrobić to całkowicie ręcznie (korzystając ze standardowych pędzli), za pomocą brushy lub kopiując fragmenty innych ozdóbek. Tutaj posłużę się trzecią metodą. Otwieramy obrazek z dekoracjami w gimpie i kopiujemy wybrany fragment (korzystając z któregoś narzędzia zaznaczenia), po czym wklejamy do naszego obrazka.
Teraz należy zmienić rozmiar wklejonego fragmentu (narzędzie Skalowanie warstwy), możemy go też obrócić (narzędzia Obrót, Nachylenie lub Perspektywa) lub przesunąć (narzędzie przesunięcie). Po dopasowaniu fragmentu w wybrane miejsce możemy gumką zetrzeć niepotrzebne ślady.
Stwierdziłam, że chcę dodać kwiatek z boku obrazka - w tym celu muszę powiększyć istniejący obrazek. W tym celu otwieramy Obraz -> Wymiary płótna. Otworzy się nam okienko, w którym możemy powiększyć lub pomniejszyć istniejący obrazek. Aby zmienić tylko jeden wymiar (długość lub wysokość), należy odznaczyć (rozłączyć) "łańcuszek" - w przeciwnym razie boki obrazka zmienią się nam proporcjonalnie. Do istniejącego wymiaru długości dodajemy 20px (to będzie po 10 px z każdej strony), po czym wyśrodkowujemy obrazek (można też przesuwać go krzyżykiem). W razie jakichś błędów, za pomocą guzika "Reset" możemy wrócić do oryginalnych rozmiarów.
Chociaż obrazek jest teraz powiększony, to aktywna warstwa nadal ma ten sam rozmiar. Aby dopasować warstwę do obrazka, klikamy Warstwa -> Dopasuj wymiary warstwy do obrazu.
Wycinamy (lub rysujemy ręcznie) kwiatek i wklejamy go do naszego obrazka. Narzędziami 'Skalowanie" i "Obrót" dopasowujemy kwiatek.
Gdy ornament jest już gotowy, kopiujemy ćwiartkę (Ctrl+c), zaznaczając ją za pomocą "Zaznaczenia prostokątnego". Wklejamy wycięty fragment i mocujemy w odpowiednim miejscu, używając narzędzi "Odbicie" (ustawiamy wartość "pionowo" lub "poziomo" i klikamy na wycięty fragment) i "Przesunięcie". Powtarzamy dwa razy, aż wszystkie cztery ćwiartki zostaną zapełnione.
Czas na dowolne pokolorowanie ornamentu. Tutaj skorzystam z gradientu. Wybieramy narzędzie "Gradient" (więcej o stosowaniu gradientów w poprzednich częściach poradnika!) - np. jakiś metalowy (Golden, Brushed aluminium, Crown molding). We właściwościach warstw zaznaczamy okienko "blokowanie kanału alfa", czyli przezroczystości - tak aby pokolorować tylko ornament, nie ruszając tła. nakładamy gradient - z prawej do lewej, z góry do dołu cz jak kto woli.
W tym przypadku skopiowałam jeszcze pokolorowana gradientem warstwę, nałożyłam gradient w odwrotnym kierunku oraz zastosowałam rozmycie gaussa (patrz poprzednie poradniki!) tak, aby wyraźniej odgraniczyć ornament od przyszłego tła ramki. Tutaj obrazek na czerwonym tle, dla kontrastu:
Narzędziem "Zaznaczenie rozmyte" ("różdżka") zaznaczam wnętrze ornamentu, ustawiam krycie wypełnienia ("Kubełek") na wartość ok 40 % i wypełniam czarnym kolorem.
Tak wygląda gotowy przycisk do menu na różnego rodzaju tłach:
Tworzenie ozdobnego paska pod menu - sposób 1
Jest kilka metod tworzenia paska na tle, widocznego pod menu. Jeden z nich znajdziesz w poradniku Border.: LINK
Otwieramy wybrane przez nas tło (tworzenie paska najlepiej zostawić sobie na koniec, już po poprawianiu i koloryzowaniu tła). Wysokość paska powinna wynosić około 18-20 px. Zaznaczamy (narzędziem "Zaznaczanie prostokątne"), gdzie umiejscowiony będzie pasek.
Opcjonalnie możemy zaznaczyć we właściwościach narzędzia "zaokrąglanie rogów" z niewielkim promieniem 5-6.
Następnie (nie rezygnując z zaznaczenia) tworzymy na wierzchu nową, przezroczystą warstwę. Narzędziem "Kubełek" wypełniamy zaznaczenie kolorem (może być czarny, gdy chcemy przyciemnić pasek, może być też inny), a następnie ustawiamy krycie warstwy na 30-50%.
Tworzymy nową, przezroczystą warstwę. Narzędziem "Zaznaczenie eliptyczne" tworzymy kształt zaookrąglonej linii (reszta elipsy wystaje poza obrazek).
Następnie wypełniamy kształt kolorem białym (lub innym jasnym) i zmniejszamy krycie warstwy do ok.30-40%.
Aby utworzyć krawędź ramki, musimy połączyć obie warstwy (tę z czarnym i tę z białym wypełnieniem). Klikamy prawym przyciskiem na warstwę z białym wypełnieniem i wybieramy "połącz w dół".
Tworzymy na wierzchu nową, przezroczystą warstwę. Narzędziem "Różdżka" zaznaczamy kształt paska. W opcjach wybieramy Zaznaczenie -> Obramuj -> ok. 4px. Powstałą obwódkę wypełniamy czarnym kolorem oraz zmniejszamy krycie warstwy do 30%.
Tło z paskiem jest gotowe.
Tworzenie ozdobnego paska pod menu - sposób 2
Następnie wybieramy narzędzie "Gradient" i rodzaj gradientu "od koloru do przezroczystości". Wybieramy ciemny kolor (aby dobrze dopasować kolorystykę do obrazka, możemy użyć Narzędzia "Pobierz kolor" - skrót klawiaturowy o - z jakiejś części obrazka) i dodajemy gradient od dołu.
Następnie wybieramy jaśniejszy kolor i dodajemy gradient z góry paska, zostawiając środek przezroczysty.
Teraz nałożymy klasyczny deseń - wąskie paseczki biegnące pod kątem 45 stopni. Tworzymy nową, przezroczystą warstwę. W opcjach narzędzia "Wypełnianie" ("Kubełek") wybieramy punkt "Deseń". Rozwinie nam się lista deseni, wśród domyślnych dla Gimpa znajdziemy wąskie - choć poziome - paseczki (Stripes Fine). Wybieramy ten deseń. Wypełniamy całą wierzchnią warstwę deseniem w poziome paseczki.
Aby uzyskać ukośne paseczki, wykorzystamy narzędzie "Obrót", gdzie ustawimy kat 45 stopni.
Następnie musimy przesunąć deseń tak, aby pokrywał cały pasek menu - zrobimy to za pomocą narzędzia "Przesunięcie", przesuwając całą warstwę w górę.
Teraz nasz pasek pokryty jest paseczkami, a masło maślane ;). Trzeba pozbyć się reszty paseczków zalegających na obrazku. Za pomocą narzędzia "Zaznaczenie prostokątne" zaznaczamy obszar tuż pod paskiem, az obejmiemy cały deseń. Następnie wchodzimy w Edycja -> Wyczyść (da nam to taki sam efekt, jak mozolne używanie gumki, tylko że za jednym kliknięciem).
Pasek jest gotowy. W razie potrzeby, gdy pasek jest za ciemny i przytłaczający, możemy zmniejszyć krycie warstwy. Jeśli paseczki wydają się za wąskie i za ciasno ułożone, sprawę załatwi użycie narzędzia "Skalowanie" - pozwoli nam to na rozszerzenie pasków, a potem zostanie tylko wygumkowanie wystających brzegów.
Tło z paskiem:
Wszystkie przedstawione powyżej opcje i sztuczki można oczywiście łączyć, aby otrzymać nowe, lepsze efekty. Eksperymentowanie jest najlepszym sposobem na naukę!
Entomologia |
A jakim kodem mogę to umieścić w ramce? :)
OdpowiedzUsuńWszystkie przedstawione tu dodatki i ozdobniki mają formę graficzną, są umieszczone bezpośrednio na obrazku. W ramce umieszczone są jako zwykłe tło (background-image). Więcej na ten temat tutaj: http://wiki.nightwood.net/Ramka
OdpowiedzUsuńJakim kodem CSS umieszczacie ,,Menu" na środku?
OdpowiedzUsuńNie chodzi przypadkiem o to? text-align: center;
OdpowiedzUsuńNo właśnie to mi nie działa :(
OdpowiedzUsuń