Witamy, Gość. Zaloguj się lub zarejestruj.
Czy dotarł do Ciebie email aktywacyjny?


Zaloguj się podając nazwę użytkownika, hasło i długość sesji

Strony: [1] 2 3 ... 29
DrukujPobierz PDF
Autor Wątek: Tutorial na userbar (klasyczny)  (Przeczytany 282828 razy)
0 użytkowników i 2 Gości przegląda ten wątek.
marrek13
Użytkownik

Reputacja: 8 Offline Offline

Płeć: Mężczyzna
GIMP: 2.4
JID: marrek13@jabber.hostingcenter.pl
Licencja: CC-NC-BY-SA
Wiadomości: 55
Galeria Użytkownika


Pogromca uciśnionych


Zobacz profil
« : 11.01.2007, 18:44:41 »

Tutorial na userbar (klasyczny)

Opracowanie: marrek13
Poziom trudności: łatwy





Tutorial ten nauczy was jak zrobić ładnie wyglądający userbar, jak zrobić obrys tekstu oraz w jaki sposób stworzyć nowy deseń.

Tutorial napisany w wersji GIMP 2.4. W innych wersjach nazwy narzędzi i pojęć mogą się różnić.



Lime Point Zaczynamy

Napis i jego obrys

Lime Point 1. Na początek powinniśmy ściągnąć czcionkę Visitor TT2 BRK, można ją znaleźć w załączniku. Czcionkę kopiujemy do C:\WINDOWS\Fonts.
Uruchamiamy GIMP-a, tworzymy nowy obraz. Teraz wybieramy narzędzie tekstowe Narzędzia tekstowe [T] i ustawiamy tak jak jest to na zdjęciu poniżej.



Lime Point 2. Wypełnij obraz jakimś kolorem, na którym będzie dobrze widoczny zarówno kolor biały, jak i czarny.
Wybieramy kolor #fffffff i piszemy coś na obrazie. Okno warstw powinno przedstawiać się następująco:



Oczywiście w miejscu marrek13 będzie widniał wpisany przez Ciebie tekst.

Lime Point 3. Teraz zajmiemy się stworzeniem obrysu, czyli czarnej ramki wokół napisu. Stwórz nową warstwę i umieść ją pod warstwą z tekstem.



Lime Point 4. Kliknij PPM (prawy przycisk myszy) na warstwę z tekstem i wybierz opcje Kanał alfa na zaznaczenie. Zaznacz stworzoną przed chwilą warstwę i przejdź do okna obrazu. Z menu wybierz Zaznaczenie -> Powiększ



Lime Point 5. Wybieramy teraz kolor #000000, oraz narzędzie wypełnienie kubełkiem Wypełnienie kubełkiem [Shift+B]. Jego opcję ustawiamy następująco:



Teraz już tylko wypełniamy zaznaczenie i koniec. Napis jest gotowy.



Tworzenie i używanie deseni

Lime Point 1. Tworzymy nowy obraz o wymiarach 3x3px lub proporcjonalnie większy.



Lime Point 2. Tworzymy nową warstwę z przezroczystym tłem.



I usuwamy warstwę Tło.



Lime Point 3. Wybieramy narzędzie pędzel Pędzel [P] i ustawiamy następująco.



Lime Point 4. Przechodzimy do okna obrazu. Powiększenie ustawiamy na 800% i rysujemy taki kształt.



Lime Point 5. Teraz już tylko zapisujemy plik z rozszerzeniem .pat w C:\Documents and Settings\twoja nazwa\.gimp-2.4\Patterns.

Lime Point 6. Teraz uruchamiamy ponownie GIMP-a lub odświeżamy listę deseni. Jeśli chcemy użyć nasz deseń wybieramy wypełnienie kubełkiem, jako typ wypełnienia ustawiamy deseń i z listy wybieram nasz deseń.



Wycinanie rendera

Lime Point 1. Wybieramy sobie obrazek z którego chcemy zrobić render, najlepiej jeśli tło i kontur mają kontrast. Otwieramy nasz obrazek w GIMP-ie. Teraz należy dodać kanał alfa do naszego obrazu. Aby to zrobić przechodzimy do okna warstw [Ctrl+l] klikamy prawym przyciskiem myszki na naszą warstwę i z listy wybieramy opcje dodaj kanał alfa, jeśli opcja jest nie dostępna oznacza to że obraz ma już alfę i nie musimy nic robić.

Lime Point 2. Wybieramy narzędzie zaznaczenie rozmyte tzw. różdżkę Magiczna różdżka  U. Ustawiamy próg na 15. Przechodzimy do okna obrazu, i zaznaczamy białe tło naciskając w pustych miejscach, przytrzymując klawisz Shift (łączenie zaznaczenia), tak aby uzyskać efekt jak poniżej.



Lime Point 3. Z menu wybieramy Edycja -> Wyczyść [Delete], a następnie Zaznaczenie -> Nic [Shift+Ctrl+A]. W efekcie otrzymujemy ładnie wycięte logo.



Jeśli jednak nie uda nam się tak ładnie zaznaczyć tła to polecam tutorial Gandalfi na wycinanie rendera


Tworzenie userbara

Lime Point 1. Tworzymy nowy obraz o wymiarach 350x19px. Są to standardowe wymiary każdego userbara(nie licząc wersji mini - 150x19px).



Lime Point 2. Wypełniamy tło gradientem Gradient [L] o kolorach #be231e i #f13c38 lub innych w zależności od tego jakie będą pasowały do naszego renderu. Wypełniamy w taki sposób.



Lime Point 3. Tworzymy nową warstwę, nazywamy ją pattern. I wypełniamy naszym deseniem według drugiej części tutorialu.



Lime Point 4. Teraz wklejamy [Ctrl+V] nasz render wycięty w trzeciej części.



Lime Point 5. Teraz klikamy PPM na warstwę Oderwane zaznaczenie i wybieramy opcję nowa warstwa



Lime Point 6. Jeśli trzeba skalujemy naszą warstwę, Warstwa -> Skaluj warstwę. W moim przypadku są to takie ustawienia.



Lime Point 7. Teraz za pomocą narzędzia przesunięcie Przesuwanie [M] ustawiamy nasz render tak, żeby jakoś ładnie wyglądał, najlepiej gdzieś po lewej stronie.



Lime Point 8. Następnym krokiem jest stworzenie napisu wg. pierwszej części tutoriala.
Teraz stworzymy połysk, który jest nieodłączną częścią każdego userbara (bardzo rzadko zdarzają się wyjątki od tej reguły). Wybieramy narzędzie zaznaczenie eliptyczne  Zaznaczenie eliptyczne [E] i tworzymy zaznaczenie podobne do tego poniżej.



Tworzymy nową warstwę, nie rezygnując z zaznaczenia i wypełniamy ją kolorem #ffffff. Krycie nowej warstwy ustawiamy na 20. Okno warstw powinno wyglądać następująco:



Natomiast praca tak:



Lime Point 9. Teraz już tylko musimy stworzyć ramkę, aby to zrobić wybieramy z menu Zaznaczenie -> Wszystko [Ctrl+A], dalej Zaznaczenie -> Zmniejsz o 1px. Teraz odwracamy zaznaczenie Zaznaczenie -> Odwróć [Ctrl+I]. Nie rezygnując z zaznaczenia tworzymy nową warstwę i wypełniamy zaznaczenie kolorem #000000.

I oto nasz skończony userbar.



Lime Point Koniec



Każdy userbar powinien mieć:
1. Wymiary 350x19 lub 150x19
2. Ramkę 1px, zazwyczaj czarną, lecz nie koniecznie.
3. Połysk, standardowo barwy białej, ale także nie ma sprzeciwu przeciw innym kolorom. Wszystko zależy od konkretnej pracy.
4. Napis wykonany czcionką Visitor BRK TT2 o wielkości 13px.


Cytuj
User - Użytkownik
Fan - To chyba każdy wie
Member - Członek, np. członek forum lub strony
Player - Gracz
Gamer - Gracz
Owner - Właściciel, posiadacz
Eater - Zjadacz
Drinker - Pijacz(?) np. Vodka drinker
Watcher/Viewer - Oglądacz (w prostym tłumaczeniu) np jakiegoś programu w tv
Citizen - Obywatel
Listener - Słuchacz (np. RMF FM listener)
Reader - Czytelnik, redaktor
Friend - Przyjaciel
Proud to be XX - Dumny, że jestem xx (w miejsce iksów możemy wstawić, np. nazwę kraju, w którym mieszkamy)
Driver - Kierowca np. BMW driver
Lover - Wielbiciel, miłośnik
Visitor - Odwiedzający, wizytator
Editor - Wydawca
Shopper - Klient, kupujący
Builder - Twórca
Smoker - Palacz
Mod - Moderator forum, strony
Admin - Administrator forum, strony
Consument - Konsument
Addict - Nałogowiec, człowiek uzależniony
Inhabitant - Mieszkaniec
Enemy - Wróg
Smeller - Wąchacz


« Ostatnia zmiana: 28.03.2010, 16:41:43 wysłane przez INSEKT » Zapisane
Piotreek
Gość
« Odpowiedz #1 : 13.01.2007, 17:44:34 »

nie moge tego efektu zrobic... robie tak jak jest napisane ale caly obraz mi sie pojaśnia... pomoglbymi ktos ?



oraz z tym tekstem z czcionka Visitor T12 ... robie tak jak jest napisane ale potem mi caly wyraz na czarno sie zmienia :/
Zapisane
marrek13
Użytkownik

Reputacja: 8 Offline Offline

Płeć: Mężczyzna
GIMP: 2.4
JID: marrek13@jabber.hostingcenter.pl
Licencja: CC-NC-BY-SA
Wiadomości: 55
Galeria Użytkownika


Pogromca uciśnionych


Zobacz profil
« Odpowiedz #2 : 13.01.2007, 17:52:46 »

Niestety, ale jeśli chodzi o ramkę to trzeba tylko wyklikać kolejne opcje i bardziej nie pomogę.
Jeśli chodzi o napis - pewnie przeoczyłeś punkt o tym, aby stworzyć nową warstwę POD warstwą z napisem i tam dokonywać operacji na zaznaczeniu/wypełniać.
Zapisane
Piotreek
Gość
« Odpowiedz #3 : 13.01.2007, 18:29:26 »

acha ... dzięki z napisem pomogles a userbarem juz robie i zachodzi "powoli" wychodzic Chichot mysle, ze wyjdzie. Jeszcze raz dzieki

teraz juz mam pobawilem sie troche Chichot, elipse na szybko wogole na szybko zrobilem i takie cosik wyszlo Chichot




piotros: Edytuj swoje posty!
« Ostatnia zmiana: 20.01.2007, 17:52:10 wysłane przez piotros » Zapisane
XYVA
Nowicjusz

Reputacja: 3 Offline Offline

Płeć: Mężczyzna
GIMP: 2.2
Licencja: Copyright
Wiadomości: 7
Galeria Użytkownika



Zobacz profil
« Odpowiedz #4 : 20.01.2007, 21:02:52 »

AAA Jak się robi skośne linie???
Zapisane

Firefox najlepszy jest szala lala
Shah
Emeryt

Reputacja: 18 Offline Offline

Płeć: Mężczyzna
GIMP: 2.2
JID: shah@jabber.aster.pl
Wiadomości: 498
Galeria Użytkownika


Użytkownik zbanowany


Zobacz profil
« Odpowiedz #5 : 20.01.2007, 21:05:01 »

AAA Jak się robi skośne linie???

Cytuj
Następnie tworzymy znowu nową warstwę i wypełniamy ją jednym z deseni

czyli wybierasz deseń, potem symbol kubełka z farbą na dole zaznaczasz wypełnianie deseniem i klikasz na nową warstwę.
Zapisane

Xaris
Nowicjusz

Reputacja: 3 Offline Offline

Płeć: Mężczyzna
GIMP: 2.2
Wiadomości: 1
Galeria Użytkownika


Dziobak!


Zobacz profil
« Odpowiedz #6 : 26.01.2007, 08:54:57 »

Wyszedł mi taki potworek:

Zapisane





mnietuniema
Użytkownik

Reputacja: 3 Offline Offline

GIMP: 2.6 + GAP
Licencja: Copyright
Wiadomości: 92
Galeria Użytkownika

mnietuniema


Zobacz profil
« Odpowiedz #7 : 28.01.2007, 19:59:23 »

Mi wyszło coś takiego:
Zapisane
Shah
Emeryt

Reputacja: 18 Offline Offline

Płeć: Mężczyzna
GIMP: 2.2
JID: shah@jabber.aster.pl
Wiadomości: 498
Galeria Użytkownika


Użytkownik zbanowany


Zobacz profil
« Odpowiedz #8 : 28.01.2007, 20:01:12 »

Mi wyszło coś takiego:


popracuj nad ramką i elipsą i będzie całkiem dobrze Uśmiech
Zapisane

Hcrespo
Nowicjusz

Reputacja: 3 Offline Offline

Wiadomości: 1
Galeria Użytkownika

Hcrespo


Zobacz profil
« Odpowiedz #9 : 29.01.2007, 14:17:12 »

Hej mam pytanie.Gdzie mam wrabać tę czcionkę?Albo może jak z gimpa ja odpalic jeżeli mam juz ja na kompie bo nie wiem.
Zapisane
Shah
Emeryt

Reputacja: 18 Offline Offline

Płeć: Mężczyzna
GIMP: 2.2
JID: shah@jabber.aster.pl
Wiadomości: 498
Galeria Użytkownika


Użytkownik zbanowany


Zobacz profil
« Odpowiedz #10 : 29.01.2007, 14:19:11 »

Hej mam pytanie.Gdzie mam wrabać tę czcionkę?Albo może jak z gimpa ja odpalic jeżeli mam juz ja na kompie bo nie wiem.
Czesc

klik

Pozdrawiam
Zapisane

Izu
Użytkownik

Reputacja: 4 Offline Offline

Płeć: Mężczyzna
GIMP: 2.6
Licencja: Copyright
Wiadomości: 177
Galeria Użytkownika


Powrót


Zobacz profil
« Odpowiedz #11 : 04.02.2007, 21:45:00 »

Wielkie gratulacje dla ciebie, bardzo dobry tutek dla początkujących.
Oto mój pierwszy UB w życiu wykonany dzięki tobie Chichot


Moja ocena 10/10
Zapisane

puss
Użytkownik

Reputacja: 20 Offline Offline

Płeć: Mężczyzna
GIMP: 1.*
Licencja: Copyright
Wiadomości: 162
Galeria Użytkownika

puss


Zobacz profil WWW
« Odpowiedz #12 : 04.02.2007, 22:26:31 »

-czcionka powinna byc czcionka "Visitor TT1 BRK" o rozmiarze 10 pt
-napis powinien byc obramowany biala otoczka
-napis powinien byc umieszczony po 6 px od konca userbara  gory i dolu
-elipsa powinna zaczynac sie dokladnie w lewym gornym rogu i konczyc w prawym gornym
-kolejnosc umiesczania warstw:
1 ramka
2 napis z obwodka
3 elipsa
4 patterm
5 render/rendery
6 tło

moge zrobic obrazki jak ktos nie rozumie:P
Zapisane


bitwy: 11 Wygranych, 1 Remis, 1 przegrana
SOTW: 4 Wygrane UOTW: 1 Wygrana
BLOG
Sam se przeczytaj regulamin.
marrek13
Użytkownik

Reputacja: 8 Offline Offline

Płeć: Mężczyzna
GIMP: 2.4
JID: marrek13@jabber.hostingcenter.pl
Licencja: CC-NC-BY-SA
Wiadomości: 55
Galeria Użytkownika


Pogromca uciśnionych


Zobacz profil
« Odpowiedz #13 : 04.02.2007, 23:25:20 »

Czcionka, którą podałeś, nie wygląda na UB robionym w GIMPie dobrze, a idealnym i dokładnym jej zastąpieniem jest ta z tutoriala, czyli Visitor TT2 BRK o rozmiarze 13px.
Obrys napisu prawie zawsze powinien być czarny - wyjątkiem są tła, na którym naprawdę obrysu nie widać(czerń, granat, etc.).
Co do elipsy, nie zgodzę się z dokładnością, gdyż nikt nie będzie odmierzał pikseli...
Pattern NIE może pokrywać rendera, w szczególności gdy występuje tylko jeden. W większej ilości, niektóre można dać pod pattern dla efektu. Gdyby wszystko było pod patternem, to cała praca byłaby nieczytelna.
Zgodzę się jedynie co do umiejscowienia napisu - podałeś po prostu dokładne wartości, tego co nazwałem środkiem...

To są zasady, przyjęte przez ogólną społeczność w świecie. Oczywiście szanuję Twoje zdanie, jednak ja pisałem tuta wg. w/w zasad.
Zapisane
Strony: [1] 2 3 ... 29
DrukujPobierz PDF
Polskie Forum Użytkowników GIMP-aTutorialeTutorialeGIMPSygnaturyWątek: Tutorial na userbar (klasyczny)
Skocz do: