Cómo convertir un prototipo de Photoshop para Web HTML
Photoshop es una herramienta muy útil para el diseño de los elementos de imagen de su sitio web, incluyendo los botones del rollover , menús y gráficos desplegables que contienen enlaces a otras páginas web . Sin embargo , el propio Photoshop no es una herramienta de creación de páginas web. Afortunadamente , es relativamente fácil de exportar el prototipo en un formato de gráficos web amigable , y construir una página web HTML que utiliza estos elementos. Tenga en cuenta que los componentes interactivos tales como enlaces de hipertexto, botones del rollover y menús desplegables requieren trabajo adicional. Más allá de los conceptos básicos es altamente dependiente de la aplicación, y puede requerir conocimientos de programación especializada. Cosas que necesitará Photoshop HTML Editor de búsqueda Web navegador Mostrar más instrucciones Basic Web Página 1
Abra su prototipo en Photoshop y exportar a un formato de imagen para la Web compatible. Seleccione la opción " Guardar para Web y dispositivos " en el menú Archivo. En el cuadro de diálogo seleccionar JPEG , GIF o PNG . Seleccione una calidad de imagen , teniendo en cuenta que el aumento de la calidad superior tamaño del archivo. 2
" Guardar " el archivo en el disco, dándole un nombre como " myPrototype.jpg . "
3
Abre tu editor de HTML y crear una nueva página web. Mayoría de los editores de HTML se creará una página web esqueleto para usted. 4
Agregar un elemento de imagen directamente debajo de la etiqueta de apertura
. El elemento de la imagen tomará la forma : . . Src="myPrototype.jpg" /> 5
Guardar su página web y de la carga en cualquier navegador < br > Beyond Basics 6
Mejore su disposición mediante el uso de cualquiera de las tablas o Cascading Style Sheets ( CSS ) para posicionar a su disposición . El método preferido es tomar las capas individuales , o rodajas , creado en Photoshop y la posición de ellos el uso de CSS . Hecho correctamente , esto crea un diseño "líquido" que reposiciona el diseño como el navegador cambia de tamaño . 7
Mejorar la velocidad mediante el uso de repetición de elementos de fondo. En Photoshop , cree un 5 píxeles de ancho porción de su fondo y guardarlo en un archivo. En HTML , puede repetir el elemento con el atributo de fondo de su
,
o estilo CSS. Sintaxis para cada caso varía , así que revise su guía HTML. Asegúrese de establecer el atributo de fondo para " repetir ". 8
uso de mapas de imágenes para crear enlaces simples de una imagen a otra página web. Según el desarrollador web Gregory Hodges , cree un elemento
