Projektowanie przycisków w Photoshopie

 

Photoshop czy CSS3?

Jestem entuzjastą nowych technologii sieciowych. Kiedy tylko mogę sięgam po techniki CSS3 i coraz rzadziej zdarza mi się używać Photoshopa. Jednak w wielu przypadkach skorzystanie z CSS3 jest niemożliwe. Za przykład niech posłużą chociażby newslettery czy reklamy AdSense. Mimo, że sieć dynamicznie rozwija się w stronę lżejszych, szybszych i czystszych stron, warto mieć w swoim arsenale projektanta kilka podstawowych technik z zakresu UI.

Nowy dokument

Projektowanie przycisku zaczniemy od stworzenia nowego dokumentu. W tym celu wciśnij Ctrl+N i podaj wymiary obrazka. Ustaw kolor tła dokumentu na biały.

Wektorowy kształt przycisku

Aby stworzyć kształt przycisku wybierz narzędzie Zaokrąglony Prostokąt lub dwukrotnie naciśnij Shift+U. Aby uniknąć rozmycia krawędzi z menu Widok wybierz polecenie "Przyciągaj do" i zaznacz Siatka. Jeśli ta opcja jest niedostępna możesz być zmuszony do odblokowania jej w menu Widok>Pokaż>Siatka. Tworzenie przycisków z wykorzystaniem kształtów wektorowych ma swoje zalety. Dzięki temu możesz w dowolnym momencie zmienić kolor i rozmiar elementu. W menu kontekstowym u góry ekranu wybierz promień zaokrąglenia prostokąta oraz jego kolor. Następnie narysuj pożądany kształt przycisku.

Stylizacja przycisku

Kształt i kolor naszego przycisku jest ustalony, możemy zatem nadać mu charakter. Wywołaj paletę Warstwy klawiszem F7 i dwukrotnie kliknij w fiszkę przedstawiającą stworzony przed chwilą kształt. Otworzy się okno Styl Warstwy, w którym dokonywać będziemy wszystkich operacji na przycisku.

Nałożenie gradientu

W pierwszej kolejności nadamy przyciskowi strukturę, która uczyni go wypukłym. W tym celu wybierz zakładkę Nałożenie gradientu. Ustaw Tryb mieszania na Nakładka, Krycie w okolicach 30%, Kąt na 90 stopni. Eksperymentuj z ustawieniami, pamiętaj jednak, że co za dużo to niezdrowo, a najlepszy efekt uzyskasz na umiarkowanych parametrach.

Obrys

Aby nadać przyciskowi obwódkę kliknij w zakładkę Obrys. Ustaw Rozmiar na 1 piksel, a Położenie na Wewnątrz. Wybierz kolor o kilka tonów ciemniejszy niż najciemniejszy odcień gradientu na przycisku. Zapewni to odpowiedni kontrast i odcięcie od tła.

Cień wewnętrzny

Przycisk wygląda już nieźle, jednak nadal wydaje się płaski. Aby sprawić wrażenie światła odbijającego od jego górnej, pionowej krawędzi, dodamy cienką, jednopikselową linię poniżej obwódki. W tym celu kliknij zakładkę Cień wewnętrzny. Zmień Tryb mieszania na Nakładkę i ustaw kolor na biały. Wyreguluj Krycie, aby uzyskać naturalny efekt. Ważne jest, aby Kąt wynosił 90 stopni, a odległość 2 piksele, co uwzględnia nałożony wcześniej Obrys. Parametry Podlewka i Rozmiar ustaw na 0. Prawda, że nasz przycisk od razu nabrał wyrazu?

Cień

Ostatnim atrybutem struktury naszego przycisku będzie delikatny cień, który pogłębi wrażenie wypukłości. Cień jest najczęściej nadużywanym przez projektantów efektem, dlatego należy się nim posługiwać z umiarem. Nasz klawisz wystaje ponad powierzchnię o zaledwie jeden piksel, a zatem rzucany przez niego cień nie powinien być rozległy. Kliknij zakładkę Cień i dopasuj ustawienia. Zwróć uwagę, że w zależności od koloru tła, cień powinien mieć różną intensywność. Także odcień Obrysu należy dostosować do podkładu.

Stylowanie tekstu

Nasz przycisk jest prawie gotowy, ale brakuje na nim informacji do czego służy. Aby dodać tekst, naciśnij T, wybierz krój i rozmiar czcionki. Kolor tekstu będzie w tym przypadku zbliżony do kolory Obrysu. Kliknij na przycisku i wprowadź odpowiednią treść. Naciśnij Shift+Enter, aby zakończyć edycję tekstu i wybierz narzędzie do przesuwania (V) aby ustawić napis pośrodku klawisza.

Efekt letterpress

Zależy mi na osiągnięciu efektu letterpress, czyli zagłębionego tekstu przypominającego dawny druk na papierze czerpanym. Aby zasugerować światło odbijające się od krawędzi zagłębienia kliknij dwa razy w warstwę w panelu Warstwy i wybierz zakładkę cień w oknie Styl warstwy. Podobnie jak w przypadku Cienia wewnętrznego na przycisku, ustaw Tryb mieszania na Nakładkę, biały kolor i krycie w okolicach 40%. Dostosuj kąt na 45 stopni i odległość na 2 piksele. Aby Cień był ostry i precyzyjny ustaw Rozmiar na 0. Aby pogłębić efekt letterpress, dodamy do tekstu Cień wewnętrzny. Ponownie wybierz Nakładkę jako Tryb mieszania, krycie 40%, Kąt 45 stopni. Odległość ustaw na 1, a rozmiar na 0. Jeśli tekst jest wyjątkowo duży, rozmiar może być w granicach 1-3 pikseli, aby zasugerować większą głębokość tłoczenia.

Gotowy przycisk

Tym sposobem skończyliśmy nasz button. Ponieważ pracowaliśmy na wektorach i stylach warstw, w każdym momencie możemy zmodyfikować przycisk wedle potrzeb. Wystarczy zmienić kolor zaokrąglonego prostokąta, oraz jego Obrys. W przypadku tekstu wystarczy sama zmiana koloru. Taki przycisk możemy zapisać jako PSD lub jako osobne style warstwy.

Na koniec

Co sądzicie o zaprezentowanej technice? Czy macie inne, lepsze rozwiązania na projektowanie buttonów. Podzielcie się z nami swoją wiedzą! W następnym artykule z serii postaramy się odtworzyć ten przycisk w CCS3.