Este es el primer post que hago en este blog sobre informática, ya que es personal.
Pero quizás más adelante no me acuerde como hice este diseño, por eso ahora que todavía recuerdo bien como lo hice, voy a hacer un tutorial paso a paso.

1) A diseñar!

Lápiz y papel

Lo primero que hice fue agarrar mi cuadernillo, un lápiz y una goma. Armé unos cuantos (cuatro o cinco) bocetos. Después los comparé, elegí lo que más me gustaba de cada uno y armé uno nuevo.

Hasta ahora tenemos los ingredientes:

Y luego, el boceto:

Importante!: El boceto se debe hacer tantas veces como sea necesario hasta alcanzar el diseño deseado.
Ayuda: Si está todo bien, excepto por algún detalle, recuerden que después pasa por Photoshop el boceto .

Photoshop

Una vez hecho el boceto en papel y lápiz, tenemos que digitalizarlo. Se puede escanear la imagen y retocarla en photoshop, o hacerlo desde cero basandonos en el boceto.

Yo lo volví a hacer en photoshop.

No hay nada extraño en este paso. Simplemente jugar con photoshop.

2) A programar!

Una vez que tengamos las imágenes que queramos, “hay que ponerle la piel al esqueleto“.

En wordpress es bastante sencillo hacer esto.

• Abrimos los archivos del theme Kubrick, en dreamweaver.
• Creamos archivos nuevos.

Viendo las funciones de wordpress, vemos que nos va a ahorrar mucho trabajo las funciones esas. Yo recomiendo usar la extensión  Wp-builder para dreamweaver.

Encabezado

La zona de encabezado fue lo que más tiempo me llevó, porque es una imagen entera, y tuve que montar los links por encima.

Tenemos dos formas de hacer el encabezado. La forma fácil es con map, la segunda (más compleja) con CSS.

Mapeando

Si lo hacemos con map, simplemente tenemos que poner la imagen en dreamweaver y utilizar la herramienta de mapeo, como se muestra en la siguiente imagen:

Click para ampliar.

Esto es más sencillo de lo que parece.
Pueden ver que en la imagen hice algunos recuadros; al rectángulo, link y alt. Paso a explicarlos.

Rectángulo, es la forma que vamos a utilizar para darle ubicación a la zona de linkeo. Seleccionamos esta herramienta y simplemente seleccionamos una zona.

Link, en este campo tenemos que poner el destino del link. En este caso, yo como linkeo la zona de autor, linkeo a la página de autor.

Alt, aquí ponemos el texto alternativo. Es opcional. Sirve para que si no se carga la imagen se muestre ese texto.

Css

Con css es más dificil, por lo menos para mi. Pero queda más prolijo.

Por suerte antes de que me explote la cabeza, encontré un excelente tutorial del cual me basé para realizar el cambio de map a css. (yo antes lo tenía con map, pero ahora lo pasé a css).

Lo primero que hice, fue abrir la imagen (encabezado) en photoshop, y usar la herramienta slice para hacer algo similar al mapeo:

 

Click para ampliar

Esto es para saber los puntos de las coordenadas.

Ahora tocamos el css, el div encabezado sería algo así:

#cabecera {
background-image:url(images/encabezado.png);
height: 483px;
width: 1000px;
}

Y el menú, es decir, que se linkee cada zona con su destino:

#menu a {
position: absolute;
height: 38px;
width: 100px;
top: 31px;
text-decoration: none;
}

#menu a i { visibility: hidden; }

a#blog, a#autor, a#contacto, a#multimedia { top: 294px; }
a#blog { left: 35px; }
a#autor { left: 197px; width:150px; }
a#contacto { left: 405px; width:210px; }
a#multimedia { left: 690px; width: 230px; }
a#links { left: 660px; top: 164px; width: 124px; height: 52px; }
a#love { left: 66px; top: 164px; width: 174px; height: 115px; }
a#cartas { left: 867px; top: 164px; width: 133px; height: 123px; }
a#muerte { left: 293px; top: 164px; width: 327px; height: 126px; }

Hecho esto, delimitar las zonas, nos toca linkear.

Vamos al archivo header.php y usamos el siguiente código:

<div id=”cabecera”>
<div id=”menu”>
<a href=”http://www.hiper-juanpa.com.ar/index.php” id=”blog” title=”Lo &uacute;ltimo que escrib&iacute;”><i>Blog</i></a>
<a href=”http://www.hiper-juanpa.com.ar/autor” id=”autor” title=”Un poco de mi”><i>Autor</i></a>
<a href=”http://www.hiper-juanpa.com.ar/contacto” id=”contacto” title=”Contactame!”><i>Contacto</i></a>
<a href=”http://www.hiper-juanpa.com.ar/multimedia” id=”multimedia” title=”Multimedia”><i>Multimedia</i></a>
<a href=”http://www.hiper-juanpa.com.ar/love” id=”love” title=”El amor es el jugo de la vida”><i>Love</i></a>
<a href=”http://www.hiper-juanpa.com.ar/links” id=”links” title=”Sitios interesantes…”><i>Links</i></a>
<a id=”muerte” title=”Este era mi conejito de peluche. Se llamaba muerte s&uacute;bita y se muri&oacute; del nombre :(”><i>Muerte</i></a>
<a id=”cartas” title=”Me encanta jugar a las cartas”><i>Cartas</i></a>
</div>
</div>

Notese que uso <i> en los links, pero en el CSS los hacemos invisibles.

Y bueno, eso es lo que hice para tener este diseño.

Archivado en: el resto por Juanpa!