Polskie Forum Użytkowników GIMP-a

---

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

---

[lp] Zaczynamy

Napis i jego obrys

[lp] 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 <tekst> [T] i ustawiamy tak jak jest to na zdjęciu poniżej.



[lp] 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.


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


[lp] 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


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


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



Tworzenie i używanie deseni

[lp] 1. Tworzymy nowy obraz o wymiarach 3x3px lub proporcjonalnie większy.


[lp] 2. Tworzymy nową warstwę z przezroczystym tłem.


I usuwamy warstwę Tło


[lp] 3. Wybieramy narzędzie pędzel <pedzel> [P] i ustawiamy następująco.


[lp] 4. Przechodzimy do okna obrazu. Powiększenie ustawiamy na 800% i rysujemy taki kształt.


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

[lp] 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

[lp] 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ć.

[lp] 2. Wybieramy narzędzie zaznaczenie rozmyte tzw. różdżkę <rozdzka>  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.


[lp] 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 (http://www.gimpuj.info/rozne/wycinamy-render-t1219.0.html)


Tworzenie userbara

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


[lp] 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.


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



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


[lp] 5. Teraz klikamy PPM na warstwę Oderwane zaznaczenie i wybieramy opcję nowa warstwa


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


[lp] 7. Teraz za pomocą narzędzia przesunięcie <przesuwanie> [M] ustawiamy nasz render żeby jakoś ładnie wyglądał, najlepiej gdzieś po lewej stronie.


[lp] 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


[lp] 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.


[lp] 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.

---

Edit by Cakper:
Dodaję listę zwrotów, a mój tutorial usuwam

Czcionkę zapisuje kopiujemy do C:\WINDOWS\Fonts a po Polsku to chyba powinno być tak: Czcionkę kopiujemy do C:\WINDOWS\Fonts

Masz racje. Ostatecznie i tak bym to poprawił po prostu najpierw tak ogólnie robie tuta a później reszte :) Ale dzięki za wytknięcie błędu.

Widzę, że robota wre. Tak trzymać, panowie.

Tylko nie wiem jaki dać poziom może jakieś propozycje ? Myślałem nad łatwy/średni.

łatwy

Tuttorial już prawie skończony. Teraz już tylko trzeba poprawić wszelkie błędy jakie tylko mogłyby się wedrzeć, dlatego proszę także was drodzy koledzy i koleżanki o wypisanie wszelkich błędów jakie tylko znajdziecie, a ja póki co poprawie to co sam znajdę.

EDIT: Może mi ktoś podać gdzie na linuksie wrzuca się czcionki i desenie ?

Tutaj chyba jest, nie patrzałem:

http://www.gimpuj.info/techniczne/wrzucanie-dodatkow-do-gimpa-w-linuxie-t110.0.html

http://www.gimpuj.info/rozne/czcionki-w-gimpie-t130.0.html

Punkt 1. - GIMP-a pogrub ;)
Punkt 2. - WYpełnijmy pogrub, oraz myślę, że możesz usunąć ten biały wyraz 'biały' i może zostać sama notacja html'owa. 'Okono warstw' pogrub.
Punkt 4. - Na 'Warstwę z tekstem' zastosuj też kursywę. Zamiast 'prawym przyciskiem' napisz PPM (prawym przyciskiem myszy może być w nawiasie).
Punkt 5. - 'Wypełniamy zaznaczenie' pogrub (pogrubiamy wszystkie czynności jak np. wypełniamy, zaznaczamy itp.)

Punkt 2. - Nazwy warstw oprócz pogrubiania pochylamy.
Punkt 4. - 'Okna obrazu' pogrub.
Punkt 6. - wszystkie określenia typu 'deseń', 'gradient', 'krycie' itp. pogrubiamy.

-

Oczywiście, jeśli w danym punkcie wskazałem błąd, to tyczy się to nie tylko tego punktu ale i całego tutoriala.

Mam wątpliwości odnośnie tematu. Wydaje mi się, że nie ma potrzeby pisania z wielkiej litery "User" i "Bara", napisałbym po prostu "userbara".

Zgadzam się - "userbara".

Dobra robota Zdybek, Grolak i Piotreek. Tylko po co po "końcu" wklejony jest stary tutorial?

No to już chyba skończyłem :)

To byś tytuł zmienił na samej górze i tam na dole z Tworzenie UserBara na Tworzenie userbara.

Tia, poprawione. Ja to zawsze muszę coś pominąć... :D

Kroki:
powinny być napisane wielką literą:

Natomiast skróty:
powinny być zapisane normalnie, a nie "kapslokiem":

To wszystko. Potem można podmienić.

Ins. poprawione.

W takim razie do podmiany, a temat zamknąć.

Hmm... a to nie przypadkiem twoja robota ? :P

Nie, ja mam za dużo na głowie :P

Hmmm....  no dobra INSEKT ma dużo na łbie, ale mamy przecież innych opiekunów tak więc ktoś mógłby podmienić, bo już skończyłem.

Podmienianie trudne nie jest, wystarczy skopiować tekst (poprzez Modyfikuj) i zastąpić tekst tutoriala. Zrobię to dla Ciebie, i temat zamknę ;)