Metalowe menu ze szkłem

Autor: Łukasz Pabian, dodano: 12-08-2009
Kategoria: Projektowanie WWW

Tutorial nauczy się jak krok po kroku zrobić efektowny element, który można wykorzystać np. w menu. Metal i szkło świetnie razem się prezentują, także w internecie.

Tutorial pozwoli Ci uzyskać taki efekt:

 

 

Za pomocą kształtów formujemy prostokąt z zaokrąglonymi rogami - wybieramy Rounded Rectangle Tool [U] i ustawiamy radiu na 3px. ustawiamy kolor narzędzia na RGB:[52,131,0] a kolor tła na RGB:[116,243,30]

 

 

 

Klikamy prawym przyciskiem myszy na warstwę z przyciskiem i wybieramy Blending Options. Przechodzimy do sekcji Gradient Overlay, wybieramy z gradientów kolory, które przed chwilą wybraliśmy, zaznaczamy Reverse oraz ustawiamy Scale na 120%

 

 

Teraz przechodzimy do sekcji Bevel and Emboss i zmieniamy Depth na 1000%, Size na 6px, Soften na 3px, kąty zostawiamy bez zmian, jedynie zmieniamy Hilight mode na Linear Dodge oraz Opacity odbicia ustawiamy na 87%, a Opacity cienia ustawiamy na 0%

 


Za pomocą kształtów formujemy prostokąt z zaokrąglonymi rogami - wybieramy Rounded Rectangle Tool [U] i ustawiamy radiu na 3px. ustawiamy kolor narzędzia na RGB:[120,120,120] a kolor tła na RGB:[199,199,199]. Klikamy prawym przyciskiem myszy na warstwę i wybieramy Rasterize Layer.

 

Klikamy lewym przyciskiem myszy razem z Ctrl na warstwę zieloną i wycinamy z szarej warstwy powstałe zaznaczenie - [Ctrl + X]. Klikamy prawym przyciskiem myszy na warstwę z przyciskiem i wybieramy Blending Options. Przechodzimy do sekcji Gradient Overlay, wybieramy z gradientów kolory, które przed chwilą wybraliśmy - szare, ustawiamy Angle na 92 stopnie.


W sekcji Bevel and Emboss zmieniamy Depth na 1000%, Size na 1px, Soften na 2px, Angle zmieniamy na 113 stopni, Altitude na 45 stopni, jedynie zmieniamy Hilight mode na Color Dodge oraz Opacity odbicia ustawiamy na 100%, a Opacity cienia ustawiamy na 45%.

 


Z prawej strony tworzymy zaznaczenie z okręgu o średnicy równej wysokości szarego prostokąta. Odwracamy zaznaczenie [Ctrl+shift+I] i gumką usuwamy prawą strone okręgu.

 

Ściągnij przykład w pliku PSD

Ocena 2.63/5 (52.6%) (200 głosów)

Komentarze:

  • Artykuł
    Dodał: Robo data: 2009-08-23
    Bardzo pomocny i przydatny tutek, dzięki :)
  • Braki
    Dodał: Gość data: 2009-12-01
    Tutorial źle napisany - brak w nim paru podpunktów do wykonania. Postępując zgodnie z opisem, nigdy nie osiągnie się efektów jak na przykładowych obrazkach.
    Najlepiej TYLKO przejrzeć opis ćwiczenia, i ściągnąć pliczek przykładowy - dopiero on zawiera wszystkie ustawienia, i na nim najlepiej się wzorować.
  • Krytyka
    Dodał: Gość data: 2010-01-07
    Całkowicie zgadzam się z przedmówcą. Materiał napisany na odczepnego aby zapełnić wortal.

  • Dodał: Gość data: 2010-06-18
    uwazam podobnie, dla kogos kto slabo zna angielski i dopiero zaczyna zabawe z ps ten tutorial jest nieprzydatny.

  • Dodał: Gość data: 2010-09-02
    Wszytko fajnie tylko w opisie jak "wyciąć" zieloną warstwę z szarej czegoś brakuje, a przykład w psd nie działa :/
  • cs5
    Dodał: Gość data: 2011-08-10
    działa działa, kreatywni nawet nie muszą nad tym myśleć za dużo ...


Dodaj komentarz:


Temat:
Twój nick:
Komentarz:
 

Prosimy o kulturę wypowiedzi. Komentarze zawierające niecenzuralne zwroty, bądź obrażające inne osoby będą usuwane. Kod HTML w wypowiedziach jest niedozwolony. Wydawca nie odpowiada za treść komentarzy.