Magic Canvas: diseña gráficos en tu navegador, a mano o diciéndolo

La pantalla de inicio tiene tres partes. Descríbelo y aiKit lo crea: escribe o dicta lo que necesitas (para quién es, qué debe decir, el estilo) y elige un tamaño de la lista, luego pulsa Crear mi diseño. El editor se abre y la maquetación se construye como capas reales que puedes cambiar; lo que aiKit no pudo hacer aparece primero en No hecho todavía. Datos como teléfonos, precios y direcciones solo se usan si los escribiste; si no, verás un marcador entre corchetes, como [Teléfono], para completar.

O empieza desde un tamaño en blanco: las pestañas Social, Impresión, Web y Correo muestran tamaños con una pequeña imagen de su forma (Publicación de Instagram 1080 × 1350, Historia 1080 × 1920, Volante 8.5 × 11 in, Tarjeta de presentación 3.5 × 2 in, Cartel 18 × 24 in, Banner web 1920 × 800, y los tamaños estándar de correo de 600 de ancho: encabezado 600 × 200, banner principal 600 × 300, imagen 600 × 400 y dos columnas 300 × 300, que se descargan al doble de tamaño por defecto para verse nítidos en los teléfonos). Tamaño personalizado acepta cualquier ancho y alto en píxeles o pulgadas, y para qué es; pulgadas significa impresión. Editar una foto abre una imagen de tu computadora a su tamaño original.

Mis diseños muestra los diseños que guardaste (los más recientes primero, con una imagen de cada uno), con búsqueda por nombre. Haz clic en uno para reabrirlo con todas las capas aún editables. Cada diseño tiene su propia dirección, así que puedes guardarla en marcadores o enviar el enlace a un compañero de tu cuenta.

En la parte superior: Diseños (volver a la pantalla de inicio), el nombre del diseño (haz clic para cambiarlo), su tamaño, Deshacer y Rehacer, zoom (menos, el porcentaje, más; haz clic en el porcentaje para ajustar la página), el interruptor Pro, Guardar diseño y Descargar. En un panel táctil o con la rueda del ratón, desplazar mueve la página y pellizcar (o Ctrl/⌘ + desplazar) hace zoom.

A la izquierda está la barra: Recursos, Texto, Formas, Fotos, Marca, Capas e Historial. Cada una abre su panel junto a la barra; haz clic de nuevo para cerrar el panel y dar más espacio a la página. En el centro está la página sobre una mesa gris. A la derecha están los ajustes de lo que esté seleccionado, o de la página misma si no hay nada seleccionado. Debajo de la página está la barra de IA.

Los tamaños de impresión muestran dos líneas guía que nunca se imprimen: la línea roja continua es donde se corta el papel (el corte), y la línea azul discontinua dentro de ella es el área segura. Mantén las palabras y los logotipos dentro de la línea discontinua. Los colores y fotos que deban llegar al borde del papel deben extenderse más allá de la línea roja hasta el borde exterior de la página (esos 1/8 de pulgada extra son el sangrado).

Simple es la opción predeterminada. Activa Pro para ver los valores exactos de posición y tamaño (X, Y, A, Al y giro en grados) y los modos de fusión (Multiplicar, Pantalla, Superposición y los demás) de cualquier capa. Tu elección se recuerda en este navegador.

Texto: Añade un título, un subtítulo o texto de cuerpo y luego haz doble clic sobre él en la página para escribir. Con el texto seleccionado, a la derecha encontrarás la fuente (31 fuentes en grupos: Limpias, Negritas, Condensadas, Serif, Script, Manuscritas, Divertidas, Retro), el tamaño, negrita, cursiva, subrayado, Aa (alterna entre MAYÚSCULAS y minúsculas), alineación, color (los colores de tu marca aparecen primero), espaciado entre letras, interlineado, Curva (dobla la línea en forma de arco o sonrisa) y Efectos: Contorno (con su color y grosor) y Sombra.

Formas: rectángulo, rectángulo redondeado, círculo, triángulo, estrella, línea, flecha y corazón. Al seleccionar una forma, puedes elegir el relleno (o Sin relleno), el color y grosor del borde, y el redondeo de las esquinas en rectángulos. Un rectángulo detrás del texto crea una banda de color o una etiqueta.

Fotos: Sube desde tu computadora (varias a la vez), imagen con IA (describe la imagen y pulsa Crear imagen; tarda de 20 a 40 segundos y usa tokens) o elige de tu Biblioteca de gráficos (búscala directamente en el panel). Marca muestra los colores y logotipos de los kits de marca que guardaste en Logo Kit: haz clic en un color para pintar lo seleccionado (o el fondo si no hay nada seleccionado) y en un logotipo para añadirlo.

La pestaña Color es un selector de color completo: arrastra en el cuadro para elegir saturación y brillo y en la barra para el tono, o escribe valores HEX, RGB, HSB o CMYK; alterna entre el color de primer plano y el de fondo en la parte superior; los colores de marca, los recientes y las muestras están a un clic, y el selector del sistema incluye un cuentagotas de pantalla. Al hacer clic en los cuadros de color de la parte inferior de la barra de herramientas también se abre.

Selecciona una foto para ver sus herramientas. Arreglos rápidos: Quitar fondo y Ampliar 2× funcionan gratis en tu propio dispositivo (el primer uso descarga el modelo gratuito una sola vez). Efectos Magic, también gratis en tu dispositivo: Mejora automática mide la luz y el color de la foto y ajusta el brillo, el contraste, el color y un poco de nitidez, y luego te dice qué cambió; Colores vivos da más intensidad a los colores sin que los tonos de piel parezcan pintados.

Look de color cambia el perfil de color de la foto: Natural, Verde azulado y naranja, Hora dorada, Película, Mate, Cinematográfico, Pastel, Noir y Pop. Duotono pinta la foto en dos colores (las partes oscuras en el primero y las claras en el segundo); si tienes colores de marca, empieza con ellos. Efectos de sujeto detectan el sujeto en tu dispositivo: Desenfoque de retrato difumina el fondo detrás de él, Salpicadura de color convierte el fondo en blanco y negro mientras el sujeto conserva su color, y Sticker recorta el sujeto con un borde blanco y una sombra suave.

Controles deslizantes: Viveza, Nitidez, Grano de película y Pixel art, luego Brillo, Contraste, Saturación, Calidez y Desenfoque, y filtros de un toque (B&N, Sepia, Vintage, Vívido, Frío, Cálido, Desvanecido). Restablecer ajustes devuelve los controles y filtros a su estado original. Recortar muestra un cuadro punteado: arrástralo y cámbiale el tamaño, y luego pulsa Recortar (o Cancelar). Formas coloca la foto dentro de un círculo, un rectángulo redondeado, una estrella o un corazón. Voltear la refleja.

Para cualquier capa seleccionada: Transparencia (qué tan transparente es), Posición en la página (izquierda, centro, derecha, arriba, medio, abajo, medida según el área segura en tamaños de impresión), Traer al frente, Enviar al fondo, Duplicar, Bloquear y Eliminar. Mientras arrastras, una línea roja indica cuándo la capa está centrada en la página y se ajusta a ese punto.

El panel Capas muestra todo desde arriba, con un icono para texto, foto o forma. Haz clic en un nombre para seleccionarlo, haz doble clic para cambiarle el nombre (la IA también usa estos nombres) y usa las flechas para subirlo o bajarlo, el ojo para ocultarlo o mostrarlo, y el candado para bloquearlo y evitar que se mueva por accidente.

Teclado: Supr o Retroceso elimina lo seleccionado, ⌘Z deshace, ⇧⌘Z rehace, ⌘D duplica, ⌘C y ⌘V copian y pegan, las teclas de flecha mueven ligeramente (mantén Mayús para pasos más grandes), Esc quita la selección. En Windows usa Ctrl en lugar de ⌘.

Recursos es el primer botón de la barra izquierda, y la pantalla de inicio tiene el mismo cuadro bajo Descríbelo (Añade tu logotipo, fotos o un diseño para igualar). Añade hasta 6 imágenes: arrástralas al cuadro, pégalas (⌘V o Ctrl+V en cualquier parte de la página), pulsa Subir o pulsa Biblioteca de gráficos para elegir las que ya tienes (haz clic en una imagen para añadirla y vuelve a hacer clic para quitarla). Cada archivo subido se guarda en tu Biblioteca de gráficos, en la carpeta Magic Canvas/Assets, para que esté disponible en cualquier herramienta más adelante.

Cada recurso tiene un nombre que puedes cambiar y un tipo: Logotipo (se coloca en el diseño), Foto (se usa en el diseño), Producto (se destaca en grande) o Estilo a imitar (nunca se coloca; aiKit copia su aspecto: colores, el carácter de las fuentes, la disposición y el ambiente). aiKit analiza de verdad cada recurso con cada solicitud que haces, así que “usa mi logotipo”, “pon la foto del producto a la izquierda” o “haz que se parezca al volante que añadí” funcionan con palabras sencillas. El + de un recurso lo coloca tú mismo en la página; la × lo quita de la lista (sigue en tu Biblioteca de gráficos).

Debajo de la página, una pequeña fila muestra lo que aiKit usará con tu próxima solicitud: Ve 3 recursos (haz clic para abrir Recursos) y el estilo en uso, si hay alguno. Cuando cambias un diseño, aiKit también recibe una imagen de cómo se ve la página en ese momento, así que “la foto está muy oscura” o “las palabras son difíciles de leer” se entienden tal como las ves. Arrastrar una imagen directamente a la página la coloca allí.

El historial es el último botón de la barra izquierda. Su Historial de versiones muestra cada momento del diseño, del más reciente al más antiguo: cada solicitud a la IA (Hecho con IA, Cambiado con IA), cada ronda de cambios a mano (Cambiado a mano), cada vez que restauras algo y cada versión creada. Una ronda de cambios a mano se convierte en un momento propio unos 20 segundos después de que dejes de editar, y un diseño guardado se guarda solo al mismo tiempo, así que nada de lo que hiciste se pierde aunque cierres la pestaña. Cada momento se guarda con el diseño (hasta 500 por diseño; las versiones con nombre siempre se conservan), así que al reabrir un diseño desde Mis diseños, o al abrir su enlace en otra computadora, recuperas todo su historial.

Cada momento muestra una pequeña imagen del diseño en ese momento, la hora y el costo de IA, tus propias palabras entre comillas y, en el caso de los cambios a mano, una línea breve que describe lo que cambió (por ejemplo, 2 cambios: palabras “Oferta de verano” · color de un círculo). Detalles abre lo que hizo aiKit, lo que no hizo, el estilo (puntos de color y las tipografías), el tamaño, cualquier etiqueta de versión, los recursos que usó y Exactamente lo que se pidió a aiKit: la solicitud tal como la recibió aiKit (tamaño, tus palabras, los recursos y sus tipos, el estilo que se le indicó usar).

Nombrar esta versión, arriba, da al diseño tal como está ahora un nombre y una nota opcional, como Enviado al cliente, antes del cambio de color. Las versiones con nombre se marcan con un marcador y un borde de color, y Nombrar (o Cambiar nombre) en cualquier momento le asigna un nombre. Los filtros sobre la lista muestran Todos, Con nombre, IA o A mano. Quitar el nombre (en Detalles) convierte una versión con nombre de nuevo en un momento normal.

Botones de cada momento: Restaurar (el diseño vuelve a ese momento, como un nuevo momento, y ⌘Z lo deshace), Comparar con ahora, Nombrar y Empezar desde aquí (abre un diseño nuevo e independiente desde ese momento, para que el que estás trabajando no cambie). En Detalles: Usar este estilo (tu próxima solicitud a la IA usará esas tipografías y colores) y Guardar estilo (ponle un nombre para conservarlo).

Comparar muestra los dos lado a lado o con un deslizador, y debajo de las imágenes una lista Qué cambió, una línea por capa: Añadido, Quitado o Cambiado, con lo que cambió en palabras (las palabras antiguas y nuevas, movido, cambiado de tamaño, girado, color, tipografía, tamaño de texto, transparencia, oculto, contorno, sombra, aspecto de foto, recortado, traído al frente o enviado atrás, y el fondo). Cuando comparas un momento con ahora, cada línea tiene Restaurar esta parte (esa capa vuelve como estaba entonces, o una capa que se quitó regresa) o Quitar (para una capa añadida desde entonces), y el resto del diseño queda como está ahora; ⌘Z lo deshace. Restaurar todo devuelve todo el diseño a ese momento.

Para comparar dos momentos cualesquiera, marca la casilla a la derecha de dos momentos y pulsa Comparar estos 2: el más antiguo queda a la izquierda, la lista Qué cambió va del más antiguo al más nuevo, y puedes restaurar cualquiera de los dos.

Los estilos guardados aparecen arriba del Historial. Guardar el aspecto de este diseño como estilo lee del diseño las tipografías, los colores principales y el fondo, y te pide un nombre. Usar aplica un estilo a tus próximas solicitudes a la IA (aparece debajo de la página como Estilo: nombre, con × para dejarlo); la pantalla de inicio también tiene una lista de Estilos, así que un diseño nuevo empieza con tu imagen. Los estilos pertenecen a tu espacio de trabajo, así que todo tu equipo puede usarlos.

Versiones, en la barra superior, abre tres opciones. Duplicar crea una copia del diseño (con su historial) y la abre, para que puedas llevar una idea en otra dirección mientras el primero queda igual. Crear versiones… pide a aiKit de 2 a 6 versiones. Comparar todas muestra cada versión lado a lado. Duplicar y Crear versiones también aparecen debajo de cada resultado de la IA, junto a Deshacer este cambio de IA.

En Crear versiones, elige cuántas (2–6) y explica en tus palabras en qué deben diferenciarse: “3 volantes para distintos públicos: adultos mayores, estudiantes y familias”, “prueba otros titulares”, “una publicación cuadrada, una historia y un banner”, “una como video corto”. Las etiquetas debajo del cuadro agregan algunas comunes. Si lo dejas vacío, aiKit varía la distribución, el titular y los colores. Si hay algo seleccionado en la página, Solo cambiar lo seleccionado mantiene todo lo demás igual (por ejemplo, tres propuestas para el titular). Tus datos (nombres, fechas, precios, ofertas) se mantienen iguales en todas las versiones; lo que aiKit no conocía aparece como [marcador de posición].

Las versiones se crean una tras otra, con una línea para cada una: para qué sirve, su tamaño, lo que cambió aiKit, lo que no se hizo y Abrir. Una versión en un tamaño nuevo se diseña otra vez para ese tamaño a partir de tu diseño, tus recursos y las fotos que ya contiene. Cada versión es un diseño propio con su propio historial, guardado junto al original. Las versiones marcadas como Video están preparadas para animarse.

Cuando un diseño tiene versiones, una franja de Versiones recorre la parte superior: haz clic en una para abrirla (cada una tiene su propio enlace), Comparar todas para verlas juntas y Abrir esta para seguir trabajando en ella. Cada versión usa cerca de 1–2¢ de IA; las imágenes de IA suman 5¢ cada una.

Escribe o dicta cualquier cambio en la barra debajo de la página y pulsa Hazlo: “oscurece el fondo”, “mueve el logotipo arriba a la derecha”, “curva el titular y hazlo dorado”, “foto más cálida con efecto película”, “desenfoca el fondo detrás de la persona”, “añade una insignia roja de OFERTA en la esquina”. En una página vacía, la misma barra crea un diseño completo. aiKit lee tus capas (sus nombres, textos, tamaños y posiciones) y las cambia; nada se vuelve a dibujar desde cero.

Cada solicitud se trata como una lista de verificación. Lo que no se hizo aparece primero en No hecho todavía, con el motivo (por ejemplo, quitar a una persona dentro de una foto no se puede hacer aquí), y lo demás se muestra con una marca de verificación. Deshacer este cambio de IA devuelve el diseño exactamente como estaba; el Deshacer normal también funciona. Debajo de cada resultado puedes calificarlo con un pulgar arriba o abajo y decir qué salió mal; Enviar y corregir pide a aiKit que lo intente de nuevo con tu nota.

Guardar diseño conserva todo el diseño con cada capa, para que puedas volver a abrirlo desde Mis diseños y seguir editándolo. Las fotos que subiste o creaste con IA se guardan en tu Biblioteca de gráficos (carpeta Diseños/Fotos) la primera vez que guardas, así el diseño ocupa poco espacio y se abre en cualquier computadora.

Abrir en Pro Designer (junto a Descargar) guarda el diseño terminado en tu Biblioteca de gráficos y lo abre en Pro Designer, para terminarlo a mano con herramientas al estilo de Photoshop.

Descargar abre una sola ventana. Tipo de archivo: PNG (el más nítido, conserva las partes transparentes), JPG (más liviano; elige Mejor, Alta o Archivo más pequeño), PDF (para tamaños de impresión: 300 dpi con el sangrado de 1/8 de pulgada, marcas de corte activadas o desactivadas, y el tamaño de corte definido en el archivo para que la imprenta lo vea; para otros tamaños, una página con el tamaño del diseño) o SVG (el texto y las formas siguen siendo vectores; las fuentes quedan enlazadas). Para tamaños de pantalla elige 0.5×, 1×, 2× o 3×. Dónde se guarda: Descargar a esta computadora, o Guardar en Biblioteca de gráficos con un nombre, categoría, etiquetas, cliente y proyecto; el archivo guardado enlaza directamente a su lugar en la biblioteca.