Guía del usuario Cancelar

Extract en Dreamweaver

  1. Guía del usuario de Dreamweaver
  2. Introducción
    1. Conceptos básicos sobre diseño web adaptable
    2. Novedades de Dreamweaver
    3. Desarrollo web con Dreamweaver: información general
    4. Dreamweaver / Preguntas frecuentes
    5. Métodos abreviados de teclado
    6. Requisitos del sistema para Dreamweaver
    7. Resumen de funciones
  3. Dreamweaver y Creative Cloud
    1. Sincronizar la configuración de Dreamweaver con Creative Cloud
    2. Bibliotecas Creative Cloud en Dreamweaver
    3. Uso de archivos de Photoshop en Dreamweaver
    4. Trabajar con Adobe Animate y Dreamweaver
    5. Extraer archivos SVG optimizados para la Web desde bibliotecas
  4. Espacios de trabajo y vistas de Dreamweaver
    1. El espacio de trabajo de Dreamweaver
    2. Optimización del espacio de trabajo de Dreamweaver para la implementación visual
    3. Buscar archivos por nombre de archivo o contenido | Mac OS
  5. Configuración de sitios
    1. Acerca de los sitios de Dreamweaver
    2. Configuración de una versión local del sitio
    3. Conectar con servidores de publicación
    4. Configuración de un servidor de prueba
    5. Importación y exportación de la configuración de un sitio de Dreamweaver
    6. Traer sitios web existentes desde un servidor remoto a la raíz del sitio local
    7. Funciones de accesibilidad en Dreamweaver
    8. Ajustes avanzados
    9. Configuración de las preferencias de sitio para transferir archivos
    10. Especificación de la configuración del servidor proxy en Dreamweaver
    11. Sincronizar la configuración de Dreamweaver con Creative Cloud
    12. Uso de Git en Dreamweaver
  6. Administrar archivos
    1. Creación y apertura de documentos
    2. Administración de archivos y carpetas
    3. Carga de archivos al servidor y descarga desde el mismo
    4. Desprotección y protección de archivos
    5. Sincronizar archivos
    6. Comparación de archivos para detectar diferencias
    7. Ocultación de archivos y carpetas en el sitio de Dreamweaver
    8. Activación de Design Notes para sitios de Dreamweaver
    9. Prevención de la posible actuación repentina de Gatekeeper
  7. Maquetación y diseño
    1. Usar ayudas visuales al diseñar
    2. Información sobre el uso de CSS para diseñar la página
    3. Diseño de sitios web interactivos con Bootstrap
    4. Creación y uso de consultas de medios en Dreamweaver
    5. Presentación de contenido en tablas
    6. Colores
    7. Diseño interactivo mediante diseños de cuadrícula fluida
    8. Extract en Dreamweaver
  8. CSS
    1. Aspectos básicos de las hojas de estilos en cascada
    2. Diseño de páginas con el Diseñador de CSS
    3. Uso de preprocesadores de CSS en Dreamweaver
    4. Configuración de las preferencias de estilos CSS en Dreamweaver
    5. Mover reglas CSS en Dreamweaver
    6. Conversión de CSS en línea en una regla CSS en Dreamweaver
    7. Uso de etiquetas div
    8. Aplicación de degradados al fondo
    9. Creación y edición de efectos de transición de CSS3 en Dreamweaver
    10. Formatear código
  9. Contenido de página y activos
    1. Definición de las propiedades de la página
    2. Configuración de propiedades de encabezado CSS y propiedades de vínculo CSS
    3. Uso de texto
    4. Buscar y reemplazar texto, etiquetas y atributos
    5. Panel DOM
    6. Editar en la Vista en vivo
    7. Codificación de documentos en Dreamweaver
    8. Selección y visualización de elementos de la ventana de documento
    9. Configuración de las propiedades de texto en el inspector de propiedades
    10. Revisión ortográfica de una página web
    11. Uso de las reglas horizontales en Dreamweaver
    12. Añadir y modificar combinaciones de fuentes en Dreamweaver.
    13. Trabajo con activos
    14. Inserción y actualización de fechas en Dreamweaver
    15. Creación y gestión de activos favoritos en Dreamweaver
    16. Insertar y editar imágenes en Dreamweaver
    17. Adición de objetos multimedia
    18. Adición de vídeos en Dreamweaver
    19. Insertar vídeo HTML5
    20. Insertar archivos SWF
    21. Adición de efectos de sonido
    22. Insertar audio HTML5 en Dreamweaver
    23. Trabajar con elementos de bibliotecas
    24. Uso de texto árabe y hebreo en Dreamweaver
  10. Establecimiento de vínculos y navegación
    1. Acerca del establecimiento de vínculos y la navegación
    2. Vinculación
    3. Mapas de imágenes
    4. Vínculos de solución de problemas
  11. Widgets y efectos de jQuery
    1. Uso de interfaz de usuario y widgets móviles de jQuery en Dreamweaver
    2. Uso de efectos jQuery en Dreamweaver
  12. Programación de sitios web
    1. Acerca de la programación en Dreamweaver
    2. Entorno de programación en Dreamweaver
    3. Configuración de las preferencias de programación
    4. Personalización de los colores del código
    5. Escritura y edición de código
    6. Sugerencias de código y completado de código
    7. Contraer y expandir código
    8. Reutilizar código con fragmentos
    9. Depuración de código mediante linting
    10. Optimización del código
    11. Edición de código en Vista de diseño
    12. Trabajo con el contenido de Head para páginas
    13. Inserción del lado del servidor incluida en Dreamweaver
    14. Uso de bibliotecas de etiquetas en Dreamweaver
    15. Importación de etiquetas personalizadas a Dreamweaver
    16. Uso de comportamientos de JavaScript (instrucciones generales)
    17. Aplicación de comportamientos JavaScript incorporados
    18. Acerca de XML y XSLT
    19. Realización de transformaciones XSL del lado del servidor en Dreamweaver
    20. Realización de transformaciones XSL en el lado del cliente en Dreamweaver
    21. Adición de entidades de caracteres para XSLT en Dreamweaver
    22. Formatear código
  13. Flujos de trabajo de varios productos
    1. Instalación y uso de extensiones para Dreamweaver
    2. Actualizaciones integradas en Dreamweaver
    3. Insertar documentos de Microsoft Office en Dreamweaver (solo Windows)
    4. Trabajo con Fireworks y Dreamweaver
    5. Edición de contenido en sitios de Dreamweaver con Contribute
    6. Integración de Dreamweaver Business Catalyst
    7. Crear campañas de correo electrónico personalizado
  14. Plantillas
    1. Acerca de las plantillas de Dreamweaver
    2. Reconocimiento de plantillas y documentos basados en plantillas
    3. Crear una plantilla de Dreamweaver
    4. Crear regiones editables en plantillas
    5. Creación de tablas y regiones repetidas en Dreamweaver
    6. Usar regiones opcionales en plantillas
    7. Definición de atributos de etiqueta editables en Dreamweaver
    8. Creación de plantillas anidadas en Dreamweaver
    9. Edición, actualización y eliminación de plantillas
    10. Exportar e importar contenido xml en Dreamweaver
    11. Aplicación o eliminación de una plantilla de un documento existente
    12. Edición de contenido en plantillas de Dreamweaver
    13. Reglas de sintaxis de etiquetas de plantilla en Dreamweaver
    14. Configuración de preferencias de resaltado en regiones de plantillas
    15. Ventajas de usar plantillas en Dreamweaver
  15. Móvil y multipantalla
    1. Creación de consultas de medios
    2. Cambio de la orientación de página para dispositivos móviles
    3. Creación de aplicaciones web para dispositivos móviles con Dreamweaver
  16. Sitios, páginas y formularios web dinámicos
    1. Aspectos básicos de las aplicaciones web
    2. Configuración del ordenador para desarrollo de aplicaciones
    3. Solución de problemas de conexiones a bases de datos
    4. Eliminación de secuencias de comandos de conexión en Dreamweaver
    5. Diseñar páginas dinámicas
    6. Introducción a las fuentes de contenido dinámico
    7. Definir fuentes de contenido dinámico
    8. Añadir contenido dinámico a las páginas
    9. Cambio de contenido dinámico en Dreamweaver
    10. Visualización de registros de bases de datos
    11. Proporcionar datos en vivo y solucionar sus problemas en Dreamweaver
    12. Añadir comportamientos de servidor personalizados en Dreamweaver
    13. Crear formularios con Dreamweaver
    14. Uso de formularios para recopilar información de los usuarios
    15. Crear y activar formularios de ColdFusion en Dreamweaver
    16. Crear formularios web
    17. Compatibilidad mejorada con HTML5 para elementos de formulario
    18. Desarrollar un formulario con Dreamweaver
  17. Creación visual de aplicaciones
    1. Creación de las páginas maestra y de detalles en Dreamweaver
    2. Crear páginas de búsqueda y resultados
    3. Crear una página de inserción de registros
    4. Crear una página de actualización de registros en Dreamweaver
    5. Creación de páginas de eliminación de registros en Dreamweaver
    6. Usar comandos ASP para modificar una base de datos en Dreamweaver
    7. Crear una página de registro
    8. Crear una página de inicio de sesión
    9. Creación de una página para acceso exclusivo de usuarios autorizados
    10. Protección de carpetas en ColdFusion con Dreamweaver
    11. Uso de componentes de ColdFusion en Dreamweaver
  18. Prueba, vista previa y publicación de sitios web
    1. Vista previa de páginas
    2. Vista previa de páginas web de Dreamweaver en varios dispositivos
    3. Comprobación del sitio de Dreamweaver
  19. Solución de problemas
    1. Problemas resueltos
    2. Problemas conocidos

 

 

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

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
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:
  1. Haga clic en Cargar PSD en el panel Extract.
  2. En la ventana del Finder, haga clic en Opciones y seleccione *.psd en la lista desplegable que aparece.
  3. 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.

  1. Seleccione Editar > Preferencias (Windows) o Dreamweaver > Preferencias (Mac).

  2. Seleccione Extract en la lista Categoría.

  3. (Opcional) Cambie el formato predeterminado en el que deberán extraerse las imágenes.

    Formato de la imagen extraída en Dreamweaver
    Formato de la imagen extraída

  4. (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
    Extract para dispositivos

  5. (Opcional) Haga clic en Borrar caché para eliminar los datos de caché relativos al uso de Extract.

  6. Haga clic en Aplicar y cierre el cuadro de diálogo Preferencias.

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

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

  2. 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
    Opción Copiar CSS en el panel Extract

    Para copiar CSS, seleccione las propiedades que desee copiar y luego haga clic en Copiar CSS. 

  3. 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:

  1. Abra una fuente de CSS asociada a su documento o active la Vista de código de un documento HTML.

  2. En el panel Extract, haga clic en el archivo PSD correspondiente y luego en el elemento en cuestión en la composición.

  3. En el documento, sitúe el punto de inserción en la ubicación deseada en el código. 

  4. 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
    Sugerencias de código con una propiedad CSS de un elemento en un archivo PSD

  5. 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 en Dreamweaver CC
    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.

Opción Copiar texto en el panel Extract
Opción Copiar texto en el panel Extract

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.

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

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

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

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

  1. 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
    Medidas en el panel Extract

    Nota:

    Para ver las medidas en porcentajes, haga clic en un elemento y después en el porcentaje.

  2. Haga clic en el valor correspondiente para copiarlo en el portapapeles.

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

  1. En el panel Extract, haga clic en Estilos.

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

  3. 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
    Extracción de degradado

 Adobe

Obtén ayuda de forma más rápida y sencilla

¿Nuevo usuario?

Adobe MAX 2024

Adobe MAX
La conferencia de creatividad

Del 14 al 16 de octubre en Miami Beach y en línea

Adobe MAX

La conferencia de creatividad

Del 14 al 16 de octubre en Miami Beach y en línea

Adobe MAX 2024

Adobe MAX
La conferencia de creatividad

Del 14 al 16 de octubre en Miami Beach y en línea

Adobe MAX

La conferencia de creatividad

Del 14 al 16 de octubre en Miami Beach y en línea