Cómo diseñar una página web en Photoshop para Dreamweaver
Aunque Photoshop es principalmente un programa de efectos y edición de imagen, es también una gran herramienta para diseñar el estilo de páginas web. Con el uso de sus herramientas incorporadas, Photoshop puede ser fácilmente utilizado para crear una disposición profesional que puede ser luego transferida a Dreamweaver para el trabajo de codificación. Una vez que el trabajo diseño real se haya hecho en Photoshop, encontrarás que hacer que se convierta en una página web real con Dreamweaver no es tan difícil.
Diseña la página con Photoshop
1
Abre Photoshop, haz clic en el menú "Archivo" y selecciona "Nuevo". Elige "píxeles" como tu unidad de medida y luego escribe el ancho y altura deseados para tu página web. Para una compatibilidad máxima para el usuario, deberías elegir un ancho que sea menor a 1100 píxeles. Deja el fondo en blanco, establece la resolución en "72", y asegúrate de que el modo de color está en "Color RGB". Haz clic en "OK".
2
Haz clic en la herramienta "Formas" en la barra de herramientas y selecciona el tipo de forma deseado para la disposición. Una vez seleccionado, haz clic y arrástrala en el documento para crear tu forma. Repite esto tantas veces como sea necesario con formas diferentes para crear tu disposición de página web. Para cambiar el color o estilo de una forma después de haberla creado, haz doble clic en la forma en la paleta de "Capas" y haz las modificaciones deseadas.
3
Añade el texto deseado a la disposición de la página web con la herramienta "Texto" en la barra de herramientas. Al menos que estés haciendo un logo, deberías siempre usar una fuente estándar que sea muy fácil de ver, como Verdana, Georgia o Times New Roman (sólo por mencionar algunas). Una vez que tengas todas las capas que quieres para tu página web, haz doble clic en las capas una por una para cambiarles el nombre. Esto te ayudará a recordar para qué es cada capa.
Transferir el diseño a Dreamweaver
1
Haz doble clic en cada forma y capa de texto para las que habilitaste un color específico y haz clic en la muestra de color para ver el código HEX del mismo. Necesitarás estos códigos cuando transfieras tu diseño a Dreamweaver. Luego guarda la página en el formato predeterminado de Photoshop (PSD) y haz una copia en JPEG. El JPEG será usado como imagen de referencia y puedes usar el PSD si quieres hacer cambios.
2
Abre Dreamweaver y crea un nuevo documento HTML. Ve a "Insertar" e inserta una nueva tabla o DIV y establece los atributos del elemento para que coincidan con los usados en tu disposición de Photoshop (por ej., ancho/altura y color de fondo). Mientras tomas como referencia la imagen JPEG de tu disposición de página web de Photoshop, escribe el texto necesario en los lugares adecuados y alinea los distintos elementos para que coincidan con tu diseño en Photoshop.
3
Regresa a la imagen JPEG de tu diseño y usa la herramienta recortar en Photoshop para cortar la parte del logo de la imagen. Guárdalo en la carpeta donde guardaste el archivo HTML. Regresa a Dreamweaver, abre la vista del diseño y haz clic en el lugar donde quieres insertar el logo. Abre la viñeta "Insertar" y haz clic en "Imagen" para insertar tu logo en la página web. Tu página diseñada con Photoshop y Dreamweaver está lista para ser usada.
References
Writer Bio
Daniel Hatter began writing professionally in 2008. His writing focuses on topics in computers, Web design, software development and technology. He earned his Bachelor of Arts in media and game development and information technology at the University of Wisconsin-Whitewater.