Probablemente esta página tenga mucha más actividad en fechas próximas, por lo que no está de más que la adecentemos un poco. Como parte del rediseño gráfico, lo primero que vamos a hacer es diseñar un fondo/cabecera para la página, y para ello vamos a seguir el tutorial de Chris Spooner para crear tu propio Portfolio online (aunque, en este caso, explicado para torpes).
En Photoshop, al crear un nuevo archivo, se nos ofrecen una serie de opciones predefinidas, entre las que están las de Web, donde escogeremos un tamaño de 1600 x 1200 para trabajar.
Trabajando con este tipo de resoluciones debemos recordar que hay quienes se conectarán desde equipos con una resolución menor. Dado que voy a mantener el diseño de página centrado, la solución más lógica es “restringir” el diseño a un máximo de 1024 pixeles, y así permitiremos a cualquier usuario resoluciones menores ver la página completa en su navegador. No nos preocuparemos de resoluciones menores de 1024.
Para realizar esta tarea colocaremos unas guías. En Preferences/Units & Rulers comprobaremos que tenemos seleccionados Pixels como unidad de medida. Yendo al menú View/New Guide, colocaremos nuevas guías verticales en las posiciones que nos interesan (sabiendo que tenemos 1600 pixeles de ancho y queremos delimitar 1024 de ellos centrados, marcaremos las posiciones 288, 800 y 1312).
Como fondo para la cabecera, vamos a utilizar el mismo ejemplo de Chris Spooner, color beige más una textura de cemento, que irá bastante bien con el resto del diseño que tengo pensado para la página. En este post de Bittbox hay unas cuantas texturas de suelos y paredes; nosotros vamos a utilizar la sexta.
Como color beige utilizamos B9ADA5 (es importante que lo recordemos para poder utilizarlo más adelante en las hojas de estilo de la página). Añadimos el ruido mediante el filtro Filter/Noise/Add Noise, del 3% y marcando la opción de que sea monocromático. En una nueva capa añadimos una sección de la imagen de cemento que nos interesa.
Con la herramienta Borrador, seleccionando un pincel lo más difuso posible, borramos los bordes de la nueva capa. Para dejar el límite lo más progresivo que podamos, lo mejor será hacer un primer borrado con un pincel más denso y un segundo más suave. Por último, modificamos el tipo de superposición de capas. Aquí yo discrepo del tutorial original, que recomienda una superposición Overlay del 40%, mientras que yo he utilizado una Luminosity al 100%.
Quedando un resultado similar al siguiente:
A partir de aquí abandonamos el tutorial original y seguimos por nuestra cuenta. Para la cabecera utilizaremos la fuente FFF Tusj, de libre distribución, creada por Magnus Cederholm y disponible en dafont.com, con un color oscuro de tonos marrones (como 271F19). Para añadir más detalles incluimos también un subtítulo para la web e incluimos una imagen.
El sello lo he creado siguiendo este otro excelente tutorial de Visual Blast, que se hace en apenas media docena de pasos. Incluir una foto de uno mismo en tu propia página web siempre indica un ego tremendamente desmesurado, y yo no iba a ser menos.
Y con esto seguimos avanzando en el rediseño de la web. Paso a paso.
