Hoy vamos a construir una plantilla de sitio web impresionante en Photoshop utilizando una serie de técnicas avanzadas.
Le guiaré por todo el proceso en diez sencillos pasos y le proporcionaré un enlace para descargar la plantilla terminada. ¡Vamos a empezar!
Vista previa y descarga
Antes de comenzar, he aquí un vistazo a lo que estaremos construyendo. Puede descargar y usar la PSD como desee, solo asegúrese de dar crédito por los antecedentes como se indica en el artículo a continuación.
Descargar Layered PSD
Paso 1: Crear un nuevo documento
Primero, crea un nuevo documento en Photoshop. Haz el lienzo 1200 píxeles de ancho por 1700 píxeles de alto. No se preocupe, nuestro contenido no estará tan cerca, solo queremos darnos mucho espacio para trabajar.
Para definir el área de contenido, dibuje un cuadro de 960 píxeles de ancho, céntrelo horizontalmente en el lienzo, luego arrastre las guías hacia el borde izquierdo y derecho y elimine el cuadro. Su documento en blanco debe ser similar a la imagen de arriba (el color no importa en este punto).
Paso 2: Toma la imagen de fondo
La inspiración para este diseño proviene de un increíble recurso gratuito de Matthew Skiles. Matthew creó una hermosa textura de fondo de madera y la distribuyó libremente en Dribbble. Solo recuerda que si vas a usar esta textura, debes proporcionar un enlace a Matthew.
Toma la textura de madera del enlace de arriba y escálala para que tenga el mismo ancho que tu PSD. Solo se extenderá aproximadamente a la mitad del sitio verticalmente, pero eso es perfecto en este punto.
Paso 3: Añadir fondo degradado
El fondo de madera se ve muy bien en Photoshop, pero nos dará algunos problemas en la web debido al infinito lienzo del navegador. Nuestras dos opciones básicas son convertirlo en un patrón de fondo transparente o degradarlo a un color sólido.
En este caso, elegí la salida fácil y decido aplicar gradientes al lado izquierdo y derecho del fondo. Para hacer esto, crea una nueva capa y establece el color de primer plano en # 421a0e o cualquier otro color oscuro que te guste de la imagen de madera. A continuación, establezca su degradado para pasar de este color a transparente y estire el degradado desde el lado izquierdo hacia el centro, luego repita el degradado en el lado derecho.
Esto nos da una transición agradable y suave a un color sólido. Si estuviéramos codificando este sitio, estableceríamos esta imagen en segundo plano y estableceríamos el color de fondo en CSS a # 421a0e. No importa en qué tamaño de pantalla esté el visor, el fondo del sitio se verá perfecto.
Paso 4: El Logo
El logotipo en la parte superior del sitio es simplemente un texto escrito en Ballpark, una impresionante fuente gratuita diseñada por Mickey Rossi. Escriba una palabra, haga que sea negro y establezca el relleno en alrededor del 25%. A continuación, aplique una sombra interior y una sombra paralela para darle ese aspecto de tipografía. Aquí están los ajustes que utilicé:
Observe que la sombra paralela es muy diferente de la configuración predeterminada. Esto se debe a que, en realidad, estamos utilizando la sombra paralela como un trocito para crear un bisel exterior. Asegúrese de establecer el color en blanco y cambie el modo de fusión de Multiplicar (predeterminado) a Pantalla (funciona con blanco).
El truco para la sombra interior es no excederse. Evita la distancia y asegúrate de que la opacidad no sea demasiado oscura. Estas configuraciones deberían darle el efecto impresionante que se ve a continuación:
A continuación, escriba algún subtexto para ir debajo del logotipo y aplicar el mismo efecto. Usé una Helvetica Bold simple y escribí todas las mayúsculas.
Paso 5: Añadir algunas luces
Para agregar las luces en la parte superior de la plantilla usaremos un truco super simple. Coge un bonito pincel blanco suave y haz clic una vez en tu lienzo para crear un punto blanco difuso. Ahora presione Comando-T para usar la herramienta Transformación libre para extender el punto como se ve a continuación.
Para obtener el efecto sesgado, mantenga presionada la tecla Mayús mientras oprime y arrastra un control de esquina. Esto debería mover ambas esquinas por igual.
Una vez que tenga una forma de luz que le guste, duplique la capa dos veces y extienda las luces. Luego colóquelos en un grupo de capas y establezca el modo de fusión del grupo en Superposición. También puedes jugar añadiendo un brillo exterior a cada luz para modificar el efecto.
Paso 6: El cuadro de contenido destacado
Bajo el logotipo, vamos a crear una caja grande que servirá como un marcador de posición para cualquier contenido que desee destacar. Este será un lugar increíble para incluir un control deslizante de imagen jQuery.
Para comenzar, simplemente dibuja un rectángulo y rellénalo con un degradado o un color sólido, realmente no importa, ya que la idea es colocar contenido sobre él. Asegúrese de mantenerse bien dentro de las 960 guías que configuró anteriormente.
A continuación, agregaremos una de esas sombras curvas de moda que son tan populares en el diseño web en este momento. Para hacer esto, agregue una sombra típica del menú de efectos de capa. Una vez que haya aplicado la sombra paralela, haga clic con el botón derecho en el pequeño icono de efecto en la capa y seleccione ¿Crear capa? cerca del fondo. Como su nombre lo indica, esto convertirá el efecto de sombra en una capa de sombra real.
Ahora use el modo Warp dentro de Free Transform para curvar el borde inferior de la sombra como se muestra en la imagen a continuación.
El efecto general hace que las esquinas se vean como si se curvaran un poco mientras mantienen el cuadro de contenido real con una forma estándar que es fácil de rellenar con imágenes en la etapa de desarrollo.
Paso 7: Área de navegación
Justo encima del cuadro de contenido destacado, escriba algunas opciones de navegación de muestra. Utilicé Museo, una fuente gratuita que se puede usar fácilmente con @ font-face en CSS.
Como puedes ver, la plantilla está saliendo muy bien. Hemos terminado la parte superior y podemos pasar a la siguiente sección.
Paso 8: Barra de colores
Justo debajo del área de contenido que se muestra debe estar donde termina la textura de madera. Crea una capa y rellena desde esta parte hasta la parte inferior con # 3c1306. A continuación, agregue el contenido de algún marcador de posición.Elegí un diseño de tres columnas que repitió el tratamiento de la caja anterior y usé Museo nuevamente para los encabezados.
Lo más complicado aquí es diferenciar la barra de colores del fondo de madera. Si te fijas bien en la imagen de arriba, puedes ver que estire un gradiente hacia arriba desde el negro hasta el transparente para que parezca que la caja proyecta una sombra sobre la madera. Para agregar aún más contraste aquí, pinté algo de blanco con un pincel grande y suave, reduje la opacidad del blanco al 75% y configuré el modo de fusión para superponer. Este es un gran truco para aclarar las áreas oscuras de una textura.
Paso 9: La casilla de cotización
Cerca de la parte inferior de la barra de colores, incluí un recuadro para guardar una cotización del cliente. Este es un proceso de tres pasos. Primero dibuje un rectángulo redondeado que sea un poco más oscuro que el color de fondo. Luego aplique la misma técnica de inserción que usamos en el logotipo anterior (sombra blanca colocada en la pantalla + sombra interior). Finalmente, suelte un poco de texto. Utilicé una versión en cursiva de Georgia.
Paso 10: El pie de página
Para terminar la plantilla, derribé un poco de la textura de madera y repetí muchos de los pasos que se ven arriba. Primero, agregué gradientes en el lado tal como lo hicimos al principio. Luego agregué otra sombra en la parte inferior de la barra de color, tal como hicimos en la parte superior. Finalmente, repetí el mismo efecto de inserción que hemos usado tres veces antes para incluir algunos iconos básicos de redes sociales y el enlace de atribución para la textura de fondo.
Conclusión
¡Con esos toques finales estás acabado! Entre otras cosas, aprendimos cómo desvanecer un fondo texturizado a un color sólido para que funcione en la web, cómo crear un efecto de tipografía en madera y aplicarlo de varias maneras, cómo crear algunas ilusiones de iluminación impresionantes cómo utilizar el modo de fusión de superposición para aclarar las áreas oscuras de una textura.
Espero que hayas aprendido mucho del tutorial, ¡no olvides descargar la PSD! Si lo usa en un proyecto, deje un enlace en los comentarios a continuación para que pueda verlo (opcional pero apreciado).