plStyle.pl

Userbar, mały tutorial

Ocena użytkowników: 0 / 5

Gwiazdka nieaktywnaGwiazdka nieaktywnaGwiazdka nieaktywnaGwiazdka nieaktywnaGwiazdka nieaktywna
 

W tym temacie chciałbym zaprezentować jak zrobić ładnego userbar'a (dalej: ub).
Co na będzie potrzebne... przede wszystkim dobry pomysł wsparty dobrym programem - Photoshop (w nim będę pracował).
Mój userbar będzie poświęcony webtips'owi .

1. Zaczynamy. Tworzymy nowy projekt (ctrl N) o wymiarach 350 dpi szer. na 20 dpi wys. (powszechne jest też 350x19 dpi).
2. Nanosimy tło. Ja użyje gradientu z kolorów forum.
a. Wybieram narzędzie "gradient"...


b. ...wybieram kolory...


c. ...nanosze na projekt i w efekcie wygląda to tak:


Tłem może być równie dobrze fragment obrazka czy poprostu jeden kolor.

3. Teraz możemy nanieść efekty, które nadadzą ub wrażenie wypukłego, błyszcącego przycisku.
Dwuklikeim (klikamy dwa razy) na warstwe...



...otwieramy okienko efektów. Klikamy na "Faza i płaskorzeźba" (1), następnie dobieramy kontur (3), ja zostałem przy pierwszym, do ciemniejszego tła biore kontur drógi od lewej na dole. Żeby mój ub nie był taki kanciaty zwiększam wygładzenie (4) na 10, dla lepszego efektu zmieniam też "wielkość" na

4. Dobrze też pobawić się głębią, ja ostatecznie ustawiłem na 181%.

darmowy hosting obrazków


To tych drobnych zabiegach mój userbar wygląda tak:




4. Jak już wspominałem na początku - liczy się pomysł. Userbar powinien zawierać charakterystyczny element związany z tematyką w której jest robiony. Z webtipsa wybrałem "żółtodzióbka" . Troche go pomniejszyłem, ale nie należy z tym przesadzać ponieważ obrazek staje się nieostry, znikają szczegóły i przez co źle się prezentuje. Dla lepszego efektu naniosłem także kreseczki*, ale zmiejszyłem ich przezroczystość do 8%...




...dodam także adres z logo (mam nadzieje, że logo nie jest zastrzeżone ), przedostatnią rzeczą jest napisanie - jakby to ładnie określić - co nas łączy z tym co "reklamujemy", jestem użytkownikiem tego forum jako Fenrir więc napisałem "member: Fenrir" co w całości wraz z adresem z logo ma się układać w "webtips.pl member: Fenrir" (to już moja taka inwencja). Do stworzenia napisu na ub najpowszechniejszą czciąnką jest "Visitor" (download visitor), nim też się posługuje. Oto efekt:




5. Jak powiedziałem to jeszcze nie koniec, teraz nadamy ub "blask", a jest to bardzo prosta sztuczka. Z narzędzi wybieram "elipsa" i kolor biały...




...trzeba troche powiększyć okienko robocze, ponieważ elipsa musi jedynie kawałkiem wchodzić na obrazek...

darmowy hosting obrazków


...ustawiam przezroczystość elipsy na 30% (do ciemniejszych ub lepsze bedzie 40% krycie) i pamiętajmy, aby nasz "blask" był warstwą na samym wierzchu.



Efekt końcowy wygląda tak:




Można też zastosować czcinke koloru białego i zrobić obrys (UnNamedSoldier ). W tym celu ponownie dwuklikiem otwieramy okienko efektów i klikamy na "obrys" (ostatnia opcja), wybieramy wielkość "1piks." i wybieramy kolor obrysu (do ub najczęściej czarny).

Osobiście uważam, że ub z ciemnym tłem są efektywniejsze.

 

zródło: webtips.pl / Fenrir

Dodaj komentarz

Kod antyspamowy
Odśwież

Ostatnie komentarze

  • Gry online - przegląd portali z grami

    Loki 27.01.2018 21:51
    Ciekawe gry są na grywacz.pl

    Czytaj więcej...

     
  • Programy graficzne warte rozważenia 2017/2018

    Kari 07.12.2017 10:24
    Flash niby umarł a w sieci jest go jeszcze bardzo dużo, gry w HTML5 do piet nie dorastają produkcjom ...

    Czytaj więcej...

     
  • Letnie zdjęcie

    ogolny 03.11.2017 20:47
    ogólnie dobrze, tylko bez kształtów lepiej.

    Czytaj więcej...

     
  • Letnie zdjęcie

    Valdi 28.10.2017 17:52
    po prostu jako efekt zniszczen starego zdjecia - nie widziałeś nigdy takich ?

    Czytaj więcej...

     
  • Letnie zdjęcie

    Moder 31.07.2017 07:28
    jakie kształty?

    Czytaj więcej...

     
  • Letnie zdjęcie

    Misiek 30.07.2017 23:09
    Tak się zastanawiam... Te kształty czemu mają służyć?

    Czytaj więcej...

     
  • Letnie zdjęcie

    mru 27.07.2017 11:54
    efekt daje radę ale te białe plamy wyglądają jak zacieki emalii

    Czytaj więcej...

     
  • Letnie zdjęcie

    Magda 01.04.2017 10:11
    Bardzo fajny tutorial. Kształty moim zdaniem niepotrzebne, ale cała reszta bardzo przydatna.

    Czytaj więcej...

     
  • Letnie zdjęcie

    Malenee 13.01.2017 23:17
    prosze o instrukcje w języku polskim

    Czytaj więcej...

     
  • Ork fanem pilki ?;)

    lol 08.10.2016 13:14

Please publish modules in offcanvas position.