Jak zrobić własnego userbara??

Sayan - 04-24-2007 08:26
Poradnik b?dzie dotyczy? tworzenia userbarów w popularnym programie - photoshopie. Jednak od pocz?tku, nie wiesz czym jest userbar?

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.
o 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.

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:

http://img50.imageshack.us/img50/2263/pattern25qj.png

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:

http://img50.imageshack.us/img50/5849/nawigator20wp.png

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

http://img50.imageshack.us/img50/7448/kreski27rz.png

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:
http://img110.imageshack.us/img110/8...wzorek27ao.png

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:

http://img110.imageshack.us/img110/9441/ubek28xg.png

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:
http://img50.imageshack.us/img50/731/paleta28co.png

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?:

http://img110.imageshack.us/img110/4111/warstwy22fb.png

W nowo otwartym okienku klikamy na Gradient (Nie na tick tylko na napis):
http://img110.imageshack.us/img110/2...adient27ju.png

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:
http://img50.imageshack.us/img50/1093/wiaderko29kb.png

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?:
http://img102.imageshack.us/img102/1...elipsa28od.png

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:

http://img102.imageshack.us/img102/8...rtewka27va.png

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
http://img118.imageshack.us/img118/9020/text26ma.png

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:
http://img458.imageshack.us/img458/1170/zewnatz3bi.png

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:
http://img170.imageshack.us/img170/6230/wewnatz22lv.png

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!

Sorki za za jako?? niektórych screnów.

Chrypek - 04-24-2007 08:32
A mo?e by? poda? efekt ko?cowy...

imported_shady - 04-24-2007 08:43
@up
Dobry pomys?

@topic
Niez?y poradnik, 10/10 :-P

Speed10 - 08-08-2007 07:22
S?aby tut bez Outcoma. Z tego co sprawdza?em Outcom jest bardzo s?aby lepjej jest na tapecie jakie? zrobi? user bara albo samymi renderami wtedy zdobywa u ludzi wi?cej punktów

Ari911™ - 11-26-2007 17:43
Tutorials by Eddick

Ponieważ było już bardzo dużo postów na temat "jak zrobić swój userbar?" zamieszczam tutaj WŁASNY tutorial dotyczący robienia userbarów.No więc do wykonania prostego userbara potrzebne nam będą:

- obrazki bez tła - tutaj polecam strone insurance mortgage deals broadband auto at render-world.com
- Photoshop CS bądź CS2 - trial lub pełna wersja(nie wiem jakiej wersji użyjesz czy legalnej czy nielegalnej w każym bądź razie potrzebny bedzie ten program)
- Czcionka Visitor dostępna tutaj:
visitor tt1 (brk (0) - Abstract Fonts - your type - 10 000 Free Fonts)

Nie bój się tego tekstu - nie jest długi, lecz opisałem go wprost dla prawdziwych laików!

A więc zaczynamy:
Musimy stworzyć pusty obrazek o wymiarach 350x19 oraz tło na Transparent, klikamy File -> New... i ustawiamy
tak jak na obrazku:

http://img472.imageshack.us/img472/5787/zd1sj6.jpg

Teraz możemy zabrać się za obrazek.Ustawiamy kolory BACKGROUND na biały zaś COLOR PICKER na wybrany kolor(w moim przykładzie na błękitny).
Wypełnienie ustawiamy na GRADIENT czyli płynne przejscie z jednego kolor na drugi.Oto obrazek:

http://img452.imageshack.us/img452/6176/zd2bt8.jpg

Następnie wypełniamy tło gradientem przeciągając kursor z jednej strony na drugą trzymając lewy przycisk myszki.Wygląda to u mnie tak:

http://img370.imageshack.us/img370/386/zd2mj6.jpg

Teraz otwieramy jakiś obrazek bez tła(GIF lub PNG) poleceniem File => Open ... Ja mam swój obrazek.Zaznaczamy cały obrazek kombinacją klawiszy CRTL + A i następnie wciskamy CTRL + C.Przechodzimy do naszego obrazka i tworzymy nową warstwę klikając w menu LAYER => NEW LAYER - nazwijmy ją "obrazek".Wklejamy obrazek na warstwę wciskając CTRL + V.Nastepnie ładnie ją ustawiamy podkreślając najważniejszą część.U mnie wygląda to tak:

http://img247.imageshack.us/img247/2920/zd2hf0.jpg

Dobrze. Teraz nie zamykajmy tego obrazka i stwórzmy nowy w celu uzyskania 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.

http://img281.imageshack.us/img281/460/zd2jj2.jpg

Teraz bierzemy narzędzie Pencli Tools(klawisz B) i ustawiamy kolor na czarny.Robimy przekątną kreskę.Powino to być tak:

http://img470.imageshack.us/img470/6677/zd2as3.jpg

Następnie definiujemy dodając do bazy nowego Patterna.Klikamy Edit => Define Pattern => wpisujemy daną nazwę i OK.Zamykamy naszego Patterna.
Teraz wybieramy narzędzie Pattern Stamp Tool(klawisz S).Ale najpierw tworzymy nową warstwę wciskając SHIFT + CTRL + N.Nazwijmy nową warstwę "Siatka".No i teraz rysujemy naszą siatką po całym userbarze na nowej warstwie.Następnie nad wartstwami w prawym dolnym okienku widać napis OPACITY a przy nim suwak.Więc jedziemy suwakiem na 20%.Powinno to wygladać tak:

http://img468.imageshack.us/img468/350/zd2bq9.jpg

Teraz tworzymy nową warstwę wciskając SHIFT + CTRL + N i nazywamy ją "napis".Zakładając że macie już czcionkę wklejoną w folderze C: => WINDOWS => FONTS wybieramy narzędzie Horizontal Type Tool(klawisz T) i robimy tekst po prawej stronie userbara.Czcionka To Visitor TT1 BRK rozmiar 10.Piszemy tytuł - w moim przypadku "Mozilla Thunderbird user".Tekst oczywiście piszemy kolorem CZARNYM.Następnie wybieramy z menu LAYER => LAYER STYLE => STROKE.A tam ustawiamy grubość na 1px i kolor pogrubienia na BIAŁY.Wygląda to tak:

http://img268.imageshack.us/img268/8502/zd2mf2.jpg

A ogółem tak:

http://img482.imageshack.us/img482/7070/zd2id6.jpg

No to teraz tworzymy znowy nową warstwę wciskając SHIFT + CTRL + N nazywając ją "półkoło".Wybieramy narzędzie Eliptical Marquee Tool z menu narzędziowego.Klikasz prawym przyciskiem myszki na ten kwadrat i z niego wybierasz Eliptical Marquee Tool.Teraz zaznaczasz taki półokrąg zasłaniający 3/4 userbara i ustawiasz kolor wypełnienia na BIAŁY.Wypełniasz okrąg i dajesz OPACITY(wiesz już gdzie) na 45%.Wygląda to tak:

http://img456.imageshack.us/img456/3714/zd2ew0.jpg

Czas na obramowanie.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 45%, po czym klikamy OK. Oto efekt naszej ciężkiej pracy, efekt końcowy:

http://img456.imageshack.us/img456/3714/zd2ew0.jpg