Cómo crear un diseño web retro de una sola página en Photoshop

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

En este tutorial explicaremos cómo crear un diseño web retro de una sola página utilizando Adobe Photoshop. Aunque la mayor parte del diseño se crea en Photoshop, también utilizaremos Illustrator para crear diversas formas y elementos. ¡Empecemos!

Este tutorial fue una colaboración con Ciursa Ionut.

Recursos del tutorial

Los siguientes recursos fueron utilizados durante la producción de este tutorial.

Sistema de cuadrícula 960

En este tutorial utilizaremos el Sistema de cuadrícula 960. Descárgalo y descomprime el archivo. Luego ve a la carpeta "Photoshop" (dentro de "templates"). Allí encontrarás todos los archivos .PSD. Para este diseño web utilizaremos la cuadrícula de 12 columnas.

Después de abrir el archivo .psd en Photoshop verás 12 barras rojas. Esa es la cuadrícula que vamos a utilizar. Puedes ocultar las barras rojas haciendo clic en el icono de ojo de la capa "12 Col Grid".

Durante este tutorial te pediré que crees formas con ciertas dimensiones. Abre el panel de información (Ventana > Información) y cuando crees una forma verás su anchura y altura exactas en este panel.

El archivo .PSD contiene también unas guías que te serán muy útiles. Para activarlas ve a Vista > Mostrar > Guías, o utiliza el atajo de teclado Ctrl/Cmd + ;. Yo suelo ocultar las barras rojas y activar las guías cuando las necesito.

La cuadrícula nos ayudará a aplicar el principio de diseño de alineación, que establece que cada elemento del diseño debe estar visualmente conectado con otro y que nada debe colocarse al azar.

Ahora que hemos cubierto los aspectos básicos del uso del sistema de cuadrícula 960, podemos pasar a crear el diseño web propiamente dicho. Si quieres saber más sobre el Sistema de cuadrícula 960 puedes leer una guía más completa.

Paso 1 - Configuración del documento y creación del fondo

Abre el archivo "960_grid_12_col .psd" en Photoshop. Necesitamos más espacio para trabajar, así que tendremos que aumentar el tamaño del lienzo. Ve a Imagen > Tamaño de lienzo (Ctrl/Cmd + Alt/Opción + C). Ajusta la anchura a 1200px y la altura a 1700px. A continuación, haz clic en el punto de anclaje superior central. Ese es el punto desde el que se expandirá la imagen.

Ahora vamos a crear un motivo que se va a aplicar al fondo de la página web. Crea un nuevo documento (Ctrl/Cmd + N) con dimensiones de 1px por 3px. A continuación, crea una nueva capa (Ctrl/Cmd + Mayús + N).

Haz un acercamiento y utiliza la herramienta Marco rectangular (M) para crear una selección de 1px por 1px en la parte superior de tu documento. Rellena esta selección con negro utilizando la herramienta Bote de pintura (M).

Pulsa Ctrl/Cmd + D para deseleccionar. Oculta la capa "Fondo" y ve a Edición > Definir motivo. Ahora puedes cerrar este documento.

Vuelve a tu documento de diseño web y oculta la capa "12 Col Grid", pero mantenla siempre en la parte superior del panel de capas. De esta forma podrás activarla y comprobar si los elementos de tu diseño web están alineados con la cuadrícula.

Ve a Capa > Nueva capa de relleno > Color uniforme y ajusta el color a #f2f1ed. Nombra esta capa como "Fondo principal". Aplicaremos un filtro de ruido a esta capa, pero no queremos rasterizarla. En su lugar, utilizaremos un objeto inteligente, para poder editar los filtros más tarde si es necesario. Siempre es una buena práctica trabajar lo menos "destructivamente" posible y mantener todo editable.

Haz clic con el botón derecho del ratón en la capa "Fondo principal" y selecciona Convertir en objeto inteligente. A continuación, ve a Filtro > Ruido > Añadir ruido y utiliza los ajustes que se muestran en la imagen de abajo. Haz doble clic en esta capa para abrir la ventana de Estilo de capa y aplica el motivo que has creado. Esto nos dará una sutil textura de cartón que utilizaremos en todo el diseño.

Paso 2 - Creación del fondo del encabezado

Crea un nuevo grupo (Capa > Nuevo > Grupo) y nómbralo "Encabezado". Crea otro grupo dentro de él y nómbralo "encabezado bg".

Selecciona la herramienta Rectángulo (U) y crea un rectángulo con las dimensiones 1200px por 150px y el color #e9e5db. Nombra esta capa como "encabezado bg" y colócala en la parte superior de tu documento.

Haz clic con el botón derecho del ratón en la capa "encabezado bg" y selecciona Convertir en objeto inteligente. Ve a Filtro > Ruido > Añadir ruido y utiliza los ajustes que se muestran en la imagen de abajo.

Crea un nuevo motivo de líneas verticales igual que creaste el anterior. Para este motivo establece el tamaño del documento en 3px por 1px. Después de guardar el motivo (Edición > Definir motivo), vuelve a tu documento de diseño web, haz doble clic en la capa "encabezado bg" para abrir la ventana Estilo de capa y aplica el motivo que has creado.

No hay mucho contraste entre el fondo del encabezado y el fondo principal, así que añadiremos algunos separadores y degradados para definir mejor cada sección.

Selecciona la herramienta Línea (U) y ajusta el Grosor a 1px. Mantén pulsada la tecla Mayús y crea una línea horizontal en la parte inferior de tu encabezado utilizando el color #bcb9b1. Nombra esta capa como "Línea de 1px".

Duplica esta capa (Ctrl/Cmd + J), selecciona la herramienta Mover (V) y pulsa la flecha hacia abajo en tu teclado para mover esta capa 1px hacia abajo. Cambia el color de la nueva línea a #f8f7f5.

Utiliza la herramienta Marco rectangular (M) para crear una selección en la parte inferior de tu encabezado (1). A continuación, ve a Capa > Nueva capa de relleno > Degradado y utiliza los ajustes de la siguiente imagen (2). Nombra esta capa como "degradado inferior" y ajusta su modo de fusión a Luz suave 20%.

Duplica la capa de degradado y mueve la nueva a la parte superior del encabezado. Nombra esta capa como "degradado superior". Haz clic en su miniatura para editar el degradado y marca la opción Invertir. Esto nos dará un degradado de arriba a abajo.

Ahora añadiremos un nuevo motivo debajo del encabezado. Usa la herramienta Rectángulo (U) para crear un rectángulo de 160px de alto debajo del encabezado (1). Nombra esta capa como "motivo" y establece su Relleno al 0%.

Haz doble clic en esta capa para abrir la ventana de Estilo de capa y aplica un efecto de Superposición de motivo (2). El motivo que he utilizado es del Paquete de líneas tileables.

En este momento esta capa tiene un borde inferior definido. Queremos que ese borde sea más suave, así que usaremos una máscara. Ve a Capa > Máscara de capa > Descubrir todo. A continuación, selecciona la herramienta Degradado (G) con un degradado de negro a transparente. Mantén pulsada la tecla Mayús y arrastra un degradado vertical a la parte inferior de esta capa para enmascarar el borde inferior (3).

Vamos a crear un degradado más, debajo del encabezado. Utiliza la herramienta Marco rectangular (M) para crear una selección como la que se muestra en la siguiente imagen (1). Ve a Capa > Nueva capa de relleno > Degradado y utiliza los ajustes de la siguiente imagen (2).

Nombra esta capa como "degradado de la parte superior del contenido" y ajusta su modo de fusión a Luz suave 50% (3).

Paso 3 - Creación del logotipo

Para el logotipo vamos a utilizar dos tipos de letra: Muncie y Damion. Selecciona la herramienta Texto (T) y escribe el nombre de tu sitio web usando la fuente Muncie con el color #847e70 y el tamaño 80px. Añade una sombra a esta capa utilizando los ajustes de la imagen de abajo (1). Esto creará un sutil resaltado al texto y lo hará parecer más definido.

Utiliza la herramienta Línea (U) con el color de primer plano #837d6f para crear dos líneas en la parte superior de tu capa de texto y otras dos en la parte inferior. Nombra estas capas como "línea de 1px" (2). Observa la siguiente imagen como referencia.

Selecciona las 4 capas de líneas y duplícalas arrastrándolas sobre el botón "Crear nueva capa" de la parte inferior del panel Capas. Cambia el color de las nuevas líneas a blanco y establece su opacidad al 50%. Utiliza la herramienta "Mover" (V) para desplazar estas líneas 1px por debajo de las más oscuras (3).

Agrupa todas las capas de líneas (selecciónalas y pulsa Ctrl/Cmd + G). Nombra el grupo "líneas".

Utiliza la herramienta Texto (T) para escribir la palabra "Retro" en el centro de las líneas inferiores. Utiliza la fuente Damion con el tamaño 21px y el color #847e70. Aplica una sombra a esta capa usando los ajustes de la imagen que se muestra a continuación.

Ahora añadiremos el logotipo de Envato en medio de las dos líneas superiores. Primero, descarga el archivo .PSD "Powered By Envato API" y ábrelo en Photoshop. Haz doble clic en la miniatura del "Vector Smart Object " y el archivo se abrirá en Adobe Illustrator.

Selecciona el objeto hoja y cambia sus colores de degradado a #847d6f y #5b574f. Usa la herramienta Selección directa (A) para seleccionar la hoja y cópiala (Ctrl/Cmd + C). Vuelve a Photoshop y pégala (Ctrl/Cmd + V) como objeto inteligente.

Ve a Edición > Transformación libre (Ctrl/Cmd + T), mantén pulsada la tecla Mayús y reduce la escala de esta capa. Nombra esta capa como "envato logo" y muévela en medio de las dos líneas superiores. Copia el estilo de capa Sombra paralela de la capa de texto "Retro" y pégalo en ésta.

Queremos ocultar las líneas debajo del logotipo de Envato y la capa de texto "Retro". Podemos hacer esto usando una máscara. Haz clic en el grupo "líneas" para activarlo. Utiliza la herramienta Marco rectangular (M) para crear dos selecciones, como ves en la imagen de abajo (nota: mantén pulsada la tecla Mayús después de crear la primera selección, para poder añadir la segunda).

Ve a Capa > Máscara de capa > Ocultar selección. Ahora las líneas debajo del logo de Envato y la capa de texto deberían estar ocultas.

Paso 4: Creación de la cinta de la barra de navegación

La barra de navegación para este diseño web va a ser una cinta que crearemos utilizando formas, objetos inteligentes, filtros de ruido y estilos de capa. Primero, crea un nuevo grupo y nómbralo "Navegación". A continuación, crea otro grupo dentro del primero y nómbralo "cinta".

Usa la herramienta Rectángulo (U) para crear un rectángulo con las dimensiones 610px por 44px y el color #d8cfba. Nombra esta capa como "rectángulo", haz clic con el botón derecho del ratón sobre ella y selecciona Convertir en objeto inteligente. A continuación, aplica un filtro de Ruido (Filtro > Ruido > Añadir ruido) utilizando los ajustes de la imagen que se muestra a continuación.

Haz doble clic en esta capa para abrir la ventana de Estilo de capa y utiliza los ajustes de la imagen de abajo. El motivo que utilicé es del Paquete de formas Tileables. El color del trazo que he utilizado es #b1aa99.

Utiliza la herramienta Pluma (P) para crear la forma del extremo de la cinta. Observa la siguiente imagen como referencia (1).

Nombra esta capa "extremo izquierdo" y muévela debajo de la capa "rectángulo". Desplaza esta forma 10px hacia abajo del borde superior del rectángulo y 10px hacia la derecha del borde izquierdo del rectángulo (2).

Haz clic con el botón derecho del ratón en esta capa y selecciona Convertir en objeto inteligente. Aplica un filtro de ruido con los ajustes de la imagen de abajo. Haz doble clic en esta capa para abrir la ventana de Estilo de capa y utiliza los ajustes de la siguiente imagen (3). El color de Trazo que he utilizado es #9d9684.

Duplica la capa "extremo izquierdo" (Ctrl/Cmd + J) y ve a Edición > Transformar > Voltear horizontal. Nombra la nueva capa "extremo derecho" y muévela al lado derecho del rectángulo. A continuación, establece el ángulo de la Sombra interior de esta capa a 180 grados.

Utiliza la herramienta Pluma (P) con el color de primer plano #6c6554 para crear un triángulo que conecte el rectángulo con la forma del extremo de la cinta (1). En la imagen de abajo hice este triángulo rojo para que fuera más visible.

Nombra esta capa como "triángulo izquierdo", haz clic con el botón derecho del ratón sobre ella y selecciona Convertir en objeto inteligente. A continuación, aplica un filtro de ruido con los ajustes de la imagen de abajo (2).

Duplica esta capa (Ctrl/Cmd + J) y ve a Edición > Transformar > Voltear horizontalmente. Nombra la nueva capa "triángulo derecho" y muévela al lado derecho de la cinta.

Ahora vamos a añadir algunas sombras e iluminaciones a la cinta. Utiliza la herramienta Marco rectangular (M) para crear una selección con las dimensiones 10px por 44px sobre el lado izquierdo del rectángulo (1).

Ve a Capa > Nueva capa de relleno > Degradado y utiliza los ajustes de la imagen inferior. Nombra esta capa como "Iluminación izquierda" y ajusta su modo de fusión a Luz suave 70% (2).

Crea una nueva selección con las dimensiones de 5px por 44px (3). Ve a Capa > Nueva capa de relleno > Degradado y utiliza un degradado de #b5ae9d a transparente (4). Nombra esta capa como "sombra izquierda".

Duplica estas dos capas y muévelas al lado derecho del rectángulo. Luego cambia el ángulo del degradado de estas dos capas a 180 grados (5).

Ahora crearemos un efecto de cinta cosida utilizando líneas discontinuas. Primero, necesitaremos crear un nuevo motivo. Crea un nuevo documento (Ctrl/Cmd + N) con las dimensiones 10px por 1px.

Haz un acercamiento y utiliza la herramienta Marco rectangular (M) para crear una selección con las dimensiones de 6px por 1px, como ves en la imagen de abajo. Crea una nueva capa y rellena la selección con negro.

Pulsa Ctrl/Cmd + D para deseleccionar. Oculta la capa "Fondo" y ve a Edición > Definir motivo. Guarda tu motivo y cierra el documento.

Vuelve a tu documento de diseño web y crea un nuevo grupo dentro del grupo "cinta". Nómbralo "líneas discontinuas".

Utiliza la herramienta Línea (U) para crear una línea horizontal de 1px en la parte superior del rectángulo de la cinta (1). Ajusta el Relleno de esta capa al 0%. A continuación, aplica el motivo de líneas discontinuas que creaste anteriormente (2).

Nombra esta capa como "Línea discontinua de 1px", haz clic con el botón derecho del ratón y selecciona Convertir en objeto inteligente. Haz doble clic en esta capa para abrir la ventana de Estilo de capa y aplica un efecto de Superposición de color utilizando el color #b1aa99 (3).

Ahora añadiremos una línea discontinua más brillante para que el efecto de cosido se vea más marcado. Duplica esta capa (Ctrl/Cmd + J) y cambia su color a #e4ddcd. Utiliza la herramienta Mover (V) para mover esta línea discontinua 1px por debajo de la primera (4).

Selecciona las dos capas de líneas discontinuas y duplícalas. Luego mueve las nuevas líneas a la parte inferior del rectángulo (5).

Paso 5 - Creación del fondo de la cinta

Ahora vamos a crear un fondo para la cinta de manera que parezca que está rodeando una pared.

Crea un nuevo grupo, llámalo " cinta bg " y colócalo debajo del grupo "cinta". Utiliza la herramienta Rectángulo (U) para crear un rectángulo negro debajo de la cinta. Asegúrate de que este rectángulo está colocado dentro de los dos triángulos de la cinta. Nombra esta capa como "cinta bg" y ajusta su modo de fusión a Luz suave 20%.

Utiliza la herramienta Marco rectangular (M) para crear una selección sobre el lado izquierdo del fondo de la cinta (1).

Ve a Capa > Nueva capa de relleno > Degradado y utiliza los ajustes de la imagen de abajo (2). Ajusta el modo de fusión de esta capa a Luz suave 40% (3).

Usa la herramienta Línea (U) con el color #b0a793 para crear una línea vertical de 1px sobre el borde izquierdo del fondo de la cinta. Duplica esta capa de líneas (Ctrl/Cmd + J), mueve la nueva 1px a la derecha y cambia su color a #dbd5c6 (4).

Añade también el mismo degradado y las mismas líneas al lado derecho del fondo de la cinta. Ten en cuenta que debes ajustar el ángulo del degradado a 180 grados y voltear las dos capas de líneas horizontalmente (5).

Añade una máscara al grupo "cinta bg" (Capa > Máscara de capa > Descubrir todo). Luego selecciona un degradado lineal de negro a transparente (G) y enmascara las áreas superior e inferior de este grupo. En la imagen de abajo puedes ver cómo queda mi máscara (si mantienes pulsada la tecla Alt/Opción y haces clic en la miniatura de la máscara, podrás verla sobre toda la imagen).

Paso 6 - Adición de los elementos de navegación

Ahora añadiremos los elementos del menú de navegación y algunos iconos retro al lado de cada uno. Selecciona la herramienta Texto (T) y escribe el nombre de tus elementos de navegación utilizando la fuente Oswald con el tamaño 16px y el color #7f7866. Para indicar la página activa, cambia el color del primer elemento a un marrón más oscuro (#615c4f).

Descarga este conjunto de iconos retro y abre el archivo .AI en Adobe Illustrator. Selecciona cada uno de los iconos que quieras utilizar y cópialo (Ctrl/Cmd + C). A continuación, ve a Photoshop y pega cada icono (Ctrl/Cmd + V) como objeto inteligente. Usa Transformación libre (Ctrl/Cmd + T) para cambiar el tamaño de estas capas.

Aplica un efecto de Superposición de color a cada icono utilizando el mismo color que utilizaste para las capas de texto. A continuación, aplica un efecto de Sombra paralela en todas las capas de texto e iconos utilizando los ajustes que se muestran en la imagen de abajo.

Paso 7 - Creación del rótulo de "Contacto"

En lugar de añadir el enlace de contacto en la barra de navegación, crearemos un rótulo retro para él. Vamos a romper el principio de diseño de proximidad, que establece que los elementos relacionados deben agruparse cerca y tener características visuales similares. El enlace de contacto forma parte de la navegación, pero tendrá un estilo diferente al de los demás elementos de navegación para que destaque. Ten en cuenta que siempre que quieras romper un principio de diseño debes: a) conocer el principio y b) tener una razón para romperlo.

Crea un nuevo grupo y nómbralo "Contacto". Selecciona la herramienta Rectángulo redondeado (U), establece el Radio en 4px y crea un rectángulo redondeado con las dimensiones 130px por 180px y el color #c7c1b3.

Nombra esta capa como "borde", haz clic con el botón derecho del ratón sobre ella y selecciona Convertir en objeto inteligente. Aplica un filtro de Ruido usando los ajustes que se muestran en la imagen de abajo. Haz doble clic en esta capa para abrir la ventana de Estilo de capa y utiliza los ajustes de la siguiente imagen. Para el efecto Trazo he utilizado el color #a9a396. El motivo que utilicé es del Paquete de líneas tileables.

Selecciona la herramienta Rectángulo redondeado (U), establece el Radio en 2px y crea un rectángulo redondeado con las dimensiones 122px por 72px y el color #f3f0e8. Mueve este rectángulo en medio del anterior.

Nombra esta capa como "contacto bg", haz clic con el botón derecho del ratón sobre ella y selecciona Convertir en objeto inteligente. Aplica un filtro de ruido usando los ajustes de la imagen de abajo. Haz doble clic en esta capa para abrir la ventana de Estilo de capa y utiliza los ajustes de la siguiente imagen. Para el efecto Sombra interior he utilizado el color #a9a396 y para el efecto Resplandor interior he utilizado el color #f5f2e9.

Ahora dividiremos el rótulo en dos partes, una para cada capa de texto que añadiremos después. Selecciona la herramienta Rectángulo (U) y crea un rectángulo con las dimensiones 120px por 32px y el color #eae5d9. Nombra esta capa como "parte superior bg", haz clic con el botón derecho del ratón sobre ella y selecciona Convertir en objeto inteligente. Mueve este rectángulo a la parte superior del rectángulo redondeado más pequeño. A continuación, haz clic con el botón derecho del ratón en esta capa y selecciona Crear máscara de recorte.

Añade un filtro de ruido a esta capa utilizando los ajustes de la imagen de abajo. A continuación, añade un efecto de Sombra paralelaa utilizando el color #c3beb1 y los ajustes de la siguiente imagen.

Ahora vamos a crear un rectángulo redondeado con un trazo discontinuo. Como Photoshop aún no ofrece la funcionalidad de crear un trazo discontinuo, vamos a utilizar Illustrator.

Abre un nuevo documento en Illustrator. Selecciona la herramienta Rectángulo redondeado y haz clic en tu documento para que aparezca la ventana de Rectángulo redondeado.

Ajusta la anchura a 171px, la altura a 71px y el Radio a 2px. Elimina el relleno de esta forma y añade un trazo negro de 1 punto. Abre el panel Trazo (Ventana > Trazo) y utiliza los ajustes que se muestran en la siguiente imagen para crear un trazo discontinuo.

Selecciona el rectángulo redondeado y cópialo (Ctrl/Cmd + C). Vuelve a tu documento de Photoshop y pégalo como objeto inteligente (Ctrl/Cmd + V). Nombra esta capa como "línea discontinua" y muévela al centro de la capa "contacto bg". Añade un efecto de Superposición de color a la capa "línea discontinua" utilizando el color #958f82.

Selecciona la herramienta Texto (T) y escribe las palabras "Obtén una cotización" en la parte superior del rótulo. Utilicé la fuente LeckerliOne con el tamaño 14px y el color #948f84. Elegí esta fuente en lugar de Damion (que usamos en el logo) porque es más legible a este tamaño.

Utiliza la herramienta Texto (T) para añadir las palabras "Contacto" en la zona inferior del rótulo. Utilicé la fuente Oswald con el tamaño 19px y el color #948f84.

Aplica un efecto de Sombra paralela a estas dos capas de texto usando los ajustes de la imagen de abajo.

Copia uno de los iconos de mano del conjunto de iconos retro que has descargado y pégalo en Photoshop como objeto inteligente. Nombra esta capa como "icono de mano" y muévela al centro de las dos secciones del póster.

Haz doble clic en esta capa para abrir la ventana de Estilo de capa y utiliza los ajustes de la siguiente imagen. Para el efecto de Superposición de color he utilizado el color #969183.

Ahora tenemos que añadir una cuerda para sujetar el letrero. Crea un nuevo grupo, nómbralo "cuerda" y muévelo al fondo del grupo "Contacto". Luego usa la herramienta Elipse (U) para crear un clavo. Selecciona la herramienta "Línea" (U), ajusta el Grosor a 1px y crea dos líneas oblicuas, como ves en la imagen de abajo. Usa el color #7f7866 para todas estas formas.

Paso 8 - Creación del área de "Servicios"

Para el área de "Servicios" necesitaremos una forma hexagonal que utilizaremos como fondo para las tres columnas de contenido. Crearemos esta forma utilizando Adobe Illustrator.

Abre un nuevo documento en Illustrator y selecciona la herramienta Polígono. Haz clic en tu imagen para abrir la ventana del Polígono, donde podemos establecer las características de la forma. Ajusta el Radio a 70px y los Lados a 6. Haz clic en Aceptar para crear la forma.

Establece el color de relleno del polígono en #8E8E8E. Luego agrega un trazo de 20px usando el mismo color. Abre el panel de Trazo (Ventana > Trazo) y establece el Vértice en Unión redonda. Luego haz clic con el botón derecho en esta forma, ve a Transformar > Rotar, establece el Ángulo en 90 grados y haz clic en Aceptar.

En la barra de opciones situada encima de tu imagen, establece la anchura de esta forma en 140px y su altura en 162px.

Utiliza la herramienta Selección (V) para seleccionar la forma del hexágono y cópiala (Ctrl/Cmd + C). Vuelve a tu documento de Photoshop y pégalo como objeto inteligente (Ctrl/Cmd + V). Ve a Edición > Transformación libre (Ctrl/Cmd + T), mantén pulsada la tecla Mayús y escala esta capa hasta que su anchura sea de 300px, o cuatro columnas de cuadrícula 960 (puedes ver las dimensiones de la forma que estás transformando en el panel de Información).

Ajusta el Relleno de esta capa al 0%. A continuación, haz doble clic en ella y aplica el motivo "Dot Grid 2" del Paquete de formas Tileables. Nombra esta capa como "motivo de medios tonos". Añade esta capa dentro de un grupo (Ctrl/Cmd + G) y nómbrala "Diseño web". A continuación, crea un nuevo grupo principal y llámalo "Servicios".

Haz clic con el botón derecho del ratón en la capa "motivo de medios tonos" y selecciona Convertir en objeto inteligente. A continuación, aplica un efecto de Superposición de color a esta capa utilizando el color #a7c5bd.

Vuelve a copiar la forma del hexágono de Illustrator y pégala en tu documento de Photoshop como objeto inteligente. Ve a Edición > Transformación libre (Ctrl/Cmd + T) y ajusta la escala horizontal y vertical al 175% desde la barra de opciones que hay sobre tu imagen (1).

Nombra esta capa "borde" y muévela al centro de la primera forma hexagonal. Para alinear correctamente estas dos capas, asegúrate de tener activadas las guías inteligentes (Ver > Mostrar > Guías inteligentes). Mueve esta capa sobre la primera forma de hexágono y verás unas líneas rosas que indican cómo están alineadas las dos capas.

Añade un efecto de Superposición de color a la capa "borde" utilizando el color #a7c5bd (2).

Tenemos que aplicar un filtro de ruido a esta capa. Sin embargo, el efecto de Superposición de color pasará por encima del filtro de ruido. Para resolver este problema tendremos que convertir esta capa en un objeto inteligente. Haz clic con el botón derecho del ratón en la capa "borde" y selecciona Convertir en objeto inteligente. A continuación, ve a Filtro > Ruido > Añadir ruido y utiliza los ajustes de la imagen inferior (3).

Haz doble clic en esta capa para abrir la ventana de Estilo de capa y utiliza los ajustes de la siguiente imagen para el Resplandor exterior. El color que he utilizado es #89b9ac (3).

Copia la forma del hexágono una vez más desde Illustrator y pégala en Photoshop como objeto inteligente. Ve a Edición > Transformación libre (Ctrl/Cmd + T) y ajusta la escala horizontal y vertical al 170%. Nombra esta capa como "columna bg" y muévela al centro de los otros dos hexágonos.

Añade un efecto de Superposición de color a esta capa utilizando el color #f5f2ea. Haz clic con el botón derecho del ratón y selecciona Convertir en objeto inteligente. A continuación, aplica un filtro de ruido utilizando los ajustes de la imagen de abajo. Haz doble clic en esta capa para abrir la ventana de Estilo de capa y utiliza los ajustes de la siguiente imagen. Para el efecto Trazo utiliza el color #83a098.

Paso 9 - Añadiendo el contenido del área de "Servicios"

Selecciona la herramienta Texto (T) y escribe el encabezado "Diseño Web" utilizando la fuente Muncie con el tamaño 48px y el color #7b9d94. A continuación, añade un efecto de Sombra paralela blanca utilizando los ajustes de la imagen de abajo.

Utiliza la herramienta Texto (T) para crear un cuadro de texto de 230px de ancho (puedes ver el ancho de tu cuadro de texto mientras lo estás creando en el panel de información). Añade un párrafo de texto en este cuadro utilizando la fuente Open Sans Light con el color #5c574f y el tamaño 15px.

Para que el texto sea más legible, fijaremos la altura de la línea en 1,6em. El tamaño de nuestra fuente es de 15px. Si multiplicamos 15 por 1,6 obtenemos 24. Ese es el valor en píxeles de la altura de la línea. Ve al panel Carácter y establece el interlineado en 24px.

Ahora añadiremos un botón de "Ver Portafolio" para esta columna. Más adelante crearemos el área de "portafolio" y queremos que el usuario pueda seleccionar uno de los servicios ofrecidos y acceder a los elementos del portafolio de ese servicio justo debajo de esta área.

Selecciona la herramienta Rectángulo redondeado (U) y crea un rectángulo redondeado con las dimensiones 120px por 30px y el color #a7c5bd. Nombra esta capa como "botón", haz clic con el botón derecho del ratón y selecciona Convertir en objeto inteligente.

Ve a Filtro > Ruido > Añadir ruido y utiliza los ajustes de la imagen de abajo (1). A continuación, haz doble clic en esta capa para abrir la ventana Estilo de capa y utiliza los ajustes de la siguiente imagen (1).

Selecciona la herramienta Texto (T) y escribe las palabras "Ver Portafolio" usando la fuente Oswald con el tamaño 17px y el color #f9f9f9. Coloca esta capa de texto en el centro de tu botón. A continuación, añade un efecto de Sombra paralela a esta capa utilizando los ajustes de la imagen de abajo (2). El color que he utilizado es #83a098.

Añade estas dos capas dentro de un grupo y nómbralo "botón".

Utiliza la herramienta Línea (U) con el color #cbc5b7 para crear dos líneas horizontales debajo del encabezado de esta columna. La línea superior es de 200px de ancho, la segunda es de 240px de ancho y tienen un espacio de 9px entre ellas. Nombra estas capas como "línea de 1px".

Duplica las dos capas de líneas y mueve las nuevas 1px hacia abajo. Cambia el color de las nuevas líneas a blanco y ajusta su opacidad al 40%.

Agrupa todas estas capas de líneas y nombra el grupo "líneas". Utiliza la herramienta Marco rectangular (M) para crear una selección sobre el área donde las líneas se cruzan con el texto. Asegúrate de que el grupo "líneas" está activo y ve a Capa > Máscara de capa > Ocultar selección.

Crea dos columnas más para el área de "Servicios" igual que creaste la columna de "Diseño web". Todos los ajustes son los mismos, excepto los colores, que puedes obtener de la siguiente imagen.

Terminamos la zona de "Servicios". Aquí aplicamos los principios de diseño de proximidad y repetición. Repetimos la forma de cada columna y las fuentes para indicar que las tres columnas están relacionadas y tienen funcionalidades y contenidos similares.

Elección de fuentes

Hasta ahora hemos utilizado cinco tipos de letra en este diseño. Podemos excluir los tipos de letra, que se utilizaron una sola vez para distintos fines, y hablar de los otros tres: Muncie, Oswald y Open Sans.

Elegí la fuente Muncie porque es un tipo de letra condensado de bonito diseño que encaja con el estilo que quería crear. Utilizamos este tipo de letra para el logotipo y los encabezados del área de "Servicios". Esta fuente no es lo suficientemente legible en tamaños pequeños (por ejemplo, para la barra de navegación), así que añadí Oswald a la combinación. Estas dos fuentes van bien juntas porque comparten una característica: ambas son tipos de letra condensados.

Para los bloques de texto, elegí la familia tipográfica Open Sans porque tiene 10 estilos diferentes para elegir. La versión Light de esta fuente, que es la que más utilizaremos, crea un bonito contraste con las demás fuentes utilizadas.

Paso 10 - Creación del área "Portafolio"

El área de "Portafolio" estará vinculada al área de servicios. Como estamos creando un sitio web de una sola página, necesitamos la funcionalidad de seleccionar una categoría de portafolio y obtener una lista de los elementos del portafolio de esa categoría.

Vamos a utilizar los tres servicios como categorías. Para indicar qué categoría está seleccionada, utilizaremos el mismo esquema de colores que utilizamos para el área de "Servicios".

Cuando un usuario haga clic, por ejemplo, en el servicio "Branding", la sección del portafolio que se encuentra debajo tendrá un trazo rojo, el color de resaltado y el color del encabezado también serán rojos y habrá una barra roja que conectará la columna "Branding" con el cuadro del portafolio. Estos tres indicadores visuales serán suficientes para que el usuario entienda rápidamente cómo funciona la sección de portafolio.

Empecemos a diseñar el área de "Portafolio". Crea un nuevo grupo y nómbralo "Portafolio". Crea otro grupo dentro de éste y nómbralo "portafolio bg".

Selecciona la herramienta Rectángulo (U) y crea un rectángulo con las dimensiones 960px por 310px y el color #89b9ac. Nombra esta capa como "primer borde" y ajusta su opacidad al 20%. A continuación, selecciona la herramienta Mover (V) y mueve este rectángulo 60px por debajo del área de "Servicios".

Crea un nuevo rectángulo con las dimensiones 950px por 300px y el color #a7c5bd. Nombra esta capa como "segundo borde" y muévela al centro del primer rectángulo. Haz doble clic en esta capa para abrir la ventana de Estilo de capa y utiliza los ajustes de la siguiente imagen. El color que utilicé para los efectos Sombra interior y Trazo es #83a098.

Crea un nuevo rectángulo con las dimensiones 940px por 290px y el color #f5f2ea. Nombra esta capa "portafolio bg". Haz doble clic en esta capa para abrir la ventana de Estilo de capa y utiliza los ajustes de la siguiente imagen. El color de Trazo que he utilizado es #f9f8f5.

El área "Portafolio" se dividirá en dos columnas. La izquierda mostrará una lista de miniaturas. Cuando un usuario haga clic en una miniatura, la columna derecha mostrará más información sobre ese elemento del portafolio.

Ahora crearemos el fondo de la columna derecha. Selecciona la herramienta Rectángulo (U) y crea un rectángulo con las dimensiones 640px por 290px y el color #ece8df. Nombra esta capa "elemento activo bg", haz clic con el botón derecho del ratón sobre ella y selecciona Convertir en objeto inteligente.

Añade un filtro de ruido utilizando los ajustes de la imagen de abajo. A continuación, haz doble clic en esta capa para abrir la ventana Estilo de capa y utiliza los ajustes de la imagen que se muestra a continuación. El color del Resplandor interior que he utilizado es #9d9180.

Crea dos líneas verticales con un grosor de 1px sobre el borde izquierdo del rectángulo "portafolio activo bg". Para la oscura utiliza el color #c3b9ab y para la clara el color #f9f8f5.

A continuación, selecciona la herramienta Rectángulo (U) y crea un rectángulo de dimensiones 4px por 80px que conecte la parte inferior de la columna "Diseño web" con el borde del área "Portafolio". Ajusta el color de esta capa a #a7c5bd y nómbrala "conector".

Paso 11 - Añadiendo los elementos del portafolio

Crea un nuevo grupo y nómbralo "elementos del portafolio". Copia la forma de hexágono de Illustrator y pégala en Photoshop como objeto inteligente. Estamos repitiendo la forma del hexágono para mantener el mismo estilo visual en todo el diseño.

Ve a Edición > Transformación libre (Ctrl/Cmd + T) y establece la escala horizontal y vertical al 50%. Añade un efecto de Superposición de color a esta capa utilizando el color #f4eee7 y un efecto de Trazo interior de 1px utilizando el color #c3b9ab. Nombra esta capa como "borde".

Duplica la capa "borde" (Ctrl/Cmd + J), haz clic con el botón derecho del ratón sobre ella y selecciona Borrar estilo de capa. A continuación, ve a Edición > Transformación libre (Ctrl/Cmd + T) y ajusta la escala horizontal y vertical al 42%. Nombra esta capa como "Portaimagen " y asegúrate de que se encuentra en el centro de la capa "Borde".

Abre una imagen que quieras incluir en la zona del "Portafolio" y muévela sobre la capa "portaimagen". Nombra esta capa como "imagen", haz clic con el botón derecho del ratón sobre ella y selecciona Crear máscara de recorte. Tu imagen ahora debería ser visible solo dentro de la forma de hexágono del "portaimagen".

Coloca las tres capas dentro de un grupo y nómbralo "elemento #1".

Duplica el grupo "elemento #1" 7 veces y organiza los elementos del portafolio en forma de coroneno.

El cuarto elemento del portafolio tiene un color de borde diferente para indicar que está seleccionado. Simplemente cambia la Superposición de color a #a7c5bd y el color de Trazo a #83a098 para esa capa de "borde".

Ahora añadiremos el contenido para el elemento activo del portafolio (el que resaltamos antes). Crea un nuevo grupo y nómbralo "elemento activo". Selecciona la herramienta Rectángulo redondeado (U), establece el Radio en 4px y crea un rectángulo redondeado con las dimensiones 220px por 250px y el color #f5f2ea. Nombra esta capa como "borde" y añádele un Trazo interior de 1px utilizando el color #c3b9ab.

Selecciona la herramienta Rectángulo (U) y crea un rectángulo de 200px por 230px en el centro del rectángulo redondeado.

Abre una imagen que quieras que aparezca en esta área, muévela sobre la capa "portaimagen". Nombra esta capa como "imagen", haz clic con el botón derecho del ratón sobre ella y selecciona Crear máscara de recorte. Ahora tu imagen es visible solo dentro del rectángulo que has creado.

Selecciona la herramienta Texto (T) y escribe el nombre de tu portafolio usando la fuente Oswald con el tamaño 24px y el color #7b9d94. Mueve esta capa de texto 20px a la derecha del borde izquierdo de la imagen. Añade un efecto de Sombra paralela a este titular utilizando los ajustes de la imagen de abajo.

Utiliza la herramienta Línea (U) para crear una línea horizontal con las dimensiones 370px por 1px y el color #c3b9ab. Mueve esta línea 10px por debajo del encabezado. Duplica esta capa (Ctrl/Cmd + J), cambia el color de la nueva línea a #faf9f8 y muévela 1px hacia abajo.

Selecciona la herramienta Texto (T) y crea un cuadro de texto con un ancho de 370px. Añade un párrafo de texto utilizando la fuente Open Sans Light con el tamaño 15px y el color #5c574f. Además, ve al panel Carácter y establece el interlineado a 24px, como hicimos para los párrafos del área de "Servicios".

Paso 12 - Creación del área "Acerca de"

El área "Acerca de" contendrá dos columnas con la foto, el nombre y la descripción de dos personas. Seguiremos utilizando la forma de hexágono para las fotos, con el fin de mantener la coherencia del diseño web.

Crea un nuevo grupo y llámalo "Acerca de". Copia la forma de hexágono de Illustrator y pégala en Photoshop como objeto inteligente. Ve a Edición > Transformación libre (Ctrl/Cmd + T) y reduce la escala de esta capa hasta que sea tan ancha como dos columnas de la cuadrícula. Nombra esta capa como "borde", haz doble clic en ella para abrir la ventana de Estilo de capa y utiliza los ajustes de la siguiente imagen. Para el efecto de Superposición de color he utilizado el color #d0cbc0 y para el efecto de Trazo he utilizado #958f82.

Duplica la capa "borde" (Ctrl/Cmd + J), haz clic con el botón derecho en la nueva y selecciona Borrar estilo de capa. A continuación, utiliza Transformación libre (Ctrl/Cmd + T) para reducir la escala de esta forma. Nombra esta capa como "Portaimagen".

Abre en Photoshop la imagen que quieres mostrar en esta zona y muévela sobre la capa "portaimagen". Haz clic con el botón derecho en la capa de la imagen y selecciona Crear máscara de recorte.

Selecciona la herramienta Texto (T) y añade algo de contenido junto a la imagen. Para el encabezado he utilizado la fuente Oswald con el tamaño 24px y el color #a39f94. Para el bloque de texto he utilizado la fuente Open Sans Light con el tamaño 15px y el color #5c574f. También he ajustado el interlineado a 24px.

Utiliza la herramienta Línea (U) para crear un separador horizontal entre el encabezado y el bloque de texto. Para la primera línea usa el color #bebbb1 y para la segunda usa #ffffff.

Repite este paso para añadir la segunda columna para el área "Acerca de".

Paso 13 - Creación del fondo del formulario de contacto

El área de "Contacto" tendrá dos columnas: una para el formulario de contacto y otra para el feed de Twitter. Aplicaremos el principio de diseño de contraste para diferenciar las dos columnas.

El formulario de contacto será más ancho que la columna del feed de Twitter porque es más importante y necesita atraer más atención. Para lograr este objetivo, también vamos a crear un fondo diferente para el formulario de contacto. Pongamos manos a la obra.

Crea un nuevo grupo y llámalo "Contacto". Crea otro grupo dentro de éste y llámalo "contacto bg". Selecciona la herramienta Rectángulo redondeado (U) y crea un rectángulo redondeado con las dimensiones 620px por 360px y el color #d0cbc1. Nombra esta capa como "borde", haz clic con el botón derecho del ratón y selecciona Convertir en objeto inteligente.

Ve a Filtro > Ruido > Añadir ruido y utiliza los ajustes de la imagen de abajo. Haz doble clic en esta capa para abrir la ventana de Estilo de capa y utiliza los ajustes de la siguiente imagen. El color del trazo que he utilizado es #958f82.

Selecciona la herramienta Rectángulo redondeado (U) y ajusta el Radio a 4px. A continuación, crea un rectángulo redondeado con las dimensiones 610px por 350px y el color #f5f2ea. Mueve esta capa al centro del rectángulo redondeado oscuro.

Nombra esta capa como "contacto bg", haz clic con el botón derecho del ratón sobre ella y selecciona Convertir en objeto inteligente. Añade un filtro de ruido usando los ajustes de la imagen de abajo. Haz doble clic en esta capa para abrir la ventana de Estilo de capa y utiliza los ajustes de la siguiente imagen. El color que utilicé para el efecto Trazo es #f9f8f5.

Paso 14 - Creación del formulario de contacto

Utiliza la herramienta Rectángulo (U) con el color #faf9f8 para crear tres campos de entrada y un área de texto para el formulario de contacto. El ancho de estos rectángulos debe ser de 350px. Necesitamos algo de espacio en el lado derecho de esta área para añadir un párrafo corto de texto y más detalles de contacto.

Para cada uno de estos rectángulos aplica los siguientes estilos de capa. El color que utilicé para el efecto Trazo es #d1cec7.

Añade un texto en el interior de cada campo de entrada. He utilizado la fuente Open Sans Light con el tamaño 13px y el color #847f76. Luego agrega un botón "Enviar" con el color #aea89c y el borde #8a857a. Copia los demás ajustes de un botón anterior que hayas creado para este diseño web.

Selecciona la herramienta Texto (T) y crea un cuadro de texto junto al formulario de contacto con un ancho de 190px. Luego añade un bloque de texto corto dentro de este cuadro. Utilicé la fuente Open Sans Light, con el tamaño 15px, el color #5c574f y puse el interlineado en 24px.

Selecciona la herramienta Línea (U) y crea una línea horizontal con las dimensiones 190px por 1px y el color #c8c4bb. Nombra esta capa como "Línea de 1px".

Duplica esta capa (Ctrl/Cmd + J) y mueve la nueva línea 2px hacia abajo. Luego duplica ambas líneas y mueve las dos nuevas capas 1px hacia abajo. Cambia el color de las nuevas líneas a #fcfaf6. Agrupa todas estas capas y nombra el grupo "líneas".

Copia el icono de mano del conjunto de iconos retro que has descargado y pégalo en Photoshop como objeto inteligente. Utiliza Transformación libre (Ctrl/Cmd + T) para reducir su escala y voltearlo horizontalmente, de modo que apunte al formulario de contacto. De esta manera dirigiremos los ojos del usuario hacia el formulario de contacto.

Mueve el icono de mano en medio de las líneas. A continuación, utiliza la herramienta Marco rectangular (M) para seleccionar el área donde se cruzan las líneas con el icono. Asegúrate de que el grupo "líneas" está activo y ve a Capa > Máscara de capa > Descubrir todo.

Haz doble clic en esta capa para abrir la ventana de Estilo de capa y utiliza los ajustes de la siguiente imagen. Para el efecto de Superposición de color he utilizado el color #837e70.

Utiliza la herramienta Texto (T) para añadir otro bloque de texto debajo de las líneas con más información de contacto, como el correo electrónico, el teléfono y el nombre de usuario de Skype. Para este bloque de texto he utilizado las fuentes Oswald Italic y Semibold Italic con el tamaño 14px, el color #5c574f y un salto de línea entre cada línea de texto.

Paso 15 - Adición del feed de Twitter

Crea un nuevo grupo y nómbralo "Twitter". A continuación, utiliza la herramienta Texto (T) para añadir un encabezado con la fuente Oswald, el tamaño 24px y el color #a39f94.

Selecciona la herramienta Línea (U) y añade dos líneas horizontales debajo del encabezado. Para la primera línea usa el color #bebbb1 y para la segunda usa #ffffff.

Luego añade un par de cuadros de texto que representen los últimos tweets. Utiliza la fuente Oswald Italic con el tamaño 14px y el color #5c574f.

Crea un botón "Síguenos" con el color de relleno #a7c5bd y el color de borde #83a098. Los demás ajustes para este botón son los mismos que aplicaste a los botones anteriores.

Paso 16 - Adición de encabezados en el lateral del diseño web

Dado que este es un sitio web de una sola página, pensé en añadir un encabezado al lado de cada sección para dar a los usuarios una retroalimentación sobre qué sección es actualmente visible, además de la retroalimentación de la barra de navegación.

Crea un nuevo grupo y nómbralo "Encabezados". A continuación, selecciona la herramienta Línea (U) y crea una línea vertical desde la parte superior del área de "Servicios" hasta la parte inferior del área de "Contacto". Mueve esta línea 20px a la izquierda desde el borde izquierdo de la página web. Nombra esta capa como "Línea de 1px".

Duplica esta capa (Ctrl/Cmd + J) y mueve la nueva línea 1px a la izquierda. A continuación, establece su color en #fbfbfa.

Selecciona la herramienta Texto (T) y escribe el nombre de cada sección del sitio web al lado. Mira la siguiente imagen como referencia. He utilizado la fuente Muncie con el tamaño 36px y el color #b5b2ac. Aplica un efecto de Sombra paralela a las capas de texto usando los ajustes de la imagen que se muestra a continuación.

Crea un nuevo grupo y nómbralo "Derechos de autor". A continuación, selecciona la herramienta Texto (T) y añade una frase de Derechos de autor en la parte inferior de la página web. He utilizado la fuente Open Sans Regular con el tamaño 12px y el color #837f79.

Conclusión

En este tutorial aplicamos los cuatro principios básicos del diseño: contraste, repetición, alineación y proximidad para crear un diseño web retro pulcro. Espero que te haya gustado. Haz clic en la siguiente imagen para ver la versión en tamaño completo del diseño.