[tutorial] prosty userbar by napster

[Napster]

Jak zrobić prosty userbar? - Tutorial BY NAPSTER


Adobe Photoshop CS2

Na wielu forach internetowych zauważyliście, że w podpisie użytkownika znajduje się
pewne logo - userbar. Często ujawnia one kim jesteśmy, co używamy i co lubimy.
Przykładowo userbar o nazwie WINAMP USER, czyli znaczy to że osoba mająca ten userbar
używa program Winamp. Userbar łatwo stworzyć, lecz początkujący graficy mogą mieć kłopot. Mój poradnik objaśni jak stworzyć własnego USERBAR'a. Tak więc zaczynamy....

UWAGA! Na początek będzie nam potrzebna czcionka Visitor TT1 BRK, można ją ściągnąć stąd --> http://www.abstractfonts.com/search/Visitor+TT1+(BRK)

Nie bój się tego tekstu - nie jest długi, lecz opsiałem go wprost dla prawdziwych laików!
Na początku odrazu mówię że poradnik piszę pod ADOBE PHOTOSHOP CS2, więc tej wersji programu używam. Musimy stworzyć pusty obrazek o wymiarach 350x19 oraz tło na Transparent, klikamy File -> New... i ustawiamy
tak jak na obrazku:



Teraz możemy zacząć działać. Musimy ustawić tło ale Gradient czyli przejście z jednego koloru na drugi kolor. Ustawiamy 2 kolory w Color Picker:



Ustawiamy TYLKO pierwszy kolor, drugi (ten z tyłu) zostawiamy biały. Pierwszy
kolor wybieramy do stylu jaki będzie w naszym userbarze, np. jeśli userbar będzie
mroczny to wybierzmy jakieś ciemne kolory, jeśli będzie bajkowy to jasne kolory itd.
Potem wypełniamy Gradient'em nasz pusty obrazek:



klikamy myszką i przeciągamy z lewej strony na prawą stronę i powstaje przejście z jednego koloru na drugi, u mnie wygląda to tak:



Teraz znajdźmy sobie jakiś obrazek / logo tego co chcemy aby przedstawiał nasz userbar. Np. u mnie ma być to userbar Spider-Mana, czyli wstawię postać Spider-Mana. Obrazki możemy szukać w Google lub na tej stronie: www.render-world.com ! UWAGA! Musi to być wycięty obrazek, bez tła, bez zbędnych elementów! Czyli wycięte obrazki znajdziecie na tej stronie co podałem. Teraz wklejamy nasz obrazek
na userbara. U mnie wygląda to tak:



Dobra. Teraz nie zamykajmy tego obrazka i stwórzmy nowy w celu uzyskania tak zwanych SCANLINES, czyli siatki. Tworzymy obrazek o wymiarach 6x6 i tło Transparent. Teraz weźmy narzędzie ZOOM (chyba każdy wie gdzie jest - taka lupa) i przybliżmy obrazek na maxa jak się da.



Teraz weźmy narzędzie Pencil Tool i ustawmy kolor na czarny!



OK. Aby powstała siatka musimy zrobić tą siatkę . Klikamy od południo-zachodniej strony obrazka i robimy siatke do północno-wschodniej strony, wygląda to tak:



Proste no nie. Teraz dodajmy naszą siatkę do bazy PHOTOSHOPA. Klikamy Edit -> Define Pattern... i nazwijmy to Scanlines, po tym klikamy OK. Teraz zamknijmy nasze okno tworzenia SCANLINES i zajmijmy się
dalej USERBAREM. To już połowa sukcesu! Stwórz nową warstwę (New Layer):



Nowa warstwa musi być na samej górze. Dobra czas zrobić naszą siateczkę. Wybieramy Pattern Stamp Tool:



Teraz masz już narzędzie w ręce więc do dzieła! Jeździj myszką po obrazku aż będzie zasiatkowany :



Aby nie był obrazek bardzo zasiatkowny to ustawmy Opacity na 25%:



Czas na zrobienie napisu. Wybieramy narzędzie pisania i wybieramy czcionkę Visitor TT1 BRK (link był podawany wcześniej). Piszemy temat userbara, czyli np. jeśli jest to USERBAR o Spider-Man'ie to napis "Spider-Man FAN" itd. To już musimy samemu ustalić. Wybieramy tą czcionkę i rozmiar 10 pt oraz czcionka ma być biała! Piszemy tekst. Zróbmy obwódkę tekstu czarną, klikamy Layer -> Layer Style ->Stroke... Ustawiamy tak jak na obrazku:



Po czym klikamy OK. Oto efekt u mnie:



Tworzymy kolejną warstwę (wcześniej opisywałem jak stworzyć warstwę). Musimy
zrobić efekt lustra aby efektownie wyglądało. Bierzemy Lasso Tool:



Zaznaczmy pół obrazka:



i wypełnijmy tą połówkę kolorem białym:



Pół obrazka jest na biało, lecz to ma być delikatne lustro więc ustawmy Opacity na 50% a końcowy efekt lustra wygląda tak:



Czas na obramówkę. Wybieramy narzędzie do zaznaczania obrazka i zaznaczamy całość:



Klikamy Edit -> Copy Merged! Tworzymy nowy obrazek File -> New... o wymiarach 350x19 i tłem White czyli białym! Wklejamy obrazek (Edit -> Paste).

Robimy obramówkę klikając Layer -> Layer Style -> Stroke... Size ustawiamy na 1 pt, Position na Inside a kolor czarny oraz Opacity na 50%, po czym klikamy OK. Oto efekt naszej ciężkiej pracy, efekt końcowy:



Zapiszmy nasz piękny obrazek i cieszmy się nim . Prościej nie mogłem napisać!
To opis dla tych którzy pierwszy raz korzystają z Photshopa!


Pozdrawiam!
Napster

[zezol]

Nie śmiejcie sie, ale nie wiem jak wtrynić ten obrazek w userbara. Tak żeby jakoś ładnie było, ja w photoshopie nie zabardzo podszkolony, no pare razy karykature sobie zrobiłem Chodzi mi o ten dokładnie, chyba że ktoś ładniejszy ma z ery.

[Dobrus]

ale nie wiem jak wtrynić ten obrazek w userbara

Bawiłem się z tym i zrobiłem takie triko:

A tu jest film jak sie robi userbary:
http://www.megaupload.com/?d=FM7JCAO5
Hasło: portal-x

[Dobrus]

Ja używam Photoshopa CS2 (ver.9) i jest wszystko jak należy.
Userbar z obramówką:


[ Dodano: Wto 11 Kwi, 2006 19:38 ]
A to mój userbar:

[Sylwek]

Jak można to mogę tu umieścic moje userbary (pytanie do administracji forum) ??


Zamieść sobie, tylko prosiłbym o swoje userbary i nie przesadzanie z ilością.

Ok moje Userbary i nie za dużo



Coś na świątecznie

[zezol]

Mam pytanko, jak zrobić userbara: żeby był jako jeden ale też jako animacja, w której jest ich pare. Jakim programem? I czy można istawić czas wyświetlania jednego userbara?

[Napster]

Ok moje Userbary i nie za dużo

Bardzo ładne w ładnym standardzie.

Moje:

Mieszkaniec Łęknicy


Użytkownik FOOF Poczta

Mam pytanko, jak zrobić userbara: żeby był jako jeden ale też jako animacja, w której jest ich pare.

W ImageReady łączysz kilka obrazków i robisz animację (banalnie łatwe).

[Sylwek]

Mam pytanko, jak zrobić userbara: żeby był jako jeden ale też jako animacja, w której jest ich pare. Jakim programem? I czy można istawić czas wyświetlania jednego userbara?

Wżuc tu UserBary tak jak dajesz w poczcie załącznik i wciśnij "CREATE" i gotowe .

Lub w ImageReady jeśli chcesz

1.Tworzymy folder np. na pulpicie ze wszystkimi userbar'ami kóre chcemy mieć w animacji.
2.Otwieramy ImageReady
3.Wybieramy File --> Import --> Folder As Frames
4.Wybieramy nasz folder z userbarami
5.Wszystkie userbary zrobiły się jako fram'y w pasku animacji
6.Klikamy na klatke ( w prawym dolnym rogu ) i wybieramy czas przewijania danego userbar'a ( ja mam na 1 s z czego na ostatniej klatce mam 2 s żeby fajnie wyglądało )
7.Klikamy File --> Save Optimized As
8.Zapisujemy w formacie .gif

[zezol]

Dzięki chodzi. Mam jeszcze jedno pytanie Dlaczego na forum24h nie wyświetla mi userbarów w podpisie?? :suchy:

[Sylwek]

Dlaczego na forum24h nie wyświetla mi userbarów w podpisie??

Bo jest wyłączony Kod [img] w podpisach przez Admina, i nie może dawac obrazków w podpisie.

[zezol]

W jakim formacie najczęściej zapisuje sie userbary?? Chyba .gif albo .jpg. Albo inaczej, w jakim wychodzi najładniej.

[stand_up]

zezol, w png lub gif

[BaKa]

Jak sie robi tło Transparent??
I jak moge spowrotem włączyć to:

[zezol]

Ja ci moge powiedzieć, że na początku jak dajesz Plik->Nowy...->w linijce Zawartość tła: dajesz Przezroczysty lub: File->New...->w linijce Background Contents: dajesz Transparent. Transparent - Przezroczysty. Nie wiem o co ci chodziło, może to pomoże...



A żeby spowrotem włączyć to(czyli okno z kolorami) klikasz u góry Okno->Kolory lub Window->Color. No to tyle(chyba)

[BaKa]

zezol, dzięki taka pomoc mi sie podoba!!!

[ Dodano: Pon 17 Kwi, 2006 14:25 ]
Mam jeszcze jedno pytanie!! Gdy wklejam obrazem zawsze usadawia sie na środku!! Jak moge go przesunąć np. w bok???

[Sylwek]

wybierasz z PhotoShpoa tą opcję która jest na obrazku poniżej i przesówasz w wyznaczone przez ciebie miejsce.(na obrazku masz wszystko.

[zezol]

Nie ma problemu. Klikasz, masz na screenie. Po czym obrazek sie minimalizuje. Jak w normalnym oknie.

Przed:


Po:

[BaKa]

Dzięki chłopaki dzięki!! I tak po żmudnej pracy wyszło to:


Jak wam sie podoba?? Bo chyba mogłoby być lepiej, ale jak na pierwszy raz to jestem z siebie zadowolony!!

[Napster]

Jak wam sie podoba??

Czcionke zmień, zrób efekt lustra i SPOKO!

[Sylwek]

Oceńcie

źle wycięty obrazek(ten po lewej) i nie potrzebny tej obrazek po prawej
Ej sorry ale czy to jest temat do wystawianiu swoich UB do oceny ??