Botones para web

Botones para web

Vamos a aprender a crear botones que podremos utilizar en nuestros diseños de páginas web. Para ello debéis seguir el siguiente tutorial.

Sigue los pasos y guarda el trabajo realizado con el nombre: PS_tut09.psd

El resultado final será similar al siguiente:



Primer paso:
Vamos a darle un acabado atractivo a cualquiera de las miles de Formas personalizadas que podéis descargaros de forma gratuita desde internet o a las que el propio photoshop lleva incorporadas...

Para ello, crea un documento de aproximadamente 200x200 píxeles, en el ejemplo utilizamos la siguiente Forma personalizada para después rasterizarla:


Pero recuerda que puedes utilizar cualquier otra forma.

Segundo paso:
Pulsa dos veces sobre la capa en la que se encuentra la forma para abrir la ventana de estilos de capa, aplícale una superposición de colores para rellenarlo de ese color que os interese en cada caso. En el ejemplo hemos elegido un tono verdoso:


Tercer paso:
A continuación, selecciona la forma pulsando con el botón izquierdo del ratón y la tecla control simultáneamente sobre su capa y contrae la selección alrededor de 3 píxeles, para ello pulsa Selección - Modificar - Contraer:


Cuarto paso:
Ahora selecciona en el color frontal el color blanco y utiliza la herramienta degradado. En l parte superior, donde se muestra la flecha en la imagen debes elegir el degradado Color Frontal/transparente:


Crea una nueva capa vacía y aplica el degradado dentro de la selección:


Quinto paso:
Aplica un desenfoque gaussiano en esta capa que contiene el degradado blanco de unos 2 ó 4 píxeles para suavizar un poco los bordes del mismo. Después vuelve a seleccionar laa forma inicial y utiliza la herramienta marco elíptico. Arriba a mano izquierda, debes pulsar sobre el pequeño icono que dice Restar de la selección y trazamos una elipse parecida a esta, con nuestra forma seleccionada:


De esta forma eliminas de la selección de la forma el trozo contenida en ella de elipse. Una vez más, coge la herramienta degradado con el color blanco como color frontal y rellena la selección con él:


Sexto paso:
Ahora debes ir a la capa en la que tenemos la forma y añadir un trazo de color negro de un pixel y con sombra paralela. Lo puedes hacer desde la ventana de estilos de capa y así añadir algo más de volumen a la forma:


Séptimo paso:
Para terminar de decorarla, puedes añadir otra forma encima de esta y la pones en el modo de fusión Superponer. En esl ejemplo se ha utilizado una señal de prohibido el paso. También se ha iluminado alguna zona pintando en una nueva capa vacía de blanco estando el modo de fusión de esta capa en luz suave:


Octavo paso:
Para terminar, puedes usar un fondo y añadir más elementos a tu gusto. Esto es un pequeño ejemplo de lo que puedes hacer, el resto depende de tu imaginación.