En este tutorial te mostraré algunas técnicas muy sencillas, el uso de gradientes y estilos de capa, que podemos utilizar para producir buenos efectos sutiles en 3D en nuestros diseños web.
Paso 1
Crear un nuevo documento con 1000x750px . Haga doble clic sobre la capa de fondo y en lasuperposición de color y elija un color marrón oscuro .
Paso 2
Habilitar a los gobernantes (Ver> Reglas) en su documento y añadir algunas guías, como se muestra a continuación. Crear 2 guías horizontales, la primera a 30px y el segundo en 250px . Después de que añadir 2 guías verticales en 100px y 900px.
Paso 3
Crea un rectángulo con la herramienta Rectángulo (U) . Utilice las guías de referencia. Cambiar el nombre de la capa de cabecera? .
Paso 4
Elija negro para el color de primer plano. Seleccione la herramienta Elipse y crear la forma que será la sombra. Que sea un poco más alto que el rectángulo blanco como se muestra. Cambiar el nombre de la capa de sombra y la puso debajo de la cabecera de la capa.
Después de eso, lo convierten en filtros inteligentes , aplicar un desenfoque gaussiano y cambiar la opacidad al 60%.
Paso 5
Con el encabezado de la capa seleccionada, haga doble clic en él para abrir el Estilo de capa cuadro de diálogo. Seleccione Superposición de degradado. Cambiar el estilo de degradado a la radial. Para los colores que utilizan los rojos oscuros.
Paso 6
A continuación, seleccione la herramienta de línea (U) y elegir el color más claro del gradiente de cabecera y crear una línea. Después de que elija negro y acaba de crear otra línea de 1 píxel por encima de la línea roja. Seleccione las líneas 2 y agruparlos. Cambie el nombre del grupo de la " vDivider " .
Ir a la máscara de capa> Capa> Descubrir todas . Uso de la herramienta de degradado , seleccione un degradado radial de Negro a Blanco y aplicar una máscara a nuestro grupo. Arranque el gradiente desde el centro del grupo.
Paso 7
Cree el menú con la herramienta de tipo horizontal (T) . Utilice blanco para el color del texto. Seleccione todos los enlaces y agruparlos. Cambiar el nombre de los grupos de Enlaces blancos? .
Duplicar el grupo y lo coloca por debajo de los enlaces de blancos, cambiar el color del texto en negro y mover el grupo de 1 píxel de arriba ya la izquierda. Eso va a crear un efecto 3D agradable, exactamente como la que hicimos con las líneas.
Paso 8
Repita el paso 6 , pero esta vez crear los divisores horizontales para los enlaces. Utilice la herramienta Línea para dibujar una línea roja y 1 píxeles a la izquierda dibuja una línea negro. Grupo de ellos y duplicar el grupo de 5 veces. Distribuir los grupos como se muestra a continuación.
Paso 9
Seleccione todos los grupos de líneas y grupos de ellos. Cambie el nombre del grupo a divisores? .Después de que se aplican una máscara de capa, Capa> máscara de capa> Descubrir todas . Pero esta vez utilice lineal.
Paso 10
Abra el archivo de patrones, u obtener cualquier modelo que te gusta. Seleccionar todo e ir a Edición> Definir motivo . Llámalo webPattern .
Duplica la capa de cabecera? y cambiarle el nombre al patrón . Ir a los estilos de capa y sus desactivar la superposición de degradado y establecer una superposición de patrones . Elija el 'webPattern' que hemos creado y cambiar el modo de mezcla a Superposición de colores.
Después de que aplicar una capa de máscara para la capa de patrón usando un degradado radial.
Patrón
Paso 11
Ahora podemos añadir el logotipo y la cuchara.
Para el texto, Psdtuts tipo +, seleccione un tipo de letra negrita para el PSD y el de regular o la luz de los TUTS. Ir a los estilos de capa y aplicar una gota de sombra, superposición de degradado, y accidentes cerebrovasculares . Eso es un efecto muy común y hermoso.
Conclusión
Cuando trabajamos con el diseño web debemos tener en cuenta los tamaños de archivo, de las compatibilidades del explorador y muchos otros temas. A veces, pequeños detalles como los gradientes sutiles o fronteras por medio de 2 colores puede crear un efecto visual muy agradable y un estilo único sin necesidad de hacks y ajustes.
Paso 1
Crear un nuevo documento con 1000x750px . Haga doble clic sobre la capa de fondo y en lasuperposición de color y elija un color marrón oscuro .
Habilitar a los gobernantes (Ver> Reglas) en su documento y añadir algunas guías, como se muestra a continuación. Crear 2 guías horizontales, la primera a 30px y el segundo en 250px . Después de que añadir 2 guías verticales en 100px y 900px.
Crea un rectángulo con la herramienta Rectángulo (U) . Utilice las guías de referencia. Cambiar el nombre de la capa de cabecera? .
Elija negro para el color de primer plano. Seleccione la herramienta Elipse y crear la forma que será la sombra. Que sea un poco más alto que el rectángulo blanco como se muestra. Cambiar el nombre de la capa de sombra y la puso debajo de la cabecera de la capa.
Después de eso, lo convierten en filtros inteligentes , aplicar un desenfoque gaussiano y cambiar la opacidad al 60%.
Con el encabezado de la capa seleccionada, haga doble clic en él para abrir el Estilo de capa cuadro de diálogo. Seleccione Superposición de degradado. Cambiar el estilo de degradado a la radial. Para los colores que utilizan los rojos oscuros.
A continuación, seleccione la herramienta de línea (U) y elegir el color más claro del gradiente de cabecera y crear una línea. Después de que elija negro y acaba de crear otra línea de 1 píxel por encima de la línea roja. Seleccione las líneas 2 y agruparlos. Cambie el nombre del grupo de la " vDivider " .
Ir a la máscara de capa> Capa> Descubrir todas . Uso de la herramienta de degradado , seleccione un degradado radial de Negro a Blanco y aplicar una máscara a nuestro grupo. Arranque el gradiente desde el centro del grupo.
Cree el menú con la herramienta de tipo horizontal (T) . Utilice blanco para el color del texto. Seleccione todos los enlaces y agruparlos. Cambiar el nombre de los grupos de Enlaces blancos? .
Duplicar el grupo y lo coloca por debajo de los enlaces de blancos, cambiar el color del texto en negro y mover el grupo de 1 píxel de arriba ya la izquierda. Eso va a crear un efecto 3D agradable, exactamente como la que hicimos con las líneas.
Repita el paso 6 , pero esta vez crear los divisores horizontales para los enlaces. Utilice la herramienta Línea para dibujar una línea roja y 1 píxeles a la izquierda dibuja una línea negro. Grupo de ellos y duplicar el grupo de 5 veces. Distribuir los grupos como se muestra a continuación.
Seleccione todos los grupos de líneas y grupos de ellos. Cambie el nombre del grupo a divisores? .Después de que se aplican una máscara de capa, Capa> máscara de capa> Descubrir todas . Pero esta vez utilice lineal.
Abra el archivo de patrones, u obtener cualquier modelo que te gusta. Seleccionar todo e ir a Edición> Definir motivo . Llámalo webPattern .
Duplica la capa de cabecera? y cambiarle el nombre al patrón . Ir a los estilos de capa y sus desactivar la superposición de degradado y establecer una superposición de patrones . Elija el 'webPattern' que hemos creado y cambiar el modo de mezcla a Superposición de colores.
Después de que aplicar una capa de máscara para la capa de patrón usando un degradado radial.
Patrón
Ahora podemos añadir el logotipo y la cuchara.
Para el texto, Psdtuts tipo +, seleccione un tipo de letra negrita para el PSD y el de regular o la luz de los TUTS. Ir a los estilos de capa y aplicar una gota de sombra, superposición de degradado, y accidentes cerebrovasculares . Eso es un efecto muy común y hermoso.
Cuando trabajamos con el diseño web debemos tener en cuenta los tamaños de archivo, de las compatibilidades del explorador y muchos otros temas. A veces, pequeños detalles como los gradientes sutiles o fronteras por medio de 2 colores puede crear un efecto visual muy agradable y un estilo único sin necesidad de hacks y ajustes.