Cómo crear un diseño web con textura de tela utilizando Photoshop

Este tutorial es otra colaboración con un muy buen amigo: Ciursa Ionut. En este tutorial de diseño web crearemos una maqueta de portafolio web utilizando texturas de tela. Te llevaremos a través del proceso de diseño del logo usando Adobe Illustrator, la creación de "focos" para el área de "servicios" y cómo aplicar texturas al diseño de una manera sutil que aumentará la calidad del resultado final. ¡Empecemos!

Recursos del tutorial

Los siguientes recursos fueron utilizados durante la producción de este tutorial.

• Sistema de cuadrícula 960
• Motivos de tela
• Pinceles grunge sutiles
• Fuente Oswald
• Pájaros de Twitter

Introducción

En este tutorial utilizaremos el Sistema de cuadrícula 960. Descárgalo y descomprime el archivo. Luego abre el archivo "960_grid_12_col.psd" en Photoshop.

Las 12 columnas rojas que ves son la cuadrícula que vamos a utilizar. Puedes ocultar las barras rojas haciendo clic en el icono de ojo de la capa "12 Col Grid". Este archivo PSD contiene también algunas guías, que serán muy útiles. Para activarlas ve a Vista > Mostrar > Guías, o utiliza el atajo de teclado Comando/Ctrl + ;. Yo suelo ocultar las barras rojas y activar las guías cuando las necesito.

Además, las guías inteligentes son muy útiles a la hora de crear diseños web. Actívalas/desactívalas yendo a Vista > Mostrar > Guías inteligentes. Te ayudarán a alinear cada capa en función de la posición de otras capas.

Durante este tutorial se te pedirá que crees formas con ciertas dimensiones. Cuando crees una forma, verás su anchura y altura exactas en el panel de información (Ventana > Información).

Ya que hemos cubierto los aspectos básicos del uso del sistema de cuadrícula 960, podemos pasar a crear el diseño web propiamente dicho. ¡Empecemos!

Paso 1: Configura el documento

Abre el archivo "960_grid_12_col.psd" en Photoshop. A continuación, ve a Imagen > Tamaño de lienzo y establece la anchura en 1200px y la altura en 2400px. Esto nos dará suficiente espacio para trabajar.

Paso 2: Creación del encabezado de nuestro diseño web

Crea un nuevo grupo y llámalo "Encabezado". Selecciona la herramienta Rectángulo (U) y crea un rectángulo con las dimensiones 1200px por 520px y el color #595e61. Nombra esta capa "encabezado bg", haz clic con el botón derecho del ratón sobre ella y selecciona Convertir en objeto inteligente.

Ve a Filtro > Ruido > Añadir ruido y utiliza los ajustes que se muestran en la imagen de abajo. Esto creará una bonita y sutil textura.

Descarga este paquete de motivos de tela y abre el archivo .PAT en Photoshop. A continuación, haz doble clic en la capa "encabezado bg" para abrir la ventana de Estilo de capa y añade un efecto de Superposición de motivo con los ajustes que se muestran en la imagen de abajo y un motivo del paquete que descargaste.

Paso 3: Creación del fondo de navegación

Selecciona la herramienta Rectángulo (U) y crea un rectángulo en la parte superior de tu documento con una altura de 120px y el color #000000. Nombra esta capa "navegación bg". Establece el Relleno de esta capa en 20%, haz doble clic en ella y utiliza los ajustes que se muestran en la imagen de abajo para la Sombra Interior.

Ahora añadiremos un círculo a la capa "navegación bg" para hacer espacio para el logotipo más adelante. Selecciona la herramienta Elipse (U) y haz clic en el botón "Añadir al área de forma (+)" de la barra de opciones situada encima de la imagen.

Haz clic en la máscara vectorial de la capa "navegación bg" para activarla. A continuación, utilizando la herramienta Elipse, mantén pulsada la tecla Mayúsculas y crea un círculo en el centro de la barra de navegación con un radio de 140px. Mira la siguiente imagen como referencia.

Paso 4: Creación de un motivo de línea punteada

Crea un nuevo documento (Comando/Ctrl + N) con las dimensiones 3px por 1px. Aumenta el zoom todo lo que puedas. A continuación, selecciona la herramienta Marco rectangular (M) y crea una selección cuadrada como la que ves en la siguiente imagen. Crea una nueva capa y rellena la selección con blanco.

Oculta la capa "Fondo" haciendo clic en su icono de ojo. A continuación, pulsa Comando/Ctrl + D para anular la selección. Guarda tu motivo yendo a Edición > Definir motivo. Dale un nombre y haz clic en Aceptar.

Vuelve a tu documento de diseño web. Selecciona la herramienta Línea (U) y establece el Grosor en 1px. Luego mantén presionada la tecla Mayús y crea una línea horizontal en la parte inferior de tu barra de navegación.

Ajusta el Relleno de esta capa al 0% y la Opacidad al 20%. Haz doble clic en esta capa para abrir la ventana de Estilo de capa y añade el motivo que creaste antes.

Ahora tenemos que borrar el área de la línea de puntos que va sobre el círculo. Utiliza la herramienta Marco rectangular (M) para seleccionar esa zona. Luego ve a Capa > Máscara de capa > Ocultar selección.

Paso 5: Adición de degradados al fondo del encabezado

Utiliza la herramienta Marco rectangular (M) para crear una selección como la que ves en la siguiente imagen (1). A continuación, ve a Capa > Nueva capa de relleno > Degradado y utiliza los ajustes de la siguiente imagen (2).

Haz clic en la máscara de esta capa para activarla. A continuación, selecciona un pincel difuso negro (B) y pinta con él sobre la zona en la que el degradado cubre el círculo de la barra de navegación (3). Ajusta la opacidad de esta capa al 3% (4).

Ahora añadiremos un degradado radial en la parte inferior del fondo del encabezado. Mantén pulsada la tecla Comando/Ctrl y haz clic en la miniatura de la capa "encabezado bg" para cargar una selección de la misma. A continuación, ve a Capa > Nueva capa de relleno > Degradado y utiliza los ajustes que se muestran en la imagen de abajo (1).

Con la ventana de Relleno degradado aún abierta, haz clic en tu imagen y arrastra hacia abajo. Ajusta el modo de fusión de esta capa a Luz suave 40%.

Paso 6: Incorporación de pinceles grunge sutiles al fondo del encabezado

Descarga este paquete de pinceles y ábrelo en Photoshop. Crea un nuevo grupo y llámalo "pinceles". A continuación, crea una selección de la capa "encabezado bg" (mantén pulsada la tecla Comando/Ctrl y haz clic en su miniatura). Asegúrate de que la capa "pinceles" está activa y ve a Capa > Máscara de capa > Descubrir selección. Ahora todo lo que pongamos dentro de este grupo será visible solo sobre el área del encabezado.

Crea una nueva capa dentro de este grupo. Ajusta el color de primer plano a blanco. Selecciona la herramienta Pincel (B) y utiliza algunos de los pinceles que has descargado para añadir un sutil efecto grunge al encabezado. Crea una nueva capa para cada pincel que utilices y ajusta la opacidad de cada una de ellas. A continuación, ajusta el modo de fusión del grupo "pinceles" a Luz suave. Observa la siguiente imagen como referencia.

Paso 7

Selecciona la herramienta Línea (U), mantén pulsada la tecla Mayús y crea una línea horizontal con un Grosor de 1px y el color #50565a. Nombra esta capa "Línea 1px" y colócala en la parte inferior del área del encabezado.

Duplica esta capa (Comando/Ctrl + J), selecciona la herramienta Mover (V) y pulsa la flecha hacia arriba en tu teclado para moverla un píxel hacia arriba. Cambia el color de esta línea a #8e9496.

Paso 8: Creación del logotipo

Para crear el logotipo utilizaremos tanto Adobe Photoshop como Illustrator. Primero, crearemos el texto y un círculo con trazo discontinuo en Illustrator y luego completaremos el logo usando Photoshop.

Abre Adobe Illustrator y crea un nuevo documento. Selecciona la herramienta Texto (T) y escribe "My Folio". Coloca cada palabra en un objeto separado. La fuente que utilicé se llama Akzidenz-Grotesk Condensed Medium Italic.

Selecciona los dos objetos de texto con la herramienta Selección (V) y ve a Objeto > Expandir. Esto hará que las capas de texto sean editables para que podamos modificar los puntos de anclaje.

Selecciona la palabra "My" y muévela hacia abajo para conectar el área inferior de la letra "Y" con el área superior de la letra "F".

Utiliza la herramienta Selección directa (A) para seleccionar los puntos de anclaje de la parte inferior de la letra "Y", como ves en la imagen de abajo. A continuación, pulsa la tecla Borrar para eliminarlos.

Utiliza la herramienta Pluma (P) para reconstruir el área inferior de la letra "Y" y conectarla con la letra "F". Asegúrate de cerrar el camino. Observa la siguiente imagen como referencia.

Ahora tenemos que crear un círculo con un trazo blanco discontinuo. Selecciona la herramienta Elipse (L), mantén presionada la tecla Mayúsculas y crea un círculo sin relleno y con un Trazo blanco de 1 punto. A continuación, ve al panel Trazo (Ventana > Trazo) y utiliza los ajustes que se muestran en la siguiente imagen.

Cambia el color del texto a blanco. Añadí un rectángulo gris debajo de todos los objetos para poder ver el texto y el círculo.

Finalización del logotipo en Adobe Photoshop

Vuelve a Photoshop, crea un nuevo grupo y llámalo "Logo". A continuación, selecciona la herramienta Elipse (U) y crea un círculo con las dimensiones 125px por 125px y el color #2e3134.

Nombra esta capa "círculo", haz doble clic en ella para abrir la ventana de Estilo de capa y añade un efecto de Superposición de motivo utilizando los siguientes ajustes. El motivo de cuero que utilicé es del paquete que descargaste al principio de este tutorial.

Copia los objetos de texto de Illustrator, vuelve a Photoshop y pégalos como objeto inteligente. Usa Transformación libre (Comando/Ctrl + T) para cambiar el tamaño de esta capa y ponla en el centro del círculo oscuro. Añade un efecto de Superposición de color a esta capa utilizando el color #f4f4f4.

Copia el círculo punteado de Illustrator y pégalo en Photoshop como objeto inteligente. Utiliza Transformación libre (Comando/Ctrl + T) para cambiar el tamaño de esta capa y ponla en medio del círculo oscuro. Nombra esta capa como "círculo discontinuo" y ajusta su opacidad al 60%.

Duplica la capa "círculo discontinuo" (Comando/Ctrl + J). Utiliza Transformación libre (Comando/Ctrl + T) para cambiar el tamaño de esta capa hasta que alcance el borde curvo debajo del logotipo. Nombra esta capa como "borde inferior".

Utiliza la herramienta Marco rectangular (M) para seleccionar la zona superior del círculo como se muestra en la imagen de abajo. Luego ve a Capa > Máscara de capa > Ocultar selección. Esto dejará una línea curva punteada debajo del logotipo, tal como queremos.

Paso 9: Añadiendo la navegación

Crea un nuevo grupo y nómbralo "Navegación". Selecciona la herramienta Texto (T) y escribe el nombre de los elementos del menú de navegación utilizando la fuente Oswald y el color blanco. Distribuye tus elementos de navegación equitativamente en la parte izquierda y derecha del logo.

Creación del estilo para el elemento de menú activo

Selecciona la herramienta Rectángulo redondeado (U) y ajusta el Radio a 4px. A continuación, crea un rectángulo redondeado debajo de uno de nuestros elementos de navegación con la altura de 32px y el color negro.

Ajusta el Relleno de esta capa al 25%, haz doble clic sobre ella para abrir la ventana de Estilo de capa y utiliza los ajustes que se muestran en la siguiente imagen.

Paso 10: Creación de la zona "Destacados"

Crea un nuevo grupo y nómbralo "Destacado". Selecciona la herramienta Texto (T) y escribe el nombre de tu proyecto utilizando la fuente Oswald con el tamaño 22pt y el color blanco. Coloca esta capa en la parte izquierda del diseño y a 50px debajo de la barra de navegación.

Selecciona la herramienta Línea (U) y crea una línea horizontal con un ancho de 300px. Ajusta el Relleno de esta capa al 0% y la Opacidad al 50%. Haz doble clic en esta capa y añade el motivo de la línea punteada que creaste anteriormente en este tutorial.

Utiliza la herramienta Texto (T) para añadir un bloque de texto debajo de la línea horizontal. Utiliza la fuente Helvetica con color blanco y tamaño 13pt. Ve al panel Carácter (Ventana > Carácter) y ajusta el interlineado (la distancia entre líneas del texto) a 24 pt para que el texto sea más legible.

Creación de un botón "Leer más"

Crea un nuevo grupo y llámalo "botón". Selecciona la herramienta Rectángulo (U) y ajusta el Radio a 4px. A continuación, crea un rectángulo redondeado debajo del bloque de texto con el tamaño 110px por 30px y el color #9ca2a6. Nombra esta capa como "botón".

Duplica la capa "botón" (Comando/Ctrl + J) y mueve esta nueva capa debajo de la original. Selecciona la herramienta Mover (V) y pulsa la flecha hacia abajo en tu teclado una vez para mover esta capa un píxel hacia abajo. Ajusta la opacidad de esta capa al 50%.

Duplica la capa anterior (Comando/Ctrl + J) y cambia su color a #54585b. Mueve esta capa un píxel hacia abajo y establece su opacidad al 100%.

Ahora deberías tener tres capas "botón". Haz doble clic en la superior para abrir la ventana de Estilo de capa y utiliza los ajustes que se muestran en la imagen de abajo. El color que utilicé para el efecto Trazo es el #54585b.

Mantén presionada la tecla Comando/Ctrl y selecciona las dos capas "botón" de la parte inferior. Haz clic con el botón derecho del ratón en una de ellas y selecciona Convertir en objeto inteligente.

Haz doble clic en esta capa para abrir la ventana de Estilo de capa y utiliza los ajustes de la siguiente imagen para la Superposición de degradado. Esto añadirá un sutil efecto 3D al botón.

Mantén presionadas las teclas Command/Ctrl + Mayús, haz clic en la miniatura del objeto inteligente "botón" y luego en la máscara vectorial de la capa "botón". Esto creará una selección de todo el botón. Crea una nueva capa y rellena la selección con blanco.  Pulsa Comando/Ctrl + D para deseleccionar.

Haz clic con el botón derecho en esta capa y selecciona Convertir en objeto inteligente. Luego ve a Filtro > Ruido > Añadir ruido y utiliza los ajustes que se muestran en la imagen de abajo. Ajusta el modo de fusión de esta capa a Multiplicar 25%.

Ahora selecciona la herramienta Texto (T) y escribe "Leer más" en tu botón usando la fuente Oswald con el tamaño 15pt y el color blanco. Haz doble clic en esta capa para abrir la ventana de Estilo de capa y utiliza los ajustes que se muestran en la siguiente imagen para la Sombra paralela.

Paso 11: Añadiendo un deslizador de imagen

Crea un nuevo grupo y llámalo "deslizador de imagen". Selecciona la herramienta Rectángulo (U) y crea un rectángulo con las dimensiones 620px por 300px. Nombra esta capa "porta-imagen", haz doble clic sobre ella para abrir la ventana de Estilo de capa y utilizar los ajustes que se muestran en la siguiente imagen para el Resplandor exterior.

Abre una imagen, en Photoshop, que quieras que aparezca en esta zona y muévela a tu documento de diseño web con la herramienta Mover (V). Nombra esta capa como "imagen" y colócala sobre la capa "porta-imagen".  A continuación, haz clic con el botón derecho del ratón y selecciona Crear máscara de recorte. Ahora tu imagen será visible solo sobre el área de la capa "porta-imagen".

Creación de las flechas deslizantes de imagen

Selecciona la herramienta Formas personalizadas (U), haz clic con el botón derecho del ratón en tu imagen y selecciona una de las formas de flecha. A continuación, crea una flecha en la parte derecha de tu deslizador de imagen utilizando el color #e2e6e8.

Nombra esta capa "flecha derecha", haz doble clic en ella para abrir la ventana de Estilo de capa y utiliza los ajustes de la siguiente imagen. Haz clic con el botón derecho del ratón en esta capa y selecciona Convertir en objeto inteligente. A continuación, ajusta su opacidad al 40%.

Duplica esta capa (Comando/Ctrl + J) y nombra la nueva como "flecha izquierda". Luego ve a Edición > Transformar > Voltear horizontalmente. Mueve esta flecha en la parte izquierda del diseño web. Observa la siguiente imagen como referencia.

Creación de las viñetas de navegación para el deslizador de imágenes

Crea un nuevo grupo y nómbralo "viñetas de navegación". Selecciona la herramienta Elipse (U), mantén presionada la tecla Mayúsculas y crea un círculo con las dimensiones 10px por 10px y el color #4d5357. Nombra esta capa como "Viñeta de navegación".

Duplica esta capa (Comando/Ctrl + J) varias veces y dispónlas como ves en la imagen de abajo.

Selecciona de nuevo la herramienta Elipse (U) y crea un círculo más pequeño en el centro de la viñeta de navegación para indicar la imagen activa. Para este círculo utiliza el color #9ca2a4.

Paso 12: Creación del área de "Servicios"

Crea un nuevo grupo y nómbralo "Servicios". Selecciona la herramienta Rectángulo (U) y crea un rectángulo con la altura 450px y el color #fafafa.

Nombra esta capa como "servicios bg", haz clic con el botón derecho del ratón y selecciona Convertir en objeto inteligente. Luego ve a Filtro > Ruido > Añadir ruido y utiliza los ajustes de la siguiente imagen.

Haz doble clic en esta capa para abrir la ventana de Estilo de capa y utiliza los ajustes de la siguiente imagen para Sombra interior y Resplandor exterior.

Selecciona la herramienta Línea (U) y arrastra una línea horizontal a la parte inferior del área de "servicios" usando el color #d2d2d2. Nombra esta capa como "Línea de 1px".

Duplica esta capa (Comando/Ctrl + J) y cambia el color de la nueva línea a blanco. Luego mueve esta capa 1px hacia arriba.

Paso 13: Añadiendo el contenido para el área de "Servicios"

Selecciona la herramienta Texto (T) y escribe la palabra "Servicios" con el tamaño 38pt y el color #5b656a. Coloca esta capa en la zona izquierda del diseño web y a 40px por debajo de la zona de "destacados".

Crea un nuevo grupo y llámalo "diseño web". Crea otro grupo dentro de éste y llámalo "focos". Vamos a diseñar un espacio de aspecto 3D con unos focos sobre una imagen.

Selecciona la herramienta Rectángulo (U) y crea un rectángulo con las dimensiones 300px por 100px y el color #3b444a. Nombra esta capa como "borde", haz clic con el botón derecho del ratón sobre ella y selecciona Convertir en objeto inteligente.

Ve a Filtro > Ruido > Añadir ruido y utiliza los ajustes que se muestran en la imagen de abajo. Luego haz doble clic en esta capa para abrir la ventana de Estilo de capa y utiliza los ajustes de la siguiente imagen para Superposición de degradado.

Ahora te mostraré cómo crear el espacio con aspecto 3D. En primer lugar, selecciona la herramienta Rectángulo (U) y crea un rectángulo gris con las dimensiones de 286px por 86px y colócalo en el centro del rectángulo "borde". Esta es una capa temporal que nos ayudará a crear las paredes.

Selecciona la herramienta Rectángulo (U) y crea un rectángulo con la altura 22px y el color #434f57. Asegúrate de que esta capa no pase por encima del rectángulo gris. Nombra esta capa como "suelo", haz doble clic en ella para abrir la ventana de Estilo de capa y utiliza los ajustes de la siguiente imagen.

Crea un nuevo rectángulo con las dimensiones 240px por 64px y el color #3b4851. Nombra esta capa "pared frontal" y colócala como ves en la imagen de abajo. Luego añade un efecto de Superposición de degradado a esta capa.

Usando la herramienta Selección directa (A), selecciona la esquina superior derecha de la capa "suelo" y muévela hacia la izquierda. A continuación, selecciona la esquina superior izquierda y muévela hacia la derecha. Observa la siguiente imagen como referencia.

Crea un rectángulo en la parte izquierda del espacio 3D con el color #39444b. Utiliza la herramienta Selección directa (A) para reposicionar la esquina inferior derecha de este rectángulo, como ves en la imagen siguiente. Haz doble clic en esta capa para abrir la ventana de Estilo de capa y utiliza los ajustes de la siguiente imagen.

Duplica esta capa (Comando/Ctrl + J) y muévela hacia la derecha. A continuación, modifica el ángulo de la Superposición de degradado a 0.

Crea un nuevo rectángulo en la parte superior del espacio 3D utilizando el color #505e67. Nombra esta capa como "techo" y utiliza la herramienta Selección directa (A) para ajustar las esquinas inferiores como hiciste con la capa "suelo". Haz doble clic en esta capa para abrir la ventana de Estilo de capa y utiliza los ajustes de la siguiente imagen.

Ahora puedes eliminar el rectángulo gris que añadiste al principio de este paso. Abajo puedes ver cómo se ve mi grupo "espacio 3d".

Haz clic con el botón derecho del ratón en el grupo "espacio 3d" y selecciona Convertir en objeto inteligente. Luego ve a Filtro > Ruido > Añadir ruido y utiliza los ajustes de la siguiente imagen.

Haz doble clic en esta capa para abrir la ventana de Estilo de capa y utiliza los ajustes que se muestran en la siguiente imagen.

Paso 14: Creación de los focos

Crea un nuevo grupo y nómbralo "focos superiores". A continuación, selecciona la herramienta Elipse (U) y crea un círculo blanco, como puede verse en la imagen de abajo. Haz clic con el botón derecho en esta capa y selecciona Convertir en objeto inteligente. Luego ve a Filtro > Desenfocar > Desenfoque radial y utiliza los ajustes de la imagen de abajo. Nombra esta capa como "luz 1".

Crea un nuevo círculo, más grande que el anterior. Nombra esta capa "luz 2" y conviértela en objeto inteligente. A continuación, aplica un Filtro de Desenfoque radial con los mismos ajustes.

Repite el proceso una vez más con un círculo más grande. Nombra esta capa como "luz 3". Observa la siguiente imagen como referencia.

Agrupa las tres capas de "luz" y ajusta la opacidad de cada una de ellas como se indica a continuación:

• "luz 1" - 70%
• "luz 2" - 50%
• "luz 3" - Luz suave 40%

Duplica el grupo dos veces y dispón los focos como ves en la imagen de abajo.

Mantén pulsadas las teclas Comando/Ctrl + Mayúsculas y haz clic en la miniatura de cada capa de "luz" para seleccionarlas. A continuación, ve a Capa > Nueva capa de ajuste > Tono y saturación y utiliza los ajustes de la siguiente imagen. Esto añadirá un sutil color azul a las luces.

Algunas de las luces pueden sobrepasar el borde del espacio 3D. Para corregirlo, mantén pulsada la tecla Comando/Ctrl y haz clic en la miniatura de la capa "espacio 3D". A continuación, haz clic en el grupo de "focos superiores" para activarlo y ve a Capa > Máscara de capa > Descubrir selección.

Crea un nuevo grupo y nómbralo "luces de piso". A continuación, utiliza la herramienta Elipse (U) para crear tres elipses como se ve en la imagen de abajo. Convierte cada capa en un objeto inteligente. A continuación, añade un filtro de Desenfoque gaussiano y un filtro de Ruido a cada capa. Ajusta la opacidad de estas capas al 40%.

A continuación, puedes añadir una imagen en el centro del espacio 3d que represente el servicio de diseño que has añadido. He utilizado el logotipo de Webdesign Tuts+.

Paso 15

Selecciona la herramienta Rectángulo (U) y crea un rectángulo blanco con las dimensiones 300px por 210px debajo del área de los focos. Nombra esta capa "contenido bg", haz doble clic en ella para abrir la ventana de Estilo de capa y utiliza los ajustes de la siguiente imagen para el Resplandor exterior.

Selecciona la herramienta Pluma (P) y crea una forma de triángulo utilizando el color #d1d6da, como ves en la imagen de abajo. Puedes activar las guías para ayudarte a crear esta forma.

Nombra esta capa "triángulo superior", haz doble clic en ella para abrir la ventana de Estilo de capa y utiliza los ajustes de la siguiente imagen. El color que he utilizado para el efecto de Trazo es #c5cace.

Selecciona la herramienta Texto (T) y añade el contenido para este cuadro de servicio. Para el título utiliza la fuente Oswald con el tamaño 20pt y el color #747d82.

Para el bloque de texto utiliza la fuente Helvetica Regular con el tamaño 13pt y el color #5f6c74. Además, ajusta el interlineado de esta capa de texto a 24pt desde el panel Carácter.

Crea un nuevo motivo de línea punteada negra igual que creaste el blanco al principio de este tutorial. A continuación, utiliza la herramienta Línea (U) para arrastrar una línea horizontal entre el título y el bloque de texto. Ajusta el Relleno de esta capa al 0% y aplica el motivo que has creado.

Copia el botón "Leer más" de la zona "destacados" (haz clic con el botón derecho en su grupo y selecciona Duplicar grupo). A continuación, mueve el nuevo botón debajo del bloque de texto del área de "servicios". Observa la siguiente imagen como referencia.

Paso 16

Duplica el grupo "diseño web" dos veces y organiza las nuevas columnas como ves en la imagen de abajo. A continuación, sustituye los títulos y las imágenes que están debajo de los focos.

Paso 17: Creación del área de "Portafolio"

Crea un nuevo grupo debajo del grupo "Servicios" y nómbralo "Portafolio". A continuación, selecciona la herramienta Rectángulo (U) y crea un rectángulo con una altura de 590px y el color #f1f1f1 debajo del área de "servicios".

Nombra esta capa "portafolio bg", haz clic con el botón derecho del ratón y selecciona Convertir en objeto inteligente. Ve a Filtro > Ruido > Añadir ruido y utiliza los ajustes de la siguiente imagen. A continuación, haz doble clic en esta capa para abrir la ventana Estilo de capa y aplica una de las texturas de tela que has descargado.

Selecciona la herramienta Texto (T) y escribe "Portafolio" en la esquina superior izquierda de esta área. He utilizado la fuente Oswald con el tamaño 38pt y el color #5b656a.

Paso 18: Añadiendo los elementos del portafolio

Crea un nuevo grupo y nómbralo "imágenes". A continuación, selecciona la herramienta Rectángulo (U) y crea un rectángulo con las dimensiones 180px por 140px. Nombra esta capa como "portaimágenes".

Duplica esta capa (Comando/Ctrl + J) y mueve el nuevo rectángulo hacia la derecha a 10px de distancia de la primera. Continúa duplicando esta capa hasta crear una cuadrícula como la que ves en la imagen de abajo.

Abre algunas imágenes que quieras mostrar en el área de "portafolio". Arrastra cada imagen sobre una capa del "portaimágenes", haz clic con el botón derecho del ratón en las capas de las imágenes y selecciona Crear máscara de recorte. Esto pondrá una imagen dentro de cada rectángulo.

En la imagen de abajo hay dos columnas donde no he añadido ninguna imagen. Utilizaremos esa área para añadir un elemento detallado del portafolio.

Paso 19: Añadiendo un elemento detallado al portafolio

Crea un nuevo grupo y nómbralo "proyecto activo". Selecciona la herramienta Rectángulo (U) y crea un rectángulo sobre las dos columnas que no tienen imágenes utilizando el color #595e61.

Selecciona de nuevo la herramienta Rectángulo y crea un portaimágenes con las dimensiones 330px por 160px. Abre una imagen que quieras mostrar en esta área y ponla sobre la capa "portaimagen". Haz clic con el botón derecho del ratón en la capa "imagen" y selecciona Crear máscara de recorte.

Selecciona la herramienta Texto (T) y añade algo de contenido a esta área. Para el título utiliza la fuente Oswald con el tamaño 22pt y el color blanco. Para el bloque de texto utiliza la fuente Helvetica Regular con el tamaño 13pt y el color #fafafa.

Duplica uno de los botones anteriores de "Leer más" y colócalo debajo del bloque de texto del área de "proyecto activo".

Crea un nuevo grupo y nómbralo "botón de cierre". Selecciona la herramienta Rectángulo (U), mantén pulsada la tecla Mayúsculas y crea un cuadrado con las dimensiones 20px por 20px y el color #484c4f. Coloca este rectángulo en la esquina superior derecha del área del "proyecto activo".

Selecciona la herramienta Línea (U) y crea dos líneas diagonales para formar una "X". Mantén presionada la tecla Mayúsculas para arrastrar una línea a 45°.

Paso 20: Creación del área de "Blog"

Crea un nuevo grupo y nómbralo "blog". Selecciona la herramienta Rectángulo (U) y crea un rectángulo con una altura de 340px debajo del área de "portafolio" usando el color #fafafa.

Haz clic con el botón derecho en esta capa y selecciona Convertir en objeto inteligente. Ve a Filtro > Ruido > Añadir ruido y utiliza los ajustes de la imagen de abajo.

Selecciona la herramienta Línea (U) y crea una línea horizontal en la parte superior de este rectángulo usando el color #d2d2d2. Duplica esta capa (Comando/Ctrl + J) y mueve la nueva línea un píxel hacia abajo. Cambia el color de esta línea a blanco.

Paso 21: Añadiendo publicaciones en el blog

Selecciona la herramienta Texto (T) y escribe "Blog" en la esquina superior izquierda de esta área utilizando la fuente Oswald con el tamaño 38pt y el color #5b656a.

Crea un nuevo grupo y nómbralo "post #1". Selecciona la herramienta Rectángulo (U) y crea un porta imagen con las dimensiones 180px por 140px. Abre una imagen que quieras mostrar en esta área y arrástrala sobre la capa "portaimagen". Haz clic con el botón derecho del ratón en la capa "imagen" y selecciona Crear máscara de recorte para que solo sea visible sobre el área de la capa "portaimagen".

Selecciona la herramienta Texto (T) y añade algo de contenido junto a la imagen. Para el título utiliza la fuente Oswald con el tamaño 22pt y el color #747d82. Para el bloque de texto utiliza la fuente Helvetica Regular con el tamaño 13pt y el color #5f6c74. Además, ajusta el interlineado de este párrafo a 24pt. A continuación, añade un botón "Leer más" debajo del bloque de texto.

Duplica el grupo "post #1" y mueve el nuevo a la derecha. A continuación, puedes cambiar la imagen y el contenido de esta nueva entrada del blog.

Paso 22: Creación del área de "pie de página"

Crea un nuevo grupo y llámalo "pie de página". Duplica la capa "encabezado bg" (Comando/Ctrl + J) del grupo "Encabezado" y muévela a la parte inferior del diseño, debajo del área "Blog". Nombra esta capa como "pie de página bg".

Mantén pulsada la tecla Comando/Ctrl y haz clic en la miniatura de la capa "pie de página bg" para seleccionarla. A continuación, ve a Capa > Nueva capa de relleno > Degradado y utiliza los ajustes de la imagen de abajo. Mientras la ventana de Relleno de degradado sigue abierta, haz clic en tu imagen y mueve el degradado hacia arriba, como ves en la siguiente imagen.

Ajusta el modo de fusión de esta capa a Luz suave 40%.

Selecciona la herramienta Línea (U) y crea una línea horizontal en la parte superior de tu área de "Pie de página" utilizando el color #50565a. Nombra esta capa como "Línea de 1px".

Duplica esta capa (Comando/Ctrl + J) y muévela un píxel hacia abajo. Luego cambia el color de esta línea a #8e9496.

Paso 23: Creación del área "Acerca de"

Ahora dividiremos el pie de página en tres columnas: "Acerca de", "Twitter" y "Contacto".

Crea un nuevo grupo y nómbralo "Acerca de". Selecciona la herramienta Texto (T) y escribe "Acerca de" en la parte superior de la primera columna. Deja una distancia de 40px entre el borde superior del área de "pie de página" y esta capa de texto.

Selecciona la herramienta Línea (U) y crea una línea horizontal debajo del título. Ajusta el Relleno de esta capa al 0% y la opacidad al 50%. A continuación, aplícale el motivo de línea punteada blanca que has creado en este tutorial.

Utiliza la herramienta Texto (T) para añadir un bloque de texto debajo de la línea punteada utilizando la fuente Helvetica Regular y el color #fafafa. Ajusta el interlineado de este párrafo a 24pt desde el panel Carácter. A continuación, añade un botón "Leer más" debajo del bloque de texto.

Paso 24: Creación del área "Sígueme"

Crea un nuevo grupo y nómbralo "sígueme". A continuación, añade un título y un par de tweets en esta área. Utiliza la misma línea de puntos para separar los bloques de texto.

Añade un botón "Leer más" debajo de los tweets. Selecciona la herramienta Texto (T) y cambia el texto por "Sígueme".

Descarga este conjunto de pájaros de Twitter y mueve un par de ellos a tu documento de maquetación web, debajo del área "Sígueme". Añade un efecto de Sombra paralela a estas capas de pájaros utilizando los ajustes que se muestran en la imagen de abajo.

Paso 25: Creación del área "Contacto"

Crea un nuevo grupo y nómbralo "Contacto". A continuación, añade un título a esta área y una línea de puntos debajo.

Utiliza la herramienta Rectángulo (U) para crear el formulario de contacto, como ves en la siguiente imagen. Rellena cada rectángulo con el color #eff0f0. A continuación, añade un efecto de resplandor interior y un efecto de trazo a cada capa del rectángulo. El color que he utilizado para el Estilo de capa Trazo es #4d5254.

Selecciona la herramienta Texto (T) y escribe dentro de cada rectángulo lo que representa (nombre, asunto, email, mensaje).

Añade un botón "Leer más" debajo del Formulario de contacto y cambia el texto para que diga "Enviar".

Paso 26: Adición del área de "Derechos de autor"

Crea un nuevo grupo y nómbralo "Derechos de autor". A continuación, selecciona la herramienta Rectángulo (U) y crea un rectángulo negro como se muestra en la imagen de abajo. Nombra esta capa "Derechos de autor bg" y ajusta su modo de fusión a Superponer 20%.

Selecciona la herramienta Línea (U) y crea una línea horizontal en la parte superior del rectángulo que creaste anteriormente. Ajusta el Relleno de esta capa al 0% y la Opacidad al 35%. A continuación, aplica el motivo de línea punteada que has creado en este tutorial.

Selecciona la herramienta Texto (T) y añade una frase relativa a los derechos de autor en el centro del rectángulo oscuro. Utiliza la fuente Helvetica Regular con el tamaño 12pt y el color #b1b5b7.

Resultado final

Terminamos. A continuación puedes ver el resultado final de este tutorial. Haz clic en la imagen para ver la versión en tamaño completo.

Espero que hayas disfrutado de este tutorial y que hayas aprendido algunas cosas nuevas para el diseño de interfaces web. Deja cualquier comentario o pregunta que tengas en la sección de comentarios más abajo.