sábado, 9 de noviembre de 2013

Cómo codificar un Diseño Web PSD

Puede crear y código PSD diseños web en Photoshop. PSD es el formato de archivo nativo de Photoshop. Para codificar un PSD para la Web, empezar por diseñar el trazadoen Photoshop. Definir las secciones de la página web, como la cabecera, pie de página y los botones de la barra lateral, con la herramienta Slice, a continuación, utilice el cuadro de diálogo Opciones de sector de Photoshop para codificar las distintas secciones de la disposición.

 

DISPOSICIÓN

 

Lo que necesita

Adobe Photoshop CS2 o más tarde

 

Abra el archivo de Photoshop PSD que desea convertir a un diseño Web, o iniciar un nuevo documento de Photoshop haciendo clic en el menú "Archivo" y seleccionar "Nuevo". Se abrirá el cuadro de diálogo Nuevo. Haga clic en el menú desplegable "Preset" y elegir la opción "Web". Esto muestra las opciones para la creación de un diseño de página Web. Usted puede elegir uno de los tamaños de las páginas web predeterminadas en el menú desplegable "Tamaño", o definir un tamaño personalizado con el campo "Altura" "Ancho" y. Haga clic en "Aceptar".

 

Coloque la página Web si lo deseas. Por ejemplo, puede crear una imagen de cabecera en la parte superior de la página, así como un menú de navegación, o puede crear un menú en el lado izquierdo de la página. También puede crear un pie de página en la parte inferior de la página. Sus opciones de diseño son casi ilimitadas.

 

Seleccione la herramienta "Slice" en el panel de herramientas. La herramienta Slice se encuentra en el menú desplegable de la herramienta Recortar. Haga clic y mantenga la "Herramienta Recortar" y luego seleccione "Slice Tool" del menú lateral.

 

Mantenga pulsado el botón del ratón y arrastre el "Slice Tool" sobre la primera sección de su página Web. Las rodajas de herramienta de corte de la PSD en secciones y cada sección de lugares en una tabla HTML. Por ejemplo, puede crear un sector para el encabezado, el pie de página, la barra lateral y cada botón o elemento de menú.

 

Cortar el PSD como se desee.

 

Haga clic y mantenga la "Herramienta Slice" en el panel de herramientas para mostrar el menú desplegable, y luego seleccione la opción "herramienta Seleccionar sector."

 

Haga doble clic en un segmento que desea codificar. Por ejemplo, para crear un botón de enlace puede hacer clic, doble clic rebanada del botón. Se abrirá el cuadro de diálogo Opciones de sector.

 

Haga clic en el campo "URL" y escriba el destino del enlace.

 

Haga clic en el campo "Mensaje de texto" y escriba un mensaje. Este es el texto que se muestra cuando el usuario pasa el cursor del ratón sobre la rebanada en un navegador.

 

Seleccione el campo "Alt Tag" y escriba el texto alternativo para la división. Este es el texto que se muestra si el navegador no puede mostrar la imagen. En cambio, un enlace de texto que contiene las pantallas de texto etiqueta alt.

 

Repita este proceso para cada sector que desea codificar.

 

Haga clic en el menú "Archivo" y seleccione "Guardar para Web Esto abre el cuadro de ialog Guardar para Web.

 

Haga clic en "Guardar" para abrir la ventana "Guardar optimizada como" cuadro de diálogo.

 

Haga clic en el menú desplegable "Formato" y seleccione "HTML e imágenes", y luego haga clic en el menú desplegable "Slices" y seleccione "Todos los sectores."

15

Haga clic en "Guardar". Photoshop guarda la Web PSD rodajas diseño como un archivo HTML y crea archivos de imagen separados para cada sector, los tiene guardados en una subcarpeta denominada "Imágenes".

 

Consejos y advertencias

Usted puede hacer cambios en el código HMTL en Dreamweaver o un editor de texto, como el Bloc de notas.

 

Cuando se carga la página HTML a un servidor Web, no se olvide de cargar la carpeta de imágenes. De lo contrario, el diseño Web PSD no se mostrará correctamente.

 

 

No hay comentarios:

Publicar un comentario