Aprenda a convertir rápidamente los PSD en diseños web basados en HTML de sitios móviles y de escritorio. Extracción de CSS, imágenes, medidas, fuentes, colores, degradados y mucho más de Photoshop directamente en Dreamweaver.

Nota:

  Typekit se llama ahora Adobe Fonts y viene incluido con Creative Cloud y otras suscripciones. Más información.

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 mediciones directamente en su página web. Además de estas funciones principales de Extract, Dreamweaver también ofrece las siguientes funciones únicas:

extract_logo
  • 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 desde el panel Extract en Dreamweaver. Lea los siguientes temas para obtener más información sobre el panel y el espacio de trabajo de Extract, y sobre la carga de archivos PSD en el panel Extract:

Espacio de trabajo y panel 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 su uso futuro.

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, el panel Extract mostrará un tutorial interactivo que le presentará los flujos de trabajo. Puede utilizar la lista desplegable en la parte superior del panel para cambiar entre los distintos tutoriales.

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 desde el 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, haga clic en el icono Cargar PSD en el panel Extract. Si otra persona o equipo desarrollan las composiciones PSD, estas pueden compartirse en Creative Cloud. Luego podrá descargar los archivos y cargarlos directamente en su cuenta mediante el inicio de sesión en Creative Cloud o a través del panel Extract en Dreamweaver.

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 ficha Capas o la lista desplegable Composición de capas para mostrar u ocultar elementos en el archivo PSD.

Ya está todo listo para transformar la composición PSD en un sitio web. 

Configuración de preferencias en Extract

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

  1. Seleccione Edición > Preferencias (Windows) o Dreamweaver > Preferencias (Mac).

  2. Seleccione Extract en la lista Categoría.

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

    Formato de imagen extraído en Dreamweaver CC
    Formato de la imagen extraída
  4. (Opcional) En la sección de Extract para dispositivos, seleccione las resoluciones deseadas. Esta configuración se usará cuando elija guardar 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 independientes, haga clic en la fila correspondiente de la columna Carpeta y especifique 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, a continuación, el cuadro de diálogo Preferencias.

  7. Para ver los cambios en el panel Extract, recargue 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 utilizar estas 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 requerido. 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 necesario. Aparecerá una ventana emergente con una lista de propiedades CSS del elemento, que le proporcionará la opción de seleccionarlas y copiarlas. Puede visualizar la anchura y altura del elemento seleccionado tanto en píxeles como en porcentajes.

    Nota: si aquí selecciona porcentaje, las medidas también se mostrará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 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 selector necesario y haga clic en Pegar estilos.
    • Para pegar el CSS mediante la Visualización de elementos, haga clic con el botón derecho en un selector y, a continuación, 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, siga los siguientes pasos:

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

  2. En el panel Extract, haga clic en el archivo PSD requerido y luego, en el elemento necesario 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 contengan las propiedades CSS del elemento seleccionado en la composición PSD. Haga clic en la propiedad CSS necesaria para insertar 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.

    Propiedades CSS de inserción por lotes en Dreamweaver CC
    Inserción por lotes de propiedades CSS

Copiado de 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. A continuación, puede pegar el texto en el lugar necesario.

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 una mesa de trabajo específica, simplemente haga clic en el nombre de la misma. Para reducirla, 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. Para los documentos sin guardar, se le pedirá que primero guarde el documento.

También puede guardar la imagen en su disco local y llamarlo desde su página web en el futuro. Además, si está diseñando 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 desde el que descargará las imágenes.

  2. Haga clic en la imagen deseada en el archivo PSD.

    Nota:

    Utilice la ficha 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 contiene varias capas, puede seleccionar una capa individual de la imagen para extraerla.

    Tenga en cuenta que las sugerencias de código emergen en la Vista de código a la derecha del espacio de trabajo. 

  3. Para importar varias imágenes, mantenga pulsada la tecla Mayúscula 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 y especifique 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é contener estas versiones; Dreamweaver puede guardar la imagen en varias resoluciones durante la extracción.

    Puede especificar las versiones con las resoluciones necesarias 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, aparecerán 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 medición entre dos elementos de la composición de PSD. 

  1. En el archivo PSD en el panel Extract, mantenga pulsada la tecla Mayús o la tecla Comando para hacer clic en los elementos necesarios.

    El panel Extract muestra la distancia horizontal y vertical que queda 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, a continuación, haga clic en porcentaje.

  2. Haga clic en el valor necesario 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 requerido.

      Si desea 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 que eligió.

      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 necesaria. Extract etiquetará los elementos que utilizan el color seleccionado.

      Nota: También puede elegir cualquier otro color de la composición PSD mediante el selector de colores.

    2. En la pantalla emergente que aparece al hacer clic en la muestra de color, seleccione el modelo de color necesario (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

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