Unlimited PS Actions, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
  1. Design & Illustration
  2. Designing

Cómo crear un efecto de diseño web en 3D

by
Read Time:3 minsLanguages:

Spanish (Español) translation by Ender Gamboa (you can also view the original English article)

En este tutorial te mostraré algunas técnicas muy sencillas, utilizando degradados y estilos de capa, que podemos utilizar para producir bonitos y sutiles efectos 3D en nuestros diseños web.


Paso 1

Crea un nuevo documento con 1000x750px. Haz doble clic en la capa del fondo y en Superposición de color y elige un marrón oscuro.


Paso 2

Habilita las reglas (Ver>Reglas) en el documento y añade algunas guías como se muestra a continuación. Crea 2 guías horizontales, la primera de 30px y la segunda de 250px. Luego agrega 2 guías verticales de 100px y 900px.


Paso 3

Crea un rectángulo con la herramienta Rectángulo (U). Utiliza las guías como referencia. Cambia el nombre de la capa por el de cabecera.


Paso 4

Elige el negro como color del primer plano. Selecciona la herramienta Elipse y crea la forma que tendrá la sombra. Hazla un poco más alta que el rectángulo blanco como se muestra. Cambia el nombre de la capa a sombra y colocala debajo de la capa de la cabecera.

Después, conviértela en Filtros Inteligentes, aplica un Desenfoque Gaussiano y cambia la opacidad al 60%.


Paso 5

Con la capa de cabecera seleccionada, haz doble clic en ella para abrir el cuadro de diálogo Estilo de capa. Selecciona Superposición de degradado. Cambia el estilo de degradado a radial. Para los colores utiliza rojos oscuros.


Paso 6

A continuación, selecciona la herramienta Línea (U) y elige el color más claro del degradado de la cabecera y crea una línea. Después elige el color negro y crea otra línea justo 1 píxel por encima de la línea roja. Selecciona las 2 líneas y agrúpalas. Renombra el grupo como "vDivider".

Ve a Capa>Máscara de capa>Revelar todo. Usando la Herramienta Degradado, selecciona un Degradado Radial de Negro a Blanco y aplica una máscara a nuestro grupo. Comienza el degradado desde el centro del grupo.


Paso 7

Crea el menú utilizando la herramienta de texto horizontal (T). Utiliza el blanco para el color del texto. Selecciona todos los enlaces y agrúpalos. Cambia el nombre del grupo por el de Enlaces Blancos.

Duplica el grupo y colócalo debajo de los enlaces blancos, cambia el color del texto a negro y mueve el grupo 1 píxel hacia arriba y hacia la izquierda. Eso creará un bonito efecto 3D, exactamente igual que el que hicimos con las líneas.


Paso 8

Repite el paso 6, pero esta vez crea los separadores horizontales para los enlaces. Usa la herramienta línea para dibujar una línea roja y 1 píxel a la izquierda dibuja una línea negra. Agrúpelos y duplica el grupo 5 veces. Distribuye los grupos como se muestra a continuación.


Paso 9

Selecciona todos los grupos de líneas y agrúpalos. Cambia el nombre del grupo a Divisores. Después aplica una máscara de capa, Capa>Máscara de capa>Revelar todo. Pero esta vez usa Lineal.


Paso 10

Abre el archivo del motivo, o consigue cualquier motivo que te guste. Selecciona todo y ve a Edición>Definir motivo. Llámalo webmotivo.

Duplica la capa de la cabecera y renómbrala como motivo. Ve a sus Estilos de capa y desactiva la Superposición de degradado y establece una Superposición de motivo. Elige el 'webmotivo' que hemos creado y cambia el Modo de fusión a Superposición de color.

A continuación, aplica una máscara de capa a la capa del motivo utilizando un degradado radial.

Motivo


Paso 11

Ahora podemos añadir el logotipo y la cuchara.

Para el texto, escribe Psdtuts+, selecciona un tipo de letra en negrita para el PSD y uno normal o claro para el TUTS. Ve a Estilos de Capa y aplica una Sombra Paralela, una Superposición de Degradado y un Trazo. Es un efecto muy común y bonito.


Conclusión 

Cuando trabajamos con el diseño web tenemos que tener en cuenta el tamaño de los archivos, la compatibilidad con los navegadores y muchas otras características. A veces, pequeños detalles como sutiles degradados o bordes que utilizan 2 colores pueden crear un efecto visual muy agradable o un estilo único sin necesidad de muchos hacks y ajustes.

One subscription.
Unlimited Downloads.
Get unlimited downloads