PDA

Zobacz pełną wersję : Tutorial Userbary


Yogi97
06-09-2006, 22:48
Userbary - małe grafiki (najczęściej w rozmiarach 350×19 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), tworzącej efekt szkła. Popularne też są animowane userbary, wykonane w programach takich jak np. Animation Shop.

Tyle Wikipedia.

Co to jest userbar wie chyba każdy, kto odwiedził jakieś forum dyskusyjne.
Przykładowy userbar może wyglądać tak:

http://img436.imageshack.us/img436/7519/lechpremiumlover1xh7.png

No dobra, wiemy jak wygląda userbar, idea userbarów bardzo nam się podoba i chcemy mieć własny... Tu mamy dwa wyjścia:

Przekopać jakiś skład userbarów (ew. "pożyczyć" sobie od kogoś userbara),
Zrobić własnego userbara.

AD. 1
O ile "pożyczania" nie polecam, o tyle repozytoriów z userbarami jest w bród i trochę (Use google Luke...)
Osobiście polecam:

Userbars.com (http://www.userbars.com/) - pierwsza strona o userbarach (+ spore składowisko)
Userbars.org (http://userbars.org/) - duże, często aktualizowane repozytorium userbarów

Jeśli kto ambitniejszy (a leniwy) i mało mu jednego statycznego userbara może skorzystać z usług serwisów animujących userbary - z kilku UB-eków robią jednego, np takiego:

http://img162.imageshack.us/img162/9117/userbar139043ci6.gif (http://ubanimator.com)
(Ten może nie jest najpiękniejszy, ale zasadę oddaje w 100%)

Poanimować sobie userbary można np. na:

Ubanimator.com (http://ubanimator.com/)
Userbarmaker.com (http://userbarmaker.com/userbars-animator.php) → Tutaj można również stworzyć swojego UB-eka od podstaw

To była część dla mniej ambitnych. Teraz część dla hardkorowców...

AD. 2
Jak już "ktoś" napisał przy okazji avatarów:
Będziemy potrzebować trzech rzeczy:

1) Program graficzny
2) Wybrane zdjęcie
3) Trochę talentu i zapału

Jeśli chodzi o program graficzny to na upartego można nawet użyć windowsowego Painta [...] Oczywiście PaintShop Pro, Corel, PhotoShop czy darmowy GIMP także się nadadzą
Programów graficznych trochę do wyboru jest, ale my skupimy się na popularnym Adobe PhotoShop-ie.
Żeby nie przedłużać zbytnio stwórzmy userbar-a w Adobe PhotoShop...

Yogi97
06-09-2006, 23:37
<a name=photoshop></a>Tworzymy userbar-a w Adobe PhotoShop
Autor oryginalnego tekstu: theGamer
Oryginalny tekst pochodzi z: Forum PCLab.pl (http://forum.pclab.pl/index.php?showtopic=134773)
Tekst oryginalny uległ niewielkim skrótom, drobnym zmianom i korekcie stylistycznej nie mającej wpływu na sens przekazu.

Doszedłem do wniosku, że nie ma sensu robić od początku czegoś, co ktoś już bardzo fajnie zrobił. Dlatego też umieściłem tu tekst theGamer-a (mam nadzieję, że nie bedzie miał nic przeciwko drobnym korektom tekstu).

Tworzymy nowy dokument (File → New) o wymiarach 350×19 px.

http://img413.imageshack.us/img413/8206/usb1kf9.jpg

Wypełniamy narzędziem: Paint Bucket Tool http://img413.imageshack.us/img413/4875/usb2bw5.jpg. Wybieramy jaki chcemy kolor. Tu został użyty niebieski.

Robimy wzorek.
Tworzymy nowy dokument (File → New) tym razem o rozmairze 6×6 px. i przezroczystym tle (Transparent).

http://img413.imageshack.us/img413/8655/usb3zi9.jpg

Kombinacją klawiszy (Ctrl+"+") lub poprostu scrolem myszki, powiększamy obrazek do maximum w tym wypadku 1600 %.

http://img413.imageshack.us/img413/1452/usb4gg5.jpg

Wybieram narzędzie Pencil Tool http://img413.imageshack.us/img413/2016/usb5gd9.jpg. Wielkość pędzla ustawiamy na 1 px. i malujemy tak jak pokazane jest na poniższym obrazku.

http://img413.imageshack.us/img413/6288/usb6el9.jpg

Idziemy do Edit → Deffine Pattern

Wracamy do naszego tła. Tworzymy nową warstwę. (Layer → New → Layer).

Nakładamy wzorek który przed chwila zrobiliśmy (Edit → Fill). Z listy wybieramy nasz wzorek w tym przypadku ostatni i ustawiamy tak jak poniżej.

http://img413.imageshack.us/img413/9898/usb7pq8.jpg

Teraz zmniejszamy przezroczystość (Opacity).

http://img413.imageshack.us/img413/1558/usb7aqd8.jpg

Wklejamy mały obrazek (tu użyto logo Winampa). Jeżeli jest zbyt duży możemy go zmniejszyć (Image → Image Size...).

Narzedziem Move Tool http://img413.imageshack.us/img413/954/usb8md3.jpg przesuwamy go tam gdzie potrzebujemy.

Dodajemy napis, w tym przypadku "Winamp User" (Horizontal Type Tool http://img413.imageshack.us/img413/9341/usb9bc4.jpg). Napis robimy biały a rozmiar czcionki ustawiamy tak jak na obrazku.
Czcionkę tą można pobrać z tej strony (http://www.dafont.com/search.php?q=visitor/).

Robimy obramowanie napisu (Layer → Layer Style → Stroke) i ustawiamy tak jak poniżej.

http://img413.imageshack.us/img413/9641/usb10rm7.jpg

Wybieramy narzędzie Eliptical Marqee Tool http://img413.imageshack.us/img413/9486/usb11gc6.jpg

Tworzymy nową warstwę (Layer → New → Layer).

Narzędziem Eliptical Marqee Tool zaznaczamy okrąg na obrazku.

http://img413.imageshack.us/img413/9040/usb12ja6.jpg

Pędzel (Brush Tool http://img413.imageshack.us/img413/6819/usb13wx0.jpg) ustawiamy na kolor biały i rozmiar ok. 10 px. Zamalowywujemy na biało górną część. Jak na poniższym obrazku.

http://img413.imageshack.us/img413/3024/usb14ob5.jpg

Ustawiamy przezroczystość (Opacity) na ok. 35%.

http://img413.imageshack.us/img413/2948/usb15jd3.jpg

Ostatni krok to dodanie ramki.
Klikamy na warstwę Background, naciskamy kombinację klawiszy "Ctrl+A" znaznaczając wszystko. Nastęnie Edit → Strike i ustawiamy tak jak poniżej.

http://img367.imageshack.us/img367/4496/usb16nc0.jpg

Teraz tylko Ctrl+D aby odznaczyć wszystko i już można zapisać naszą pracę (File → Save As)

Efekt końcowy:

http://img367.imageshack.us/img367/5421/usb17qp6.jpg