[hexdecimal]

Gwiazdki w stylu Web 2.0
Tutorial

Opracowanie: hexdecimal
Poziom trudności: łatwy

Witam, chciałbym przedstawić jak łatwo i szybko za pomocą GIMP'a można wykonać efektowne gwiazdki, które są ostatnio bardzo modne na stronach www.

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


Zaczynamy

1. Zaczynamy od stworzenia nowego dokumentu z białym tłem. Rozdzielczość np. 200x200px.

2. Otwieramy Filtry -> Renderowanie -> GFigury. W otwartym okienku filtra wybieramy: Edycja -> Preferencje i zaznaczamy Wygładzanie. Jeśli tego nie zrobimy, nasze gwiazdki będą mieć postrzępione krawędzie.
 Wybieramy narzędzie z symbolem gwiazdy, następnie ustawiamy ilość bloków na np. 20 oraz wybieramy pędzel 1x1px. Wreszcie na samym środku tworzymy gwiazdę. Teraz w tym samym oknie szukamy narzędzia Przesuwa pojedyńczy punkt i modelujemy gwiazdę według naszych potrzeb:

Gdy mamy już wszystko gotowe zamykamy okno.

3. Zaznaczamy środek gwazdy Zaznaczeniem rozmytym klikając w jej wnętrzu.

4. Tworzymy nową przeźroczystą warstwę i wypełniamy wnętrze gwiazdy Gradientem [L].

5. Nie likwidując zaznaczenia stosujemy Filtry -> Rozmycie -> Rozmycie Gaussa.. o promieniu 10px.

6. Tworzymy efekt cienia 3D Filtry -> Światło i cień -> Rzucanie cienia... i ustawiamy przesunięcie X i Y na 2px oraz promień rozmycia na 4px.
Usuwamy warstwę GFig.

7. Ostatni już efekt możemy uzyskać tworząc nową przeźroczystą warstwę na na niej białą elipsę w lewym górnym rogu.

8. Zmieniamy krycie warstwy z elipsą na 15%.

9. Teraz możemy dodać jakiś napis lub obrazek. To co będzie wewnątrz gwiazy zależy tylko i wyłącznie od naszych potrzeb.

Wersja z przezroczystym tłem:

Koniec


Uwagi końcowe:

Te gwiazdki są używane na stronach aby podkreślić coś ważnego.

Wyglądają naprawde dobrze, pod warunkiem, że używane są tylko w uzasadnionych sytuacjach. Zaleca się aby na stronie znajdowała się jedynie jedna taka gwiazda.

Więcej o tworzeniu stron w trendach web 2.0 znajdziesz na http://www.webdesignfromscratch.com/web-2.0-design-style-guide.cfm

Miłego GIMPowania.


Edit be@: W punkcie drugim dopisałam o zaznaczeniu wygładzania w preferencjach.

[Szajba]

I to się nazywa profesionalny tutorial...

Edit: Efekt bardzo ładny... aż chyba zaprojektuję jakąś stronę.

[piotros]

Mi z pewnymi modyfikacjami wyszło tak:


BTW Przesadziłem z rozmiarem tej gwiazdy

[victor152]

Moje dziełka








Jaka to jest czcionka ktura napisane jest te $5 ??

[de3on]

A oto moje dzieła ;a):

#1


#2

[Tanalia]

Oo... Mi się te gwiazdki podobają bardzo! Przydatne!

[exis]

[mnietuniema]

Moje:

[Severius]

fajny tutek

[dejw]

moje wypociny

[RRH]

Mi wyszło takie coś:

[j1rka]

moje :
 

[gawrozek]

Nie wyszło :

[kubass4]

Mi tak wyszło:

[M!chał]

Ja zrobiłem coś takiego:

[Rejke]

dobry tut dla początkujących : >
Świetny na rozgrzewkę dla tak bardzo raczkujących (takich jak ja).

[Drobbek]

"W tym wątku nie pisano od 30 dni." - I tak napiszę  . Oto moja praca. Fajny i przyjemny tutek:

[krzysiek_raven]

A to moja gwiazdka. Użyłem jej ostatnio przy robieniu strony www. Bardzo przydatny tutorial;)

[WS23]

A mi wyszło to:
http://www.gimpuj.info/gallery/15274_12_09_08_9_04_00.png

[Gercio]

Wspaniały tutorial. Szybko i sprawnie robi się go.

Moja praca:

[Yanke$]

Dobrze wytłumaczony tut. A efekt mimo, że prosty to fajny  .
Moja praca  .

[MarSZaL]

Fajny tut...

[Pikni3]

Łatwy tutek

[Asesortyk]

@offtopik

Dałoby się zrobić przycisk na stronkę www w tej samej wersji (Web 2.0) co gwiazdkę, czy nie za bardzo? 

@offtopik

[Joten8]

@offtopik

Dałoby się zrobić przycisk na stronkę www w tej samej wersji (Web 2.0) co gwiazdkę, czy nie za bardzo? 

@offtopik

Ta gwiazdka jest w STYLU a nie w WERSJI Web 2.0.

[Mishell]

trochę inaczej zrobiłem cień, ale i tak wyszło całkiem przyzwoicie:

[Przemek178]

fajnie wygląda w kolorze fioletowym 

[Roark]

Mi nie bardzo się udało

[Stihe.]

no dzieki

[RMX]

No no fajny tutek
mi wyszło coś takiego

a jeszcze jedno jak dokładnie wycięliście tą jaśniejszą poświatę ?
bo mi coś nie wyszło

[Sheyk]

GIMP ruuulez!

[Gimpix]

oto moja gwiazdeczka 

dopiero teraz widzę ze słabo usunąłem elipsę xD nie chce mi się poprawiać

świetny tutek

[changes]

Ciekawy tutorial, info w nim zawarte na pewno się przyda:)

[Hasesis]

Dziękuję za tutka! 

[gimpowiecmaciek]

Robi mi na poczatku cos takiego wie ktos co jest grane?

[be@]

Wybrałeś za gruby pędzel do rysowania promyków.

[gimpowiecmaciek]

ale jak zrobic aby te zeby nie byly takie dlugie?

[be@]

Poniższa animacja pokazuje, jak zmieniać długość promieni:

[gimpowiecmaciek]

Sorki za natretnosc ale dalej nie kimam... zym to zrobic? Jakas kombinacja klawiszy?

[be@]

Łapiesz za ten czarny punkt i przesuwasz.

[gimpowiecmaciek]

Dziekuje bardzo:)

[PRZEMYSLAW-S]

Mi z pewnymi modyfikacjami wyszło tak:


BTW Przesadziłem z rozmiarem tej gwiazdy

E bredzisz śliczna gwiazdtk, i CZYTELNA .