jak wykonać prosty userbar?

**Posty:** 776 · przez **Napster** 01 Maj 2006, 11:39

Jak zrobić prosty userbar? - Tutorial
BY NAPSTER

Adobe Photoshop CS2

Na wielu forach internetowych zauważyliście, że w podpisie użytkownika znajduje się
pewne logo - userbar. Często ujawnia one kim jesteśmy, co używamy i co lubimy.
Przykładowo userbar o nazwie WINAMP USER, czyli znaczy to że osoba mająca ten userbar
używa program Winamp. Userbar łatwo stworzyć, lecz początkujący graficy mogą mieć kłopot. Mój poradnik objaśni jak stworzyć własnego USERBAR'a. Tak więc zaczynamy....

UWAGA! Na początek będzie nam potrzebna czcionka Visitor TT1 BRK, można ją ściągnąć stąd --> http://www.abstractfonts.com/search/Visitor+TT1+(BRK)

Nie bój się tego tekstu - nie jest długi, lecz opsiałem go wprost dla prawdziwych laików!
Na początku odrazu mówię że poradnik piszę pod ADOBE PHOTOSHOP CS2, więc tej wersji programu używam. Musimy stworzyć pusty obrazek o wymiarach 350x19 oraz tło na Transparent, klikamy File -> New... i ustawiamy
tak jak na obrazku:

Teraz możemy zacząć działać. Musimy ustawić tło ale Gradient czyli przejście z jednego koloru na drugi kolor. Ustawiamy 2 kolory w Color Picker:

Ustawiamy TYLKO pierwszy kolor, drugi (ten z tyłu) zostawiamy biały. Pierwszy
kolor wybieramy do stylu jaki będzie w naszym userbarze, np. jeśli userbar będzie
mroczny to wybierzmy jakieś ciemne kolory, jeśli będzie bajkowy to jasne kolory itd.
Potem wypełniamy Gradient'em nasz pusty obrazek:

klikamy myszką i przeciągamy z lewej strony na prawą stronę i powstaje przejście z jednego koloru na drugi, u mnie wygląda to tak:

Teraz znajdźmy sobie jakiś obrazek / logo tego co chcemy aby przedstawiał nasz userbar. Np. u mnie ma być to userbar Spider-Mana, czyli wstawię postać Spider-Mana. Obrazki możemy szukać w Google lub na tej stronie: www.render-world.com ! UWAGA! Musi to być wycięty obrazek, bez tła, bez zbędnych elementów! Czyli wycięte obrazki znajdziecie na tej stronie co podałem. Teraz wklejamy nasz obrazek
na userbara. U mnie wygląda to tak:

Dobra. Teraz nie zamykajmy tego obrazka i stwórzmy nowy w celu uzyskania tak zwanych SCANLINES, czyli 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.

Teraz weźmy narzędzie Pencil Tool i ustawmy kolor na czarny!

OK. Aby powstała siatka musimy zrobić tą siatkę

. Klikamy od południo-zachodniej strony obrazka i robimy siatke do północno-wschodniej strony, wygląda to tak:

Proste no nie. Teraz dodajmy naszą siatkę do bazy PHOTOSHOPA. Klikamy Edit -> Define Pattern... i nazwijmy to Scanlines, po tym klikamy OK. Teraz zamknijmy nasze okno tworzenia SCANLINES i zajmijmy się
dalej USERBAREM. To już połowa sukcesu! Stwórz nową warstwę (New Layer):

Nowa warstwa musi być na samej górze. Dobra czas zrobić naszą siateczkę. Wybieramy Pattern Stamp Tool:

Teraz masz już narzędzie w ręce więc do dzieła! Jeździj myszką po obrazku aż będzie zasiatkowany

:

Aby nie był obrazek bardzo zasiatkowny to ustawmy Opacity na 25%:

Czas na zrobienie napisu. Wybieramy narzędzie pisania i wybieramy czcionkę Visitor TT1 BRK (link był podawany wcześniej). Piszemy temat userbara, czyli np. jeśli jest to USERBAR o Spider-Man'ie to napis "Spider-Man FAN" itd. To już musimy samemu ustalić. Wybieramy tą czcionkę i rozmiar 10 pt oraz czcionka ma być biała! Piszemy tekst. Zróbmy obwódkę tekstu czarną, klikamy Layer -> Layer Style ->Stroke... Ustawiamy tak jak na obrazku:

Po czym klikamy OK. Oto efekt u mnie:

Tworzymy kolejną warstwę (wcześniej opisywałem jak stworzyć warstwę). Musimy
zrobić efekt lustra aby efektownie wyglądało. Bierzemy Elipse Tool:

Zaznaczmy pół obrazka:

i wypełnijmy tą połówkę kolorem białym:

Pół obrazka jest na biało, lecz to ma być delikatne lustro więc ustawmy Opacity na 50% a końcowy efekt lustra wygląda tak:

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

Zapiszmy nasz piękny obrazek i cieszmy się nim

. Prościej nie mogłem napisać!
To opis dla tych którzy pierwszy raz korzystają z Photshopa!

Pozdrawiam!
Napster

Pochwały przyznane za posta: 2

**Posty:** 2691 · przez **Z@K** 01 Maj 2006, 11:42

WOW...bardzo fajne biorac pod uwage to ze własnie zaopatrzam sie w PhotoShopa

**Posty:** 671 · przez **oklahoma** 01 Maj 2006, 11:47

No fajnie też sie zaopatrzyłem w Photoshopa nawet ze spolszczeniem czekałem cierpliwie na taki opis chyba wyprzedziłeś Zip-a :mrgreen:

**Posty:** 1733 · przez **kilkujadek** 01 Maj 2006, 12:45

Z@K napisał(a):e własnie zaopatrzam sie w PhotoShopa

Śmieszne żeczy ale ja akurat też go pobrałem :mrgreen:

napster dzięki może wreszcie go zrobie

**Posty:** 2691 · przez **Z@K** 01 Maj 2006, 12:47

kilkujadek napisał(a):go pobrałem

sory za ot ale ja nie pobieam go

**Posty:** 1733 · przez **kilkujadek** 01 Maj 2006, 12:54

Z@K napisał(a):ja nie pobieam go

Mowa tu o płatnym programie :wink:

oczywiście . A niech to się nazywa jak chce ( zaopatrzam&pobieram :mrgreen:

)

**Posty:** 193 · przez **Jeffro** 01 Maj 2006, 13:23

Fajny temat będzie można sie pobawić i coś fajnego stworzyć. Dzięki :mrgreen:

**Posty:** 518 · przez **artix** 01 Maj 2006, 13:40

Bardzo dobry poradnik, napewno się przyda.
BTW może warto go przykleić

**Posty:** 908 · przez **SaTeJa** 01 Maj 2006, 14:11

napster może i się czepiam ale mógłbyś trochę poprawić ,, szklany efekt '' jak to nazwałeś. U ciebie jest on w poziomie a on musi być zaokrąglony :mrgreen:

Ogólnie tutek napewno przyda się wielu osobom :wink:

**Posty:** 819 · przez **al bandi** 01 Maj 2006, 14:16

Ekspert ds. userbarów nie jestem, ale wydaje mi się, że elipsa jest zbyt mało "elipsowata" tzn. ma dziwny kształt

napster, good job

Któryś z moderatorów mógłby go przykleić

**Posty:** 5151 · przez **JarekMk** 01 Maj 2006, 15:18

al bandi napisał(a):Któryś z moderatorów mógłby go przykleić

I nastała jasność

Za OT ukaram...
PZDR!

**Posty:** 1969 · przez **Zip** 01 Maj 2006, 15:34

Mój poradnik w pdf

Poradnik - Jak zrobić userbara by zip

lol

**Posty:** 776 · przez **Napster** 01 Maj 2006, 15:55

SaTeJa napisał(a):napster może i się czepiam ale mógłbyś trochę poprawić ,, szklany efekt '' jak to nazwałeś. U ciebie jest on w poziomie a on musi być zaokrąglony Ogólnie tutek napewno przyda się wielu osobom

Hehe tak wiem. Pomysliłem się ale moze byc :mrgreen:

.

**Posty:** 135 · przez **sz3kla** 02 Maj 2006, 06:21

Jak zobaczyłem ile waży trial Photoshopa to się przestraszyłem, ale jak zobaczyłem efekt pracy napstera to doszedłem do wniosku że jednak warto ...

Downloading 1% ... :mrgreen:

**Posty:** 1969 · przez **Zip** 02 Maj 2006, 11:57

Szybka instrukcja jak zrobić animowany userbar

Poradnik - Jak zrobić userbara by zip

**Posty:** 4043 · przez **prog** 02 Maj 2006, 12:02

Szybka instrukcja jak zrobić animowany userbar

nie rozumiem za bardzo tego

**Posty:** 1969 · przez **Zip** 02 Maj 2006, 12:04

Powiedz których punktów nie rozumiesz ??

Dokładnie czego to zmienie albo wytłumacze - pisałem jak da sie najprościej

**Posty:** 4043 · przez **prog** 02 Maj 2006, 12:08

Juz ok, mialem promblem z ustaleniem szybkosci animacji ale wystarczylo zwiekszyc ilsoc ramek

**Posty:** 1969 · przez **Zip** 02 Maj 2006, 12:09

Ale poradnik jako tako zrozumiały czy nie ??

**Posty:** 776 · przez **Napster** 02 Maj 2006, 12:17

Zip napisał(a):Ale poradnik jako tako zrozumiały czy nie ??

Jak tako - TAK, przyda się ale nie mi bo ja to znam. :wink:

jak wykonać prosty userbar?

jak wykonać prosty userbar?

Kto jest na forum