5.10.09

224/365 » Los últimos detalles

¿Te gustaría leer este tutorial desde el inicio?

Teniendo todo casi listo, estoy seguro que no hay adónde perderse, por lo que simplemente voy a hablar de cómo termine el diseño de la plantilla:

Tipografía
Para el diseño de un sitio a mí me gusta utilizar tipografía uniforme. Al momento de decidirse por un tipo, hay que tomar en cuenta que si una computadora de algún lector no tiene instalado nuestro tipo de letra favorito, él no podrá ver el sitio como nosotros querríamos. Por esto, los diseñadores escogen fonts comunes y fáciles de leer.

body {background-color:#030303; font-family:Lucida Grande, Verdana, sans-serif; }

Fecha
Para crear el efecto del listón azul, primero ubiqué el div para la fecha. Para no perderse a la hora de buscar el div para modificar, hay dos modos de hacerlo: el primero es como comenté ayer, con la barra de Web Developer. Otra es hurgando el código fuente del sitio publicado.

.date-header {
color:white;
height:11px;
width:460px;
font-size:11px; 
clear:both; 
padding-left:10px;
background-color:#4c9acf;
padding-top:20px;
float:right;
margin-right:15px;
margin-top:10px;
text-align:right;
text-transform:uppercase;
}

Separación
Si notan, la plantilla tiene el efecto de separar los posts entre sí. Esto lo hago simplemente con un borde inferior del mismo color del body del sitio. Así, crea la ilusión de continuidad del fondo.

.uncustomized-post-template {border-bottom:31px solid #030303;}

Banner
Al ver el banner en medio del sitio, pueden amarlo, u odiarlo. En mi caso, yo siento los dos. Y es exactamente por eso que lo he dejado ahí, porque es molesto y llamativo, como la buena publicidad. Para crearlo, creé una paleta de colores basada en la imagen que quería para mi blog, utilicé una imagen que contuviera esos colores, y después de un par de filtros y modificaciones en Photoshop, obtuve mi banner. Nada muy complicado una vez se tiene una idea de qué hacer.

No hay comentarios :