Guía del usuario Cancelar

Extract en Dreamweaver

Buscar

Última actualización el 26/12/2022

Descubra cómo convertir rápidamente los PSD en diseños web basados en HTML de sitios móviles y de escritorio. Extraiga CSS, imágenes, medidas, fuentes, colores, degradados y mucho más de Photoshop y páselas directamente a Dreamweaver.

Nota:

A partir del 1 de julio de 2022, las funciones del panel Extract dejarán de estar disponibles en Dreamweaver 21.2 y versiones anteriores. Puede utilizar Adobe Photoshop para extraer información sobre estilos y recursos de los componentes PSD y reutilizarlos en Dreamweaver.

La integración de Extract con Dreamweaver permite que los diseñadores y desarrolladores web puedan aplicar información de diseño y extraer activos optimizados para la web directamente en el entorno de programación. Extract proporciona una solución completa e independiente para extraer la información de estilo y los activos de composiciones PSD, lo que reduce la necesidad de alternar entre Photoshop y Dreamweaver.

Con el panel Extract en Dreamweaver, puede extraer CSS, imágenes, fuentes, colores, degradados y medidas directamente en su página web. Además de estas funciones principales de Extract, Dreamweaver también ofrece las siguientes funcionalidades únicas:

Acceso directo a sus archivos PSD en Creative Cloud y a los archivos PSD compartidos con usted en una carpeta de colaboración
Sugerencias de código contextual para definir fácilmente fuentes, colores y degradados en sus CSS
Compatibilidad con la función Arrastrar y colocar para crear etiquetas de imagen desde capas PSD
Pegado de estilos directamente en la Vista en vivo (por ejemplo, en el Diseñador de CSS y en la Visualización de elementos)

Introducción a Extract

Extraer CSS

Configuración de preferencias en Extract

Copiar texto

Extraer imágenes

Extraer fuentes, colores y degradados

Extraer medidas

Introducción a Extract

Extract en Dreamweaver le permite acceder a los archivos PSD directamente a través del panel Extract en Dreamweaver. Lea los siguientes apartados para obtener más información sobre el panel y espacio de trabajo de Extract y saber cómo cargar archivos PSD en el panel Extract:

Panel y espacio de trabajo de Extract

El espacio de trabajo de Extract está diseñado para ayudarle a utilizar Extract de forma eficaz con Dreamweaver. En este espacio de trabajo, el panel Extract aparece a la izquierda y su página web aparece a la derecha, en una vista dividida (Vista en vivo y Vista de código). Puede personalizar el espacio de trabajo si arrastra, acopla, contrae o expande los paneles para adaptarlos a sus necesidades. También puede guardar el espacio de trabajo personalizado para usarlo más adelante.

Nota:

Si cierra el panel Extract, utilice el método abreviado de teclado Ctrl + K (Win), Cmd + K (Mac) o seleccione Ventana > Extract para abrir el panel de nuevo.

Cuando inicie Dreamweaver por primera vez, en el panel Extract se abrirá un tutorial interactivo para conocer todo lo que se puede hacer en él. Puede utilizar la lista desplegable en la parte superior del panel para pasar de un tutorial a otro.

Después de utilizar el tutorial, puede hacer clic en Introducción para comenzar a usar Extract en Dreamweaver. El panel Extract muestra una vista en miniatura de las carpetas y los archivos PSD en su cuenta de Creative Cloud. Estos archivos son los que se han cargado o sincronizado a través del escritorio o los que se han compartido con usted a través de una carpeta de colaboración en Creative Cloud.

Panel Extract que muestra los archivos PSD guardados en Creative Cloud

Nota:

Para reiniciar el tutorial, haga clic en el menú emergente situado en la esquina superior derecha del panel y seleccione Iniciar tutorial.

Cargar archivos PSD en Creative Cloud

Para cargar un archivo PSD en Creative Cloud, elija Ventana > Extract y haga clic en Cargar PSD. Si otra persona o equipo ha desarrollado las composiciones PSD, estas pueden compartirse en Creative Cloud. Luego, podrá descargar los archivos y cargarlos directamente en su cuenta al iniciar sesión en Creative Cloud o a través del panel Extract en Dreamweaver.

Nota:

Si va a usar Dreamweaver 21.2 o versiones posteriores en un equipo macOS, habilite el tipo de archivo PSD en la ventana del Finder y suba el archivo.

Para macOS

Realice el siguiente procedimiento para habilitar y cargar el archivo PSD:

Haga clic en Cargar PSD en el panel Extract.
En la ventana del Finder, haga clic en Opciones y seleccione *.psd en la lista desplegable que aparece.
Seleccione el archivo PSD y haga clic en Abrir para subir el archivo.

Abrir archivos PSD en el panel Extract

Haga clic en la imagen en miniatura del archivo PSD requerido en el panel Extract. Si hay una versión actualizada del archivo PSD disponible en Creative Cloud tras abrirlo, vuelva a cargar el archivo PSD en el panel Extract. Para ello, haga clic en el nombre del archivo PSD o haga clic en Recargar PSD en el menú emergente de la parte superior derecha. Para volver a la vista en miniatura y seleccionar un archivo distinto, haga clic en el icono de Creative Cloud en la parte superior izquierda del panel.

Para ampliar la vista y mirar en detalle el diseño, cambie el nivel de zoom en la parte superior del panel Extract o utilice Alt +/-. Utilice la pestaña Capas o la lista desplegable Composición de capas para mostrar u ocultar elementos en el archivo PSD.

Tras esto, estará todo listo para transformar la composición PSD en un sitio web.

Configuración de preferencias en Extract

Mediante las preferencias de Extract, puede indicar el formato de archivo predeterminado en el que se extraerán las imágenes, así como las unidades de fuente predeterminadas que saldrán en el panel Extract.

Seleccione Editar > Preferencias (Windows) o Dreamweaver > Preferencias (Mac).
Seleccione Extract en la lista Categoría.
(Opcional) Cambie el formato predeterminado en el que deberán extraerse las imágenes.

Formato de la imagen extraída
(Opcional) En la sección de Extract para dispositivos, seleccione las resoluciones deseadas. Esta configuración se aplicará cuando guarde una imagen en varias versiones con diferentes resoluciones.
- Para guardar las versiones con sufijos, haga clic en la fila correspondiente de la columna Sufijo y escriba el texto.
- Para guardar las versiones con resoluciones diferentes en carpetas de salida separadas, haga clic en la fila correspondiente de la columna Carpeta e indique la ruta relativa.
Extract para dispositivos
(Opcional) Haga clic en Borrar caché para eliminar los datos de caché relativos al uso de Extract.
Haga clic en Aplicar y cierre el cuadro de diálogo Preferencias.
Para ver los cambios en el panel Extract, vuelva a cargar el PSD (menú emergente > Recargar PSD).

Opción Recargar PSD en el panel Extract

Extraer CSS de archivos PSD

Puede copiar todas las propiedades CSS o ciertas propiedades CSS de elementos en una composición PSD y pegar directamente los estilos en el Diseñador de CSS, la Visualización de elementos en la Vista en vivo o en su código (fuente de CSS o documento HTML).

Además, las sugerencias de código se completarán automáticamente con las propiedades CSS del elemento que seleccione en la composición PSD. Si prefiere utilizar códigos, puede recurrir a dichas sugerencias de código para extraer las propiedades CSS en el código.

En el panel Extract (Ventana > Extract), haga clic en el archivo PSD correspondiente. La vista en miniatura del PSD se expandirá, lo que le permitirá ver la composición con claridad.
En el archivo PSD, haga clic en el elemento o activo en cuestión. Aparecerá una ventana emergente con una lista de propiedades CSS del elemento, que le proporcionará la opción de seleccionarlas y copiarlas. Puede ver la anchura y altura del elemento seleccionado tanto en píxeles como en porcentajes.

Nota: Si en esta sección selecciona la opción de porcentaje, las medidas también aparecerán en porcentajes.

Opción Copiar CSS en el panel Extract

Para copiar CSS, seleccione las propiedades que desee copiar y luego haga clic en Copiar CSS.
Pegue el CSS en el documento mediante uno de los métodos siguientes:
- Para pegar el CSS en el Diseñador de CSS, haga clic con el botón derecho en el panel de selección correspondiente y haga clic en Pegar estilos.
- Para pegar el CSS mediante la Visualización de elementos, haga clic con el botón derecho en el panel de selección y después haga clic en Pegar estilos.
- Para pegar el CSS en el código, sitúe el punto de inserción en la ubicación deseada, haga clic con el botón derecho y seleccione Pegar.

Para utilizar las sugerencias de código para extraer CSS, realice los siguientes pasos:

Abra una fuente de CSS asociada a su documento o active la Vista de código de un documento HTML.
En el panel Extract, haga clic en el archivo PSD correspondiente y luego en el elemento en cuestión en la composición.
En el documento, sitúe el punto de inserción en la ubicación deseada en el código.
Comience a escribir el nombre de una propiedad CSS para ver las sugerencias de código que incluyan las propiedades CSS del elemento seleccionado en la composición PSD. Haga clic en la propiedad CSS correspondiente para insertarla en el código.

Sugerencias de código con una propiedad CSS de un elemento en un archivo PSD
Para extraer varias propiedades CSS, seleccione las propiedades necesarias en la ventana emergente del panel Extract. A continuación, en las sugerencias de código, haga clic en Insertar seleccionado.

Inserción por lotes de propiedades CSS

Copiar texto de los archivos PSD

El texto o contenido en las composiciones PSD puede insertarse en la página web con un solo clic. Para copiar el texto de su composición PSD en el panel Extract, seleccione un elemento de texto y haga clic en Copiar texto. El texto se copia en el portapapeles. Tras esto, podrá pegar el texto en el lugar indicado.

Nota:

Una vez que haya extraído el texto, puede extraer las propiedades, por ejemplo, la fuente y los colores asociados al texto. Para obtener más información, consulte Extraer fuentes, colores y degradados de archivos PSD.

Extraer imágenes de archivos PSD

Puede arrastrar cualquier capa de sus composiciones PSD desde el panel Extract hasta una ubicación precisa de la Vista en vivo de su página web. Las ayudas visuales de la Vista en vivo, como las guías interactivas y los iconos DOM, le ayudan a arrastrar y colocar los elementos. Al detenerse un momento antes de colocar el elemento, aparece el icono DOM (</>). La estructura DOM se mostrará al colocar el ratón sobre el icono </> y podrá soltar el elemento dentro de la estructura. Si prefiere utilizar códigos, puede utilizar la sugerencia de código contextual y extraer las imágenes. Las sugerencias de código le permiten extraer colores y degradados como imágenes.

Nota:

Si el archivo PSD contiene varias mesas de trabajo, estas se muestran de forma individual como carpetas en el panel Capas. Para ver el contenido, solo tiene que expandir o contraer la carpeta. Para aumentar el zoom en una mesa de trabajo específica, haga clic en el nombre de esta. Para reducirlo, haga clic en cualquier lugar fuera de la mesa de trabajo y haga clic en AJUSTAR.

Antes de insertar la imagen extraída, Dreamweaver mostrará el nombre de imagen, que se puede editar. De forma predeterminada, la imagen se guarda en la carpeta raíz del sitio. Si desea guardar la imagen en una ubicación personalizada, puede incluir la ruta de acceso completa junto con el nombre de archivo.

Nota: Si extrae una imagen en un documento que no pertenece a un sitio definido, la imagen se extraerá en el directorio en el que se encuentre el documento. En el caso de los documentos sin guardar, se le pedirá que primero guarde el documento.

También puede guardar la imagen en su disco local e integrarla en su página web más adelante. Además, si va a diseñar un sitio web interactivo, puede guardar varias versiones de una sola imagen con diferentes resoluciones que se ajusten a diversos dispositivos con un solo clic.

En el panel Extract, haga clic en el archivo PSD mediante el cual se descargarán las imágenes.
Haga clic en la imagen deseada en el archivo PSD.

Nota:

Utilice la pestaña Capas y la lista desplegable Composición de capas en el panel Extract para mostrar u ocultar imágenes en la composición PSD. Si una imagen tiene varias capas, puede seleccionar una sola capa de la imagen para extraerla.

Tenga en cuenta que las sugerencias de código aparecen en una ventana emergente en la Vista de código a la derecha del espacio de trabajo.
Para importar varias imágenes, mantenga pulsada la tecla Mayús o la tecla Comando y haga clic en las imágenes correspondientes. Las imágenes seleccionadas se extraerán como una imagen única.
Realice una de las siguientes acciones:
- En la pantalla emergente que aparece al hacer clic en la imagen, haga clic en . Especifique la ruta, el nombre del archivo, el formato del archivo y el factor de escala (si fuera necesario). A continuación, realice una de las siguientes acciones:
  
  Haga clic en Guardar para guardar la imagen con su resolución actual. Para cambiar el tamaño de la imagen, seleccione Escalar en e indique el factor de escala.
  
  Haga clic en Guardar varios para guardar varias versiones de la imagen con diferentes resoluciones. El archivo PSD no tiene por qué incluir estas versiones; Dreamweaver puede guardar la imagen en varias resoluciones durante la extracción.
Puede indicar las versiones con las resoluciones deseadas y la carpeta de salida correspondiente en Preferencias.
Extracción de imagen mediante el icono Extraer activo
- Arrastre la imagen hacia la Vista en vivo del documento. Una vez en la Vista en vivo, saldrán las guías interactivas para ayudarle a colocar la imagen.
Cuando coloque la imagen, Dreamweaver mostrará el nombre de la imagen. Puede editar el nombre de la imagen y la extensión, y pulsar Intro para guardar la imagen. La imagen se guarda en la carpeta raíz del sitio de forma predeterminada. Para guardar la imagen en una ubicación personalizada, introduzca la ruta y el nombre de archivo.
Opción de edición del nombre del archivo y la extensión al arrastrar una imagen desde el panel Extract
- Cuando haga clic en la imagen, se completarán las sugerencias de código de contexto en Dreamweaver. En la Vista de código del documento HTML o en su documento CSS, coloque el cursor en el punto de inserción. Después de escribir el nombre de propiedad de la imagen de fondo o la etiqueta <img>, el nombre de la imagen seleccionada aparecerá en las sugerencias de código. Seleccione la imagen, modifique el nombre y la extensión si fuera necesario y pulse Intro.
De forma predeterminada, la imagen se guarda en la carpeta raíz del sitio. Para guardar la imagen en una ubicación personalizada, escriba la ruta personalizada del archivo junto con el nombre de archivo.
Extracción de imágenes mediante sugerencias de código

Extraer medidas de archivos PSD

Con el panel Extract, puede ver y extraer fácilmente el valor de medida entre dos elementos de la composición de PSD.

En el archivo PSD del panel Extract, mantenga pulsada la tecla Mayús o la tecla Comando y haga clic en los elementos correspondientes.

En el panel Extract aparecerá la distancia horizontal y vertical que haya entre los dos elementos.

Medidas en el panel Extract

Nota:

Para ver las medidas en porcentajes, haga clic en un elemento y después en el porcentaje.
Haga clic en el valor correspondiente para copiarlo en el portapapeles.
Pegue el valor donde sea necesario, como por ejemplo, en las propiedades CSS del Diseñador de CSS o en su código.

Extraer fuentes, colores y degradados de archivos PSD

Utilice el panel Extract y extraiga las propiedades CSS de fuentes, colores o degradados utilizadas en su composición PSD.

En el panel Extract, haga clic en Estilos.
Para extraer fuentes, realice las siguientes acciones en la sección Fuentes.
1. Expanda el tipo de fuente correspondiente.
  
  Si desea conocer más información sobre la fuente, haga clic en el icono de Adobe Fonts ().
2. Haga clic en el formato y el tamaño que desee copiar y, en la ventana emergente, haga clic en Copiar CSS. Extract etiqueta los elementos de texto que utilizan la fuente, el formato y el tamaño elegidos.
  
  Nota:
  
  Puede cambiar la unidad de fuente a “em“ o “rem“ en las preferencias de Extract (Preferencias > Extract). Haga clic en Recargar PSD en el menú emergente ubicado en la esquina superior derecha del panel Extract para ver los cambios.
  
  Extracción de fuentes
3. Pegue el CSS donde sea necesario, como por ejemplo, en el código o el Diseñador de CSS.
Para extraer colores, realice las siguientes acciones en la sección Colores:
1. Haga clic en la muestra de color correspondiente. Extract etiquetará los elementos que utilicen el color seleccionado.
  
  Nota: También puede elegir cualquier otro color de la composición PSD mediante el selector de color.
2. En la ventana emergente que aparece al hacer clic en la muestra de color, seleccione el modelo de color deseado (RGB, hexadecimal o HSL) y copie (Ctrl + C; Cmd + C) el valor del color.
  
  Extracción de colores
3. Pegue el valor de color donde sea necesario, como por ejemplo, en el código o el Diseñador de CSS.
Para extraer degradados, haga clic en una muestra de degradado en la sección Degradados. En la ventana emergente que aparece, haga clic en Copiar CSS. Pegue el CSS donde sea necesario, como por ejemplo, en el código o el Diseñador de CSS.

Los prefijos de proveedor seleccionados en las preferencias (Preferencias > Estilos CSS) también se pegan junto con los degradados. Si se extrae un degradado radial, se insertará el CSS correspondiente sin el prefijo de proveedor ya que no se admiten los degradados radiales.

Extracción de degradado