Diseño Web con Imágenes II

Vamos a poner Imágenes de verdad ;)

Tenia por ahí, este diseño de la primera pagina que hice, entonces lo use como una imagen y los enlaces, los puse como mapa de Imágenes, no por nada, si no porque fue como pude hacerlo. En el FrontPage y por intuición.

Nos voy a ahorrar los comentarios de como pude hacerlo… uuuufff!! Ahora, fue mucho mas fácil y esta vez, aunque también usare 8 imagenes, tan solo recorte dos!! La imagen, en formato psp es esta:

1

Es una imagen que hice con una máscara, de borde, se aplica tal como ya sabemos, pero lo borre el fondo y seleccionando la mascara, aplique sombra. Cortamos la esquina izq y la guardamos como img1:

2

En Imagen/Mirror y la guardamos como img3 ( esquina decha.) Imagen/Flip y guardamos como img5 ( esquina dercha inferior) Imagen/Mirror y guardamos como img7 ( esquina izq, inferior.

Deshacer todo hasta tener de nuevo la imagen completa.

*Nota: Yo suelo guardar una imagen con otro nombre, una vez he colocado las guías, de este modo, si se pierde o estropeo la que estoy trabajando, siempre puedo recuperala.

Una vez que tenemos de nuevo la imagen completa, corto la segunda imagen:

3

lo que hemos de tener en cuenta es que los extremos del dibujo, que estamos usando coincidan, así al usar esta imagen como un fondo, no se verán las uniones de la imagen. Lo vemos en la siguiente captura que coloque para comprobarlo:

4

Una vez que estemos seguros que coinciden, cortamos la imagen y guardamos como img2 Imagen/Flip y guardamos como img6 Imagen/Rotar/90º izquierda:

5

y guardamos como img4 Imagen/Espejo y guardar como img8

Abrimos el Dreamweaver, nuevo documento, vincular hoja de estilos e insertamos una tabla con 3 filas y 3 columnas, Bordes, Relleno y margen todo a 0.

Ver aquí los ejemplos

Responder