[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: