Zrób sobie Userbara!

[Tutivihi]

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?

Oryginalnie napisane przez ”Wikipedia”

Userbary - Są to małe grafiki (najczęściej w rozmiarach 350x19 pikseli) przeznaczone dla sygnatur na forach dyskusyjnych, które definiują czym się dana osoba interesuje, co lubi, w jakie gry gra oraz jakich aplikacji używa. Składają się z grafiki źródłowej związanej z zainteresowaniem, ukośnych kratek separujących np.postać z gry lub logo od tła, tekstu określącego dane zainteresowanie w trzeciej osobie (np."Google Fan") i pół przezroczystej półelipsy (czasami zdeformowanej) która tworzy efekt szkła.Popularne też są animowane userbary, do ich wykonania służą programy do animacji np.Animation Shop.

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:


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

[Martha]

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

[Tutivihi]

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.

[Martha]

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

[Duke Dran]

Pięknie ładny poradnik ^.^

@W podpisie kilka moich starych prac prac ^^

[Tutivihi]

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

[Wald_Kerius]

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.

[Gandalf of Gray]

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:

ma tak wygladac czy moze cos innego?

[Tutivihi]

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

[emilok]

Oryginalnie napisane przez Martha

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

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

Counter Strike

Guild Wars

Minimalizm jest w modzie

[Tutivihi]

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.

[Tutivihi]

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

[Magic Dru]

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

[Duke Dran]

Oryginalnie napisane przez Magic Dru

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.

[Magic Dru]

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

[Tutivihi]

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

[Magic Dru]

Wielkie dzieki wszystko juz mam. Poradni tez spoko

[Baartoss]

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

[Tutivihi]

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

[Magic Dru]

nom super poradnik dzieki niemu wykonalem takie cuś