wtorek, 5 sierpnia 2014

Jak stworzyć swój własny kursor

Aby tworzyć swoje własne kursory nie trzeba mieć żadnego specjalnego programu. Wystarczy Gimp lub jakiś inny program graficzny obsługujący warstwy.
Sam proces robienia kursora może być różny w zależności od tego co robimy. Możemy samodzielnie coś namalować, stworzyć lub wybrać jakiś obrazek i go "obrobić" (usunąć tło, zmniejszyć, ewentualnie coś jeszcze zmienić). W dzisiejszym poście pokażę tylko ten pierwszy sposób (samodzielnie zrobiony awatar), ponieważ niedługo stworzę instrukcję robienia wycinanego awataru, która pokaże jak wycinać tło z obrazka.

1. Aby kursor działał poprawnie powinien mieć wymiary: 16x16, 32x32 lub 64x64, dlatego po uruchomieniu programu graficznego tworzymy nowy obraz o jednych z podanych rozmiarów (Plik->Nowy).
2. Tworzymy nową warstwę bez tła oraz usuwamy starą z tłem (w Gimpie nazywa się Tło).
3.  Uruchamiamy proces twórczy i rysujemy co chcemy. Bardzo pomocne mogą być brushe.
4. Gdy już skończymy nasz kursor, dorysowujemy na rogu obrazka strzałkę w taki sposób:
5. Jeśli uznamy, że kursor jest już gotowy to najwyższa pora zapisać go. Aby nie utracić przeźroczystego tła musi mieć rozszerzenie .png .
6. Kolejnym krokiem jest zahostingowanie go. W tym celu należy wejść na stroną służącą do hostingu zdjęć i wgrać na nią nasz kursor. Osobiście polecam: tinypicimageshack (niestety potrzebna jest rejestracja), fotosik.
7. Posiadając link do obrazka możemy wstawić go do kodu. Aby ułatwić zadanie zostawiłam w kodzie tylko miejsce na link:
<div style="cursor: url(LINK), wait">
Oczywiście link do obrazka wklejamy w nawiasie w miejscu LINK. Uzupełniony kod należy wkleić na początku prezentacji w trybie HTML.  Na samym końcu prezentacji musi się znaleźć znacznik zamykający </div>.

Tak powinno to wyglądać:

I to wszystko. Na koniec zostawiam Wam mój kursor robiony na potrzebę tego postu :)
Kod na początek prezentacji Kod na koniec prezentacji
<div style="cursor: url(http://oi58.tinypic.com/13zyfk8.jpg), wait"> </div>

mugi-chan

3 komentarze:

  1. Super poradnik i ładny kursor.:)

    OdpowiedzUsuń
  2. Dziękuję bardzo za radę :D Na 100% użyję :DD Zapraszam na konto kon87

    OdpowiedzUsuń
  3. Cały czas korzystam z postu. (:
    Świetny.

    OdpowiedzUsuń