Hoy llevaremos a la pantalla ese boceto, para poder generar la plantilla de nuestro sitio web. Fotos, banners, íconos, tipografía y muchos otros elementos deberán tener un lugar específico. ¡Comencemos!
Varios tipos de recursos
En nuestro sitio usaremos varios tipos de elementos. Dejaré lo complicado para más adelante, dado que todavía no dominamos Photoshop a la perfección ;).
Un sitio sencillo pero profesional podría incluir:
- Un Banner central, con una imagen y el logo o nombre del sitio.
- Una Barra de navegación con sus respectivos botones.
- Un espacio para el contenido (Texto fotos, etc).
- Un footer o pie con una dirección de mail de contacto.
Por supuesto que las opciones son infinitas, los elementos de esta lista son sólo un ejemplo, que tomaremos como base para nuestra práctica de hoy.
La idea es que una vez que puedan lograr un sitio como éste, se pongan a realizar aquél que bocetaron la práctica anterior.
Comenzando la maquetación del sitio
Me viene de película la aclaración que hace Thor al final de su última clase de Dreamweaver, dado que es muy importante saber dentro de qué marco trabajaremos, es decir, el formato de nuestro sitio web.
Sólo cómo ejemplo, usaremos un lienzo de 950 x 650 píxeles. Vamos a Archivo->Nuevo (o hacemos Ctrl+N) e indicamos las medidas correctas.
En la casilla “Resolución” ponemos 72 píxeles/pulgada (recuerden que esa resolución se usa para pantallas, monitores y en fotografía digital como un estándar).
En “Modo de color” seleccionamos RGB de 8 bits (¿se acuerdan? el RGB se usa para la web).
Las demás opciones las dejo a su gusto.
Una vez que tenemos el lienzo preparado (donde crearemos nuestro sitio web) sólo nos resta dividir los sectores donde irán el banner, la barra de navegación, etc. Para esto usaremos las Guías.
El uso de Guías
Las guías son líneas verticales u horizontales que podemos situar sobre la imagen para tener una ayuda visual al alinear objetos. Hay que destacar que no saldrán al imprimir un documento o al guardar la imagen salvo que indiquemos lo contrario, por lo que podemos usarlas sin miedo.
Para usarlas, sólo tenemos que hacer clic sobre una de las reglas (para verlas, vamos a Vista->Reglas) y arrastrar el cursor hacia el centro del documento.
Vemos que entonces aparece una línea que podemos mover y desplazar a gusto si tenemos seleccionada la herramienta mover [V].
De esta forma vamos situando una serie de guías como si fueran líneas sobre una hoja de papel. La idea es que delimiten dónde irá cada elemento del sitio.
Esta imagen muestra el lienzo con las guías ya dispuestas correctamente.
Aquí he resaltado los sectores que pretenden delimitar (no es que tengan que pintar todo de colores, jejeje). El color rojo representa el lugar que ocupará el Banner, el verde la botonera, el azul el contenido y el rosa el mail de contacto.
Podemos ver entonces cómo quedará el archivo una vez que terminemos el diseño, situemos la tipografía, el logo, la botonera, etc. ¿Cómo llegamos a esto? Tranquilos, lo veremos de a poco.
¿Te gusta este artículo? Compártelo con tus amigos!
Publicar un comentario