En Dreamweaver (vista Diseño o Código), coloca el punto de inserción en la página donde quieras insertar la imagen.
Última actualización el
27 abr. 2021
Aprenda cómo se integra Photoshop en Dreamweaver. Trabaje con objetos inteligentes en Photoshop - Flujos de trabajo de Dreamweaver.
Integración de Photoshop
Nota
Los flujos de trabajo de integración de Photoshop están descontinuados en Dreamweaver 21.0 y versiones posteriores.
Puedes insertar archivos de imagen de Photoshop (formato PSD) en páginas web en Dreamweaver y permitir que Dreamweaver los optimice como imágenes listas para web (formatos GIF, JPEG y PNG). Cuando haces esto, Dreamweaver inserta la imagen como un Smart Object y mantiene una conexión activa con el archivo PSD original.
También puedes pegar toda o parte de una imagen de Photoshop con varias capas o con varios sectores en una página web en Dreamweaver.Sin embargo, cuando copias y pegas desde Photoshop, no se mantiene ninguna conexión activa con el archivo original. Para actualizar la imagen, realiza los cambios en Photoshop y copia y pega de nuevo.
Nota
Si usas esta función de integración a menudo, es posible que quieras almacenar tus archivos de Photoshop en tu sitio de Dreamweaver para facilitar el acceso. Si lo haces, asegúrate de ocultarlos para evitar la exposición de los recursos originales, así como transferencias innecesarias entre el sitio local y el servidor 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
Hay dos flujos de trabajo principales para trabajar con archivos de Photoshop en Dreamweaver: el de copiar/pegar y el de Smart Objects.
Flujo de trabajo de copia y pegado
El flujo de trabajo de copiar/pegar te permite seleccionar sectores o capas en un archivo de Photoshop y luego usar Dreamweaver para insertarlos como imágenes listas para web. Sin embargo, si quieres actualizar el contenido más adelante, debes abrir el archivo original de Photoshop, realizar los cambios, copiar el sector o capa al portapapeles de nuevo y luego pegar el sector o capa actualizados en Dreamweaver.Este flujo de trabajo solo se recomienda cuando quieres insertar parte de un archivo de Photoshop (por ejemplo, una sección de un diseño comp) como imagen en una página web.
Flujo de trabajo de objetos inteligentes
Cuando trabajas con archivos completos de Photoshop, Adobe recomienda el flujo de trabajo de Smart Objects. Un Smart Object en Dreamweaver es un recurso de imagen colocado en una página web que tiene una conexión activa con un archivo original de Photoshop (PSD). En la vista de diseño de Dreamweaver, un Smart Object se indica con un icono en la esquina superior izquierda de la imagen.
Cuando la imagen web (es decir, la imagen en la página de Dreamweaver) no está sincronizada con el archivo original de Photoshop, Dreamweaver detecta que el archivo original ha sido actualizado y muestra una de las flechas del icono de objeto inteligente en rojo.Cuando seleccionas la imagen web en la vista de diseño y haces clic en el botón Actualizar desde el original en el inspector de propiedades, la imagen se actualiza automáticamente, reflejando cualquier cambio que hayas realizado al archivo original de Photoshop.
Cuando usas el flujo de trabajo de Smart Objects, no necesitas abrir Photoshop para actualizar una imagen web.Además, cualquier actualización que realices de un objeto inteligente en Dreamweaver no es destructiva.Es decir, puedes cambiar la versión web de la imagen en tu página manteniendo intacta la imagen original de Photoshop.
También puedes actualizar un Smart Object sin seleccionar la imagen web en la vista de diseño. El panel Activos te permite actualizar todos los Smart Objects, incluidas imágenes que podrían no ser seleccionables en la ventana de documento (por ejemplo, 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
Cuando insertas una imagen de Photoshop (archivo PSD) en tu página, Dreamweaver crea un Smart Object. Un Smart Object es una imagen lista para web que mantiene una conexión activa con la imagen original de Photoshop. Siempre que actualices la imagen original en Photoshop, Dreamweaver te da la opción de actualizar la imagen en Dreamweaver con el clic de un botón.
Seleccione Insertar > Imagen.
Nota
También puedes arrastrar el archivo PSD a la página desde el panel Archivos si guardas los archivos de Photoshop en tu sitio web.Si lo hace, no tendrá que realizar el siguiente paso.
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.
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 Aceptar.
Guarde el archivo de imagen listo para web en una ubicación dentro de la
carpeta raíz del sitio web.
Dreamweaver crea el objeto inteligente basado en la configuración de optimización seleccionada y coloca una versión lista para web de la imagen en la página. El objeto inteligente mantiene una conexión activa con la imagen original y le avisa cuando las dos no están sincronizadas.
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 notifica que la imagen lista para web no está sincronizada con la original. En Dreamweaver, los objetos inteligentes se identifican mediante un icono en la esquina superior izquierda de la imagen. Cuando la imagen lista para web en Dreamweaver está sincronizada con el archivo original de Photoshop, ambas flechas del icono aparecen en verde. Cuando la imagen lista para web no está sincronizada con el archivo original de Photoshop, una de las flechas del icono se vuelve roja.
Para actualizar un objeto inteligente con el contenido actual del archivo original de Photoshop, seleccione el objeto inteligente en la ventana de 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
Puedes actualizar varios objetos inteligentes a la vez usando el panel Assets.El panel Activos también le permite ver objetos inteligentes que podrían no ser seleccionables en la ventana Documento (por ejemplo, imágenes de fondo CSS).
En el panel Archivos, haz clic en la pestaña Assets para ver los recursos del sitio.
Asegúrese de que esté seleccionada la vista Imágenes. Si no lo está, haga clic en el botón Imágenes.
Seleccione cada imagen en el panel Activos. Cuando seleccionas un objeto inteligente, verás el icono de objeto inteligente en la esquina superior izquierda de la imagen.Las imágenes normales carecen de este icono.
Para cada objeto inteligente que desees actualizar, haz clic con el botón derecho en el nombre del archivo y selecciona Actualizar desde original.También puedes hacer Control+clic para seleccionar varios nombres de archivos y actualizarlos todos a la vez.
Nota
No necesita tener Photoshop instalado para realizar la actualización desde Dreamweaver.
Cambio del tamaño de objetos inteligentes
Puedes cambiar el tamaño de un objeto inteligente en la ventana de documento igual que harías con cualquier otra imagen.
Seleccione el objeto inteligente en la ventana Documento
y arrastre los controles de cambio de tamaño para redimensionar la imagen. Puedes mantener las proporciones de anchura y altura manteniendo pulsada la tecla Mayús mientras arrastras.
Haga clic en el botón Actualizar desde original en el inspector de propiedades.
Cuando actualiza el objeto inteligente, la imagen web se vuelve a procesar de forma no destructiva en el nuevo tamaño, basándose en el contenido actual del archivo original y la configuración de optimización original.
Editar el archivo original de Photoshop de un objeto inteligente
Después de crear un objeto inteligente en tu página de Dreamweaver, puedes editar el archivo PSD original en Photoshop.Después de realizar los cambios en Photoshop, puedes actualizar fácilmente la imagen web en Dreamweaver.
Nota
Asegúrate de tener Photoshop establecido como tu editor de imágenes externo principal.
Seleccione el objeto inteligente en la ventana Documento.
Haga clic en el botón Editar del inspector de propiedades.
Realice los cambios deseados en Photoshop y guarde el nuevo archivo PSD.
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 tabla siguiente se enumeran los distintos 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. |
Copiar y pegar una selección desde Photoshop
Puedes copiar toda o parte de una imagen de Photoshop y pegar la selección en tu página de Dreamweaver como una imagen lista para web. Puedes copiar una sola capa o un conjunto de capas para un área seleccionada de la imagen o puedes copiar un sector de la imagen.Sin embargo, cuando haces esto, 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.
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 activas 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.
En Dreamweaver (vista Diseño o Código), sitúa el punto de inserción
en la página donde quieras insertar la imagen.
Seleccione Edición > Pegar.
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 Aceptar.
Guarda el archivo de imagen listo para web en una ubicación dentro de la
carpeta raíz de tu 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
Después de pegar imágenes de Photoshop en tus páginas de Dreamweaver, puedes editar el archivo PSD original en Photoshop. Al usar el flujo de trabajo de copiar/pegar, Adobe recomienda que siempre hagas las ediciones en el archivo PSD original (en lugar de la imagen lista para web), y luego vuelvas a pegar para mantener la obtención de datos de fuente única.
Nota
Asegúrate de tener Photoshop configurado como tu editor de imágenes externo principal para el tipo de archivo que quieres editar.
En Dreamweaver, selecciona
una imagen lista para web que se creó originalmente en Photoshop y haz
una de las siguientes acciones:
- Haga clic en el botón Editar del inspector de propiedades de imagen.
- Mantén pulsada la tecla Control (Windows) o Comando (Macintosh) mientras haces doble clic en el archivo.
- Haz clic con el botón derecho (Windows) o Control-clic (Macintosh) en una imagen, selecciona Editar original con en el menú contextual y luego selecciona Photoshop.
Nota
Esto asume que Photoshop está configurado como el editor de imágenes externo principal para archivos de imagen PSD. También puedes configurar Photoshop como el editor predeterminado para tipos de archivo JPEG, GIF y PNG.
Edite el archivo en Photoshop.
Vuelve a Dreamweaver y pega la imagen actualizada o la selección en tu 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. Se muestra una vista previa instantánea de la imagen con la configuración aplicada en el fondo.
Por ejemplo, para imágenes que deban mostrarse con un alto grado de claridad, elija PNG24 para fotos (detalles nítidos).Seleccionar GIF para imágenes de fondo (Motivos) si vas a insertar un motivo que actuará como fondo de la página.
Cuando se selecciona un ajuste preestablecido, se muestran las opciones configurables para el ajuste preestablecido. Si quieres personalizar aún más la configuración de optimización, modifica los valores de estas opciones.
Crear sitios web atractivos en Dreamweaver
Diseña, codifica y gestiona sitios web dinámicos en una potente herramienta todo en uno.
