crear web en psd

El primer paso será convertir nuestro diseño en archivos para web y el segundo, modificar esos archivos para poder crear en interior del Web-Site.

Antes de nada, tenemos que crear un diseño de cómo será nuestra página, para ello podemos usar cualquier programa, para posteriormente abrirlo con Photoshop, nosotros hemos creado el siguiente diseño de ejemplo.

Como podéis observar, este diseño se compone de dos partes principales, el recuadro de la izquierda, (donde irá la botonera), y el recuadro central, (donde irá la información principal, que variará según la sección donde nos encontremos.

El siguiente paso, será convertir en sectores la página, por lo cual seleccionamos la Herramienta sector, (nuestro tutorial está realizado con Photoshop CS5, que tiene la herramienta sector en el mismo botón que la de recortar, pero en Photoshops anteriores, esta herramienta sólo la tiene Image Ready, que es un programa complementario de Adobe).

En caso de tener un Photoshop con Image Ready, abrimos nuestro diseño con Photoshop y pinchamos en el botón que os mostramos en la imagen de abajo, para pasarlo a Image Ready, (también podemos abrir el diseño directamente con este programa).

Una vez seleccionada la herramienta, creamos los sectores, (nosotros en nuestro ejemplo sólo hemos creado dos, uno para la botonera y otro para la pantalla principal).

Cuando tengamos los sectores creados, simplemente los tenemos que Guardar para Web, (Menú/Archivo/Guardar para Web y Dispositivos). Puede que en otros programas más antiguos de Photoshop o Image Ready venga la acción denominada como Guardar Optimizada Como.

Se abrirá una nueva ventana donde podemos optimizar en peso de nuestras imágenes o el tipo de archivo, (jpg, gif, etc...), seleccionamos lo que deseemos y aceptamos.

Ahora viene la parte más importante, cuando vamos a guardar los archivos en nuestro disco duro, debemos seleccionar la opción HTML e Imágenes.

Se guardarán dos archivos, uno HTML y otro, una carpeta, con todas las imágenes optimizadas para web.

>

Ya tendríamos nuestro diseño listo en para colgarlo en un FTP. Sólo tendríamos que modificarlo a nuestro antojo.

Aunque no nos vamos a extender mucho en como realizar una página web, (para ello podéis ver miles de artículos enDesarrollo Web), si que queremos explicar cómo modificar este diseño, para ello necesitaremos un programa de maquetación web como Frontpage, que viene en el paquete Office.

Con el Frontpage abrimos el archivo HTML que hemos creado con Photoshop, (Menú/Archivo/Abrir).

Lo primero que haremos será centrar nuestra página, señalamos la tabla y le damos al botón de centrar, o en el código añadimos la etiqueta "center" justo antes de la tabla.

A continuación vamos a cambiar el fondo de nuestra página, pinchamos con el botón derecho sobre el diseño de nuestra página y seleccionamos la opción Propiedades de página, se abrirá una nueva ventana, donde podremos cambiar el color del fondo dentro de la pestaña Formato

Ahora tenemos que borrar las imágenes que tenemos para el recuadro de la botonera y el central, pero antes vamos insertar esas imágenes como fondo de celda, (esto lo hacemos por dos razones, para que no se nos descuadren todas las celdas y sobre todo, para poder escribir o añadir objetos a dicha celda).

Por lo que pinchamos con el botón derecho del ratón sobre una de ellas, (por ejemplo la de la botonera), y seleccionamos la opción de Propiedades de Celda.

En Fondo marcamos la casilla de Utilizar imagen de fondo y le damos al botón de Examinar, para seleccionar la misma imagen que posteriormente borraremos.

Volvemos a situarnos sobre la imagen, y le damos a la tecla de borrar, para eliminar la imagen, a continuación volvemos a dar click derecho del ratón sobre la celda y seleccionamos propiedades de la celda.

Seguidamente aplicamos Superior en la Alineación Vertical para que todo lo que añadamos se justifique bien, (ya sean gráficos, texto, etc...), y le damos a aceptar.

A continuación vamos a añadir nuestros botones, (por ejemplo, como enlaces de texto), escribimos lo que queramos, (ejemplo "Botón 1"), señalamos el texto y pinchamos en el botón de insertar hipervínculo.

Se habrirá una nueva ventana, donde podremos escribir la url donde queramos que vaya cuando se pinche en el botón, aquí también seleccionaremos el marco de destino, en nuestro caso hemos puesto un _self para que vaya a la misma página.

Hacemos la misma operación, con el cuadro principal, (insertar como imagen de fondo, borrar la imagen, ajustar la alineación vertical a la parte superior), y una vez realizado, ya podemos escribir o añadir lo que queramos.

El resultado sería algo así;