Photoshop es una excelente herramienta para la creación de maquetas de sitios web. Cuando llega la hora de desplegar su maqueta, que sería bueno que simplemente haga clic en un botón y tomar su vivo prototipo. Sin embargo, Photoshop es estrictamente un programa de gráficos sin capacidades de HTML. Afortunadamente, la exportación de su maqueta en un formato de gráficos Web-amigable como JPEG o GIF, y la creación de una página Web que utiliza estos elementos es sencillo. Tenga en cuenta que debe hacer el trabajo adicional en el lado de HTML para crear los componentes interactivos como enlaces, menús y ventanas emergentes. Las posibilidades de interactividad son infinitas, así que repasa en su HTML y CSS.
Instrucciones
Lo esencial
1 Abra su maqueta en Photoshop y exportarlo a un formato de imagen Web-amigable. Seleccione la opción "Guardar para Web y dispositivos" en el menú "Archivo". En el cuadro de diálogo seleccionar un formato de archivo como JPEG, GIF o PNG y elija la calidad de imagen.
2 Haga clic en "Guardar" y el nombre de su archivo (por ejemplo, myMockup.jpg)
3 Abra el editor HTML y crear un nuevo archivo HTML. editores de HTML como Dreamweaver creará la página Web esqueleto para usted.
4 Añadir una etiqueta de imagen dentro del elemento <body> de su página Web. La etiqueta de la imagen se verá algo como: <img src = "myMockup.jpg" />
5 Guarde el archivo HTML, luego cargarla en cualquier navegador Web.
Consejos y advertencias
- Si ha recibido Photoshop como parte de la Adobe Creative Suite (CS2 o posterior), se incluye Dreamweaver para crear páginas HTML.
- Colocar elementos de la interfaz como botones en sus propias capas y exportar por separado.
- Se pueden crear animaciones en Photoshop utilizando el panel Animación. Asegúrese de exportarlos como archivos GIF animados.
- archivos gráficos grandes pueden ralentizar la carga de la página Web. Para mejorar la velocidad en la que se carga la página web, seleccionar la calidad de imagen más baja que pueda, sin degradar la imagen.