Jump to content
wz.

Pomysł i wykonanie Shoutboxa

Recommended Posts

wz.

Nazwa poradnika: Pomysł i wykonanie Shoutboxa na forum.

Autor poradnika: WuZeet

Potrzebne materiały: Posiadanie wiedzy o narzędziach znajdujących się w programie GIMP i potrafienie czytać ze zrozumieniem – przydatna umiejętność.

Poradnik ma na celu[…]: […]nadania pomysłu początkującym grafikom na wygląd shoutboxa na stronę internetową i jego proste wykonanie. Osobiście myślę, że poradnik przyda się, gdyż wielu z was ma identyczny schemat sb, a ja pokażę wam inny – tak jakby wtrącę coś od siebie dla społeczności w internecie. Sposób wykonania tego shoutboxa przedstawię na najłatwiejszych opcjach, aby nowi się zbytnio nie męczyli przy tym. Shoutbox stworzony tutaj będzie zrobiony z myślą o ciemniejszych szablonach.

1. Aby rozpocząć należy utworzyć nowy obraz o wymiarach przykładowo 1000x400.

2. Następnie wybieramy interesujący nas kolor tła - ja wybrałem #232323 i ustawiamy pomocne nam prowadnice, mianowicie klikamy w: Obraz -> Prowadnice -> Nowa prowadnica i ustawiamy kierunek poziomo o położeniu 10, potem wybieramy kierunek pionowo o położeniu pierwszym 10, a w drugim 990.

4335861838.PNG

3. Kolejnym krokiem jest stworzenie belki, gdzie znajdzie się napis Shoutbox lub inna nazwa wymyślona przez was. Więc bierzemy zaznaczenie prostokątne i zaznaczamy mniej więcej na granicach prowadnic:

4539347578.PNG

Wykańczamy go, ja wybrałem kolor pierwszoplanowy tej belki taki: # 74af33, a następnie wykończyłem belkę pędzlami o kolorze głównie #2f2f2f, dodałem efekt szkła, i kilka innych efektów. Ostatnią rzeczą co do belki to lekkie zaokrąglenie o promieniu 15 i dodanie na nowej warstwie obrysu białego i zmniejszyć krycie. Oto dotychczasowy efekt jaki powinniście uzyskać. Oczywiście nie taki sam, zależy jakie efekty i jak je wykonywaliście.

414792025.png

4. Kolejnym krokiem jest stworzenie tła pod posty w shoutboxie, tła – jak inni wolą tabelkę. Tworzymy nową warstwę, i zaznaczamy zaznaczeniem prostokątnym o mniejszej długości niż belka (przed wykonaniem tej czynności otwórzcie obraz -> prowadnice -> nowa prowadnica i wpiszcie tam 710 w pionowym), jeszcze niższe zaznaczenie i wypełniamy ją gradientem dwuliniowym – kolor pierwszoplanowy #3b3b3b, a drugoplanowy to #2f2f2f. Na końcu duplikujemy tę warstwę i przesuwamy ją pod spód, aby uzyskać efekt kilku postów, a nie jednego. Pamiętajmy, że musi być jeden piksel odstępu od każdej takiej tabelki.

1203760846.png

5. Teraz dodajemy nową warstwę, wybieramy zaznaczenie prostokątne i zaznaczamy na tę samą długość co „nasze tabelki” pole na treść wiadomości do wysłania. Również można gradientem dwuliniowym, pierwszoplanowy kolor to #ffffff, a drugoplanowy to # e5e5e5 . Obrys tego pola może być kolorem… hmm… #2f2f2f.

2433573898.png

6. Teraz stworzymy przyciski, a dokładnie jeden, resztę zduplikujemy. No więc wysokość będzie to taka jak pole na treść wiadomości, a szerokość obojętnie, byle nie był to kwadrat. Wypełniamy kolorem zielonkawym jak na belce i dodajemy efekty, tak samo jak na belce polecam.

1212170007.png

7. Tworzymy nową warstwę, wybieramy odręczne zaznaczenie obszarów, zaznaczamy takie jakby trójkąciki, wypełniamy je gradientem z kolorem pierwszoplanowym białym i gradient wybieramy kolor pierwszoplanowy na przezroczystości , lekko machniemy zmniejszamy krycie i wychodzi nam fajny efekt. Pokazuje już na kilku stronach gotowy.

3866572106.png

8. Na samym końcu wypełniamy to wszystko tekstem i jakimiś efektami, np. usuń itd. Gotowy shoutbox przedstawiam tutaj, a do pobrania macie niżej.

1863220036.png

Plik .psd jak i .xcf pobierzesz tutaj:

Link do pobrania:

http://speedy.sh/U7xVE/Poradnik-SB.rar

Share this post


Link to post
Share on other sites
Daniel

Tutorial świetnie opisany już zabieram się za tworzenie shoutboxa. Wielkie dzięki. ;)

Share this post


Link to post
Share on other sites
Guest
This topic is now closed to further replies.
×
×
  • Create New...