Crear una pagina web con Photoshop

Crear una web con potoshop es realmente sencillo , ademas que las paginas que generes seran mas atractivas a la vista que otras hechas con dreamweaver o con otro editor similar.

Esta es la pagina web con la que trabajaremos, en este tutorial no explicare el diseño de una pagina web, sino, solo la maquetacion. Manos a la obra.

Abrimos photoshop y cargamos nuestro archivo, lo primero que haremos sera remarcar las regiones en la que dividiremos nuestra pagina (Cabecera, cuerpo, pie de pagina, menu, sectores donde escribir y cosas asi...), para ello utilizaremos las "lineas de guia", para crear una de estas solo tienes que situarte encima de la regla y con clic izq. sostenido arrastras hasta tu documento.

Con esta herramienta dividimos nuestro documento y tenemos que tener algo mas o menos asi. recuerda que este paso no es obligatorio, pero es una ayuda para saber donde colocaremos cada cosa

 Una ves tenemos todas las guias en su sitio, procedemos a dividir nuestra web en sectores. con la herramienta ""Seleccionar Sector"

El procedimiento es sencillo, pero mejor explicado con una imagen.

Ya ve que facil es, seguimos adelante, dividimos nuestra web en sectores, los sectores dependen de lo que usted decida poner en su web, eso queda a su criterio, en mi caso, yo obtuve algo asi.

Para poder trabajar mas facilmente en HTML, conviene poner nombres a algunas partes importantes de la pagina, para hacer eso con la herramienta "sector modificar" activada, hacemos doble clic en el sector en el cual queremos poner un nombre. Como nota aparte, conviene trabajar solo con letras minusculas, eso para evitarse luego problemas con el servidor donde alojaran su pagina, en especial si el servidor es Linux. Aparte de crear buenos avitos de programacion.

Muy bien, solo nos queda guardar nuestra web.

En la ventana que nos aparece, clic en Guardar, buscamos una hubicacion para nuestra web y le damos un nombre, por ejemplo "index.html", antes de generar la pagina, en "ajustes", escogemos Otro para realizar algunos cambios

echo los cambios, guarde su web y los archivos seran generados automaticamente. Si ya cuenta con conocimintos basicos sobre HTML, entendera a que se refieren las opciones, sino, experimente y vea los cambios que ocurren en su web.

 Eso es todo, ya tiene una web hecha con photoshop

Archivos utilizados

Descargar aqui