Przycisk Web 2.0

Autor: Grzegorz Róg, dodano: 12-08-2009
Kategoria: Projektowanie WWW

W tym tutorialu z pomocą Photoshopa stworzymy prosty, ale efektowny "przycisk Web 2.0".

 

Rezultat naszej pracy będzie wyglądał tak:

Pierwszą czynnością jest stworzenie nowego dokumentu w Photoshopie o wymiarach powiedzmy 500x500px. Tło ustawiamy na białe i wybieramy z palety Tools narzędzie Custom Shape Tool, które znajduje się w grupie Rectangle Tool.

 

Przechodzimy do górnej części interfejsu gdzie znajdują się właściwości programu. Między innymi możemy wybrać określony kształt. Kształt, o który nam chodzi nie jest domyślnie dostępny na liście, w związku z tym wybieramy małą ikonkę trójkąta w prawym górnym rogu a następnie ładujemy nowe kształy wybierając „All”.

Wybieramy określony kształt.

Rysujemy w polu dokumentu kształt przytrzymując klawisz Shift aby zachować proporcje.

Kolejna operacja to stworzenie nowej warstwy, którą wypełnimy gradientem. Tworzymy nową warstwę wybierając małą ikonkę New Layer w dolnej części palety warstw, a następnie, mając zaznaczoną tą warstwę, tworzymy selekcję w następujący sposób: z wciśniętym klawiszem Ctrl klikamy jednokrotnie na miniaturce maski warstwy z kształtem.

Wybieramy narzędzie Gradient Tool I ustalamy odpowiedni kolor główny jak I kolor tła. Wybieramy stosowne wypełnienie z panelu właściwości narzędzia.

Tworzymy gradient na nowej warstwie (pamiętaj że musi być aktywne zaznaczenie które wykonaliśmy w poprzednim kroku).

Z pomocą narzędzia Pen Tool na nowej warstwie tworzymy kształt podobny do tego z obrazka poniżej.

Dokonujemy następującej selekcji. Klikamy z wciśniętym Ctrl na miniaturkę maski warstwy z kształtem przycisku. Zostanie zaznaczony przycisk. Teraz wybieramy polecenie Modify>Contract z menu Select. Zmniejszamy selekcję o 4 px. Następnie wciskamy kombinację Ctrl+Ald+Shift i klikamy na miniaturce warstwy z kształtem narysowanym Pen Toolem. Wynik powinien prezentować się następująco.

Tworzymy nową warstwę i selekcję wypełniamy gradientem przechodzącym z koloru białego w przezroczystość.

Duplikujemy warstwę z kształtem przycisku – klikamy na niej prawym przyciskiem i wybieramy Duplicate Layer. Następnie zmieniamy jej kolor na czarny, poziom krycia na 15% i przesuwamy ją za pomocą Move Tool tak, by utworzyła cień.

Dodajemy tekst i tworzymy na warstwie z tekstem styl Stroke – tworzymy obramowanie koloru zielonego grubości 3px.

Zaznaczamy z wciśniętym Ctrl wszystkie warstwy z grafiką i wciskamy Ctrl+E aby je połączyć w jedną warstwę. Wybieramy Ctrl+T aby za pomocą Free Transform obrócić nieco przycisk.

 

Nasza praca jest gotowa:

 

 


 

Grzegorz jest jest twórcą

kursu Photoshop CS4

.

 

Autor: Grzegorz Róg


www.eduweb.pl

Ocena 2.64/5 (52.77%) (512 głosów)

Komentarze:



    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.