Spanish (Español) translation by Nadia Gonzales (you can also view the original English article)
En este tutorial, crearemos un diseño web de alta calidad utilizando una fuente definida y delgada, magníficas imágenes de fondo y al mismo tiempo aprovecharemos el espacio y el diseño. Puedes utilizar fácilmente esta técnica para crear tus propios diseños.
Cuando termines de leer este tutorial, puedes ir a nuestro sitio hermano, NETTUTS, y seguirnos mientras construimos el diseño en HTML limpio y sencillo. Bien, ¡vamos a rockear!
Diseño final
Es un diseño bastante elegante, que probablemente se adapte a un sitio de tipo portafolio de diseño, pero realmente podría ser modificado para todo tipo de propósitos. Se basa en una tipografía elegante, un diseño estructurado y un fondo visualmente interesante.
El verdadero poder de este diseño es mostrar lo que se puede lograr manteniendo la sencillez. Al final de esta parte de Photoshop del tutorial, te mostraré cómo podemos cambiar fácilmente los fondos y las fuentes y explicaré por qué este diseño es tan efectivo.
Cuenta con una estructura sencilla: menú horizontal, panel de encabezado principal y área de contenido. Aunque este es un diseño de página de inicio, podrías imaginar que una página interior simplemente tendría un panel de encabezado diferente y una nueva área de contenido. Por razones de simplicidad, sólo vamos a montar el diseño de la página de inicio.
Paso 1
En primer lugar, crea un nuevo documento. El mío es de 1100px de ancho x 1100px de alto. El objetivo es crear un sitio web de 1024px de ancho, pero aún así tener espacio para decidir qué va a pasar fuera del área visible de manera que se degrade bien incluso en pantallas más grandes.
Ahora nuestra primera tarea es crear un atractivo fondo abstracto. Para ello dibujaremos un degradado lineal hacia abajo utilizando estos dos colores: #1b204c a #472373.
Paso 2
Ahora queremos un fondo visualmente interesante que sea lo suficientemente abstracto como para no distraer del texto. Afortunadamente, hay una estupenda imagen de acuarela disponible de forma gratuita en Arsenal de GoMedia, haz clic en la sección "freebie" (gratuito) y encontrarás dos acuarelas; la que queremos es la verdosa.
Ahora bien, aunque es muy agradable tal y como está, se ve mucho mejor si pulsamos CTRL+I y la invertimos para que quede ese bonito rosa/morado sobre negro.
Paso 3
Ahora copiamos la acuarela en nuestro lienzo principal y pulsamos Ctrl+T para llevarla a un tamaño razonable. Nuestro objetivo aquí es que se desvanezca en negro a la derecha (para que podamos construir nuestro HTML más tarde con mayor facilidad). Además, tampoco queremos que sea demasiado larga verticalmente, así que lo mejor es borrar un poco el exceso. Para ello toma un pincel y pinta en negro para eliminar sólo las partes inferiores.
Ten en cuenta que es mejor usar un pincel que tenga algo de textura para que no se note que hemos borrado partes. Si te desplazas hacia abajo en la lista de pinceles, hay un pincel que viene incorporado en Photoshop que se parece al que se muestra. Es una buena opción. Por supuesto, si tienes un pincel más bonito, no dudes en usarlo.
Cuando hayas terminado, rellena las áreas de la derecha y de la parte inferior con negro para que todo el lienzo quede cubierto por esta capa.
Paso 4
Ahora disminuye la opacidad de la capa de acuarela a un 70% aproximadamente y establece su Modo de fusión en Superponer. De esta forma, parte del colorido pasa a través de ella para crear un aspecto más agradable.
Paso 5
Ahora, en una nueva capa por encima de la capa de acuarela, y dibujando hacia arriba, haz un degradado lineal que vaya de negro a transparente para que después tu lienzo se desvanezca básicamente a negro por la parte inferior.
Paso 6
A continuación, en dos nuevas capas, dibuja un par de degradados radiales de blanco a transparente, uno más grande que el otro. Ajústalos a Superponer, con una Opacidad del 40% y 100% para la más grande y la más pequeña respectivamente.
Básicamente, debes crear luz en nuestra imagen para darle un poco más de textura.
Paso 7
Este es el fondo terminado. Es oscuro, abstracto, y bastante elegante con el colorido. Por supuesto, el rosa puede no ser tu elección particular de color, y si ese es el caso, no dudes en añadir una capa de ajuste de color en la parte superior y utilizarla para ajustar el color. A mí me gusta el rosa/morado, ¡así que esa será mi elección!
Paso 8
Ahora creamos una nueva capa y añadimos un "logo". Realmente no tengo un propósito con este diseño, así que decidí simplemente poner algo de texto y fingir que es mi logo. Debido a que este tutorial es mitad Psdtuts + y luego la mitad NETTUTS, escribí "psd vs net".
Las fuentes que estoy utilizando aquí son Egyptian505 BT Bold y Egyptian505 LT BT Light (la versión más clara de la fuente es la que he utilizado para el 'vs').
Para hacer que el "vs" suba un poco puedes usar el campo "Ajustar el cambio de línea de base" en la paleta Carácter (mostrado en la segunda imagen de abajo).
Por último, también añadí un pequeño estilo de capa al texto con una tenue Superposición de degradado, como se muestra, y un Resplandor interior de 1px con blanco.
Paso 9
Ahora, en este punto, activé mis Reglas (Ctrl+R) y dibujé un par de guías. Dividí mi página en tres columnas con líneas de 50px, 320px, 610px, 900px. Al menos esos son los números que debería haber utilizado. Mirando mi captura de pantalla me acabo de dar cuenta de que mi tercera línea está desactivada... ¡oh!
De todos modos, el punto es que estoy definiendo el espacio en el que voy a colocar todos mis elementos, y si fuera a hacer varias páginas podría utilizar esta cuadrícula de diferentes maneras. Tal y como están las cosas, al estar diseñando sólo la página de inicio, sólo voy a utilizar esas tres columnas una vez, un poco más adelante.
Paso 10
Bien, ahora dibujamos nuestro primer cuadro negro. Con las reglas y guías todavía activas, crea una nueva capa y dibuja un Marco rectangular (M) que vaya de un lado a otro. Rellénalo con negro, luego pon esta capa al 80% de Opacidad, haz clic con el botón derecho del ratón en la capa y elige Opciones de fusión. A continuación, haz clic en Trazo y añade un trazo blanco de 1px al exterior y establécelo en Superponer. Esto nos dará un borde muy atractivo que hará que el cuadro se vea mucho mejor.
Paso 11
Ahora duplica la capa del cuadro, y usando Ctrl+T, transforma el cuadro para que sea del mismo ancho pero mucho más corto (como se muestra abajo). Esta será nuestro cuadro de navegación.
Cambia la Opacidad al 40% y el Relleno al 50%. Esto hará que nuestro cuadro sea mucho más tenue y dará algo de profundidad a los dos cuadros, haciendo que uno parezca más importante e imponente que el otro.
Este tipo de contraste entre los dos cuadros es una gran manera de establecer una precedencia visual entre los elementos. Cuando el usuario llega a la página, queremos que vea primero nuestro gran mensaje y luego la barra de navegación. Al tenerla desvanecida, le decimos al usuario que la menos prominente debe ser vista en segundo lugar.
Paso 12
Bien, ahora añadimos algo de texto. De nuevo, utilicé Egyptian Light para el título grande (que será una imagen en el HTML final) y Arial para los elementos del menú (que serán enlaces de texto HTML).
Unas palabras sobre la tipografía. Este diseño se basa en gran medida en el hecho de que hemos utilizado un tipo de letra sencillo y limpio. El hecho de que el texto sea bonito y grande da la impresión de que es muy audaz, pero al mismo tiempo, al tratarse de un tipo de letra muy fino, resulta elegante.
Si buscas un diseño de alta gama, los tipos de letra finos y clásicos son difíciles de superar. Cuando descubrí por primera vez Helvetica Ultralight, recuerdo que me volví loco creando todo tipo de diseños que parecían realmente minimalistas y de alta gama.
Además, esta fuente en particular ,Egyptian, tiene serifas muy definidas, combinadas con una especie de aspecto cuadrado que le da un aspecto bastante atractivo (creo).
Hay muchos tipos de letra fantásticos que puedes utilizar. Sin embargo, como regla general, es mejor utilizar algo más clásico. O, en otras palabras, a menos que sepas lo que estás haciendo, deberías mantenerte alejado de las fuentes de aspecto muy extraño, por ejemplo, alguna que parezca muy futurista. En realidad, como regla general, a menos que estés muy seguro de ti mismo, es mejor optar por fuentes más comunes.
Otro tipo de letra que funcionaría muy bien, en este caso, es algo de aspecto tecnológico; como esta fuente que utiliza Chris Garrett Media. No tengo ni idea de qué fuente es, ni de cómo se llama, pero es bastante atractiva. Quizá algún amable tipófilo pueda decírnoslo en los comentarios :-)
Paso 13
De cualquier manera, después de ver el sitio de Chris Garrett Media, decidí que sería muy interesante añadir una Superposición de degradado, y un poco de brillo a mi texto. Así que como se puede ver a continuación, aquí estamos añadiendo una Superposición de degradado de negro a blanco, desvaneciendo un poco y estableciendo el Modo de fusión en Superponer.
Paso 14
Ahora podemos dibujar un gran cuadro negro adicional para el área de contenido. En realidad, basta con duplicar la capa anterior y transformarla de nuevo.
Y eso nos lleva al punto que se muestra en la imagen de abajo. ¡¡Se ve muy bien!!
Paso 15
Ahora añadimos un poco de contenido ficticio en el cuadro de contenido. Aquí volví a usar Arial para la mayor parte del texto, pero para los encabezados, en lugar de usar Egyptian, usé Georgia. Georgia no es tan elegante, pero es un tipo de letra estándar, lo que significa que puedo hacer estos encabezados en HTML simple en lugar de depender de imágenes (o Flash).
En realidad, con el lanzamiento de Windows Vista también hay otra fuente semiestándar que funcionaría bien en este caso, llamada Cambria. Pero Cambria tiene algunos problemas extraños de representación en Firefox para Macs en ciertos tamaños, así que nos quedaremos con la tradicional Georgia por el momento.
Paso 16
Finalmente, creé una nueva capa en la parte inferior, la rellené con un color púrpura oscuro, añadí un borde de 1px en la parte superior, y voilá tenemos un pie de página.
Listo para la construcción
Con todo esto, el sitio está listo para construir.
Fondo alternativo 1
Una de las cosas positivas de este diseño es que podemos cambiar fácilmente el fondo y el diseño sigue siendo impresionante. Aquí lo cambié por una imagen de iStockPhoto llamada Passion, con una combinación de colores similar. Es una representación de la luz en 3D muy atractiva y, al igual que nuestro fondo actual, también es abstracta y visualmente hermosa.
Fondo alternativo / Colores 2
Aquí he utilizado otra imagen abstracta de iStockPhoto llamada Blue Energy. Como el color cambió, también he modificado los colores en algunos lugares, sobre todo en el texto, y también añadí mucho resplandor a la copia principal.
Por qué funciona
Es poco probable que necesites este diseño exacto, lo digo ahora que escribí todo un tutorial sobre él. Así que hablemos un poco de por qué funciona bien, ya que eso te ayudará a utilizar los mismos principios pero incorporando tu toque, o preferencia, personal.
Estos son varios factores que intervienen para que un diseño funcione:
- En primer lugar, elegí fondos realmente impactantes. Los de iStock y los de GoMedia serían buenas imágenes por sí solas. Son interesantes de ver, pero no compiten por la atención. Además, todos se pueden desvanecer fácilmente. Las fotos que se pueden desvanecer fácilmente son siempre más fáciles de trabajar.
- Las imágenes atractivas son el complemento perfecto para una tipografía sencilla y limpia. Como las imágenes son tan bonitas, no es necesario exagerar con la tipografía. Basta con que sea limpia, clara y organizada.
- Otro factor que contribuye a que esto funcione es que hay mucho espacio. Con un fondo complicado, sería fácil acabar con un aspecto desordenado. Por eso es importante asegurarse de que hay mucho espacio entre los elementos, y dentro de los cuadros, etc. La utilización inteligente del espacio es también una excelente manera de hacer que un diseño luzca más sofisticado. Nada denota un aspecto "barato" como el desorden.
Por supuesto, hay muchas más cosas de las que podríamos hablar, como el color y la precedencia, pero creo que las principales consideraciones de diseño que deberías tener en cuenta son la tipografía y el fondo. Como declaración final, aquí hay una pequeña imagen que lo dice todo :-)
Ahora el HTML/CSS
Ahora, basta de estas cosas de Photoshop, ¡vamos a hacer algo de HTML/CSS! ¡Sigue la segunda parte de este tutorial donde construimos nuestro diseño en un sitio web, en NETTUTS: Tutoriales de desarrollo web!
By
