Uso de archivos de Photoshop en Dreamweaver

Se pueden insertar archivos de imágenes de Photoshop (formato PSD) en las páginas web en Dreamweaver y dejar que Dreamweaver los optimice como imágenes para la Web (formatos GIF, JPEG y PNG). Al hacerlo, Dreamweaver inserta la imagen como objeto inteligente y mantiene una conexión en vivo con el archivo PSD original.

También se puede pegar toda una imagen de Photoshop con varias capas y cortes o parte de ella en una página Web en Dreamweaver. Sin embargo, al copiar y pegar desde Photoshop, la conexión en vivo con el archivo original no se mantiene. Para actualizar la imagen, realice los cambios en Photoshop y después vuelva a copiar y pegar.

Para ver un tutorial sobre la integración de Photoshop con Dreamweaver, consulte Integración de Dreamweaver con Photoshop.

Objetos inteligentes y flujos de trabajo entre Photoshop y Dreamweaver

Existen dos flujos de trabajo principales al trabajar con archivos de Photoshop en Dreamweaver: el flujo de trabajo de copia y pegado y el flujo de trabajo de objetos inteligentes.

Flujo de trabajo de copia y pegado

El flujo de trabajo de copia y pegado permite seleccionar sectores o capas en un archivo de Photoshop y, a continuación, usar Dreamweaver para insertarlos como imágenes preparadas para Web. El inconveniente radica en que, si más adelante desea actualizar el contenido, debe abrir el archivo de Photoshop original, realizar los cambios oportunos, volver a copiar el sector o la capa en el Portapapeles y, por último, pegar de nuevo la capa o el sector actualizado en Dreamweaver. Este flujo de trabajo sólo se recomienda para insertar parte de un archivo de Photoshop (por ejemplo, una sección de un componente de diseño) como imagen en una página Web.

Flujo de trabajo de objetos inteligentes

Si va a usar archivos completos de Photoshop, Adobe recomienda el flujo de trabajo de objetos inteligentes. En Dreamweaver, un objeto inteligente es un elemento de imagen colocado en una página web que cuenta con una conexión dinámica con el archivo original de Photoshop (PSD). En la vista Diseño de Dreamweaver, los objetos inteligentes se señalan con un icono situado en la esquina superior izquierda de la imagen.

Cuando la imagen web (es decir, la imagen que aparece en la página de Dreamweaver) no está sincronizada con el archivo de Photoshop original, Dreamweaver detecta que éste se ha actualizado y muestra en color rojo una de las flechas del icono que corresponde al objeto inteligente. Basta con seleccionar la imagen Web en la vista Diseño y hacer clic en el botón Actualizar desde original del inspector de propiedades para que la imagen se actualice de forma automática y refleje los cambios realizados en el archivo de Photoshop original.

Si emplea el flujo de trabajo de objetos inteligentes, puede prescindir de Photoshop a la hora de actualizar las imágenes Web. Además, las actualizaciones de los objetos inteligentes de Dreamweaver no son destructivas, Es decir, aunque cambie la versión Web de la imagen de su página, conserva intacta la imagen original de Photoshop.

También puede actualizar objetos inteligentes sin seleccionar la imagen Web en la vista Diseño. El panel Activos permite actualizar todos los objetos inteligentes, incluidas las imágenes que no se pueden seleccionar en la ventana Documento (por ejemplo, las imágenes de fondo CSS).

Configuración de optimización de la imagen

En ambos flujos de trabajo (tanto de copia y pegado como de objetos inteligentes) puede especificar una configuración de optimización en el cuadro de diálogo Optimización de imágenes. Este cuadro de diálogo permite especificar el formato de archivo y la calidad de la imagen. Si copia un sector o una capa o inserta un archivo de Photoshop como objeto inteligente por primera vez, Dreamweaver muestra este cuadro de diálogo para facilitarle la creación de la imagen Web.

Si pretende copiar y pegar una actualización de un sector o una capa en concreto, Dreamweaver recuerda la configuración original y recrea la imagen Web con ella. De igual modo, al actualizar un objeto inteligente con el inspector de propiedades, Dreamweaver usa la misma configuración empleada al insertar por primera vez la imagen. No obstante, la configuración de la imagen se puede modificar en cualquier momento. Para hacerlo, seleccione la imagen Web en la vista Diseño y, luego, haga clic en el botón Editar configuración de imagen en el inspector de propiedades.

Almacenamiento de archivos de Photoshop

Si inserta una imagen Web pero no guarda el archivo de Photoshop original en el sitio de Dreamweaver, la aplicación reconoce la ruta al archivo original como una ruta de acceso a archivo local absoluta en ambos flujos de trabajo, de copia y pegado y de objetos inteligentes. Por ejemplo, si la ruta al sitio de Dreamweaver es C:\Sitios\miSitio y el archivo de Photoshop está almacenado en C:\Imágenes\Photoshop, Dreamweaver no reconoce el activo original como parte del sitio denominado miSitio. Esto puede ser fuente de problemas si alguna vez decide compartir el archivo de Photoshop con otros miembros del equipo puesto que, para Dreamweaver, el archivo sólo se encuentra disponible en una unidad de disco duro local concreta.

En cambio, si almacena el archivo de Photoshop en el sitio, Dreamweaver establece una ruta de acceso al archivo relativa con respecto al sitio. Así, todos los usuarios que dispongan de acceso al sitio pueden establecer la ruta correcta de acceso al archivo, siempre que también se les proporcione para la descarga el archivo original.

Para ver un tutorial en vídeo sobre la edición roundtrip con Photoshop, consulte Edición roundtrip con Photoshop.

Creación de objetos inteligentes

Al insertar una imagen de Photoshop (archivo PSD) en la página, Dreamweaver crea un objeto inteligente. Un objeto inteligente es una imagen para Web que mantiene una conexión en vivo con la imagen original de Photoshop. Al actualizar la imagen original en Photoshop, Dreamweaver le ofrece la posibilidad de actualizar la imagen en Dreamweaver simplemente haciendo clic en un botón.

Dreamweaver crea el objeto inteligente basándose en la configuración de optimización seleccionada y sitúa en la página una versión para Web de la imagen. El objeto inteligente mantiene una conexión en vivo con la imagen original y le permite saber si no están sincronizados.

Para ver un tutorial en vídeo sobre la edición roundtrip con Photoshop, consulte Edición roundtrip con Photoshop.

Actualización de objetos inteligentes

Si cambia el archivo de Photoshop al que está vinculado el objeto inteligente, Dreamweaver le notificará que la imagen para Web no está sincronizada con el original. En Dreamweaver, los objetos inteligentes se identifican mediante un icono situado en la esquina superior izquierda de la imagen. Cuando la imagen para Web de Dreamweaver está sincronizada con el archivo original de Photoshop, ambas flechas del icono serán de color verde. Si la imagen para Web no está sincronizada con el archivo original de Photoshop, una de las flechas del icono se mostrará en color rojo.

Actualización de varios objetos inteligentes

Puede actualizar varios objetos inteligentes a la vez mediante el panel Activos. El panel Activos también le permite ver objetos inteligentes que es posible que no puedan seleccionarse en la ventana de documento (por ejemplo, las imágenes de segundo plano de CSS).

Cambio del tamaño de objetos inteligentes

Puede cambiar el tamaño de un objeto inteligente de la ventana de documento de la misma forma que cambiaría el de cualquier otra imagen.

Edición del archivo Photoshop original de un objeto inteligente

Después de crear un objeto inteligente en la página de Dreamweaver, podrá editar el archivo PSD original en Photoshop. Tras realizar los cambios en Photoshop, podrá actualizar fácilmente la imagen web en Dreamweaver.

Estados de los objetos inteligentes

En la siguiente tabla se enumeran los diferentes estados de los objetos inteligentes.

Copia y pegado de una selección de Photoshop

Se puede copiar toda o parte de una imagen de Photoshop y pegar la selección en la página de Dreamweaver como una imagen para la Web. Puede copiar una capa o un grupo de capas de una zona seleccionada de la imagen o copiar un corte de la imagen. No obstante, al hacerlo, Dreamweaver no crea un objeto inteligente.

Dreamweaver define la imagen de acuerdo con su configuración de optimización y sitúa una versión para la Web de la imagen en su página. La información sobre la imagen, como la ubicación del archivo original PSD, se guarda en una Design Note, sin tener en cuenta si se ha activado Design Notes para su sitio. La Design Note permite volver a editar el archivo fuente original de Photoshop desde Dreamweaver.

Edición de imágenes pegadas

Tras pegar imágenes de Photoshop en las páginas de Dreamweaver, podrá editar el archivo PSD original en Photoshop. Si se utiliza el flujo de trabajo de copia/pegado, Adobe recomienda realizar siempre las modificaciones en el archivo PSD original (en lugar de en la imagen para Web) y luego volver a pegar la imagen para mantener un único archivo de origen.

Si desea volver a optimizar la imagen en cualquier momento, seleccione la imagen y haga clic en el botón Editar configuración de imagen en el inspector de propiedades.

Configuración de las opciones del cuadro de diálogo Optimización de imágenes

Cuando cree un objeto inteligente o pegue una selección desde Photoshop, Dreamweaver mostrará el cuadro de diálogo Optimización de imágenes. (Dreamweaver también muestra este cuadro de diálogo para cualquier otra imagen si selecciona la imagen y hace clic en el botón Editar configuración de imagen en el inspector de propiedades). Este cuadro de diálogo le permite definir y obtener una presentación preliminar de la configuración de imágenes Web empleando la combinación adecuada de color, compresión y calidad.

Una imagen para Web se puede mostrar con el mismo aspecto en todos los navegadores Web modernos con independencia del sistema o navegador que use el usuario. En general, el resultado es un equilibrio entre calidad y tamaño de archivo.

Elija el ajuste preestablecido que mejor se ajuste a sus necesidades. El tamaño de archivo de la imagen cambia según el ajuste preestablecido elegido. En el fondo se mostrará una vista previa instantánea de la imagen con el ajuste aplicado.

Por ejemplo, para imágenes que deban mostrarse con un alto grado de claridad, elija PNG24 para fotos (detalles nítidos).  Seleccione GIF para imágenes de fondo (patrones) si está insertando un patrón que actuará como fondo de la página.

Cuando se selecciona un ajuste preestablecido, se muestran las opciones configurables para el ajuste preestablecido.  Si desea continuar personalizando los ajustes de optimización, modifique los valores de estas opciones.