Forum Tibia.pl - 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?

Cytuj:

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