Cómo convertir un prototipo de Photoshop para Web HTML
2014/7/3
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
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
