Noticias Recursos Articulos Entrevistas ¿Quienes somos? Foro
Google

DiseñAr| Puro diseño grafico| Tutoriales

Tutoriales

cambio de dirección\n buscar en disen-ar.com
Diseño de botones

  • Nivel: basico
    Hola, bienvenidos a otro tutorial de DiseñAr sobre photoshop.
    Este tutorial es aplicable a cualquiera de las ultimas versiones ( 6,7,8 y 9 sino me equivoco).
    En esta ocasión vamos a hacer un boton para una interface, de por ejemplo una web o un videojuego.
    vamos a crear una imagen nueva ('Archivo-Nuevo...') del tamaño que quieran, yo la hice de 500x500 px aunque no vamos a utilizar todo el espacio, es para trabajar comodo.
    Lo primero que vamos a hacer es un rectangulo utilizando la herramienta de selección rectangular (M) y luego rellenandola con el balde para pintar (G) , para el relleno utilicé un marron ya que voy a hacer una textura tipo madera.

    Ahora vamos seleccionar un marron mas claro (#73521b) y seleccionamos el pincel (B), a este le ponemos 25% de opacidad y tamaño de 1 o 2 px. Luego pintamos el rectangulo dandole un efecto a madera. Despues agarramos un color mas oscuro (#73521b) y mejoramos el efecto a madera oscureciendo en ciertos lugares, y despues borramos el excedente que sobresale del rectangulo. Lo que vamos haciendo :

    Ahora vamos a hacerle un borde o marco. Seleccionamos el pincel nuevamente y vamos a poner un rojo bien fuerte (#ff0000) y el pincel de tamaño 1 px, la opacidad igual que antes , 25%. Ahora creamos una nueva capa y empezamos a hacer formas alrededor de rectangulo.
    Creamos la capa:

    El borde:

    Ahora vamos a aplicarle un Estilo de capa, para esto hacemos click derecho arriba de la capa "Borde" y ponemos "Opciones de fusión".
    La configuración se las muestro en imagenes.
    En Drop Shadow o Sombra paralela:

    En Bevel and Emboss o Bisel y relieve:

    En Gradient Overlay o Superposición de degradado:

    Por ultimo en Stroke o Contornear:

    El resultado del borde con el estilo de capa es este :

    Otro motivo

    Espero que les haya gustado y cualquier duda por favor pasen por el foro, no contesto por comentario, ya que resulta muy incomodo y poco practico.
    Saludos | Enviado por: Simirk Atam - El día: 2/1/07 - 04:25:25 |

DiseñAr| Puro diseño grafico.

Los tutoriales publicados en esta seccion son creados por miembros del staff de DiseñAr y esta prohibida su reproduccion completa o parcial, a menos que se cite al autor y la fuente (DiseñAr)


Creative Commons License ${work_title} by ${work_author} is licensed under a Creative Commons ${license_name} License.
Based on a work at ${source_link}.