UserBars Tutorial

USER BARS TUTORIAL v1 by CreeS

User-Bars - są to małe grafiki dla twojej forumowej sygnatury,
które pomogą ci pokazać innym czym się interesujesz,
co lubisz, w co grasz.

Przykład:

http://userbars.com/galerie/images/files/3/4/google.gif

Wymagania: Adobe Photoshop (można spróbować w czymś innym, ale ja polecam PS)

1. Otwieramy Photoshopa, tworzymy nowy dokument. Wybieramy rozmiar - 350 X 19
(standardowy rozmiar userbarów)

http://img263.imageshack.us/img263/257/011ct.jpg

2. Dobieramy kolory (najlepiej pasujące do tematu userbara).
Ja wybrałem czarny i czerwony.
Wybieramy narzędzie "Gradient Tool", ustawiamy kolory i nanosimy na tło.

http://img215.imageshack.us/img215/3460/024ay1.jpg

3. Otwieramy nowy dokument. Rozmiary 6 X 6 oraz zaznaczamy
"Transparent".

http://img480.imageshack.us/img480/384/038fr.jpg

Powiększamy maksymalnie obszar. Wybieramy narzędzie "Pencil Tool"
i rysujemy przekątną, jak na rysunku poniżej.

http://img480.imageshack.us/img480/8601/047xl.jpg

4. Potem wybieramy Edit\Define Pattern i nadajemy nazwę np. paski albo kreski.

5. Wracamy do poprzedniego dokumentu.

6. Tworzymy nową warstwę ( Ctrl + Shift + N ), wybieramy narzędzie
"Paint Bucket Tool" zmieniamy Foreground na Pattern na pasku u góry.
Wybieramy z okienka na prawo od Pattern nasze wypełnienie
(te kreski, paski, czy jakoś tam)
Wypełniamy nową warstwę tym wypełnieniem.

http://img472.imageshack.us/img472/9716/053fg.jpg

Nasze "paski" są jednak za bardzo wyraźne, dlatego w okienku "Layer"
w rubryce "Opacity" wpisujemy 25%.

http://img472.imageshack.us/img472/3986/060mz.jpg

5. Teraz dodajemy różne elmenty, loga, obrazki i inne. Oczywiście w nowej
warstwie (porządek musi być)

http://img208.imageshack.us/img208/6884/076ci.jpg

6. Teraz dodajemy tekst.
Potrzebna nam będzie czcionka "Visitor BRK"
dostępna na dafont.com, kolor tekstu biały.
Ustawiamy rozmiar najlepiej na 14 pixeli. Po wykonaniu tekstu wybieramy
Layer/Layer Style/Stroke. Size ustawiamy na 1px, a kolor wybieramy
"Czarny".

http://img208.imageshack.us/img208/342/083li.jpg

7. Tworzymy nową warstwę, która musi być na wierzchu, czyli na samej
górze.
Wybieramy narzędzie "Elliptical Marquee Tool" i tworzymy taki okrąg, jak
na rysunku poniżej. Zaczynamy od lewego rogu, troche dalej od obrazka
i pociągamy w prawo i na dół.
Zaznaczenie wypełniamy kolorem białym i ustawiamy "Opacity"
na mniej więcej 30%.

http://img452.imageshack.us/img452/4977/m6ub2cx.jpg

8. Na koniec można jeszcze zrobić obramowanie koloru czarnego
na szerokość 1px.

9. Gotowe Userbary można znaleźć na stronie userbars.com

hehe... sam chcialem takie cos zrobic, ale nie umialem :< teraz umiem^^

Mam zamiar niedługo sobie takie coś zrobić, ostatnio mi się nie chciało zdeczka ; P
Mam nadzieję, że poradnik pomoże początkującym, choć jest tyle poradników "Jak zrobić avatar, sygnature?" itp, że stamtąd można było wywnioskować jak stworzyć UserBar'a, no, ale to zawsze nie to samo ; )

Przenosze.

btw - http://www.userbars.com/

http://www.tutorialtomb.com/forum/showthread.php?t=317

Tym się pokierowałeś ? ; d

W pewnym stopniu tak :). Ale użyłem swoich przykładów oraz kilka rzeczy pozmieniałem, żeby było można lepiej zrozumieć.

Świetny artykuł! Jak mi się znudzi podpis, to z pewnością zrobię sobie cos takiego :)

nice artykol. chcialem sobie zrobic cos takiego, ale to co mialem zamiar stworzyc bylo na stronce userbars.com ;p

zawsze też można wejść na www.userbars.com wybrac se kategorię i wpisać www.imageshack.us browse i szybkie linki>edytuj podpis ;d

ciakwy temat, sprobuje se zrobic takie cos..ale najpierw... musze se zalatwij photoshopa ;P
NA pewno przyda sie wielu osobom np mnie :P

Niezłe, na pewno przyda się użytkownikom tibia.org.pl, którzy mają Photoshopa, a ich podpis się znudził ;]

Nice :) Może mi sie przyda:P Chciałem sie bawić w Photoshopie ale czasu nie miałem:P

Można wiedzieć co to za wersja photoshopa? Bo ja mam
Jasc Paint Photoshop Pro 8 ale w twoim temacie jest jakiś inny...

@Edit
Odpowie mi na moje pytanie ktoś dzisiaj? ...

Szkoda, że nie ma też tłumaczenia obok na polski =\ Przeciez nie kazdy ma angielska wersje :P w takim razie 5/10

Hehe dobre

a nie da sie tych nazw po poslku co ?? mam photoshopa 8.0 cs pl i nie bardzo sie moge polapac :/

@mack - ty masz Jasc Paint SHOP nie PHOTOSHOP, tu chodzi o Adobe Photoshop (najbardziej popularny profesjonalny program graficzny afaik)
@topic - No, to odpalamy PS, Firefoxa, poradnik i jedziemy z tym! Imho przyda sie wielu osobom.

No ja mam taka sama prosbe co Jacoo. Moze tam gdzie sa napisane czynnosci w co wejsc, proponuje dac w nawiasie polska nazwe i bedzie latwo. Bo ciezko sie polapac za duzo opcji:D

Zarąbisty poradnik ! GZ dla ciebie przyda mi sie :D

Zastanawialem sie wlasnie kiedy powstanie taki temat bo coraz wiecej uzytkownikow ma wlasnie takie obrazki w signach ;) bardzo ladniei ci to wyszlo ;)

no no, udał Ci się poradnik...bardzo się przyda :)
PozdrawiaM

Skąd mógłbym ściągnąć najnowszą dostępną wesję PS? Prosiłbym o link do strony. Z góry thx.

yyhy fajny poradniczek :)
przetlumaczony :)

@btw skad moglbym sciagnac tego ~photoshop?

Mam problem ze zmniejszeniem procent ze 100 na 25. Jakby ta funkcja sie zablokowala, zawsze dzialala, a teraz jest na szaro i nie moge nic zmienic :(

Cytuj:

---

Nasze "paski" są jednak za bardzo wyraźne, dlatego w okienku "Layer"
w rubryce "Opacity" wpisujemy 25%.

---

Zajebisty tutek THX ZIOM

A ja mam pytanie gdzie trzeba zapisac czcionka jak sie sciagnie?
I jak wklejic obrazek na bara?

Cytuj:

---

Filia the Dragon napisał

A ja mam pytanie gdzie trzeba zapisac czcionka jak sie sciagnie?
I jak wklejic obrazek na bara?

---

Czcionke zapisujesz do Panel Sterowania/Czcionki

a obrazek: Pierw go kopiujesz ze źródła a potem wklejasz za pomocą Ctrl+V

Cytuj:

---

silimka napisał

a obrazek: Pierw go kopiujesz ze źródła a potem wklejasz za pomocą Ctrl+V

---

Hmn...
A jak sobie skopiowalem np. ikonke tibii i zaznaczylem obszar, pozniej Ctrl+C i wklejilem do bara to wyskoczylo biale tlo :/ ikonki i zakrylo czesc user bara.
Da sie temu jakos zaradzic ?

Filia

Użyj Magic Wand Tool żeby odznaczyć z ikonki białe tło :P
Chyba o to chodzi nie ? :>

A jeśli chodzi o poradnik to wielki THX bo na tym nauczyłem się podstaw Photoshopa xD

EDIT
Jak chcesz możesz skorzystać z tego :
http://i7.photobucket.com/albums/y26...tibia2copy.jpg
(robione na szybko :P)

:553: :( Ej Siemka all chcialbym sprubowac zrobic takiego ale nie mam photoshopa Prosze o linka do niego plizka :553:

Jak ktoś chce jakieś porady to www.userbars.up.pl tutaj jest wiele porad i galeria.
Ja takie cos stworzyłem :)
http://img178.imageshack.us/img178/6020/dred4pd.png

Użyteczne nie powiem. Jak to pierwszy raz zobaczyłem to mi się spodobało, ale nie wiedziałem jak to zrobić. Teraz juz wiem ale nie zrobie, bo nie mam Photoshopa :/

jezeli ktos chce, aby oceniono jego userbarki, zapraszam na
http://www.userbars.nuh.pl
enjoy

Siema, jestem tu nowy i mam pytanie skąd moge ściągnąć pełną wersje photoshopa 7.0.1 albo starszego?? Z góry dzięki

Siema, jestem tu nowy i mam pytanie skąd moge ściągnąć pełną wersje photoshopa 7.0.1 albo starszego?? Z góry dzięki

Siema, jestem tu nowy i mam pytanie skąd moge ściągnąć pełną wersje photoshopa 7.0.1 albo starszego?? Z góry dzięki

Szukałem tej czcionki od jakiegoś czasu, dzięki :)

Photoshopa można wziąc wiadomo z kąd plus tuoriale i mas userbar or sig

jak się patrzy a jak macie wątpliwości powstało niedawno polskie

forum o userbars.

Pozdrawiam

Ps: do administracji dawno nie byłem na forum na vBulletin

i powiem od siebie jest ok :)

A jakis link z tym programem ???

good advice;) thanks

sa jakeis darmowe photoshopy? jak tak,to tropem powyzszych panow prosze o link; )

Szukalem szukałem i nareszcie znalazłem!!! Dzieki

wypas artykul napewno sie przyda

Ładny poradnik-napewno skorzystam.Pozdro
artex92

A ja mam mały problem...zawsze mi się rozmywają napisy, o tak [userbar tylko do przykładu ; P]:

http://img427.imageshack.us/img427/6182/ususer0dr.jpg

Co mam zrobić?

@Down
Jak masz słownik to wystarczy przetłumaczyć ; P

ja mam polską wersje photo shopa i nie wiem co robić bo pisałeś po angielsku nazwy :/

jak ja pisze ta czcionka to inaczej wyglada niz u was nie ma obramowania

Cytuj:

---

Mick... napisał

jak ja pisze ta czcionka to inaczej wyglada niz u was nie ma obramowania

---

bo nie robisz całego punktu 6...

Cytuj:

---

6.(...)Po wykonaniu tekstu wybieramy
Layer/Layer Style/Stroke. Size ustawiamy na 1px, a kolor wybieramy
"Czarny".

---

Po zrobieniu tego bedziesz miał czarną obtoczke

Cytuj:

---

otibias napisał

Jak masz słownik to wystarczy przetłumaczyć ; P

---

gowno prawda korzystalem z tutkow gdzie sa po angielsku napisane opcje i w slowniku nie bylo wszystkich wyrazow a niektore nie zgadzaly sie

dzięki, w końcu wiem jak zrobić userbara, a oto moje pierwsze dzieło:
http://img211.imageshack.us/img211/1502/evalong24it.png

jedyna niedogodność jaką znalazłem to to, że w moim ps cs2 "Elliptical Marquee Tool" nazywa się "elipse tool", lub poprostu nie mogłem znaleść tej opcjii ;)
masz u mnie plusa

Siema...
Mam problem, bo czytając to co napisałeś, nie mogłam nic zrozumieć, bo mam PHOTOSHOPA Polskiego... Wersja 7.0 . Możesz mi pomóc i napisać Tutorial, ale na Photoshopa 7.0 PL? Jeżeli tak to Reputa dostaniesz... (kto wie może coś jeszcze :p )