Un diseño simple en Photoshop

Publicado por asktutorial.

Aplicar las herramientas y los diseños de Photoshop al diseño web no es para nada difícil. Hasta los más principiantes pueden crear elementos que conformen un portal, y lograr piezas de mucha naturalidad, con profundidad y estilo. El juego se encuentra en probar diversos estilos y combinaciones de colores.

Para estimular este costado creativo, a continuación veremos un tutorial sumamente útil para quien desee introducirse al mundo del diseño web. diseño simple en Photoshop

Cómo crear botones en Photoshop

1.    En un archivo nuevo, en blanco, dibujaremos el rectángulo que funcionará como botón. Lo ideal, si se quieren elegir medidas, es utilizar líneas guía y ubicar los vértices del rectángulo en las intersecciones.

2.    Para redondear los vértices del rectángulo, vamos a Selección > Modificar > Redondear. Elegimos el radio a gusto. Un buen número podría ser 2 píxeles.

3.    Creamos una nueva capa, que será como la superficie del botón, la que le dé efectos La llamaremos “Superficie”. Allí, rellenamos con blanco la selección. A continuación deseleccionamos con Ctrl+D. Vamos a Capa > Estilos de capa. Allí, modificaremos los valores de las siguientes secciones:

Resplandor interior. Modo de fusión: trama. Opacidad: 100%. Ruido: 0%. Origen: borde. Retraer: 0. Tamaño: 3. Rango: 50%.

Superposición de degradado. El color del degradado queda a elección. Lo importante es que sea de tipo Sólido y plantear cinco instancias de color (que sean graduales y ubicadas a distancias parejas).

Trazo. Tamaño: 1px. Posición: Interior. Modo de fusión: Normal. Opacidad: 100%. El color elegido debe ser el más oscuro del degradé del paso anterior.

4.    Duplicamos la capa de la superficie. La llamaremos “Inferior”. A esta, le aplicaremos otros valores en la ventana Estilos de capa nuevamente.

Sobra paralela. Modo de fusión: Luz fuerte (color gris oscuro). Opacidad: 40% Ángulo: 120º, usar luz global. Distancia: 3px.

5.    En una capa nueva, que llamaremos Texto, incluimos las palabras que identifiquen al botón (por ejemplo Inicio o Productos). Con la herramienta Estilos de capa, aplicamos una sombra o un resplandor externo para darle más verosimilitud.

Qué aplicaciones tienen los botones en web

En el diseño web, ver botones es muy común. Los encontramos normalmente en cada una de las opciones a las que accedemos para navegar. En general, las páginas web estándar cuentan con una barra de opciones horizontal justo debajo del header o titular. Allí es donde los botones tienen su lugar. Pueden llevar a muchas otras partes del portal: el listado de productos, un portfolio, las opciones de registro e inicio de sesión y muchos etcéteras.

Lo bueno de este tutorial es que nos permite realizar muchos juegos de colores, especialmente porque se trabaja con degradados. Lo importante es tener en cuenta siempre que jugar con los colores está permitido siempre y cuando no alteren la legibilidad del texto, es decir, que respete contrastes mínimos necesarios.

Finalmente, hay que recordar que tanto el color como la tipografía comunican, y cada elemento de una web es una excusa para transmitir sobre una marca. Si bien es bueno partir de una plantilla de base, no es lo ideal quedarse con una estética y una paleta estándares.

Dejar un comentario

Tenga en cuenta: la moderación de comentarios está habilitada y puede retrasar su comentario. No hay necesidad de volver a enviar su comentario.

¡SUSCRÍBETE GRATIS!

Nosotros

AskTutorial nace en Junio del 2010 en la ciudad de Chicago, IL con el fin de crear Tutoriales Educativos en Español dirigidos a la comunidad de habla hispana en Estados Unidos y alrededor del mundo. Gracias a la excelente respuesta del publico que diariamente ve nuestros videos nos hemos extendido a no solo crear video tutoriales, si no tambien ofrecemos información relevante de acuerdo a sus preguntas.

Archivos / Mes

Contenido Bloqueado Solo Para Seguidores

Para ver el contenido solo sígueme en cualquiera de estas redes sociales. ¡Muchas gracias por todo!