Empezamos por fin lo que es el diseño de una pagina web.

Aunque aun no estamos diseñando un Web, si no que vamos a ver como haríamos para crear un diseño, con imagenes que nos sirvan de decoración.

Lo primero que hemos de hacer es en un programa de diseño gráfico, como puede ser Fireworks, Photoshop o, en nuestro caso, evidentemente el Paint Shop Pro, crear una imagen tal como queremos que sea.

Pero iremos por partes vale?

Y lo primero que vamos a hacer es crear una carpeta nueva en el Sitio del Dream podemos llamarla webimagenes, yo suelo guardarlas en la misma que ya tenemos de imágenes. Pero ahora es mejor para no confundirnos, o bueno, como queráis vale?

Ahora ya en el Psp, creamos una imagen nueva, el tamaño, entre 400/400 o 600/600 px, esto dependerá de como queramos de grandes los cornes o esquinas, otra capa y creamos los bordes :

La guardamos en formato psp por si ocurriera algo vale? midiseño.psp, por ejemplo Una vez que ya tenemos el diseño, en el mismo Psp vamos a usar una herramienta que quizás no conocéis que existe,  Las Guías:

*Nota: Las guías son líneas horizontales o verticales que podemos arrastrar sobre la imagen y usarlas para situar elementos o alinear pinceladas. Podemos situarlas en los lugares que deseemos.

*Nota: Ver de activar también las reglas, o no podréis usar las Guías

Ir a Ver/Guías:

Y las activamos, un poco mas abajo, activamos Guías Magnéticas:

Ahora aumentaremos la imagen hasta ver bien los bordes y con el cursor del ratón, nos situaremos justo encima de la regla, podemos ver que se convertirá en una +, hacemos clic entonces (con el botón primario del ratón) y estiraremos hacia la imagen, sin soltar el botón del ratón :

Veis que en la Regla, justo al final de la Guía ( Línea de color azul ) hay como un pequeño relieve? para moverla, una vez que la hayamos sacado, situamos el cursor sobre ella, hacemos clic y sin soltar el botón, la llevaremos hacia un lado u otro.

Tengo la imagen muy aumentada, para poder ver perfectamente el lugar exacto donde he de colocarla, justo donde acaba el arco de la imagen, donde ya los píxeles, son del todo opacos y en color rojo:

Ahora sacaremos la Guía horizontal, de igual forma pero desde arriba hacia abajo:

Y la colocaremos en el otro extremo del arco, de la misma forma, donde se acaban los pixeles difuminados:

Con la herramienta de Cortar, cortamos todo el cuadro que forman las Guías:

Como activamos la opción de Guías magnéticas, no resultara nada difícil el que la herramienta Corte, se adapte perfectamente a las Guías, lo hará prácticamente por si misma, pero hemos de comprobar que esta justo en ellas:

Aplicamos la herramienta Cortar y guardamos en formato gif. el nombre sera, esquina1.gif,por ejemplo, o esqizquierda.gif Esto va según vosotros mismos, vale? Solo hemos de tener en cuenta que es la esquina que habrá de ir en la izquierda, o la primera… como mas os guste

Yo normalmente la llamo img1, simplemente, ya que sigo una secuencia, la próxima sera la img2 y sera el lateral superior:

Saco una nueva Guía, Vertical y la llevo hacia la parte derecha, la sitúo de nuevo allá donde los pixeles ya no son difuminados:

la Horizontal, debemos poder usar la que ya habíamos creado antes. Es decir, hemos de usar esta misma ya que ha de tener la misma altura que la primera.

Así pues cortamos este ángulo y lo guardamos con el nombre img3 Deshacer y sacamos una Nueva Guía Horizontal, para crear la imagen que sera el lateral derecha y la situamos mas o menos así:

La recortamos así:

y guardamos como img4 Vamos ahora a marcar con las Guías la esquina derecha inferior:

la recortamos:

en la captura podéis ir viendo como están todas las reglas que hemos puesto. Guardamos la esquina derecha como img5

Ahora hemos de cortar la img6, que sera el lateral inferior:

Deshacer, siempre después de cortar una parte La esquina izquierda, que ya estará marcada con las guías, como vemos en la captura de mas arriba :

guardamos como img7 Deshacer. Y por ultimo, el lateral izquierdo:

la imagen podemos guardarla así mismo, con las Guías, por si nos hiciera falta en cualquier otro momento, siempre las conservara en el formato .psp. Ahora ya podemos cerrar el Psp y vamos al Dream.

Abrimos un documento nuevo, y vinculamos la hoja de estilos que teníamos de los tutoriales anteriores. Insertar una Tabla nueva con estas opciones:

Alinear al centro desde el Inspector de Propiedades, nos situamos en la primera celda:

e insertamos la primera imagen, es decir, la img1:

en el Inspector de Propiedades, comprobamos la medida exacta de ancho y la misma se la asignamos a esta celda, pero alerta, desde el Inspector de propiedades. Nunca estirando de la celda vale?

Este es el aspecto que tendrá, después de haber insertado las cuatro imágenes que forman las esquinas:

A cada celda donde están insertadas, habremos puesto la misma medida de ancho que la imagen.

Vamos a insertar ahora las img2, img4, img6 e img8, que forman los laterales, pero lo haremos no como imágenes, si no como fondos de celdas.

De este modo las cuatro imágenes que rellenaran los laterales, ahora se vera así la tabla:

Si ahora nos situamos en la celda del centro, e insertamos varios Enter, la celda se estirara a lo alto, podemos también comprobar a cambiar el % de ancho, debe ‘estirarse o encogerse sin problemas y no perder el diseño

Ahh y ni que deciros que estas imágenes, debería tener sus propios estilos ya. Sobretodo las que hemos insertado como fondos, las otras, las que pusimos como imágenes no importa para pasar el test de las 3w. Así que podemos dejarlas tal como están.

Ver aquí el ejemplo

Y bueno, hacerlo con calma si ?, despacito no es tan difícil como puede parecer al pronto y sin embargo, fijaos en lo que se podrá hacer siguiendo estos pasos. Estoy segura que veremos maravillas