Cómo utilizar una rebanada PSD en una página web

Cómo utilizar una rebanada PSD en una página web


Navegadores Web no pueden cargar y mostrar el formato de archivo PSD nativo de Photoshop. Puede, sin embargo, utilizar la herramienta de la rebanada de Photoshop para cortar el PSD en archivos de imagen separados, y luego exportar el PSD a HTML, que es el lenguaje de marcado de la mayoría de los diseñadores utilizan para crear páginas Web. En primer lugar, se mire por el PSD, y luego utiliza Guardar de Photoshop para la opción Dispositivos Web y asignar enlaces a las rodajas y exportar el archivo como HTML.

Instrucciones

1

Abra el PSD que desea convertir a una página Web en Photoshop: Haga clic en el menú "Archivo" y seleccione "Abrir". Esto muestra el cuadro de diálogo Abrir. Vaya a la PSD, seleccionarlo, y luego haga clic en el botón "Abrir".

2

Seleccione la "Herramienta Slice" en el panel Herramientas. La herramienta de la rebanada es la quinta opción en el panel Herramientas. Por defecto, Photoshop muestra la herramienta de recorte en la quinta posición. Para cambiar a la herramienta de corte, haga clic y mantenga la herramienta Recortar para mostrar el menú de volar y, a continuación, seleccione "Herramienta Slice."

3

Mantenga pulsado el botón del ratón y arrastrar a cabo su primera rebanada. Por ejemplo, puede crear rebanadas para los artículos página Web de la bandera, de la barra lateral, pie de página y el menú. Photoshop crea imágenes separadas para cada sector y los coloca en las celdas de tabla HTML.

4

Cortar el PSD si lo deseas.

5

Haga clic en el menú "Archivo" y seleccione "Guardar para Web y dispositivos." Esto abre el cuadro de diálogo Guardar para Web y dispositivos. Desde aquí se pueden hacer grandes cambios en su diseño HTML. Para controlar el formato de archivo para una porción particular, por ejemplo, seleccione la rebanada y elegir el tipo de archivo, tales como PNG o JPEG, en el segundo menú desplegable en la columna de la derecha.

También puede añadir enlaces a sus rebanadas de este cuadro de diálogo: Haga doble clic en el segmento para abrir el cuadro de diálogo Opciones de sector, y escriba el enlace en el campo URL.

6

Realice los cambios deseados en Guardar para Web y dispositivos y haga clic en "Guardar". Esto abre el Guardar optimizada como caja de diálogo.

7

Haga clic en el menú desplegable "Formato" y seleccione "HTML e imágenes."

8

Haga clic en el menú desplegable "rebanadas" y seleccione "Todos los sectores."

9

Haga clic en el botón "Guardar". Photoshop exporta las rodajas y crea una página HTML que contiene enlaces a los cortes. Puede utilizar la página HTML como es, o copia y pega el código HTML de la página a otra página Web HTML.

Consejos y advertencias

  • Al guardar el archivo HTML, Photoshop guarda todas las rodajas en una carpeta llamada "imágenes". Cuando carga la página HTML a un servidor Web, asegúrese de que también subir la carpeta de imágenes. De lo contrario, la página no se muestre correctamente.