494: Spróbuj sam - część 6 - Tworzenie kursorów w Gimpie
W szóstej części poradnika zajmiemy się tworzeniem małych, ale jakże urozmaicających ramkę dodatków. Mowa o kursorach, sprawiających użytkownikom wiele problemów. Poprzednie części poradnika (przydatne zwłaszcza dla osób, które dopiero zaczynają zabawę z Gimpem) znajdziecie tutaj:
Część I - instalacja i używanie pędzli
Część II - modyfikacje i różne sposoby używania pędzli
Część III - wykorzystanie pędzli w praktyce (przykład ramki)
Część IV - tworzenie nowych, własnych pędzli
Część IV - tworzenie obrazków i paskow do menu
W otchłaniach internetu trudno czasem znaleźć odpowiedni, pasujący do tła i wariantu wyglądu kursor, taki, który upiększyłby całość. A to kolor nie ten, a to obrazek za duży, migający, przekręcony w nieodpowiednią stronę... Kursory najczęściej mają format .cur lub .ani, czyli specjalnie do tego przeznaczony. Istnieje wiele programów, które pozwalają na tworzenie bardziej lub mniej skomplikowanych kursorów, z możliwością zapisu do wyżej wymienionych formatów. Nie znalazłam jednak żadnego darmowego, łatwego w obsłudze programu, który pozwoliłby na swobodną obróbkę kursorów.
Jest jednak na to rada! W smoczych ramkach mogą działać nie tylko pliki w formacie .cur lub .ani, ale także "zwykłe" obrazki .gif lub .png. A z poprzednich części Poradnika wiemy doskonale, że GIMP jest doskonałym narzędziem do tworzenia takich obrazków. Dlatego zamiast ustawiać popularne kursory, znajdujące się w co drugiej ramce, stworzymy dziś wyjątkową ozdobę.
Opcja dla leniwych
Nie chce się Wam otwierać Gimpa? No dobrze. Wystarczy w takim razie, jeśli znajdziecie odpowiadający Wam obrazek za pomocą wyszukiwarki google. Pamiętajcie, że obrazek nie może być zbyt duży, bo inaczej nie będzie się wyświetlał. Wymiary ok.50x50 do 70x70 są w zupełności wystarczające. Ciekawym sposobem na znalezienie obrazka do kursora może być przeglądanie Smoczej Wiki - jako kursor możemy ustawić sobie np. jajo któregoś ze smoków czy obrazek któregoś z przedmiotów.
Trzeba pamiętać o tym, że każdy kursor ma swój "hot spot", czyli aktywny punkt, którym najeżdżamy na linki i klikamy na odnośniki. O ile w obrazkach formatu .cur lub .ani można ustawić ten punkt w dowolnym miejscu, to .gify i .png maja hot spot zawsze, automatycznie umieszczony w lewym górnym roku obrazka (w narożnym pikselu, niezależnie, czy jest on przeźroczysty, czy kolorowy). Zaznaczyłam hot spot czerwona kropką na kilku przykładowych obrazkach:
Prosty kursor z obrazka
Otwieramy wybrany obrazek w programie Gimp. Obrazek może być większy niż 100x100 (na większych łatwiej się pracuje), zmniejszymy go na końcu pracy. Aby wybrać tylko fragment większego obrazka, zaznaczamy obszar narzędziem "Zaznaczenie prostokątne", a potem wybieramy opcję Obraz -> Kadruj według zaznaczenia.
Tu wybrałam kawałek bluszczu jako przyszły kursor dla mojego smoka Natury.
Kursory na przezroczystym tle wyglądają oczywiście lepiej, więc musimy pozbyć się tła. Gdy obrazek jest skomplikowany, musimy posłużyć się gumką. Tutaj tło jest jednolite, więc wystarczy wybrać opcję Kolory -> Alfa na zaznaczenie (możemy wybrać kolor, który zmieni się w przezroczystość, korzystając z palety lub narzędzia "pobieranie kolorów"). Potwierdzamy zmiany.
Ciemny kursor będzie słabo widoczny na ciemnym tle (a takie mam w ramce). Zamierzam otoczyć kursor jaśniejszą obwódką, aby ładnie odcinał się od otoczenia. Ciemne kursory z jasną obwódką lub jasne kursory z ciemną obwódką są najlepiej widoczne na każdym rodzaju tła. W tym celu kopiuję warstwę z bluszczem (Warstwa -> duplikuj warstwę). Na warstwie drugiej blokuję przezroczystość (zaznaczając ptaszkiem okienko nad warstwami), aby nie malować po tle. Wybieram duży, jasny pędzel (Tu widać efekt działania białego pędzla - później zmieniłam zdanie, barwiąc warstwę na jasny zielony, bardziej pasujący do kursora).
Następnie kilkukrotnie stosuję filtr rozmycia (Filtry -> Rozmycie -> Rozmycie Gaussa) z ustawieniami 5px, aż do osiągnięcia pożądanego efektu. Aby rozmycie działało, należy koniecznie wyłączyć blokowanie przezroczystości! Więcej o korzystaniu z rozmycia gaussa znajdziesz tutaj:
Warstwę z rozmyciem przekładamy na spód.
Zapisujemy obrazek. Ja zawsze zapisuję najpierw wersję "Zapisz jako" w formacie .xcf, aby zachować wszystkie warstwy (jeśli później okaże się, że chcesz coś zmienić, w tym formacie będzie łatwiej). Następnie wybieram "Zapisz kopię" w formacie .png lub .gif - ostateczna wersja kursora zapisuje się w folderze, a w programie mogę nadal pracować na wersji .xcf, nie zamyka się ona.
Kursor w formacie .gif lub .png należy umieścić na stronie hostingowej, np. imageshack.us, deviantart.com, tinypic.com lub jakiejkolwiek innej.
Pobieramy link do obrazka (np. klikając prawym przyciskiem myszki na obrazek i wybierając "kopiuj adres obrazka"). Powinien mieć on format http://imageshack.us/a/img405/894/kursorbluszczziel80x80.png
Link w takiej postaci umieszczamy w linii kodu cursor: url('link'), default;
Czyli w tym przypadku cursor: url('http://imageshack.us/a/img405/894/kursorbluszczziel80x80.png'), default
Tak przygotowaną linię kodu wklejamy w okienko BODY oraz okienko A:HOVER w ustawieniach zaawansowanych smoczej ramki. Jeśli chcemy użyć kursora także w okienku formularzy, trzeba dodać linię kodu do okienka FORM.
Oto przykład ramki z gotowym kursorem:
0 komentarze:
Twój komentarz będzie widoczny po akceptacji administratorki gazetki.