Nota:

esta función ya no está disponible en la versión actual de Photoshop CC. La información incluida en este artículo es aplicable a versiones anteriores de Photoshop.

Importante: espacio de diseño (previsualización) precisa Mac OS X 10.10, Windows 8.1 de 64 bits o versiones posteriores.

Primeros pasos

Espacio de diseño (previsualización) es una aplicación para diseñadores de aplicaciones y sitios web que se complementa a la perfección con Photoshop. Técnicamente, Espacio de diseño (previsualización) es una capa HMTL5/CSS/JS integrada en Photoshop. Al separar esta aplicación de la interfaz estándar de Photoshop, no solo obtenemos una IU nueva, sino que también se agilizan las interacciones y es posible distribuir las funciones más solicitadas mucho más rápido. 

Actualmente, Espacio de diseño es una previsualización de tecnología. Si quiere ayudarnos a convertirlo en la experiencia que usted necesita; envíe sus comentarios a @psdesign.

Puede ver una lista de los problemas conocidos de esta versión en Principales problemas conocidos.

Nota:

en github encontrará el código fuente de Espacio de diseño (previsualización).

Cambiar al Espacio de diseño (previsualización)

En Photoshop, siga uno de estos procedimientos:

  • Seleccione Ventana > Espacio de diseño (previsualización).
  • En el menú emergente de selección del espacio de trabajo, en la esquina superior derecha de la pantalla, elija Espacio de diseño (previsualización).

Nota:

espacio de diseño (previsualización) está habilitado de forma predeterminada. En el caso hipotético de que no estén disponibles las opciones para cambiar a dicho espacio, compruebe que está seleccionada la opción Activar espacio de diseño (previsualización) en Preferencias > Previsualizaciones de tecnología.

Activación de Espacio de diseño en Photoshop
Seleccione el espacio de trabajo Espacio de diseño (previsualización)

Nota:

tras cambiar a Espacio de diseño (previsualización), seleccione Ayuda > Espacio de diseño y aparecerá un tutorial rápido acerca de sus funciones y funcionalidades. Dicha introducción aparece automáticamente al abrir Espacio de diseño (previsualización) por primera vez.

Introducción a la opción Espacio de diseño (previsualización)

Interfaz de usuario de Espacio de diseño en Photoshop
Espacio de diseño (previsualización) IU

A. Barra de herramientas B. Propiedades C. Capas y bibliotecas D. Contraer o expandir columnas 

Nota:

Pulse Cmd/Ctrl y haga clic en los iconos marcados como D para cambiar rápidamente entre las columnas Propiedades y Capas y bibliotecas.

Paneles de Espacio de diseño de Photoshop
Vista detallada de las funciones disponibles

Ajuste de la interfaz

  • Si fuera necesario, puede maximizar su espacio de trabajo y reunir las propiedades, capas y bibliotecas en una sola columna. Seleccione Ventana > Modo de columna única.
Ventana Modo de columna única de Photoshop
Modo de columna única

  • Si se fía ciegamente de los métodos abreviados de teclado, puede optar por ocultar la barra de herramientas. Anule la selección de Ventana > Fijar barra de herramientas.

Creación de documentos

Existen varias maneras de crear un documento con la opción Espacio de diseño (previsualización).

  1. Seleccione Archivo > Nuevo o utilice las teclas del método abreviado de teclado Cmd/Ctrl+N. Espacio de diseño (previsualización) crea rápidamente un documento con una sola mesa de trabajo que utiliza la plantilla para iPhone 6.
  2. Seleccione Archivo > Nuevo… para abrir el cuadro de diálogo Nuevo. Especifique la información pertinente y haga clic en "OK".

    Para obtener más información, consulte Creación de una imagen y Creación de un documento de mesa de trabajo.
  3. Elija Archivo > Nuevo a partir de una plantilla y seleccione una de las plantillas siguientes:
Plantillas disponibles de Photoshop

Adición de una mesa de trabajo a un archivo de Espacio de diseño (previsualización)

  1. En la interfaz de Espacio de diseño (previsualización), realice una de las acciones siguientes:
  • Seleccione Capa > Crear nueva mesa de trabajo. Espacio de diseño (previsualización) añadirá una mesa de trabajo de dimensiones predeterminadas al documento.
  • Para añadir una mesa de trabajo para un dispositivo concreto, seleccione Capa > Nueva mesa de trabajo y, a continuación, elija un ajuste preestablecido. Por ejemplo, seleccione Capa > Nueva mesa de trabajo > iPad Pro.
  1. Añada los elementos de diseño a la nueva mesa de trabajo.

Nota:

también puede añadir mesas de trabajo al documento haciendo clic en los iconos + que aparecen junto a las mesas que se encuentran actualmente en el documento. Dichos iconos aparecen si se ha seleccionado una mesa de trabajo existente y se pueden incluir mesas de trabajo adicionales en el lienzo.

Herramientas

Las siguientes herramientas están disponibles en Espacio de diseño (previsualización):

Herramientas de Espacio de diseño de Photoshop
Herramientas

Nota:

la primera letra indica el método abreviado de teclado para utilizar la herramienta. Por ejemplo, el método abreviado de teclado para usar la herramienta Rectángulo es R.

Seleccione

La nueva herramienta Seleccionar es especial porque además de llevar a cabo las tareas de selección habituales, le permite desplazarse rápidamente por las jerarquías de capas y mesas de trabajo.

  • Para explorar un grupo anidado o una jerarquía de capas, haga doble clic en él con la herramienta Seleccionar activada.
  • Pulse "Esc" para subir un nivel en la jerarquía.

Rectángulo y elipse

Dibujar formas. Estas herramientas funcionan de forma muy parecida a como funcionan en la interfaz estándar de Photoshop.

Texto

Crea una capa de texto.

Pluma

Funciona de manera muy parecida a como funciona la herramienta Pluma en la interfaz estándar de Photoshop.

Nota:

cuando esté modificando la anchura, la altura o alguna otra propiedad numérica de un objeto, puede especificar operaciones matemáticas para obtener valores más precisos. Por ejemplo, 500/3 o 20*4.

Muestras

Herramienta de muestras avanzada. Permite copiar colores, efectos y otros atributos. Siga estos pasos:

  1. Seleccione el objeto en el que desee copiar un atributo. Por ejemplo, seleccione un rectángulo.
  2. Elija la herramienta Muestras.
  3. Haga lo siguiente con el objeto del que quiere copiar el atributo:

    Clic: se copia el color
    Mayús+clic: se copian los efectos
    Barra espaciadora: se abre una pantalla para mostrar los atributos que puede muestrear. Siempre que proceda, entre estos atributos se incluye la fuente.

Copia de un atributo en Photoshop
Haga clic en el atributo que desea copiar

Búsqueda de documentos, comandos y mucho más

Espacio de diseño (previsualización) incluye una exhaustiva función de búsqueda con la que podrá buscar los siguientes elementos (entre otros):

  • Comandos de menú
  • Apertura de documentos
  • Documentos recientes
  • Capas, capas de píxeles, capas de ajuste, capas de grupos, capas vectoriales y capas de texto
  • Mesas de trabajo
  • Bibliotecas (todas o una en concreto)
  • Objetos inteligentes
  • Estilos
  • Gráficos
  • Ajustes preestablecidos

Al buscar, puede filtrar los resultados de la búsqueda, de forma que solo incluyan un tipo específico de elementos.

Siga estos pasos:

  1. Seleccione Edición > Buscar para invocar la funcionalidad de búsqueda. Como alternativa, presione Ctrl/Cmd + F o haga clic en el icono de Buscar a la izquierda de la barra del título.
Funcionalidad de búsqueda de Photoshop
Funcionalidad de búsqueda exhaustiva

Búsqueda filtrada de Photoshop
Búsqueda filtrada; en este ejemplo, estamos buscando dentro de las Bibliotecas de Creative Cloud

Creación rápida de máscaras vectoriales para capas

Espacio de diseño (previsualización) facilita en gran medida la tarea de crear máscaras para las imágenes de un proyecto.

  1. Seleccione una capa en el panel Capas.
  2. Haga clic en el icono del modo Máscara () en la barra de la parte superior de Espacio de diseño. Si lo prefiere, puede presionar M para utilizar el método abreviado de teclado. Cuando está activado el modo Máscara, la flecha de la herramienta Seleccionar () se vacía y el icono del modo Máscara se vuelve de color azul.
  3. Con herramientas tales como Pluma y Rectángulo, dibuje una máscara para la imagen.
  4. Cuando haya terminado de crear la máscara, salga del modo Máscara de una de las siguientes maneras:
  • Haga clic en el icono del modo Máscara ().
  • Pulse Esc.
  • Presione el método abreviado de teclado del modo Máscara (M).

Gestión y organización de objetos

Creación de guías

Cree guías en Espacio de diseño (previsualización) para trabajar con mayor precisión con los elementos de diseño.

  1. Asegúrese de que la opción Ver > Mostrar guías está seleccionada.
  2. Haga clic en la herramienta Seleccionar y pase el puntero del ratón sobre el borde del área de trabajo. Observe el resaltado de color azul, que indica que es posible crear una guía.
  3. Haga clic y arrastre una guía.

    Si está seleccionada una mesa de trabajo o una capa dentro de una mesa de trabajo, se creará una guía específica de la mesa de trabajo. Dicha guía se muestra únicamente cuando se han seleccionado la mesa de trabajo y sus subcapas. Si no se selecciona ninguna mesa de trabajo o capa dentro de una mesa de trabajo, se creará una guía específica del documento.

Distribución de objetos

  1. Seleccione tres o más capas.
  2. Seleccione Organizar > Distribuir objetos y elija un comando. Como alternativa, seleccione un botón de distribución del panel Distribuir y Alineación.
  • Horizontal    Espacia de manera equidistante las capas a partir del centro horizontal de cada capa.
  • Vertical    Espacia de manera equidistante las capas a partir del centro vertical de cada capa.

Alineación de objetos

  1. Seleccione dos o más capas.
  2. Seleccione Organizar > Alinear objetos y elija un comando. Como alternativa, seleccione un botón de alineación del panel Distribuir y Alineación.
  • Izquierda    Alinea el píxel izquierdo de las capas seleccionadas con el píxel izquierdo de la capa situada más a la izquierda
  • Centro    Alinea el píxel del centro horizontal de las capas seleccionadas con el píxel del centro horizontal de todas las capas seleccionadas
  • Derecha    Alinea el píxel derecho de las capas enlazadas con el píxel situado más a la derecha de todas las capas seleccionadas
  • Superior    Alinea el píxel superior de las distintas capas seleccionadas con el píxel superior de todas las capas seleccionadas
  • Medio    Alinea el píxel del centro vertical de cada capa seleccionada con el píxel del centro vertical de todas las capas seleccionadas
  • Inferior    Alinea el píxel inferior de las distintas capas seleccionadas con el píxel inferior de todas las capas seleccionadas

Transformación de objetos

Puede aplicar transformaciones en una sola capa o en varias capas. Para realizar una transformación, primero seleccione un elemento para transformarlo y, a continuación, seleccione un comando de transformación. Cuando esté modificando la anchura, la altura o alguna otra propiedad numérica de un objeto, puede especificar operaciones matemáticas para obtener valores más precisos. Por ejemplo, 500/3 o 20*4.

Rotar

  1. Seleccione Capa > Transformar y elija un comando.
  • Rotar 180   Rota el elemento 180 grados
  • Rotar a la derecha    Rota el elemento 90 grados hacia la derecha
  • Rotar a la izquierda   Rota el elemento 90 grados hacia la izquierda
  1. También puede rotar un objeto directamente en el lienzo. Seleccione un objeto y pase el puntero del ratón por la esquina; el widget cambiará para que sea posible rotarlo.
Rotación de un objeto en Photoshop
Rotación de un objeto en el lienzo

Voltear

  • Seleccione un comando de volteo en el menú Organizar.  
    • Voltear horizontal   Voltea el elemento horizontalmente
    • Voltear vertical    Voltea el elemento verticalmente
    • Intercambiar posición   Intercambia la posición de dos capas o grupos seleccionados

Cambio de la apariencia de los objetos

Puede realizar cambios en el objeto modificando las opciones disponibles en el panel Apariencia.

Opacidad

La opacidad global de una capa determina el grado en que ésta oculta o muestra la capa situada debajo. Una capa con un 1% de opacidad es casi transparente, mientras que una capa con un 100% de opacidad es completamente opaca.

  1. En el panel Capas, seleccione una o varias capas.
  2. Especifique un valor de opacidad en el panel Apariencia.

Modo de fusión

El modo de fusión de una capa determina cómo los píxeles de esa capa se fusionan con los píxeles subyacentes de la imagen. Puede crear varios efectos especiales mediante los modos de fusión.

  1. En el panel Capas, seleccione una o varias capas.
  2. Elija uno de los siguientes modos de fusión en el panel Apariencia:
  • Normal
  • Disolver
  • Oscurecer
  • Aclarar
  • Trama
  • Superponer
  • Multiplicar
  • Subexponer color
  • Subexposición lineal
  • Color más oscuro

Si utiliza cualquier otro modo de fusión en la interfaz estándar de Photoshop, ese modo de fusión se aplica también en el espacio de diseño (previsualización).

Para obtener más información sobre la función de cada modo de fusión, consulte Modos de fusión.

Texto

  1. En el panel Capas, seleccione la capa de texto.
  2. Especifique la siguiente configuración en el panel Apariencia:
  • Fuente   Defina la fuente en la lista desplegable.
  • Grosor   Defina el grosor de la fuente seleccionada.
  • Color de texto Seleccione el color de texto de una de las formas siguientes:
  • Tamaño   Define el tamaño del texto seleccionado.
  • Letra    Define el espacio entre letras.
  • Línea   Define el espacio entre líneas.
  • Alinear   Alinea el texto a la izquierda, en el centro, a la derecha o lo justifica.

Vector

Con la ayuda de las herramientas de vectores, puede utilizar las opciones Añadir, Restar, Formar intersección o Excluir para modificar las formas actuales de una capa o combinar una o varias capas de formas seleccionadas.

  1. En el panel Capas, seleccione las capas que desea combinar.
  2. Seleccione Capas > Combinar y, a continuación, elija una de las siguientes opciones:
  • Unir forma    Añade un área nueva a las formas o trazado existentes
  • Restar forma    Elimina el área superpuesta de las formas o trazados actuales
  • Formar intersección con formas    Restringe el área a la intersección de la nueva área con las formas o el trazado existentes
  • Forma diferencial    Excluye el área superpuesta de las áreas consolidadas nuevas y existentes

Rellenar

  1. En el panel Capas, seleccione una o varias capas.
  2. Abra el selector de color de relleno en el panel Apariencia y, a continuación, especifique un color de una de las siguientes maneras:
  1. Especifique el valor alfa para definir la opacidad del color de relleno.

Trazo

  1. En el panel Capas, seleccione una o varias capas.
  2. Abra el selector de color de trazo en el panel Apariencia y, a continuación, especifique un color de una de las siguientes maneras:
  1. Especifique el valor alfa para definir la opacidad del color del trazo.
  2. Especifique el tamaño del trazo.
  3. Especifique la alineación del trazo como Interior, Centro o Exterior en el menú desplegable.

Aplicación de efectos de capa

  1. En el panel Capas, seleccione una o varias capas.
  2. En el panel Efectos, haga clic en el icono + para añadir un trazo, una superposición de color, una sombra paralela o una sombra interior.

Trazo

Añade un efecto de trazo a la capa seleccionada.

Superposición de color

Rellena el contenido de la capa con un color.

Sombra paralela

Añade una sombra que se sitúa detrás del contenido de la capa.

Sombra interior

Añade una sombra que se sitúa justo dentro de los bordes del contenido de la capa, lo que proporciona a la capa un aspecto hueco.

  1. Especifique los ajustes correspondientes del efecto. 
  • Para las superposiciones de color, puede especificar un modo de fusión. Para obtener más información sobre la función de cada modo de fusión, consulte Modos de fusión.
  • Para las sombras interiores y paralelas, puede especificar los siguientes ajustes:
    • Modo de fusión
    • Las coordenadas X e Y de la sombra
    • Hasta qué punto desea que se desenfoque la sombra
    • La extensión de la sombra. La configuración del pliego expande los límites de la sombra antes del desenfoque.

Integración de Bibliotecas de Creative Cloud

Ahora puede utilizar las Bibliotecas de Creative Cloud para organizar, ver y compartir sus recursos desde la interfaz de Espacio de diseño (previsualización). El trabajo con bibliotecas en Espacio de diseño (previsualización) es similar al de la interfaz estándar de Photoshop. Para obtener más información, consulte los siguientes recursos:

Exportación de recursos

Puede exportar mesas de trabajo, capas, grupos de capas o documentos completos como recursos PNG, JPEG, SVG o PDF directamente desde la interfaz de Espacio de diseño (previsualización).

  1. En el panel Exportar, haga clic en + para especificar los ajustes de exportación de las capas seleccionadas de las que desee generar los recursos.
  2. Especifique la escala, el sufijo y el formato del recurso que desee exportar.
  3. Si fuera necesario, haga clic en + para especificar la configuración de más recursos.
  4. Haga clic en el icono para guardar los recursos generados en su equipo.

Nota:

haga clic en el icono para añadir rápidamente todos los tipos de recursos disponibles y relevantes para dispositivos iOS. Del mismo modo, haga clic en el icono para añadir rápidamente todos los tipos de recursos relacionados con las pantallas HiDPI.

Nota:

al exportar varios objetos como recursos, para mayor comodidad, Espacio de diseño sigue el orden del lienzo de los objetos en lugar del orden Z del panel Capas. También puede especificar varios ajustes de exportación. Para ello, seleccione varias capas y expórtelas de forma simultánea a través de Archivo > Exportar o haciendo clic en el icono de Exportar de la barra de título superior.

Principales problemas detectados en esta versión

  • Si introduce un valor de transformación negativo en un objeto inteligente enlazado a una biblioteca, obtendrá un error como resultado. Si introduce un número negativo en el campo Anchura o Altura, se producirá un error interno en Espacio de diseño (previsualización) y la capa dejará de estar visible en el lienzo, no se podrá seleccionar y los controles dejarán de responder.

    Solución: seleccione Ventana > opción para volver a la interfaz estándar de Photoshop y la opción para dar un paso atrás en el historial hasta que la capa vuelva a estar visible en el lienzo.
  • Si se utiliza la herramienta Muestras por segunda vez en el mismo objeto inteligente enlazado a una biblioteca después de deshacer el primer intento, se obtiene un error como resultado.

    Solución: deshaga la acción dos veces antes de muestrear por segunda vez.
  • Abrir un archivo de Illustrator (Importar PDF) da lugar a un error.

    Solución: seleccione Ventana > opción para volver a la interfaz estándar de Photoshop. Luego, regrese a Espacio de diseño (previsualización).
  • En ocasiones, un objeto inteligente enlazado a una biblioteca tiene habilitada la función Intercambiar únicamente cuando solo hay una capa seleccionada.

    Solución: para corregir el problema, haga clic en el icono de Intercambiar.
  • Al crear una forma en la interfaz estándar de Photoshop y tenerla seleccionada al cambiar a Espacio de diseño (previsualización), cambian los ajustes de relleno y trazo de la forma.

    Solución: anule la selección de la forma antes de abrir Espacio de diseño o haga clic en Deshacer antes de entrar en dicho espacio.
  • Al intentar exportar en el modo de edición de texto, se produce un error y se desactiva el icono del panel Exportar.

    Solución: utilice el comando de menú o el icono de exportación del encabezado del documento. Si vuelve a la interfaz estándar de Photoshop y luego a Espacio de diseño (previsualización), se reactivará el icono del panel Exportar.
  • Si no hay ninguna capa seleccionada, al crear una forma con la herramienta Pluma se coloca dicha forma fuera de la mesa de trabajo en el panel Capas pero dentro de la mesa en el lienzo.

    Solución: tras crear la forma, haga clic en la herramienta Seleccionar y desplácela (pulse una tecla de flecha del teclado).
  • Si deshace la acción tras crear una máscara de capa, se observa que se ha aplicado toda una máscara a la capa. Por este motivo, da la impresión de que no hay ninguna máscara aplicada a la capa. Sin embargo, el icono del panel Capas sigue mostrando que la capa tiene una máscara, aunque no es así.

    Solución: realice la acción de Deshacer dos veces.
  • Tras crear un primer trazado, los siguientes se crean sin las teclas modificadoras. Si se elimina el primer trazado dibujado, dicha acción se interpreta como una resta.

    Solución: mantenga pulsada la tecla Mayús antes de empezar a dibujar.
  • Problemas al resaltar capas. Si no hay ninguna capa seleccionada, al pasar el puntero sobre las capas éstas no se resaltan. El modificador Cmd/Ctrl tampoco funciona. Si se selecciona una capa, el modificador Cmd/Ctrl solo muestra las guías inteligentes, pero no el resaltado (azul) de Espacio de diseño (previsualización).
  • (Solo en Windows) De momento no se puede utilizar la trackpad para hacer un barrido por el lienzo.
  • Las coordenadas X e Y son incorrectas después de mover la mesa de trabajo al lienzo.
  • Al quitar una capa de una mesa de trabajo y volver a colocarla, se corrompen las coordenadas X e Y de dicha capa.
  • Eliminar la primera máscara en un documento donde hay varias da lugar a la inversión o sustracción de una máscara.
  • Los números no están correctamente localizados. En lugar de una coma aparece un punto.
  • Exportar recursos desde un estado de herramienta modal da lugar a un error.  

Trucos y sugerencias

  • Puede cambiar rápidamente el color de fondo de la zona de trabajo. Haga clic con el botón derecho del ratón fuera de las mesas de trabajo u otro contenido de la zona de trabajo y, a continuación, seleccione un color.
Menú contextual de Photoshop para cambiar color de fondo
Cambio del color de fondo de la zona de trabajo

  • Utilice los siguientes métodos abreviados de teclado para alternar entre la interfaz estándar de Photoshop y Espacio de diseño (previsualización):
    • Cmd+Ctrl+` (Mac)
    • Alt+Ctrl+` (Windows)
  • Haga doble clic en el nombre de la capa en el panel Capas para cambiar su nombre.
  • Haga doble clic en el lienzo para explorar en profundidad la jerarquía de capas. Pulse Esc para volver a la selección de capa y anular la selección de las capas del nivel superior.
  • Al hacer doble clic en una capa del lienzo (Texto o Vector) volverá al modo de edición. Si pulsa Esc saldrá del modo de edición.
  • Las capas o grupos activos están resaltados en color azul.
  • Haga clic en el icono + al lado de una mesa de trabajo seleccionada en el documento para añadir una mesa de trabajo nueva.
  • Las capas de vectores y píxeles presentan manejadores de transformación para cambiar el tamaño y rotar; las capas de texto no tienen manejadores.

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