Zrób sobie Userbara!
 

Witam. Długo mnie nie było na forum, ale w końcu wróciłem :) .

Poradnik będzie dotyczył tworzenia userbarów w popularnym programie - photoshopie. Jednak od początku, nie wiesz czym jest userbar?

Teraz już wiesz :)

Podstawowy userbar powinien zawierać:

Tło - najczęściej robione gradientem;
Obrazek - związany z tematem/przeznaczeniem userbara;
Pattern - po polsku wzorek;
Elipsę - służy ona do uzyskania efektu szkła;
Napis - wykonany czcionką 'Visitor TT2 BRK' w wielkości 12, lub pochodną. Napis najczęściej ma biały kolor, dodatkowo jest dodawane czarne obramowanie o wielkości 1 pixela;
Obramowanie - najczęściej czarne, 1pix.

Większość tych obiektów powinno się znajdować na nowej warstwie.

Jeśli zaś chodzi o napisy, tutaj macie spis najczęściej używanych ‘dodatków’:

User – Użytkownik (np. Tlen User);
Owner – Posiadacz (np. Porsche Owner);
Eater – Zjadacz (np. Lay’s Eater);
Fan – Po prostu fan (np. SOAD Fan);
Member – Członek (np. Forum Tibia.pl Member);
Drinker – Pijak (np. Sprite Drinker);
Smoker – Palacz (np. Marlboro Smoker).

To tyle teorii. Czas zacząć właściwy poradnik.

Wersja Dla Photoshopa
Od razu zaznaczę, że używałem photoshopa w wersji 9 CS2, więc nie ręczę za to, że poradnik będzie przydatny dla posiadaczy innych wersji.
Jeśli chcesz postawić na dzieło panów z Adobe, a masz pusty portfel to na początek możesz ściągnąć darmowego, 30-dniowego triala -
KLIK.

Ok, koniec przynudzania - zaczynamy.

1. Pattern
Na początek oczywiście odpalamy nasze środowisko pracy. Gdy już z tym skończycie wciśnijcie kombinację klawiszy [Ctrl + N]. W nowo otwartym oknie wprowadźcie następujące dane:

OBRAZEK

Zasadniczo im większy kwadrat tym większa odległość między wzorkami.

W angielskiej wersji językowej postępujemy analogicznie.

Powinno pokazać się wam okno z malutkim kwadracikiem. Jako, że trudno byłoby operować na czymś takim – w okienku nawigatora przesuńcie suwak maksymalnie w prawo:

OBRAZEK

Teraz musimy narysować wzorek. Jego najpopularniejszy wzór wygląda tak:

OBRAZEK

Jednak można zrobić również inne wzorki, czasem takie kreski mogą nie pasować:

KROPKI, KRZYŻYKI, CROSS, KWADRATY

Nie ograniczajcie się do tego, co tutaj przedstawiłem, spróbujcie zrobić własne patterny!

2. Definiowanie Wzorka
Aby wzór przed chwilą przez was narysowany przekształcić tak, aby można go było ‘wylać’ na userbarze wystarczy, że wejdziecie w menu [Edycja -> Zdefiniuj Wzorek...] [Edit -> Define Pattern...]. Otworzy się wtedy okienko:

OBRAZEK

W polu tekstowym należy wpisać nazwę dla wzorka (wszystko jedno jaką).

I wzorek zdefiniowany, jednak na razie powstrzymajcie się z jego używaniem, przetestujecie go za chwilę ;)

3. Tworzenie Userbara
Wciśnijcie kombinację klawiszy [Ctrl + N] i wprowadźcie takie oto parametry:

OBRAZEK

Takie wymiary ma większość ubeków i tego się trzymajcie, zresztą jest to już uważane za standard.

4. Gradient
Tworzymy nową warstwę kombinacją klawiszy [Shift + Ctrl + N]. W palecie klikamy na jeden z kolorów:

OBRAZEK

I wybieramy dowolny kolor.

Podobnie robimy z drugim kolorem, tyle, że powinien to być odcień kolory pierwszego, inaczej gradient może wyglądać beznadziejnie. Zasadniczo możecie z tym poeksperymentować.

W oknie [Warstwy] [Layers] Klikamy dwukrotnie na niedawno utworzoną warstwę:

OBRAZEK

W nowo otwartym okienku klikamy na Gradient (Nie na tick tylko na napis):

OBRAZEK

Dopiero teraz klikamy w kwadracik.

Objaśnienie:
Tryb mieszania – Ustawiamy na ‘Zwykły’;
Gradient – Z menu wybieramy pierwszą pozycję;
Styl – Liniowy;
Skala – 100%;
Kąt – zależy jaki efekt chcecie uzyskać:
Najciemniej na górze najjaśniej na dole – (90 stopni);
Najciemniej na dole najjaśniej na górze – (-90 stopni);
Najciemniej z lewej najjaśniej z prawej – (180 stopni);
Najciemniej z prawej najjaśniej z lewej – (-180 stopni).

Najczęściej używa się 90 i -90 stopni.

Krycie – Najlepiej zostawić na 100%, ale jeśli uznacie, że wtedy gradient jest za ciemny to zmniejszcie.

Na koniec wystarczy kliknąć OK. i voila! Gradient gotowy.

6. Wylewanie Patternu
Tradycyjnie zaczynamy od kombinacji klawiszy [Shift + Ctrl + N].
Następnie wciskamy guzik [G] w celu użycia ‘Wiadra z Farbą’. W górnej części dokumentu powinien pojawić się dodatkowy pasek. Po naniesieniu kilku poprawek powinien wyglądać tak:

OBRAZEK

Objaśnienie:
Z listy wybieramy pozycję [Wzorek] [Pattern];
Z okienka obok wybieramy zdefiniowany wcześniej wzorek;
Tryb ustawiamy na zwykły;
Krycie na 100%;
Trzy ostatnie pola ODCHACZAMY.

Na koniec wystarczy kliknąć na obszar roboczy (powinien już się na nim znajdować gradient). Zapewne zauważyliście, że wzorek jest bardzo dobrze widoczny. Na razie zostaw to tak jak jest, zajmiemy się tym później.

7. Wklejanie Obrazka
Niezwykle prosta procedura. Wystarczy otworzyć jakiś obrazek, który znajduje się na dysku otworzyć za pomocą photoshopa, wcisnąć [Ctrl + A] (zaznacz wszystko) i wcisnąć [Ctrl + V] w oknie z userbarem. Następnie wystarczy już tylko wcisnąć [V] i przesunąć obrazek w upatrzone miejsce.

8. Elipsa
Na początek – [Shift + Ctrl + N].
Z tego rozwijalnego menu w palecie wybierz drugą pozycję:

OBRAZEK

Następnie przeciągnij wskaźnik od jednego górnego rogu do drugiego górnego rogu (zasadniczo chodzi o to, aby elipsa pokryła około połowę userbara). Potem wciśnij [G] i upewniając się, że nie wypełniasz wzorkiem tylko kolorem kliknij na obszar roboczy. Aby usunąć zaznaczenie wciśnij [W] a następnie mając kursor nad ubekiem wybierz z menu kontekstowego pozycję Odznacz.

Na koniec wybieramy krycie w okienku z warstwami:

OBRAZEK

UWAGA! Przypominam, że elipsa służy do uzyskania efektu szkła. Nie może być za mocna, zasadniczo odpadają wszystkie wartości powyżej 40%.

No i to tyle na temat elips.

9. Pattern 2
W okienku z warstwami odnajdujemy warstwę, na której wylewaliśmy wzorek. Korzystając ze wskazówek z poprzedniego 'rozdziału' zmniejsz krycie pamiętając, że pattern jest tylko dodatkiem, więc nie może być zbyt mocny.

10. Napis
Tradycyjnie [Shift + Ctrl + N].
Wciskamy guzik [T]. Robimy nieduże zaznaczenie na obszarze roboczym (będziemy w nim wpisywać tekst). Ustawienia tekstu powinny wyglądać tak

OBRAZEK

Nie masz u siebie takiej czcionki? Ściągnij ją sobie z TĄD (czcionkę należy wrzucić do [C:\WINDOWS\Fonts]. Oczywiście 'C:\' oznacza dysk, na którym macie zainstalowany Windows, piszę tak, gdyż to właśnie partycja 'C' jest najczęściej partycją systemową).
Gdy już wszystko poustawiamy możemy napisać interesujący nas tekst.
Tekst przesuńcie tak, aby jego odległość od góry, od dołu i od prawej wynosiła po 6pix.

Na koniec trzeba jeszcze rasteryzować tekst (krótko mówiąc, zamienić go na obrazek). Służy do tego opcja w menu: [Warstwa -> Rasteryzyj -> Warstwa][Layer -> ?? -> Layer]

I tekst gotowy.

11. Obramowanie Tekstu
Aby tekst wyglądał efektownie (i ogólnie jakoś się prezentował) należy go obramować. Obramowanie takie powinno mieć czarny kolor i wielkość 1pix.

Żeby się z tym uporać wchodzimy w pozycję w menu: [Edycja -> Obrysuj...][Edit -> Stroke...]. W otwartym okienku trzeba jednak nanieść kilka poprawek:

OBRAZEK

12. Obramowanie
Jesteśmy na końcu. Niedługo nasz userbar będzie skończony.

Na nowej warstwie wchodzimy w [Edycja -> Obrysuj...][Edit -> Stroke...]. W nowo otwartym okienku wprowadzamy następujące zmiany:

OBRAZEK

Tak jak wcześniej, w angielskiej wersji postępujemy analogicznie.

13. Zapisywanie

Na koniec robimy combo ( ;) )[Shift + Ctrl + S]. W nowo otwartym okienku wybieramy ścieżkę do zapisu, nazwę pod jaką mamy zapisać ubeka oraz rozszerzenie. To ostatnie polecam ustawić na '.png', ale jeśli ktoś uważa, że inne będzie lepsze to może ustawić inne.

Brawo! Właśnie zrobiłeś swojego pierwszego userbara!

Mój efekt końcowy:
http://img106.imageshack.us/img106/3449/tibia9dt.png

// Wiem, że już od dłuższego czasu pisze o tym, że wersja dla Gimpa już niedługo etc.. No i teraz najprawdopodobniej doczekacie się tego :) . Możliwe, że jutro ją umieszcze, przy okazji naniosę wszystkie poprawki, które zasugerowaliście mi w swoich postach.
Acha, jeszcze jedna ważna sprawa - temat NAJPRAWDOPODOBNIEJ będzie czyszczony, tzn. temat będzie zawierał tylko poradnik.

Świetne! Właśnie tego szukałam :):) Co do treści; nie znalazłam żadnego błedu jednak czytałam to na szybko więc mogłam coś pominąć.. Jak najbardziej jestem za przeniesieniem do poradników :]

@edit
Aha małe pytanko.. Czy userbary można robić tylko w Photoshopie?

Nie, równie dobrze możesz zrobić w Gimpie czy Paint Shop Pro, ale wydaje mi się, że w PSD jest najłatwiej.
Chociaż z drugiej strony nie wiem, czy inne programy mają funkcje które przy robieniu userbarów są wymagane, ale na pewnym forum o tej tematyce kilka osób robi właśnie w gimpie, więc chyba można.

Ok, skoro mówisz że w Photoshopie najłatwiej to robie w Photoshopie :) Dziękuje Ci bardzo :*

Pięknie ładny poradnik ^.^

@W podpisie kilka moich starych prac prac ^^

Poprawiłem kilka błędów i pokolorowałem. Za jakiś czas zamienie niektóre opisy słowne na takie z obrazkami.

Dzięki ziomek. Od dawna miałem się tym zająć ale jakoś nie chciało mi sie szukać informacji, a tu prosze. Spoko poradnik wszystko "piknie ładnie". W 100% zostanie przeniesiony. Duży plus dla Ciebie.

poradnik super!! tylko jedno ale moglbys zrobic pare wersji do innych programów albo dac linka do konkretnego probowalem w gimpie ale nie ma wszystkich opcji ;/

ale i tak super
jestem za przeniesieniem do działu poradników

@edit: http://i79.photobucket.com/albums/j1...ry/usebar3.jpg

ma tak wygladac czy moze cos innego?

Dobry jak na początek, ale mimo wszystko ważny jest pattern, elipsa i CZCIONKA. Dobrze by było dodać obramowanie :)
A jak znajdę jakiś legalny link to dodam.

=EDIT=
Hmm.. Gimp.. Spróbuje coś w nim wykombinować podczas weekendu, ale nic nie obiecuję.

Ja tam w paincie zrobiłem te dwa na własny urzytek :

Counter Strike

Guild Wars

Minimalizm jest w modzie :D

Jeśli chodzi o Gimpa - są dwa problemy.

1 - nie wiem jak zrobić obramowanie dla tekstu, choć wiem, że się da.
2 - nie mogę sobie poradzić z patternem, chyba w ogóle nie ma tutaj opcji, która pozwalałaby na jego zdefiniowanie. Jeśli dalej jej nie znajdę to spróbuję poszukaj jakiegoś pluginu.

Sorry, że piszę jeden post po drugim, ale zależy mi na odświeżeniu tematu. Okazuje się, że w Gimpie również można zrobić ubeka! Jest tak jak pisałem - trudniej, ale jest to możliwe, no i przede wszystkim darmowe :) . Zabieram się do pisania, w weekend raczej skończę.

:) hmm ja mam pytanie bo przy wklejaniu obrazka wkleja mi sie on z tłem;/ jak zrobic zeby nie bylo tla tylko obrazek??

Łapiesz za Lasso Tool i jedziesz. A potem na wycięte tło background eraser tool i kopiujesz bez tła.

hmm a co to jest ten eraser tool?? i co zrobic jak ciezko jest wyciac lasso toolem?:)

Wklep w googlach 'wycinanie rendera', jest tam kilka poradników na ten temat.

Wielkie dzieki:) wszystko juz mam. Poradni tez spoko:)

Fajny poradnik bardzo mi się podoba :D Tylko nie napisałeś jak obramować tekst.. ale to szczegół ^^ Pzdr 4 all ^^

@UP:
Dzięki, że zauważyłeś, już poprawiłem. Dodatkowo dodałem łatwiejszy sposób obramowania ubeka. Jeśli zaś chodzi o wersję dla Gimpa to jestem w trakcie robienia, troche mi to jeszcze zajmie, tym bardziej, że na wycieczkę jadę. Jednak mimo wszystko zrobię. Na pewno.

:) nom super poradnik dzieki niemu wykonalem takie cuś :)
http://i64.photobucket.com/albums/h1...aseq/baatt.png

pytanie n00ba
 

GZ Poradnika ! Jest świetny ale mam pytanko :baby: Ponieważ jestem kompletnie zielony w grafice możecie mi powiedzieć GDZIE WSADZIĆ TĄ CZCIONKĘ USERBAROWĄ ? Już ją sćiągnełem ale nie mam pojęcia gdzie ją wypakowac :baby: :confused: Efekt mojej pracy w photoshopie widać w moim podpisie (g halberd user :D)

Świetny poradnik :)

Muszę jeszcze tylko poświęcić jedną noc na ściągnięcie Photoshopa >.>



@CrAvic
Bez efektu szkła? Nie idź na łatwizne :d

@CrAvic:
Dysk gdzie masz Winde:\Windows\Fonts . Tam wklejasz czcionke, potem wystarczy ja tylko uzyc.

danke sehr
 

Dzieki wielkie Tutivihi :D Robie jakiegos innego userbara poniewaz nie uzywam już g halberd :p

@UP:
To raczej ja dziękuję tobie za to, że to zauważyłeś. Będę mógł ulepszyć poradnik :)

Wracając do wersji dla Gimpa : Nie jest źle, z każdym dniem poradnik jest bliżej końca, a niedługo go opublikuję.

poradnik
 

Co do poradnika (który jest na 9/10) :)To miło by było gdybyś dał też obrazki dla posiadaczy angielskiej wersji Photoshopa (tak jak ja) ...wiem że są dopisy po angielsku ale i tak trudniej :( Możesz też dać jakiś link do spolszeczenia photoshopa i jak go zainstalować :)

Ten trial, którego umieściłem w tutku jest po polsku, a tu masz spolszczenie (jest to jednak 'podróż w jedną stronę', więc albo decydujesz się na wersję polską, albo zostajesz przy angielskiej): PART1/PART2. Powiem tylko, że spolszczenie ma coś koło 80mb, pliki, które są w katalogu 'polska' dajesz do głównego katalogu psd. Sam na tym jadę od dłuższego czasu i jeszcze nie miałem problemów.

Ale mimo wszystko postaram się zrobić dwie wersje językowe, jednak na razie priorytetem jest wersja dla Gimpa, więc 'zangielszczeniem' niestety zajmę się trochę później.

co?? lol na jakiej palecie w tym gradiencie mam kliknac?? z jakim drugim kolorem?? a wogule to co jest na tym obrazku nie rozumiem nic mi nie wychodzi.... jaki drugi kolor na jakiej palecie ?? nic nie jaze

Nie klikasz na żadnym gradiencie tylko w PALECIE (paleta to podłóżne okienko z narzędziami - zaznaczenie, pędzel etc.). W obrazku, który jest w tutku są dwa kolory: czarny a pod nim biały (i nie mów mi, że nie wiesz o które kolory chodzi bo specjalnie rozmazałem resztę). Klikasz w jeden z kolorów i wybierasz nowy. Wkleić screena?

e chyba sie nie wyspalem :P sorka ale cos mi przymulilo mozg ;( ale.... jak juz zaznaczam te 2 kolory to na screnie jest ze tam jest brozowy (bo taki wyznaczyles) a u mnie jest caly czas czarno-bialy....

Super
 

Poradnik baardzo mi się podoba ;) Teraz tylko czekam na koniec procesu ściągania Photoshopa i do roboty :D:D

Walka z tym dziełem szatana była ciężka ale nie jest źle :)

Mam już wersję beta:
http://i12.photobucket.com/albums/a2...or/userbar.png

Mam jeszcze jedno pytanie. Chcę tam jeszcze dodać jakiś obrazek, ale nie wiem jak usunąć tło z np. bitmap...

No i przydałaby się półprzezroczystość [powiększony słabiej widoczny przedmiot w tle a na nim mały i wyrażnie widoczny]


-----------------------------------------------------
I po raz kolejny z konta brata >.<

A pisał Hide~ :)

@UP:
Usuwanie tła to temat na kolejny poradnik, wpisz w googlach 'wycinanie rendera', powinnieneś znaleść kilka poradników.

Ehh
 

Ehh...nic mi nie wyszło :/ Chyba poprostu nie umiem robić takich rzeczy... ;(

http://forum.pclab.pl/index.php?showtopic=134773 poradnik do wersji angielsiej może komuś pomoże.

edit:
no przy uzyciu tego angielskiego poradnika udalo mi sie

1.http://img76.imageshack.us/img76/6640/userbar5xp.png
2.http://img105.imageshack.us/img105/8850/sorcerer4dj.png
3http://img144.imageshack.us/img144/8341/archer6zy.png
4.http://img144.imageshack.us/img144/9278/dex8uh.png
5.http://img214.imageshack.us/img214/4930/healer9cg.png
6.http://img144.imageshack.us/img144/6701/maciek3bi.png
7.http://img83.imageshack.us/img83/9457/pharao2hs.png
8.http://img144.imageshack.us/img144/7006/tibia2cu.png
watpie zeby komus sie przydal ale co tam :)

Dzięki Tutivihi :)

:(
 

Kurde co mi niechce sciagac tego Photoshopa...... ;(tzn. Ciagle sie laduje ta strona ktora podales.... :( A tak bardzo chcialam zrobic sobie usebarka :/

:(
 

Poszlo yeeee<<< tylko to nie na moj internet.... bede musiala zostawic na cala noc ;(
Kurde sorry za 2x post

Ja mam taki problem :
W MOIM PHOTOSHOPIE NIE MA ELIPSY ..... albo nie wiem gdzie sie schowala ,, pomozcie :D
http://img352.imageshack.us/img352/7089/214ff.jpg