Cómo crear un pie de página web 2.0 sencillo y elegante

Desde que la Web 2.0 llegó a Internet, los pies de página se han vuelto más importantes que nunca, y se han hecho algunos trabajos de muy buen aspecto en la parte inferior. En este tutorial te mostraré cómo producir un pie de página de aspecto elegante en Photoshop.

Pie de página

Aquí está el pie de página que vamos a crear, haz clic en la imagen de abajo para ver la versión en tamaño completo:

Paso 1

Junto con las cabeceras y los pies de página llenos de líquido, los degradados son un sello común del diseño de estilo de la Web 2.0. Para nuestro tutorial vamos a utilizar un paquete de degradados que simula ser 3d / materiales que se pueden obtener desde el excelente sitio Deziner Folio. Haz clic aquí para descargar el paquete de degradados.

Paso 2

Abre tu nuevo archivo de Photoshop. He creado el mío con dimensiones grandes - 1440 px x 900px (para que se ajuste a la pantalla de mi portátil de 17 pulgadas). Por supuesto, el pie de página real no debería ser tan grande, sin embargo, es bueno para simular lo que sucede cuando la ventana del navegador se estira.

Elige un color de fondo, en mi caso la elección del fondo es un simple degradado con #b0b0b0 y #e1e1e1. Mueve el cursor en la pantalla manteniendo SHIFT para crear un degradado vertical hacia abajo de la página.

Paso 3

En el diseño web es muy importante decidir qué tipo de diseño se va a crear. Es decir, elegir entre un diseño líquido (que se extiende por el navegador) o fijo (en muchos sitios de estilo Web 2.0 los diseños fijos suelen estar centralizados). En nuestro pie de página, trabajaremos con un diseño fijo de 760px x 420px. Estas medidas garantizan que, incluso en una pantalla de 800px x 600px, nuestro pie de página siga apareciendo de forma adecuada.

Utiliza las guías para delinear el tamaño de tu sitio web como se muestra a continuación. Ten en cuenta que si deseas crear un diseño optimizado para configuraciones de 1024px x 768px, entonces define tus guías para delinear un área de 955px x 600px.

Paso 4

Aunque nuestro pie de página tiene un ancho fijo, queremos que se extienda a lo largo de la página y llene el área restante. Para ello vamos a utilizar un motivo hecho por mí en photoshop para simular una placa de metal. Para descargar el motivo, haz clic aquí. Abre esta imagen en photoshop y ve a Editar > Definir motivo y elige un nombre para el motivo.

Ahora abre un nuevo archivo con 1440px de ancho y 86px de alto, y ve a Edición > Relleno y elige el motivo que acabamos de crear. Selecciona todo (CTRL+A para PC y APPLE+A para Mac), luego corta y pega la imagen en la parte inferior de nuestro primer documento. Obtendrás el resultado que se muestra a continuación.

Paso 5

Ahora es el momento de utilizar nuestro hermoso paquete de degradado del Paso 1. Crea una nueva capa y crea un rectángulo usando la herramienta Marco (M) con el 100% del ancho del documento y 21px de altura. Ahora selecciona la herramienta Degradado (G) y selecciona un degradado cool. Yo seleccioné " Negro 5 - Brillo" del paquete de degradados. Ahora mueva la herramienta degradado verticalmente sobre el marco manteniendo pulsada la tecla "SHIFT" para asegurarte de que es exactamente vertical.

Mueve la figura resultante a la parte superior de la figura creada en el paso 4. Deberías tener algo parecido a la captura de pantalla de abajo.

Paso 6

Ahora añadimos un efecto de sombra paralela a la capa que hemos creado en el paso 5.

Paso 7

Ahora establece el color de primer plano a #545557 y el color de fondo a #1e211f. Crea una nueva capa por debajo de la capa del paso 4. Utiliza la herramienta Marco (M) para seleccionar el contenido de la capa del paso 4. Selecciona la herramienta Degradado (G), elige el primer degradado ( una combinación) de colores de fondo y de primer plano. Dibuja un degradado sobre el marco manteniendo la tecla shift para obtener el degradado vertical. Ahora ve a la capa del paso 4 y establece el modo de fusión de esta capa en Multiplicar.

Paso 8

Ahora crea una nueva capa por encima de todas las demás capas y dibuja un rectángulo redondo en el centro de nuestras guías, eligiendo los colores #dfdfdf. Haz clic con el botón derecho del ratón en la capa, haz clic en "Opciones de fusión" y crea un efecto de Sombra Paralela para el rectángulo. A continuación, haz clic con el botón derecho del ratón en la capa del efecto y elige "crear capa". Esto dividirá la sombra en su propia capa.

Ahora tienes la capa del rectángulo y la capa de la sombra, mueve y redimensiona la sombra para obtener el resultado de abajo. Puedes pulsar CTRL-T para que aparezca la herramienta Transformación, luego hacer clic con el botón derecho del ratón y elegir Perspectiva, y luego arrastrar los dos controles superiores uno hacia el otro. También puedes mover la sombra hacia abajo y utilizar un pincel borrador suave para eliminar los bordes superiores.

Paso 9

Para terminar el diseño, añade algún texto, información de derechos de autor y tu logotipo en la parte inferior.

Paso 10

Para tener el pie de página listo en su archivo HTML, simplemente elimine el texto (el texto se añadirá en HTML), ajusta todo el archivo y corte el fondo del pie de página como se muestra a continuación, luego pégualo en un nuevo archivo. Al igual que hicimos en Photoshop, el motivo se puede producir utilizando una propiedad de fondo en tu documento CSS. Esta es la razón por la que hemos cortado la imagen tan pequeña, ya que esto conduce a un mejor rendimiento con el tamaño de archivo más pequeño.

Para cortar el centro del pie de página sólo tienes que seleccionar el contenido dentro de las guías y cortarlo y pegarlo en otro archivo.

Guarda ambos archivos mediante Guardar > Guardar para la web (heredado)  y selecciona JPG con una configuración adecuada de calidad. Los JPG y los PNG son buenos para imágenes como la que se muestra, donde hay muchas escalas de color. Las imágenes GIF son mejores para las áreas de color plano. Esto se debe a los algoritmos que utiliza cada uno.

Pie de página

Y ya está, ¡Un precioso elemento de pie de página! Para más ideas de pies de página, echa un vistazo a los 35 hermosos diseños de pies de página de Thiuven.