Aprenda cómo se integra Photoshop en Dreamweaver. Trabaje con objetos inteligentes en Photoshop - Flujos de trabajo de Dreamweaver.

Integración de Photoshop

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.

Nota:

Si utiliza esta función de integración a menudo, puede almacenar los archivos de Photoshop en el sitio de Dreamweaver para acceder más fácilmente a ellos. Si lo hace, asegúrese de que los oculta para evitar exponer los activos originales, además de evitar transferencias innecesarias entre el sitio local y el sitio remoto.

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 de Diseño de Dreamweaver, los objetos inteligentes se señalan con un icono situado en la esquina superior izquierda de la imagen.

Objeto inteligente
Objeto inteligente

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 de 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 de 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 de 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.

  1. En Dreamweaver (vista de Código o Diseño), sitúe el punto de inserción en el lugar de la página donde desee insertar la imagen.
  2. Seleccione Insertar > Imagen.

    Nota:

    También puede arrastrar el archivo PSD a la página desde el panel Archivos si almacena los archivos de Photoshop en el sitio web. Si lo hace, no tendrá que realizar el siguiente paso.

  3. Para localizar el archivo de imagen PSD de Photoshop en el cuadro de diálogo Seleccionar origen de imagen, haga clic en el botón Examinar y abra la carpeta que lo contiene.

  4. En el cuadro de diálogo Optimización de imágenes que aparece, ajuste la configuración de optimización como sea necesario y haga clic en OK.

  5. Guarde el archivo de imagen para la Web en una ubicación dentro de la carpeta raíz de su sitio web.

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.

Nota:

Si posteriormente decide cambiar la configuración de optimización de una imagen situada en las páginas, podrá seleccionar la imagen, hacer clic en el botón Editar configuración de imagen en el inspector de propiedades y realizar cambios en el cuadro de diálogo Optimización de imágenes. Los cambios realizados en el cuadro de diálogo Optimización de imágenes se aplican de manera no destructiva. Dreamweaver nunca modifica el archivo original de Photoshop y siempre vuelve a crear la imagen web basada en los datos originales.

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.

  1. Para actualizar un objeto inteligente con el contenido actual del archivo original de Photoshop, seleccione el objeto inteligente en la ventana Documento y haga clic en el botón Actualizar desde original del inspector de propiedades.

Nota:

No es necesario tener Photoshop instalado para realizar la actualización desde Dreamweaver.

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 Documento (por ejemplo, las imágenes de segundo plano de CSS).

  1. En el panel Archivos, haga clic en la ficha Activos para ver los activos del sitio.
  2. Asegúrese de que esté seleccionada la vista Imágenes. Si no lo está, haga clic en el botón Imágenes.

  3. Seleccione cada imagen en el panel Activos. Al seleccionar un objeto inteligente, verá el icono de objeto inteligente en la esquina superior izquierda de la imagen. Las imágenes normales carecen de este icono.
  4. Haga clic con el botón derecho del ratón en el nombre de archivo de cada uno de los objetos inteligentes que desee actualizar y seleccione Actualizar desde original. También puede presionar Control y hacer clic para seleccionar varios nombres de archivo y actualizarlos todos a la vez.

Nota:

No es necesario tener Photoshop instalado para realizar la actualización desde Dreamweaver.

Cambio del tamaño de objetos inteligentes

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

  1. Seleccione el objeto inteligente en la ventana Documento y arrastre los manejadores de cambio de tamaño para cambiar el tamaño de la imagen. Puede mantener las proporciones de ancho y alto manteniendo presionada la tecla Mayús mientras arrastra.
  2. Haga clic en el botón Actualizar desde original en el inspector de propiedades.

    Cuando actualice un objeto inteligente, la imagen web se actualizará de manera no destructiva con el nuevo tamaño a partir del contenido del archivo original y de la configuración de optimización del original.

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.

Nota:

Asegúrese de que ha configurado Photoshop como editor de imágenes externo principal.

  1. Seleccione el objeto inteligente en la ventana Documento.
  2. Haga clic en el botón Editar del inspector de propiedades.

  3. Realice los cambios deseados en Photoshop y guarde el nuevo archivo PSD.
  4. En Dreamweaver, seleccione de nuevo el objeto inteligente y haga clic en el botón Actualizar desde original.

Nota:

Si ha cambiado el tamaño de la imagen en Photoshop, deberá restablecer el tamaño de la imagen web en Dreamweaver. Dreamweaver actualiza un objeto inteligente exclusivamente a partir del contenido del archivo original de Photoshop, no de su tamaño. Para sincronizar el archivo de una imagen web con el tamaño del archivo original de Photoshop, haga clic con el botón derecho del ratón en la imagen y seleccione Restablecer tamaño original.

Estados de los objetos inteligentes

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

Estado de objeto inteligente

Descripción

Acción recomendada

Imágenes sincronizadas

La imagen web está sincronizada con el contenido actual del archivo original de Photoshop. Los atributos de ancho y alto del código HTML coinciden con las dimensiones de la imagen web.

Ninguno

Activo original modificado

El archivo original de Photoshop se ha modificado tras la creación de la imagen web en Dreamweaver.

Utilice el botón Actualizar desde original del inspector de propiedades para sincronizar las dos imágenes.

Las dimensiones de la imagen web difieren de los atributos de ancho y alto HTML seleccionados

Los atributos de ancho y alto del código HTML son diferentes de las dimensiones de ancho y alto de la imagen web que Dreamweaver creó en el momento de la inserción. Si las dimensiones de la imagen web son más pequeñas que los valores de ancho y alto HTML, es posible que la imagen web se muestre pixelada.

Utilice el botón Actualizar desde original del inspector de propiedades para volver a crear la imagen web a partir del archivo original de Photoshop. Dreamweaver utiliza las dimensiones de ancho y alto HTML especificadas al volver a crear la imagen.

Las dimensiones del activo original son demasiado pequeñas para los valores de ancho y alto HTML seleccionados

Los atributos de ancho y alto del código HTML son mayores que las dimensiones de ancho y alto del archivo original de Photoshop. Es posible que la imagen web se muestre pixelada.

No cree imágenes web con dimensiones mayores que las del archivo original de Photoshop.

No se encuentra el activo original

Dreamweaver no encuentra el archivo original de Photoshop especificado en el cuadro de texto Original del inspector de propiedades.

Corrija la ruta de archivo indicada en el cuadro de texto Original del inspector de propiedades o mueva el archivo de Photoshop a la ubicación actualmente especificada.

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.

Nota:

Aunque la funcionalidad Actualizar desde original no está disponible para imágenes pegadas, puede abrir y editar el archivo original de Photoshop seleccionando la imagen pegada y haciendo clic en el botón Editar en el inspector de propiedades.

  1. En Photoshop, siga uno de estos procedimientos:
    • Copie una capa o parte de ella utilizando la herramienta Recuadro para seleccionar la parte que desea copiar y elija Edición > Copiar. Con esto sólo se copia la capa activa del área seleccionada en el portapapeles. Los efectos basados en capas no se copian.
    • Copie y combine varias capas utilizando la herramienta Recuadro para seleccionar la parte que desea copiar y elija Edición > Copiar fusionado. Esto acopla y copia en el portapapeles las capas activa y que se encuentren debajo del área seleccionada. Se copian los efectos basados en capas que estén asociados a cualquiera de estas capas.
    • Copie un corte utilizando la herramienta de selección para seleccionarlo y elija Edición > Copiar. Esto acopla y copia en el portapapeles las capas activas y las que se encuentren debajo del corte.

    Nota:

    Puede elegir Seleccionar > Todo para seleccionar rápidamente la imagen que desee copiar.

  2. En Dreamweaver (vista de Código o Diseño), sitúe el punto de inserción en el lugar de la página donde desee insertar la imagen.
  3. Seleccione Edición > Pegar.

  4. En el cuadro de diálogo Optimización de imágenes, ajuste la configuración de optimización como sea necesario y haga clic en OK.

  5. Guarde el archivo de imagen para la Web en una ubicación dentro de la carpeta raíz de su sitio web.

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.

Nota:

Asegúrese de que ha establecido Photoshop como principal editor externo de imágenes para el tipo de archivo que desea editar.

  1. En Dreamweaver, seleccione una imagen para Web creada en Photoshop y siga uno de estos procedimientos:
    • Haga clic en el botón Editar del inspector de propiedades de imagen.
    • Presione Control (Windows) o Comando (Macintosh) y haga doble clic en el archivo.
    • Haga clic con el botón derecho del ratón (Windows) o mantenga presionada la tecla Control y haga clic (Macintosh) en una imagen, seleccione Editar origen con en el menú contextual y elija Photoshop.

    Nota:

    Esto supone que Photoshop está definido como el editor principal de imágenes externo de los archivos PSD. También puede configurar Photoshop como editor predeterminado para los archivos JPEG, GIF y PNG.

  2. Edite el archivo en Photoshop.
  3. Regrese a Dreamweaver y pegue la imagen o selección actualizada en la página.

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.

Nota:

Con independencia de la configuración elegida, solo se ve afectada la versión importada del archivo de imagen. El archivo original PSD de Photoshop o PNG de Fireworks siempre permanece intacto.

Ajuste preestablecido

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.

Esta obra está autorizada con arreglo a la licencia de Reconocimiento-NoComercial-CompartirIgual 3.0 Unported de Creative Commons.  Los términos de Creative Commons no cubren las publicaciones en Twitter™ y Facebook.

Avisos legales   |   Política de privacidad en línea