Stworzenie „naciskanego” przycisku PS + CSS

12 sierpnia, 2012 w kategoriach: Grafika 2D, Web design, Adobe Photoshop

2,671 2
Dane:
  • Czas pracy: 15min
  • Poziom: Średnio zaawansowany
Opis:

Na podstawie artykułu ze strony http://www.sanjaykhemlani.com chciałbym przedstawić jak stworzyć przycisk, z animacją po najechaniu na niego myszką w Photoshopie + CSS

Pokaż/Ukryj wszystko

Otwieramy nowy dokument w photoshopie i ustawiamy rozmiar 500px na 500px. Ustawmy też sobie marginesy wysokość 3px i szerokość 4px. Teraz ustawmy sobie kolory. Kolor pierwszego planu (foreground) ustawmy taki #c9e182, a kolor drugiego planu (background) ustawmy taki #a8cb5c.

Alt 1-colors-for-button


Wydawnictwo Strefa Kursów

Teraz gdy mamy już wszystko ustawione wybieramy narzędzie Zaokrąglony prostoką (skrót U, Rounded Rectangle Tool). Gdy mamy wybrane to narzędzie to u góru wybieramy kąt pod jakim mają być zaokrąglone rogi. Interesuje nas kąt 10px i taki ustawmy. Możemy to też zrobić klikając dwa razy na kształt, wtedy otworzy nam sie okienko, w którym możemy ustawić kąt.

Alt 3-make-selection

Gdy mamy stworzony nasz kształt, musimy go zaznaczyć, byśmy mogli teraz nałożyć na niego gradient. Na palecie warts klikamy na nasz kształt PPM i wybieramy Opcje mieszania (Blending Mode). W tych opcjach przechodzimy do opcji Nałożenie gradientu (gradient overlay). Zaznaczamy tą opcję i wybieramy z kolorów nasze ustawienia początkowe, który już zrobiliśmy na początku. Reszte ustawiamy tak jak na obrazku.

Alt 5-gradients-for-button-1

Dalej jesteśmy w opcjach mieszania i wybierzmy zakładkę Obrys (Stroke) ustawmy tam kolor ramki na taki #d3ed87 i zmieńmy jej szerokość na 1px.

Alt stroke

Gdy już mamy gotowy nasz element dodajmy do niego text. Wybierzmy Tekst (T) i ustawny czcionke na Arial Bold kolor biały i dopasujmy sobie rozmiar według naszego widzimisię. Tak jak w przypadku samego elementu tak i tu wejdźmy w opcje mieszania (blending mode) i ustawmy tak jak niżej w Cień (Drop shadow)

Alt text-dropshadow

Teraz złączmy nasze warstwy, można to zrobić kombinacją klawiszy CTRL+ J. Teraz zduplikujmy tą warstwę i tą która jest niżej wypełnijmy kolorem (Edycja/Wypełnij albo Edit/Fill) tym kolorem #96b553.

Alt 6-shadow-color

Teraz zduplikujmy jeszcze raz jaśniejszą wersje przycisku i przeciągnijmy ją 5px niżej od reszty a tą ciemniejszą warstwe 3px poniżej od pierwszego przycisku (możemy to zrobić strzałkami). Trochę to zamotałem ale rysunek niżej rozwiąże sprawę.

Alt duplicated-layer

Teraz otwórzmy sobie jakiś edytor i wpiszmy w niego kod CSS

button a{
margin:50px auto 0 auto;
background: url(image/buttons.png) repeat scroll 0 0 transparent;
display: block;
height: 120px;
width: 350px;
text-indent:-9999px;
}
button a:hover{
background-position:0 -120px;
}

Nie będę tego tłumaczył, po opisie widać po samym kodzie widać co i jak.

Teraz wywołanie w html to będzie tak

<div id=”button”><a href=”#”></a></div>

Witam tutaj mamy demo przycisku i podziekowania dla strony http://sanjaykhemlani.com dzięki której ten tutorial tu się pojawił.

Pokaż/Ukryj wszystko

Tutorial się podobał? Podziel się z innymi:

Dyskusja (2 wypowiedzi)

Dodaj odpowiedź

Dodaj komentarz