Cómo crear un header para tu blog
Aug 16, 2009 Photoshop, Tutoriales
No se me había ocurrido antes hacer un tutorial sobre ésto que, de seguro, a muchos puede llegar a interesarles. El header, la parte superior de cualquier blog, es casi tan importante, al menos para mi, que el contenido en sí, y generalmente mucha gente se olvida de darle relevancia a lo que primero ve el usuario cuando entra a tu blog. Desde cierto punto de vista no es tan difícil crear un isologo, o isotipo para colocar en el head, o al menos no imposible, aunque tienes que tener cierto conocimiento en el manejo de algunos programas gráficos y vectoriales, aunque no es ninguna obligación. Lo que voy a comentarles en éste post es cuál es la técnica que utilizo yo, cuales son los pasos que sigo cada ves que alguien me encarga diseñarle un header para su blog, así que si se dan un poco de maña, a lo mejor lo logran.
- Desde el punto de vista técnico, yo suelo utilizar solamente dos programas, si se trata de algo simple y básico, por ejemplo un texto solo. Utilizo Corel (vicio de mi escuela de Diseño Gráfico), y Photoshop para el acabado final. Veamos que podemos hacer en cada uno de los programas.
Tomemos como ejemplo de un header que me encargaron hoy, para un blog llamado Descargas Totales, (si quieren visitarlo al blog, encontrarán gran cantidad de programas gratis para descargar). El cliente me pidió algo bien simple, solo una tipografía fina, cuadrada, vistosa y nada más. Veamos entonces:
En Corel: Lo que suelo hacer aquí es elegir la tipografía con la que voy a escribir el nombre, cómo lo voy a ordenar y organizar, y cómo la voy a modificar, si es que la idea lo demanda. Primero lo primero: en una hoja vacía de Corel, escribimos el nombre del blog, preferentemente separado una palabra de la otra, para poder escalarlas o editarlas por separado si es que hace falta, y vamos probando distintas tipografías. Recordemos qué nos dijo el cliente, que quiere una fuente no tan redonda, algo fino, no tan tosco, etc.
No importa cuantas tipografías distintas pongas, la cosa es que cada una te inspire, siempre manteniendo en mente el pedido del cliente. El paso siguiente es ir viendo cada una de las fuentes, y en una hoja distinta ir haciendo pruebas distintas. Y aquí me detengo un rato para contarles algo que supe aprender en la escuela de diseño hace muchos años y que me sirvió muchisimo a la hora de diseñar, ténganlo en cuenta siempre:
Los diseños que aparecen después del número 30 en adelante, son los que realmente valen la pena.
¿Qué quiere decir ésto?, que el secreto del diseño gráfico, básicamente, es la prueba, la constante prueba, no quedarse con dos o tres solamente, sino con 20, 30, 40 pruebas distintas, recién allí se puede decir que has llegado a lo mejor a casi todos los resultados necesarios como para elegir algunos de tu mayor agrado y seguir trabajando sobre ellos.
Algo aparte, en ésta etapa, olvídense de las pruebas de color, primero elegimos la base, el modelo, la forma básica del o que queremos hacer, una ves elegido, recién allí haremos pruebas con colores. Mientras tanto, solo pruebas, hasta que se cansen.
El modelo que yo elegí para mostrarle a mi cliente es el siguiente:
Mi cliente quedó satisfecho, solo pidió el cambio de un par de letras que no le gustaban de la tipografía, y nada más.
Ahora si, lo exporto a JPG en alta calidad (300 DPI) y lo abro en Photoshop para darle una buena pinta.
- Ya en Photoshop, lo que suelo hacer es hacer el fondo transparente, para poder trabajar mucho más cómodo con los efectos que podría agregarle al diseño.
En realidad, podrían hacer todo ésta parte de Corel directamente en Photoshop, sino que a mi personalmente me resulta mucho más cómodo tener todas las tipografías en un mismo proyecto, ordenadas por hojas, distintas pruebas, etc. Llámenme necio, pero es que así me sale a mi.
Bien, sigamos. Vamos a probar los colores sobre el texto, para eso, pulsando la tecla Control, hacemos click sobre el layer donde se encuentra el texto, asi seleccionamos todo por el borde.
Yo personalmente elegí una prueba de un color violeta, y le voy a hacer un degradado entre un lila claro y un lila más oscuro. Así que primero elegimos los dos colores, y elegimos la herramienta degradado.
Hacemos una línea de arriba hacia abajo, o al revés, para ver cual efecto degradado queda mejor. De la misma manera puedes buscar otras combinaciones de colores, recuerda que la cosa es seguir con pruebas e intentos, mientras más hagas mejor y más fácil te será elegir el indicado.
Como un pequeño secreto (que no lo es tanto), de ves en cuando suelo utilizar un servicio online de Adobe que sirve para crear muy buenas combinaciones entre paletas de colores. El sitio se llama Kuler, investíguenlo un poco que de seguro les va a ser muy útil.
bien, una ves hecho esto, suelo agregarle esos benditos reflejos 2.0 que están por todos los sitios que uno vea hoy en día, porque a los clientes les encanta esos reflejos y porque hay que ponerlos, porque uno es 2.0, y sino se enojan 
.
Lo que hacemos es crear un layer nuevo encima del título, y allí crear un círculo estirado y rellenarlo de blanco de la siguiente manera:
Luego, volvemos a seleccionar el layer del texto, teniendo pulsado la tecla Control para seleccionar por los bordes, con esa selección, seleccionamos el layer del círculo blanco. Vamos arriba, en Photoshop al menú Selección/Invertir, y pulsamos la tecla Delete. De ésta manera borramos todo lo que está fuera de la selección, en el layer del círculo. El resultado es el siguiente:
Ahora lo único que nos falta hacer es cambiarle la opacidad al layer para que no sea totalmente blanco, sino que se vea el color por detrás. Prueba varios porcentajes de opacidad hasta que encuentres uno que te parezca. Luego, haz lo mismo con el texto de abajo.
Para crear un efecto más “figura y fondo”, le agregué un layer blanco detras para hacer de soporte, y luego agregé dos modificadores al layer del texto: Sombra paralela y Trazo.
Y por último, un pequeño detalle, vamos a darle un pequeño efecto de velocidad a la cuestión. Seleccionamos todos los layer menos el fondo blanco y pulsamos Control+T (Transformar). Mientras pulsamos la tecla Control, movemos el punto de control que está arriba al medio. El resultado es el siguiente:
Fin. Solo queda entonces ubicarlo en tu head por medio del código o lo que sea. Como verás no fue gran cosa ni tampoco hay que ser un completo maestro tanto el Corel o en Photoshop para crear un header atractivo, simple, moderno, que se vea lindo y adorne tu blog. Espero les haya sido útil, y cualquier duda, me la dejan en los comentarios.
