Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Complete Websites

Diseña una interfaz de sitio web acogedor y alegre en Adobe Photoshop

by
Read Time:18 minsLanguages:
This post is part of a series called Photoshop to HTML and CSS.
Convert a Warm, Cheerful Web Design to HTML and CSS: Chapter 2

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

¡Actualizado con los tutoriales de codificación HTML!  Poco después del lanzamiento de Webdesigntuts, publicamos este excelente tutorial que detalla el proceso de diseño de una página de inicio cálida y alegre en Photoshop. Tras una gran demanda, hemos empezado a tomar ese diseño terminado y lo estamos convirtiendo en una página web HTML y CSS que cumple con los estándares. En el camino, revisaremos una variedad de técnicas ingeniosas que te ayudarán a mejorar tu propio flujo de trabajo.

Y lo que es mejor, cuando Nettuts alcance los 80.000 suscriptores RSS, Jeffrey ha aceptado llevar las cosas aún más lejos y convertir el producto final en un tema personalizado para WordPress. A continuación, comprueba nuestro progreso .


Los tutoriales de codificación de PSD a HTML

Jeffrey Way ha elaborado unos tutoriales de codificación espectaculares en nuestro sitio hermano Nettuts sobre la conversión de este diseño de PSD a HTML, así que hazte un favor y revisalas una vez que hayas completado la parte del diseño. Hay 8 capítulos en total (estamos en el paso 8 en este momento), y vale la pena revisarlos si alguna vez has tenido alguna pregunta sobre la conversión de un PSD a HTML/CSS.


La fase de diseño

En este tutorial vamos a aprender a diseñar una interfaz cálida, alegre y acogedora para un sitio web de portafolio / blog en Adobe Photoshop. A medida que avanzamos en este tutorial, vamos a trabajar con: Formas simples (rectángulos, líneas, flechas, etc), estilos de capa (¡muchos en realidad!), máscaras de capa, patrones, estilos de carácter y de párrafo, y muchas otras técnicas de diseño y de Photoshop que puedes adaptar a tu flujo de trabajo de diseño de interfaces web.


Paso 1

Para mantener todo alineado vamos a utilizar el sistema de rejilla 960s (Consíguelo desde aquí). Una vez descargado, abre el archivo "960_grid_24_col.psd". La altura del documento actual es menor que nuestro diseño final. Así que iremos a Imagen > Tamaño del lienzo > Altura: 1820px, Anclaje: Centro superior.

También tenemos que asegurarnos que nuestras Reglas y Guías se vean. Por lo tanto, iremos a Ver > Extras / Reglas/ Snap (para que nuestros objetos se ajusten en alineación con nuestras Guías).

Vamos a llenar nuestro fondo con un color esloide. Seleccionamos la capa "Fondo", hacemos clic con el botón derecho del ratón sobre ella y elegimos Capa de fondo, y le daremos un nombre significativo (por ejemplo: "bg"). Ahora, utilizando la herramienta Marquesina Rectangular (M), crea una selección sobre todo el lienzo, establece tu color de primer plano a: #f8eedf, luego haz clic en Shift+Backspace para llenar tu selección.


Paso 2

Empecemos a crear nuestro encabezado. Usando la Herramienta Marquesina Rectangular (M), o la Herramienta Rectángulo (U) (o cualquier herramienta que prefieras usar), crea un rectángulo / selección de 1020x100px y rellénalo con cualquier color sólo por ahora.

Sigue adelante y aplica una superposición de degradado a tu cabecera, haciendo clic con el botón derecho en nuestra capa > Opciones de fusión > Superposición de degradado > utiliza la imagen de abajo como referencia:

Ahora, para que nuestro fondo de cabecera no parezca plano, aplicaremos una simple textura de Ruido. Por lo tanto, crea una nueva capa (obviamente, tiene que estar por encima de la capa de fondo en sí), crea una selección sobre el fondo de la cabecera, y luego rellénalo (haciendo clic en Shift + Retroceso) con este valor de color: #ffc05e.

Ve a Filtro > Ruido > Añadir Ruido > Cantidad: 48px, Distribución: Gaussiano. Cambia el Modo de Fusión de esta capa a: Luminosidad, y baja su Opacidad a: 5%.


Paso 3 

Es hora de escribir el nombre de nuestro sitio web. Agarra la herramienta de escritura horizontal (T), escribe el nombre de tu sitio web de acuerdo con la siguiente configuración de caracteres:

  • Familia de fuentes: Archer (consígelo en typography.com)
  • Tamaño: 30pt
  • Peso: Negrita
  • Ajuste del antialiasing: Crisp
  • Color: #ffffff
  • Interletraje: Óptico
  • Seguimiento: 50

Aplica una Sombra Caída a nuestro texto usando los ajustes que aparecen en la imagen de abajo:

Para asegurarte de que el nombre de la página web está alineado verticalmente con el fondo de la cabecera, selecciona ambas capas y haz clic en "Alinear centros verticales" que encontrarás en el panel de control.


Paso 4

En este paso, colocaremos los iconos de las redes sociales. Empezaremos descargando estos impresionantes iconos de redes sociales, de KomodoMedia, y luego colocaremos cuatro iconos como en la imagen de abajo:

Para que los espacios entre los cuatro iconos sean uniformes. Selecciona las cuatro capas y haz clic en: Distribuir centros horizontales en el panel de control.

Ahora vamos a crear un separador junto a nuestros iconos. Usando la Herramienta Línea (U), crea dos líneas cada una de ellas debe ser de 1x60px, llena la de la izquierda con este valor de color #ffd593, y la de la derecha con este valor de color: #c08c3a. Además, asegúrate de dejar 20px de espacio blanco horizontal entre las dos líneas y los cuatro iconos.

Selecciona la herramienta de degradado (G), abre el cuadro de diálogo del editor de degradado y establece la configuración del degradado según la imagen siguiente. A continuación, haz clic con el botón derecho del ratón en la capa de una de las líneas que acabamos de crear, y elige: Añadir máscara de capa.

Arrastra con la herramienta de degradado (G) de arriba a abajo. Haz lo mismo con la capa de la otra línea (o, puedes simplemente copiar la máscara de capa y pegarla en la otra capa).


Paso 5

Es hora de empezar a trabajar en la barra de navegación. Selecciona la herramienta Marquesina Rectangular (M), crea una selección de 1020x600px, y llénala con este valor de color #40312a.

Usando la Herramienta Marquesina de una Fila, crea un 1020x1px, y rellénalo con este valor de color: #f9ba59.

Añadiremos un resaltado creando una selección de 1020x1px, llenándola con este valor de color #735a4f, y llevando su Opacidad a: 70%.


Paso 6 

En este paso, crearemos nuestro texto de navegación. Así que, utilizando la herramienta de tipo horizontal (T), escribe la palabra "Inicio" utilizando la siguiente configuración de caracteres:

  • Familia de fuentes: Gotham Rounded (consígelo en typography.com)
  • Tamaño: 16pt
  • Peso: Medio
  • Ajuste del antialiasing: Crisp
  • Color: #2c8897
  • Interletraje: Métricas
  • Seguimiento: 50

A continuación, aplica una Sombra Caída de acuerdo con la siguiente imagen:

En una nueva capa de texto, escribe el resto del texto de navegación, utilizando la misma configuración de caracteres que utilizamos anteriormente, excepto que esta vez vamos a cambiar el valor del color a: #ffffff. Nuevamente, aplica una Sombra Caída a esta capa de acuerdo a la siguiente imagen:


Paso 7 

Ahora vamos a crear nuestra barra de búsqueda, ¿por qué no? Empezaremos escribiendo la palabra "BUSQUEDA" utilizando la misma configuración de caracteres que hemos aplicado al texto de navegación, pero esta vez cambiaremos el peso de la fuente a: Libro. También le aplicaremos la misma sombra que hemos aplicado a la palabra "Home".

Es hora de crear el campo de entrada. Usando la Herramienta Rectángulo Redondeado (U), crea un rectángulo de 190x25px, con un radio de 3px, rellénalo con este valor de color #2c8797, y aplica un estilo de capa a la misma, de acuerdo con la siguiente imagen:

Intenta encontrar o crear un icono de lupa muy sencillo, colócalo como en la imagen de abajo, y no olvides aplicar a este icono la misma Sombra Caída que hemos aplicado a la palabra "BUSCAR".


Paso 8 

Empecemos a trabajar en el área de presentación / bienvenida. Utilizando la herramienta Marquesina Rectangular (M), crear una selección de: 1020x400px, y llénala con este valor de color #deccaaa.

Vamos a crear un patrón simple y sutil para que nuestro fondo se vea más interesante. Adelante, crea un nuevo documento de 25x25px, y llena su fondo con este valor de color #deccaaa.

Usando la Herramienta Elipse (U) crea un círculo de alrededor de 4x4px, rellénalo con #aa9364, y asegúrate de que esté alineado al centro del documento.

Crea otra copia de este círculo, empújalo dos píxeles hacia abajo y cambia el color de relleno a #f2e5cb.

Ve a Editar > Definir patrón > Dele un nombre.

Aplica el siguiente estilo de capa a la capa de fondo (la que hemos creado al principio de este paso):


Paso 9 

Arrastra un par de Guías Horizontales de acuerdo con la siguiente guía:

Usando la herramienta Rectángulo Redondeado (U), crea un rectángulo de 950x260px, con un radio de 5px, y rellénalo con este valor de color: #40312a.

Aplica una Sombra Interior a la misma. Utiliza la imagen de abajo como referencia:

Aplica un efecto de Ruido a este rectángulo (ya lo hemos hecho al fondo de nuestra cabecera), añade una máscara de capa a esta capa, y arrastra desde arriba a la derecha hasta abajo a la izquierda con un Degradado Lineal de Negro a Blanco.


Paso 10

Crea un rectángulo o selección de 230x250px, rellénalo con cualquier color, alinéalo según la siguiente imagen, y aplíca el Estilo de Capa también según la siguiente imagen:

Ve a Archivo > Colocar > y coloca una imagen de un proyecto de diseño destacado. Haz clic con el botón derecho en esta capa > Crear máscara de recorte.


Paso 11

Ahora, vamos a crear una sombra para nuestra imagen. Así que, usando la herramienta Elipse (U), crea una elipse como la de la imagen de abajo. Luego, ve a Filtro > Desenfocar > Desenfocar gaussiano > Radio: 3.0px.

Abre tu Gradient Editor, y establece la configuración de acuerdo con la siguiente imagen. Crea una máscara de recorte para la capa de la elipse, y arrastra con la herramienta de degradado (G) de derecha a izquierda con un degradado lineal. Además, asegúrate de mantener presionada la tecla Shift mientras arrastras para restringir tu ángel.

Colocaremos otra imagen. Pero lo único que cambiaremos es el soporte de nuestra imagen, ahora será 230x220px.


Paso 12

Es hora de escribir un texto de bienvenida. Coge la Herramienta de Tipo Horizontal (T), y escribe un título de bienvenida, utilizando la siguiente configuración de caracteres:

  • Familia de fuentes: Archer
  • Tamaño: 24pt
  • Peso: Negrita
  • Ajuste del antialiasing: Crisp
  • Color: #3da2b4
  • Inteletraje: Óptico
  • Seguimiento: 50

Ahora, escribe algo de texto, utilizando las siguientes configuraciones de caracteres y párrafos:

  • Familia de fuentes: Verdana
  • Tamaño: 12pt
  • Peso: Regular
  • Ajuste del antialiasing: Smooth
  • Color: #ffffff
  • Interletraje: Métricas
  • Seguimiento: 0
  • Conducción: 18pt
  • Párrafo: Justificar todo

Paso 13

Vamos a crear nuestros dos botones de llamada a la acción. Usando la herramienta Rectángulo Redondeado (U), crea un rectángulo de 160x45px, con un radio de 5px, y rellénalo con cualquier color por ahora. Además, asegúrate de alinearlo como la siguiente imagen:

Aplica un efecto de ruido a este botón (ya lo hemos hecho varias veces). Añade una máscara de capa, y usa un degradado lineal de negro a blanco arrastra de arriba a abajo.

Aplica un estilo de capa a esta capa. Utiliza la imagen de abajo como referencia:

Utilizando la herramienta de escritura horizontal (T), escribe algo dentro de ese botón (por ejemplo: "Aprende más"), utilizando la siguiente configuración de caracteres:

  • Familia de fuentes: Gotham Rounded
  • Tamaño: 16pt
  • Peso: Negrita
  • Ajuste del antialiasing: Crisp
  • Color: #ffffff
  • Interletraje: Óptico
  • Seguimiento: 50

Aplica una Sombra Caída a esta capa de texto. La configuración se puede ver en la imagen de abajo:

Haz otra copia de este botón, y asegúate de alinearlo según la siguiente imagen:


Paso 14

Vamos a crear un Breadcrumb. Usando la Herramienta Rectángulo Redondeado (U), crea un rectángulo de 950x40px, con un radio de 5px, alinéalo como en la imagen de abajo, y aplíca una Superposición de Degradado de acuerdo a la siguiente imagen:

Usando la Herramienta de Tipo Horizontal (T), escribe algún texto que muestre dónde está el usuario, y aplica los siguientes ajustes de caracteres a tu texto:

  • Familia de fuentes: Archer
  • Tamaño: 13pt
  • Peso: Negrita
  • Ajuste del antialiasing: Crisp
  • Color: #ffffff
  • Interletrado: Métricas
  • Seguimiento: 50

A continuación, aplica una Sombra Caída a tu texto. La configuración se puede encontrar en la imagen de abajo:

Usando la Herramienta Polígono (U), crea un triángulo de 12x12px, y rellénalo con este valor de color: #e0cfad.


Paso 15

En este paso, crearemos un simple separador que consiste en tres líneas que se colocan una encima de la otra. Así que, utilizando la herramienta Línea (U), crea una línea de 1020x2px y rellénala con este valor de color #bba67b. Luego, crea otra línea de 1020x1px y rellénala con este valor de color #e6d6b8. Y por último, crea otra línea de 1020x1px y rellénala con este valor de color: #bba67b.


Paso 16

Arrastra un par de Guías horizontales según la siguiente imagen:

La primera sección de nuestra área de contenido será la sección "Desde el blog". Agarra la Herramienta de Tipo Horizontal, escribe un título utilizando la siguiente configuración de caracteres: 

  • Familia de fuentes: Archer
  •  Tamaño: 24pt
  • Peso: Negrita
  • Ajuste del antialiasing: Crisp
  • Color: Cualquier color por ahora
  • Interletrado: Óptico
  • Seguimiento: 50

Aplica un estilo de capa a esta capa de texto, según la siguiente imagen:

Escribe el nombre de la primera entrada del blog, utilizando la siguiente configuración de caracteres:

  • Familia de fuentes: Gotham Rounded
  • Tamaño: 24pt
  • Peso: Liviano
  • Ajuste del antialiasing: Crisp
  • Color: #40312a
  • Interletrado: Óptico
  • Seguimiento: 50

Escribe algunos detalles sobre la entrada del blog, utilizando la siguiente configuración de caracteres:

  • Familia de Fuente: Archer
  • Tamaño: 13pt
  • Peso: Negrita y cursiva
  • Ajuste del antialiasing: Crisp
  • Color: #ce953c
  • Interletrado: Métricas
  • Seguimiento: 0

Ahora vamos a crear un soporte para la imagen principal de nuestra entrada de blog. Por lo tanto, utilizando la herramienta Rectángulo redondeado (U), crear un 550x140px, con 5px de radio, llenarlo con cualquier color, y luego aplicar un estilo de capa a la misma, de acuerdo con la siguiente imagen:

Coloca tu imagen principal y crea una máscara de recorte para esta capa.

Escribe tres líneas de texto como introducción de nuestra entrada en el blog, utilizando la siguiente configuración de caracteres:  

  • Familia de fuentes: Verdana
  • Tamaño: 12pt
  • Peso: Regular
  • Ajuste del antialiasing: Suave
  • Color: #000000 - #247184
  • Interletrado: Métricas
  • Seguimiento: 0
  • Conducción: 18pt

Crea otra copia de esta entrada de blog, y asegúrate de alinear los elementos según la siguiente imagen:


Paso 17

Coge la herramienta Rectángulo (U), y crea un rectángulo de 110x30px, rellénalo con cualquier color, y aplícale un Estilo de Capa según la siguiente imagen:

De nuevo, aplica un efecto de ruido a este botón, aplica una máscara de capa y arrastrala de abajo a arriba con un degradado lineal de negro a blanco.

Usando la herramienta Línea (U), crea una línea de 110x1px, y rellénala con este valor de color: #b2988d.

Escribe una palabra dentro del rectángulo ("El blog", por ejemplo), utilizando la siguiente configuración de caracteres:

  • Familia de fuentes: Archer
  • Tamaño: 16pt
  • Peso: Negrita
  • Ajuste del antialiasing: Crisp
  • Color: #ffffff
  • Interletrado: Óptico
  • Seguimiento: 50

Aplica una Sombra Caída según la siguiente imagen:


Paso 18

Comenzaremos este paso arrastrando una nueva Guía horizontal según la siguiente imagen:

Es hora de empezar a trabajar en la barra lateral. Agarra la herramienta Marquesina Rectangular (M), crea una selección de 385x720px, y rellénala con cualquier color por ahora.

Aplica una superposición de degradado a esta capa, según la siguiente imagen:

Añade una máscara de capa a esta capa, luego usando la Herramienta de Degradado (G), arrastra con un Degradado Lineal de Negro a Blanco, de derecha a izquierda.

Usando la herramienta Línea (U), crea una línea de 1x720px, y rellénala con este valor de color: #dfcdb2.

Añade una máscara de capa a esta capa, y de nuevo usando la herramienta de degradado (G), arrastra con un degradado lineal de negro a blanco, pero esta vez de abajo a arriba.

Duplica la capa de la línea que acabamos de crear, empújala 1px a la izquierda y cambia su color a #fff7ea.


Paso 19

Vamos a crear nuestra pestaña de la barra lateral. Usando la Herramienta Rectángulo Redondeado (U), crea un rectángulo de 310x200px, con un radio de 5px, rellénalo con cualquier color, luego aplícale el Estilo de Capa según la siguiente imagen:

Arrastra una nueva Guía horizontal como la siguiente imagen:

Clic en Ctrl+ en la miniatura de esta capa para cargar sus píxeles. Agarra la herramienta Marquesina Rectangular (M), establece su configuración de selección en: Sustrae la selección, luego haz una selección sobre las áreas mostradas abajo para deseleccionarlas. Ahora te queda un área que sigue seleccionada, crea una nueva capa y rellénala con este valor de color: #40312a.

Usando la herramienta Línea (U), crea dos líneas una al lado de la otra (ver la imagen de abajo), cada una de ellas debe ser de 1px. Rellena la de la izquierda con este valor de color #134a56, y la de la derecha con este valor de color: #257386.

Vuelve a hacer lo mismo, pero esta vez en horizontal.


Paso 20

Escribe la palabra "Comentarios" en la primera pestaña, utilizando la siguiente configuración de caracteres:

  • Familia de fuentes: Archer
  • Tamaño: 16pt
  • Peso: Medio
  • Ajuste del antialiasing: Crisp
  • Color: #ffff
  • Interletrado: Métricas
  • Seguimiento: 50

Aplica la misma sombra que hemos aplicado al texto de ruta de navegación.

Escribe las palabras "Categorías" y "Archivos" utilizando la siguiente configuración de caracteres:

  • Familia de fuentes: Archer
  • Tamaño: 16pt
  • Peso: Medio
  • Ajuste del antialiasing: Crisp
  • Color: #ffffff
  • Interletrado: Métricas
  • Seguimiento: 50

Asegúrate de alinearlos como en la imagen de abajo. Además, aplica una Sombra Caída de acuerdo con la siguiente imagen:


Paso 21

Escribe un ejemplo de comentario, utilizando la siguiente configuración de caracteres:

  • Familia de fuentes: Verdana
  • Tamaño: 12pt
  • Peso: Regular
  • Ajuste del antialiasing: Suave
  • Color: #ffffff
  • Interletrado: Métricas
  • Seguimiento: 0
  • Conducción: 18pt

Escribe algunos detalles sobre el comentario, utilizando la siguiente configuración de caracteres:

  • Familia de fuentes: Archer - Gotham Rounded
  • Tamaño: 12pt
  • Peso: Negrita y cursiva - Medio
  • Ajuste del antialiasing: Crisp
  • Color: #f8eedf
  • Interletrado: Óptico
  • Seguimiento: 0

Crea una copia de este comentario, y crea entre ellos un separador como el que creamos en el paso 19.


Paso 22

Crea otro título (que diga: "QUIENES SOMOS") como el de la imagen inferior:

Usando la herramienta Rectángulo (U), crea un rectángulo de 310x100px, aplícale un Trazo (la configuración se puede ver en la imagen de abajo), y luego coloca una imagen dentro de ese rectángulo.

Utilizando la herramienta de escritura horizontal (T), escribe algunas palabras sobre quién eres, utilizando la siguiente configuración de caracteres:

  • Familia de fuentes: Verdana
  • Tamaño: 12pt
  • Peso: Regular - Negrita
  • Ajuste del antialiasing: Smooth
  • Color: #000000 — #247184
  • Interletrado: Métricas
  • Seguimiento: 0

Paso 23

Crea otro título (que diga: "PATROCINADORES"). A continuación, utilizando la herramienta Rectángulo (U), crea un 138x138px, y rellénalo con este valor de color: #febf5d.

Coloca una imagen de un anuncio como el de la imagen de abajo:

Crea una copia de este anuncio.

Usando la herramienta Línea (U), crea dos líneas una al lado de la otra, cada una de ellas debe ser de 1x95px, rellena la de la izquierda con este valor de color #ffffff, y la de la derecha con este valor de color: #cfbea3.

Abre tu Gradient Editor, establece la configuración como en la imagen de abajo, selecciona una de las capas de las dos líneas, añade una máscara de capa y luego arrastra de arriba a abajo con este Degradado. También, haz lo mismo con la capa de la otra línea.


Paso 24

Arrastra una nueva Guía horizontal según la siguiente imagen:

Usando la Herramienta Marquesina Rectangular (M), crea una selección de 1020x420px, rellénala con cualquier color, y luego aplícale una Superposición de Degradado, según la siguiente imagen:

Usando la herramienta Marquesina de una fila, crea una selección y rellénela con este valor de color: #b2988d.


Paso 25

Arrastra dos guías horizontales según la siguiente imagen:

Utilizando la herramienta de escritura horizontal (T), escribe el primer título del pie de página, utilizando la siguiente configuración de caracteres:

  • Familia de fuentes: Archer
  • Tamaño: 24pt
  • Peso: Negrita
  • Ajuste de antialiasing: Crisp
  • Color: Cualquier color
  • Interletrado: Óptico
  • Seguimiento: 50

A continuación, aplica un estilo de capa a la misma de acuerdo con la siguiente imagen:

Ahora vamos a crear nuestro formulario de contacto. Bueno, no tengo que decir nada, la imagen de abajo lo dice todo.

Aplica el siguiente estilo de capa a todos los campos / rectángulos que acabamos de crear:

Ahora, escribe algún texto dentro de estos campos que indique para qué sirven, utilizando la siguiente configuración de caracteres:

  • Familia de fuentes: Archer
  • Tamaño: 13pt
  • Peso: Negrita
  • Ajuste de antialiasing: Crisp
  • Color: 247184
  • Interletrado: Métricas
  • Seguimiento: 0

Paso 26

Vamos a crear el "SUBIR". Usando la herramienta Rectángulo (U), crea un rectángulo de 110x30px, y rellénalo con este valor de color #febf5d. A continuación, aplica un estilo de capa a la misma de acuerdo con la siguiente imagen:

De nuevo, aplica un filtro de Ruido, añade una máscara de capa y luego arrastra de arriba a abajo con un Degradado Lineal de Negro a Blanco.

Clic en Ctrl+ para seleccionar los píxeles del fondo del botón. Luego, ve a Seleccionar > Modificar > Contraer > Contraer por: 1px, y rellena esta selección con #ffffff. Nuevamente ve a Seleccionar > Modificar > Contraer > Contraer por: 1px, y luego pulsa Eliminar. Deselecciona la selección, y baje la Opacidad esta capa a: 15%.

Escribe la palabra "SUBMIT" dentro del botón, utilizando la siguiente configuración de caracteres:

  • Familia de fuentes: Archer
  • Tamaño: 16pt
  • Peso: Negrita
  • Ajuste de antialiasing: Crisp
  • Color: #ffffff
  • Interletrado: Óptico
  • Seguimiento: 50

Y luego aplica una Sombra Caída a la misma de acuerdo con la siguiente imagen:


Paso 27

La segunda sección de nuestro pie de página contendrá imágenes de nuestros proyectos recientes. Así que, usando la herramienta Rectángulo (U), crea un rectángulo de 125x95px, aplícale un Trazo, coloca una imagen y crea una máscara de recorte en ella.

Sigue añadiendo imágenes y crea otro botón más.


Paso 28

La tercera y última parte de nuestro gran pie de página es el flujo de Twitter. Entonces, utilizando la herramienta de tipo horizontal (T), escribe un poco de texto como un ejemplo de tweet, utilizando la siguiente configuración de caracteres:

  • Familia de fuentes: Verdana
  • Tamaño: 12pt
  • Peso: Regular
  • Ajuste de antialiasing: Suave
  • Color: #f8eedf
  • Interletrado: Métricas
  • Seguimiento: 0

A continuación, escribe algunos detalles sobre el tweet, utilizando la siguiente configuración de caracteres:

  • Familia de fuentes: Archer
  • Tamaño: 12pt
  • Peso: Negrita Cursiva
  • Ajuste de antialiasing: Suave
  • Color #2e91a0
  • Interletrado: Métricas
  • Seguimiento: 0

Sigue añadiendo más ejemplos de tweets... Además, crea un botón de "síguenos" como el de abajo:

Coloca cada una de las tres secciones en un Grupo de capas individual. Selecciona los tres Grupos y, a continuación, haz clic en Distribuir centros horizontales en la barra de control.


Paso 29

Ahora es el momento de crear el pequeño pie de página. Usando la Herramienta Marquesina Rectangular (M), crea una selección de 1020x70px, y aplíca una Superposición de Degradado de acuerdo a la siguiente imagen:

Aplica un efecto de Ruido a esta capa (el mismo efecto que hemos aplicado a la cabecera).

Usando la Herramienta Marquesina de una Fila, crea una selección, y rellénela con este valor de color: #38a4bs.

Utilizando la herramienta de escritura horizontal (T), escribe los avisos de copyright, utilizando la siguiente configuración de caracteres:

  • Familia de fuentes: Archer
  • Tamaño: 13pt
  • Peso: Medio
  • Ajuste del antialiasing: Crispado
  • Color: #ffffff
  • Interletrado: Métricas
  • Seguimiento: 50

A continuación, aplica una Sombra Caída a la misma, de acuerdo con la siguiente imagen:

Y, por último, escribe una pequeña navegación, utilizando la misma configuración de caracteres, y la configuración de la Sombra Caída mencionada anteriormente.


Conclusión

¡Eso es todo, amigos! Hemos terminado con el diseño de la interfaz de nuestro sitio web. Realmente espero que este tutorial haya sido útil. Y si tienes algún comentario, déjalo abajo, y me responderé a ellos. ¡Además, no te olvides de revisar la parte de seguimiento sobre cómo conseguir este diseño en vivo!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.