Esta es la primera parte del tutorial en el cual os enseñaré como realizar vuestras propias webs, vereis que con un poco de esfuerzo y maña conseguireis hacer webs chulas y de manera rápida. Para realizar este tutorial y los posteriores, necesitaremos lo siguiente:
- Adobe Photoshop (yo actualmente utilizado Photoshop C2)
- Macromedia Dreamweaver (yo he utilizado el MX 2004)
Nota aclaratoria: En ninguno de los tutoriales voy a hablar de Frontpage ni voy a utilizarlo para realizar los tutoriales. Considero que Frontpage es una herramienta muy pobre y limitada. No perdais el tiempo con el, Dreamweaver es algo mas complejo pero permite mayor utilización de formatos, muchas mas opciones y resultados mas profesionales.
Lo primero de todo, vamos a utilizar esta imagen para realizar el tutorial, una web sencilla, sin muchas complicaciones, que nos vendrá bien para ir desentrañando las características del diseño web.
1ºPaso
Abrimos la imagen con el Photoshop. A continuación, vamos a la barra de herramientas arriba y vamos al apartado de
View/Ver y hacemos click donde pone
New Guide / Nueva Guia.
A continuación nos saldrá un cuadro de mensaje:
En un primer momento la posición nos importa poco, porque luego podremos mover la guia con la fecha (la herramienta que está a la derecha de la selección rectangular, circular,etc.) Una vez hemos colocado nuestra guia horizontal debería aparecer una linea horizontal de color azul celeste. Ok ¿Para que sirven las guias? Muy sencillo. Son lineas que nos servirá para delimitar varias regiones en la imagen, para que a la hora de recortar los segmentos sea mas sencillo y nos quede mucho mas limpio. Ahora que sabemos como hacer guias, vamos haciendo guias horizontales y verticales colocandolas de tal manera que nos quede algo similar a esto:
Tranquilos, luego las guias no se verán en el diseño original
. ¿Os han quedado así las guias? Es necesario que queden de tal manera que deliminten las regiones, especialmente el recuadro rojo, el pie de página de grafitti y las lineas grises claras. Si no nos ha quedado similar volvemos a mover las lineas hasta que queden de manera parecida :). Si aun asi teneis problemas aqui os dejo la imagen con las guias.
Perfecto, ahora que tenemos nuestra imagen delimitada con guias, con la herramienta de selección rectangulas, seleccionamos la región rectangular del logo:
En este caso, la región que he marcado en esta imagen de color naranja. Una vez la tenemos seleccionada la copiamos (Control+C) y abrimos un nuevo documento. Si lo hemos copiado bien, el Photoshop en la ventana de nuevo documento en las dimensiones nos debería salir 580x225 pixeles. Dentro de este nuevo documento, pegamos (Control+V) y tendremos nuestro cabezal. OJO: Os recomiendo que lo guardeis como png, para la web es mejor formato que el jpeg, tampoco merece la pena guardarlo como gif porque no estamos usando transparencias.
Chulo, eh
?
A continuación hacemos lo mismo con la zona azul, amarilla y morada. Deberiamos obtener las siguientes imagenes, el cabezal, el separador de la linea gris, el cuadro rojo, y el pie de página donde está el grafitti.
Ya tenemos las imagenes necesarias para armar nuestra web. Lo único que nos falta es lo siguiente, una imágen para el fondo, en este caso creamos un nuevo documento (de 1x1 pixels nos vale) y rellenamos el pixel con el color gris de la imagen (en este el color que hemos elegido ha sido el #4b4944). Pues ya hemos acabado el primer paso, hemos aprendido a usar las guias del Photoshop y hemos recortado la imagen en distintos cachos. Podriamos haberlo hecho a ojo con la herramienta de selección pero creo que es un pelín chapucero, al fin de cuenta queremos hacer las cosas bien, verdad
?
2ºPaso
Nota previa: Antes de abrir el DreamWeaver, vamos a guardar las imagenes que hemos recortado en una carpeta. Por ejemplo en Mis Documentos creamos una carpeta que se llame tutorial, y dentro de la misma una que se llame
images dentro de esa carpeta guardaremos todas nuestras imagenes (OJO: esta carpeta images es fundamental porque a partir de ahora en el código haremos alusión a ella).
Con el Dreamweaver abierto, vamos a Archivo-> Nuevo...y en la ventana que nos aparecerá seleccionamos Elemento Básico HTML. A continuación abajo de la pantalla se nos abrirá la página que hemos creado. Como observaremos, hay tres pestañas, una que pone Código otra que pone Divido y otra que pone Diseño. Vamos a hacer click sobre la que pone Diseño.
Ahora, vamos arriba y hacemos click donde pone
Insertar y luego en Tabla:
A continuación nos saldrá una ventana, que rellenaremos con estos datos:
OJO: Los tres ceros que he puesto son fundamentales, ponerlos, porque si no pondrá como defecto 1 y luego será un engorro a la hora de diseñar.
Ya tenemos nuestra primera tabla, no ha sido complicado verdad? :D. Muy bien, si nos fijamos abajo, saldrá una ventana que pone Propiedades, y un montón de recuadros para escribir y demás, si? Si no nos saliera pulsamos Control+F3 para que aparezca :).
Cambiamos los valores con los siguientes:
De este modo tendremos una tabla con 6 filas y 800 de altura.
Observamos que nos sadrá un cuadro grande el lineas discontinuas con diversos recuadros, verdad? Hacemos click sobre el primero empezando por arriba, y en propiedades, (abajo) donde pone
Fnd a la derecha del recuadro para escribir hay un icono de una carpeta, hacemos click sobre el y seleccionamos el archivo del cabezal que hemos guardado antes (el que pone 182 Crew). WOW, si lo hemos hecho bien nos aparecerá en el Dreamweaver...pero algo raro verdad? Abajo, donde hemos cambiado el fondo, vamos a donde pone
Al y escribimos 225. Ahora si que se ve bien nuestro cabezal, verdad?
Ahora vamos al cuadrado de abajo, vamos a
Fnd, hacemos click en la carpeta (como hemos hecho antes y seleccionamos la imagen de la linea gris separadora. Ponemos 22 en
Al para que se ajuste y se vea correctamente.
En el tercer recuadro repetimos esto último, pero con la imagen del recuadro rojo. Luego en
Al ponemos 192.
En el cuarto recuadro, vamos a poner de imagen de fondo, esa pequeña imagen que os he dicho que crearais que nos serviría como fondo. En este recuadro no daremos ningun valor a
Al de momento.
En el quinto recuadro repetimos esto:
Vamos a
Fnd, hacemos click en la carpeta (como hemos hecho antes y seleccionamos la imagen de la linea gris separadora. Ponemos 22 en
Al para que se ajuste y se vea correctamente.
Por último, en el sexto recuadro, el de abajo del todo. Hacemos click en la carpeta donde
Fnd y seleccionamos el archivo del pie de página, el del grafitti en gris claro. Luego en
Al ponemos 88.
Bien, pues ya tenemos las imagenes montadas en tablas y en un documento HTML. No ha sido para tanto eh? :D
A continuación guardamos el archivo donde queramos, pero si por ejemplo antes hemos creado la carpeta tutorial y dentro de la misma una llamada images, sería bueno que guardaramos el archivo en la carpeta tutorial. Una vez lo tenemos guardado podemos probar a abrirlo en el navegador para ver que tal se vé. Aun le quedan unos arreglitos a la web.
Si hemos hecho todo bien, en la pestaña de código deberiamos tener algo similar a lo siguiente:
Código PHP:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>182 Crew | Tu sitio sobre grafitti</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<table width="576" height="800" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="225" background="image/header.png"> </td>
</tr>
<tr>
<td height="22" background="image/separador.png"> </td>
</tr>
<tr>
<td height="192" background="image/cuadro.png"><table width="576" height="192" border="0" cellpadding="0" cellspacing="0">
</table></td>
</tr>
<tr>
<td background="image/bg.png" class="Estilo1"></td>
</tr>
<tr>
<td height="22" background="image/separador.png"> </td>
</tr>
<tr>
<td height="88" background="image/footer.png"> </td>
</tr>
</table>
</body>
</html>
Quiza no os haya quedado exactamente asi porque habreis puesto otros nombres a los archivos. Para finalizar, volvemos a la pestaña de Diseño, hacemos click derecho sobre el fondo blanco y vamos a donde pone
Propiedades de la página. A continuación se nos abrirá una ventana, le damos al botón de Examinar, a la derecha de donde pone imagen de Fondo. Y seleccionamos el archivo que hemos usado antes para el fondo gris. Le damos a Aceptar, y el color del fondo pasará a ser gris. Ya casi lo tenemos!
Para finalizar, en el rectangulo gris de la tabla que hemos creado antes (el cuarto empezando desde arriba) Añadimos un pequeño texto que nos servirá como ejemplo, luego podemos cambiarle el color a blanco, para que quede mas chulo.
Pues hasta aqui nuestro tutorial, estaría bien que trastearais con el Dreamweaver para que cambiarais algunas cosas en la web, etc. Yo os subo mi versión para que veais como me ha quedado, no es gran cosa pero a lo mejor os sirve como referencia :).
En los archivos adjuntos a este mensaje os dejo mi versión de la web del tutorial y el psd con las guias puestas por si teneis algun problema a la hora de recortar los cachos.
Espero que os haya sido útil el tutorial, me ha llevado unas cuantas horas hacerlo. Ya se que el diseño no es gran cosa, pero creo que para hacer una web básica es suficiente, no?
Un saludo.
20/06/2006, 14:56
![Avatar de Dapo[2pac]](http://www.pspain.com/foro/avatars/dapo-2pac-.gif?dateline=1145101285)
Mode Lineal
Temas Similares
Twitter
Facebook
