Metal Interface.docx

(89 KB) Pobierz

Metal Interface


Metal Interface
Tworzymy prosty Interface

autor: Michał Gawrysiak (Siwy_PO)

Otwieramy nowy dokument i ustawiamy tło ciemno szare tło (#333333).
Tworzymy nową warstwę (CTRL + SHIFT + N), nazywamy ją "Base Gradient", teraz wybieramy narzędzie Rectangular
Marquee Tool i tworzymy prostokąt, wypełniamy go Gradientem

http://www.siwegolinki.republika.pl/Naw/nawgrandiet.gif
o kolorach białym i szarym (#888888)


http://www.siwegolinki.republika.pl/Naw/nawprostokat.gif
Usuwamy selekcje CTRL + D
Tworzymy nową warstwę nazywamy ją "Metal Glow" i narzędziem Rectangular Marquee Tool kolejny prostokąt.
http://www.siwegolinki.republika.pl/Naw/nawprostokatII.gif
Wypełniamy go białym kolorem, usuwamy selekcję CTRL+D, następnie Filter > Blur > Gaussian Blur (4px)
http://www.siwegolinki.republika.pl/Naw/nawblurI.gif
Teraz CTRL + G, aby warstwa "Metal Glow" "przykleiła" się na warstwę "Base Grandiet".
http://www.siwegolinki.republika.pl/Naw/nawctrlg.gif
Teraz powielamy warstwę "Metal Glow" i przesuwamy nasz nasz "pasek" na górę prostokąta.
http://www.siwegolinki.republika.pl/Naw/nawblur2.gif
Tworzymy kolejną warstwę o nazwie "Stroke".
Wybieramy narzędzie Rounded Rectangle Tool
http://www.siwegolinki.republika.pl/Naw/nawround.gif
i tworzymy button o białym kolorze.
http://www.siwegolinki.republika.pl/Naw/nawstroke.gif
Teraz trzymając klawisz CTRL klikamy na warstwę "Stroke" spowoduje to zaznacznie naszego buttona. Teraz Select -> Modify ->Contract (1px)
Tworzymy nową warstwę, nazywamy ją "Base Button" i wypełniamy nasze zaznaczenie gradientem o kolorach
http://www.siwegolinki.republika.pl/Naw/nawcolor2.gif
http://www.siwegolinki.republika.pl/Naw/nawbase.gif
(Ciemniejszy pomarańczowy na górze)

Teraz Select -> Modify ->Contract (1px)
Tworzymy nową warstwę, nazywamy ją "Light" i wypełniamy nasze zaznaczenie gradientem o kolorach
http://www.siwegolinki.republika.pl/Naw/nawcolor3.gif
http://www.siwegolinki.republika.pl/Naw/nawlight.gif
Tworzymy nową warstwę o nazwie "highlight", wybieramy narzędzie Rounded Rectangle Tool
i tworzymy coś takiego:
http://www.siwegolinki.republika.pl/Naw/nawhighlight.gif
Teraz zmieniamy wartość wypełnienia warstwy na 0%
http://www.siwegolinki.republika.pl/Naw/nawfill.gif
Teraz Layer -> Layer Style -> Gradient Overlay i wybieramy styl "Foreground to Transparent"
http://www.siwegolinki.republika.pl/Naw/nawoverlay.gif

Nasza nawigacja jest gotowa, wystarczy tylko dodać tekst
http://www.siwegolinki.republika.pl/Naw/nawkoniec.gif 

Zgłoś jeśli naruszono regulamin