joi, 2 septembrie 2010

Cum desenam un buton web 2.0 in Photoshop



Dorim sa desenam in Photoshop un buton "cool", in moda web 2.0.

Deschiden Photoshop-ul, apoi un document nou (Ctrl + N), eu ales sa fie 150x100px si rezolutia 72. Am luat apoi Rounded Rectangle Tool (Ctrl + U) cu radius de 7 pixeli si desenez forma.

Pasul urmator, aleg layer-ul cu forma selectata si apli urmatoarele:

  • Gradient Overlay (de la culoarea #aec2ea spre #0e368f)
  • Stroke de 1px si culoarea #031168
  • Inner Glow culoarea alba si un procent de 50%.

Si iata rezultatul:


Urmeaza sa desenam stralucirea. Pentru aceasta, facem un layer nou, resetam culorile la cele de baza (apsam D, apoi X) si cu Rounded Rectangle Tool desenam "stralucirea" in partea de sus a formei deja existente. Iar apoi urmam pasii:

  • rasterizam noul layer
  • intram in Quick Mask Mode (apasam Q) 
  • cu Gradient Tool trasam un gradient pe forma noastra
  • parasim Quick Mask Mode (apasam Q)
  • obtinem o zona selectata pe care o stergem (apasam butonul Delete)

si iata rezultatul:

Cu unelta de scris Type Tool (T) scriem textul dorit, dupa care ii outem adauga o strlucire textului, un Outter Glow  de culoarea alba, Blend Mode: Screen si Opacity: 75%.

Si iata rezultatul:

Eu am mai adaugat o oglindire butonului meu. Pentru aceasta am mai desenat un ronded retangle chiar sub forma initiala. I-am atasat un layer mask, am trasat un gradient ca sa para transparent in partea de jos. Si i-am dat o opacitate de 20%. Si iata rezultatul:





Niciun comentariu:

Trimiteți un comentariu