Esta guía te recorre el Design Studio para que sepas dónde está cada cosa antes de empezar a construir. Es para cualquiera que abra el editor por primera vez. Al final reconocerás la barra de iconos, el lienzo, la barra superior, la barra de herramientas flotante y los controles de zoom, y sabrás qué hace cada uno.
Para qué sirve el Design Studio
El Design Studio es donde construyes una plantilla de producto. Colocas texto, imágenes, formas y otros elementos en un lienzo y luego decides cuáles puede cambiar un cliente en la tienda.
El lienzo representa el área de diseño activa. Comprueba las dimensiones reales de la superficie del producto, el sangrado, las fuentes y el resultado de producción previsto antes de fiarte de una vista previa en pantalla como diseño listo para imprimir.
Puedes abrir el Design Studio de dos formas. Ábrelo desde un producto para editar el diseño de ese producto, o abre un diseño independiente y asócialo a un producto más tarde.
La barra de iconos de la izquierda
La barra de iconos recorre el borde izquierdo del editor. Es la forma de cambiar entre las herramientas y los paneles que más usas.
Los elementos de la barra aparecen en este orden:
- Elementos: añade texto, formas, gráficos y subidas.
- Capas: mira y reordena todo lo que hay en el lienzo.
- Plantillas: empieza desde un diseño reutilizable o guarda uno.
- Caras: cambia entre las caras del producto, copia un diseño de una a otra y define fondos. Dice Tamaños en un producto que se vende en varios tamaños, y Páginas en un libro.
- Opciones: elige cómo ven los clientes las variantes y los complementos del producto. Sus opciones, precios y fotos se quedan en la página del producto. Haz clic en un elemento para abrir su panel; el elemento en el que has hecho clic conserva una tarjeta blanca. Apoya el puntero en otro elemento para previsualizar su panel: ese elemento se vuelve gris mientras miras, al alejarte vuelve el panel en el que hiciste clic, y un clic mantiene la vista previa. Haz clic de nuevo en el elemento activo para cerrar el panel.
Un lienzo vacío muestra por dónde empezar: Texto, Foto y Gráficos añaden uno al instante, Añadir elementos abre el panel con todo lo demás, y Fondo define el color detrás de tu diseño.
Para buscar, usa el cuadro de búsqueda de la parte superior de Elementos, o pulsa Ctrl+K (Cmd+K en Mac) para buscar acciones y las capas de tu diseño. Las opciones de visualización del lienzo, como la cuadrícula, el ajuste, las reglas y las guías de impresión, están en Archivo › Vista.
La barra superior, la barra de herramientas flotante y la barra de estado
Tres controles rodean el lienzo: la barra superior encima, una barra de herramientas flotante justo debajo de la barra superior, y la barra de estado a lo largo de la parte inferior.
La barra superior
La barra superior contiene la navegación y los controles de guardado. De izquierda a derecha tienes:
- Una flecha Atrás para salir del editor.
- Un menú Archivo.
- El título del diseño en el centro, en el que puedes hacer clic para cambiarle el nombre en el mismo sitio, y a su lado si el producto está en tu tienda.
- Una píldora Deshacer y Rehacer. Después, cuando algo necesita atención, el número de avisos (caras vacías, fotos de baja resolución) y las fuentes que no se cargaron. Haz clic en los avisos para ver la lista.
- Un botón Guardar a la derecha. Dice Guardar cuando tienes cambios sin guardar, Guardando mientras se almacena tu trabajo y Guardado cuando ha terminado. Si el guardado falla, aparece un mensaje de error bajo la barra superior.
El panel del formulario del cliente, que se abre desde la pestaña del borde derecho del lienzo, muestra el formulario que rellenan los clientes. Vista previa te permite probarlo como un cliente. Editar muestra el mismo formulario con un pequeño tirador y un lápiz en cada campo cuando apuntas a él: arrastra el tirador para mover el campo hacia arriba o hacia abajo, o haz clic en el lápiz para abrir los ajustes de ese campo. La flecha circular, Restablecer el formulario, devuelve los campos a los valores predeterminados del diseño, y ⋯ abre los ajustes propios del formulario, como su diseño, los pasos y el orden de los campos, en el panel Customizer de la barra izquierda. Para ver el personalizador del cliente a tamaño completo, en su propia ventana, elige Archivo › Vista previa del cliente. Comprueba por separado el flujo publicado que ve el cliente.
El editor solo guarda. Tu diseño sale en vivo desde la página del producto, donde publicas el producto.
La barra de herramientas flotante
Una barra de herramientas flotante está entre la barra superior y el lienzo. Siempre tiene las mismas partes:
- Editar, primero para cada elemento, que abre su panel de propiedades. Úsalo cuando haya otro panel abierto, como Capas.
- Unos pocos botones rápidos para lo que más haces con el elemento seleccionado. El texto recibe su fuente, tamaño, color, negrita y alineación. Una foto recibe Reemplazar, Recortar y Efectos. Un mapa muestra su lugar. Un botón que nombra un ajuste, como el lugar, abre el panel de propiedades justo en él.
- Personalizable, que indica si los clientes pueden cambiar el elemento y lo activa o desactiva. Dice Hacer personalizable mientras está desactivado, y se omite en los elementos que los clientes no pueden cambiar.
- Más, el ⋯ del final, con el mismo menú que un clic derecho: duplicar, bloquear, orden de las capas, voltear y eliminar.
Un elemento bloqueado muestra solo Bloqueado y, cuando lo bloqueaste tú mismo, Desbloquear. Varios elementos seleccionados reciben Alinear, Distribuir y Agrupar. Con nada seleccionado, la barra de herramientas muestra el color de fondo y el tamaño del lienzo. Mientras recortas una foto, la barra de herramientas se sustituye por Restablecer, Cancelar y Listo.
La barra de estado
La barra de estado recorre la parte inferior del editor, con las caras del producto en el centro. A la derecha, de izquierda a derecha:
- El porcentaje de zoom. Haz clic en él para ajustar el lienzo a la pantalla, cada vez que se salga de la vista o quieras centrarlo de nuevo. Apunta a él y se abren un botón Alejar y un botón Acercar a cada lado.
- Ayuda, el ?, con Atajos de teclado y Ayuda y chat. Ayuda y chat abre el chat de soporte, que no tiene botón flotante en el editor.
Que los tamaños se muestren en milímetros (mm) o en píxeles (px) es un ajuste de vista: Archivo › Vista › Unidades.
Siguiente
Ahora que conoces la disposición, añade y da estilo al texto para colocar tu primer elemento en el lienzo.