Spanish (Español) translation by Rosario (you can also view the original English article)
Es asombroso cómo el color y el fondo pueden cambiar el aspecto de un sitio web. En este tutorial vamos a crear un diseño rápido y sencillo, pero efectivo, y luego crearemos variaciones con fondos, fotos y motivos. También veremos cómo hacer un fondo de mosaico infinito a partir de una foto, métodos para terminar una sola foto y formas sencillas de crear motivos de píxeles. En resumen, ¡es un tutorial muy completo!
Paso 1 - Crea el diseño básico
Así que nuestra primera tarea es crear un diseño para nuestra página. No vamos a hacer nada demasiado sofisticado porque el tutorial trata de fondos más que de diseños. Sin embargo, debe tener un buen aspecto y ser factible. En la imagen de arriba puedes ver mi esquema a grandes rasgos de los componentes de la página. He planeado un menú y submenú, un panel para presentar la sección y un área de contenido. También he previsto que sea inferior a 1000px para que cuando una persona vea el sitio en una pantalla pequeña siga viendo el fondo correctamente (ya que eso es un aspecto muy importante del diseño).
Debo señalar que, en realidad, no dibujé este conjunto de cuadros de esta manera. Fue más bien algo confuso hasta que llegué al punto "oooh ese es un buen diseño". Sin embargo, a los efectos de este tutorial, tiene más sentido explicarlo así.
Paso 2 - Desarrollo
Este diseño es nuestra base, y tenemos que desarrollarlo con contenido ficticio y una combinación de colores.
Como puedes ver, no hice nada realmente asombroso aquí, sólo coloqué los elementos en la página de manera bastante ordenada y uniforme. Ten en cuenta el espaciado. En la imagen traté de mostrar cómo se alinean los diferentes elementos (líneas amarillas), cómo el espacio es aproximadamente uniforme en sentido vertical y horizontal, así como por encima y por debajo de los elementos.
Hay que tener en cuenta que estas son sólo guías aproximadas y que, en realidad, trabajo a ojo de buen cubero, hasta que me parece que todo se ve bien. Si no estás seguro del espaciado, hacer las cosas de manera uniforme no es un mal punto de partida. A medida que te sientas más cómodo con el espaciado puedes hacer variaciones y jugar con equilibrios desiguales.
En la imagen de arriba puedes ver que elegí un tipo de letra principal llamado Rockwell que usaremos en el panel de encabezado para darle un poco de carácter a la página. Si estuviera construyendo este sitio podría incluir una imagen o insertarla usando sIFR. El resto del texto es Helvetica y Arial que, por supuesto, es adecuado para el uso de HTML. También agregué una ilustración vectorial de un avión de papel que dibujé hace años y vendí como stock. Por supuesto, en un proyecto real, esta imagen estaría relacionada con el sitio, en lugar de incluirla al azar como en este caso.
Por último, utilicé una paleta de colores de tonos cálidos y terrosos. En realidad, soy un poco fan de los colores beige y tierra y verás que los uso mucho. Creo que contribuyen en gran medida a que los sitios web resulten más simpáticos y accesibles.
La página tiene un buen aspecto, pero aún no hay nada memorable en ella y es un poco básica. En el siguiente paso le daremos un poco de vida.
Paso 3 - Mejora y añade algo de estilo
Bien, aquí puedes ver exactamente el mismo diseño pero lo he mejorado, y he añadido dos elementos visuales para darle algo de estilo. El primer elemento es la flecha recortada del menú lateral. Esto hace que el panel central parezca una especie de burbuja de diálogo sobredimensionada. El segundo elemento visual que verás al acercarte es una especie de tema de puntos.
En total, hemos utilizado tres elementos visuales para dar estilo a la página: una ilustración, una forma interesante que rompe la cuadrícula y un tema sutil basado en una forma sencilla. Más adelante añadiremos un cuarto elemento visual, un fondo, para rematar el estilo de la página.
En la imagen de arriba señalé todas las mejoras que añadí. Se trata de pequeños realces y graduaciones de color, puntos y, por supuesto, la flecha recortada. Puede que también te interese un artículo anterior que escribí hace un año sobre Cómo perfeccionar diseños web aquí en Psdtuts+.
Vista antes y después
¡Con esto ya tenemos nuestro diseño básico!
Paso 4 - Añade un fondo en mosaico
El primer fondo que vamos a utilizar es una imagen en mosaico. En este caso vamos a utilizar una foto de césped que utilicé en el tutorial Cómo crear un efecto de texto de césped (una serie que aún no he terminado :-) Puedes conseguir la foto original del césped en Flickr.
Por supuesto, si intentas poner en mosaico la foto original no va a quedar muy bien y será obvio que estás repitiendo la misma imagen una y otra vez. En lugar de eso, tienes que modificar la imagen para que se convierta en un mosaico infinito. Afortunadamente, acabo de publicar un tutorial sobre ese tema, así que ve a leerlo:
Cómo convertir una textura en un fondo de mosaico infinito
Junto con el cambio de fondo, por supuesto, actualicé el colorido para adaptarlo a la nueva imagen. Fíjate en que evité utilizar el mismo tono de verde claro y brillante que el césped, ya que eso habría resultado excesivo. En su lugar, escogí tonos de verdes más apagados, más oscuros y más claros, que complementan el fondo.
Paso 5 - Mezcla la transparencia con el fondo
Los fondos como este son perfectos para añadir capas transparentes en la parte superior. Aquí, tanto el panel "Acerca de" como el "Menú" tienen algo de transparencia y se ve muy bien porque se puede ver algo del césped, lo cual añade algo de profundidad. Aunque puedes simplemente atenuar la opacidad de la capa correspondiente, otra opción es añadir un par de capas más en la parte superior, una con un ligero degradado que se desvanezca hasta desaparecer y la otra con un resaltado de 1px.
En la imagen de arriba se puede ver, por ejemplo, en el menú que tengo un bloque de blanco ajustado al 70% de opacidad, encima hay un degradado de blanco a nada, y encima hay una línea blanca de 1px en el borde inferior. Estas capas adicionales enfatizan la transparencia y dan profundidad a la imagen.
Paso 6 - Crea de una prueba rápida de PNG transparente en HTML
Toda esta transparencia es fácil de hacer en Photoshop, pero quizá te preguntes hasta qué punto es factible construir un diseño así.
Afortunadamente, es posible gracias al formato de archivo .PNG, que permite utilizar transparencia en las imágenes. Una cosa que hay que tener en cuenta es que, si bien puedes hacer transparencias (por ejemplo, 60% de opacidad), no puedes utilizar Modos de fusión de capas (por ejemplo, Multiplicar o Superponer). Dado que en un diseño de Photoshop es importante no hacer nada que no sea realmente construible, todo lo que utilicé es la configuración de opacidad. Es más limitante, pero todavía se puede obtener efectos agradables.
Así que vamos a hacer una prueba rápida de HTML para asegurarnos de que todo funciona realmente como nos imaginamos. Para crear un PNG transparente, primero combinaremos las capas de nuestra forma de panel grande en una sola. Como todas las capas tienen cierta transparencia, el resultado final después de combinarlas también es semitransparente.
Ahora sólo tienes que copiar esto en un nuevo documento de Photoshop, luego desactivar la capa de fondo (ver la imagen de arriba) y deberías ver la transparencia.
Ahora ve a Archivo > Guardar para Web y dispositivos y elige PNG-24 en las opciones. Deberías ver la misma transparencia en la ventana de previsualización.
A continuación haré lo mismo con algunos elementos de imagen más, porque en nuestra prueba queremos comprobar que es posible colocar un PNG transparente sobre otro PNG transparente sobre un fondo.
Con todas nuestras imágenes creadas, ahora sólo es cuestión de componer algo de HTML:
1 |
<html> |
2 |
<head> |
3 |
<title>Background / Transparency Test</title> |
4 |
<style type="text/css"> |
5 |
<!-- |
6 |
body {
|
7 |
background-color: #4B7E07; |
8 |
background-image: url(background.jpg); |
9 |
color: #FFFFFF; |
10 |
} |
11 |
div {
|
12 |
width:802px; height:184px; |
13 |
padding:30px; |
14 |
background-image:url(green.png); |
15 |
color:#ffffff; |
16 |
margin:auto; |
17 |
margin-top:50px; |
18 |
} |
19 |
--> |
20 |
</style></head> |
21 |
|
22 |
<body> |
23 |
|
24 |
<div><img src="about.png" /></div> |
Todo lo que estamos haciendo aquí es establecer la imagen de fondo para que sea nuestro JPG en mosaico. Luego colocando un <div> centrado en la página con su imagen de fondo como el primer PNG transparente. Luego dentro de ese <div> tenemos el segundo archivo PNG transparente.
Ve la prueba de transparencia
Eso será suficiente para demostrar que este diseño es construible. En realidad, tendrías que hacer algunos arreglos para que funcione en IE6, una búsqueda en Google revela un montón de artículos sobre el tema, como esto es Psdtuts + y no NETTUTS, vamos a terminar aquí :-)
Paso 7 - Otra variación
Lo que es fácil de hacer con un fondo de textura definida, como lo es el césped, es aún más fácil de hacer con texturas más simples como esta textura de papel de Bittbox. Como la imagen de origen es mejor, puedes crear mosaicos mucho más grandes para el fondo, con lo que es mucho menos probable que se vean repetidos.
Paso 8 - Motivos de píxeles
Otra opción para los fondos son los motivos de píxeles simples que, cuando se repiten, dan un poco de textura al fondo. El motivo que se muestra en esta variación del diseño es el que utilicé en Creattica Daily.
Puedes crear motivos como éste muy fácilmente. Para hacer este efecto, sólo tienes que crear una nueva imagen de 4px de ancho por 5px de alto y ampliarla todo lo que puedas, luego dibujar estos píxeles:
A continuación, pulsa CTRL-A para seleccionar todo y ve a Edición > Definir motivo, dale un nombre y luego puedes aplicar el motivo con una Superposición de motivo a través de las opciones de fusión de una capa. En el archivo PSD principal, haz clic con el botón derecho del ratón en la capa a la que quieras añadir el motivo, selecciona Opciones de fusión y elige Superposición de motivos. En la imagen de arriba establecí el motivo en Multiplicar sobre un fondo gris oscuro.
La verdad es que es muy divertido jugar con este tipo de motivos de píxeles. La gente amante de los píxeles en K10K tiene una biblioteca de motivos de pixeles que también puedes consultar para obtener diseños mucho más avanzados.
Paso 9 - Fotos de fondo grandes
La última variación que vamos a ver es la de utilizar una sola foto, sin más. Aquí estoy usando una bonita foto de West Bay Cliffs de Cristiano Betta que encontré en Flickr:
Es una foto amplia y bonita, y me ha servido para hacer una buena combinación de colores. Así que aquí están algunos pasos rápidos que hice para colocar la imagen.
Aquí está colocada en el fondo de nuestro diseño. Con un poco de transparencia ya se ve muy bien, pero ¿qué está pasando en la parte superior izquierda?
Mover la foto hacia arriba unos 50px desplaza las partes extrañas descoloridas fuera de la página. El siguiente problema es que no podemos tener un fondo de foto interminable, así que lo desvaneceremos en un color.
Escoge el color más oscuro del mar, crea una nueva capa y dibuja un degradado desde el color hasta la transparencia. Esta capa se sitúa por encima del fondo del océano y lo fusiona bien.
Ahora el fondo se ve un poco plano, por lo que sería bueno alegrar un poco los colores. Para ello, superpondremos la foto con un degradado de colores a juego con la imagen.
En la imagen de arriba puedes ver que dibujé un degradado usando los morados y naranjas de la imagen original.
Poner la capa de degradado en Superponer y 70% realmente aclara la puesta de sol y la hace parecer mucho más intensa.
Ahora el siguiente problema es que necesitamos que la foto se fusione en los lados. Esto va a ser difícil porque en un lado tenemos una montaña y en el otro hay solo cielo. Por ello, probablemente la mejor solución sea fusionar los colores oscuros. La mayoría de la gente no verá esto, es sólo para todas aquellas personas que utilizan una pantalla gigante y abren sus navegadores directamente.
Lo primero que haremos es tomar una selección vertical de 1px de cada borde exterior de la imagen y pulsar CTRL-T para transformarla. La razón por la que hacemos esto es para que si algo del fondo se muestra a través del color que voy a añadir no se vea raro.
A continuación, añadimos una nueva capa y dibujamos una elipse gigante en el fondo, pulsamos CTRL-Mayúsculas-I para invertir la selección y la rellenamos con el mismo color oscuro que hemos utilizado antes.
Ahora deseleccionamos la capa y vamos a Filtro > Desenfocar > Desenfoque gaussiano para desenfocar nuestro color, utilizando un radio de 80px. A continuación, duplica esta capa, desenfócala de nuevo utilizando un radio de 120px, y luego una tercera vez con un radio de 160px. Esto debería producir una graduación suave y agradable.
De este modo, nuestro diseño final con un fondo de foto tendrá, para la mayoría de la gente, el aspecto de la imagen que se muestra arriba. No obstante, podemos estar seguros de que ni siquiera una enorme ventana de navegador revelará nada raro.
Más información sobre las imágenes de fondo grandes
Puedes aprender más sobre el diseño con imágenes de fondo grandes leyendo estos tres magníficos artículos:
- Fondos grandes de páginas web: qué hacer y qué no hacer @ WebDesignerDepot
- Cómo hacer: Imagen de fondo grande CSS @ WebDesignerWall
- 80 sitios web con imágenes de fondo grandes @ WebDesignerWall
Resumen
¡Como puedes ver, hemos sacado mucho partido a nuestro sencillo diseño y, con suerte, tú has sacado algo útil del proceso!
By
