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.
By
