OIM Studio es el editor visual donde se crean y exportan los archivos .oim. Si nunca lo has usado, puede parecer un programa de diseño más. La diferencia está en lo que se guarda: cada texto, cada animación y cada acción queda como dato dentro del archivo, no como píxeles. Esta guía recorre los primeros pasos, en el orden en que los harías.
El editor web está en studio.oim.media. Entras con una cuenta. Está en beta cerrada, así que el acceso todavía no es para todo el mundo.
Antes de empezar
Necesitas una imagen base en PNG y, si quieres texto, los textos en los idiomas que vas a usar. Piensa en la pieza antes de abrir el editor. Un cartel con un titular, un precio y un botón es un buen primer proyecto.
Paso 1: entiende las tres capas
El lienzo se divide en tres capas. Conviene tenerlas claras, porque cada una tiene una función distinta:
- Capa −1, horneada. Lo que fijas en la imagen («Fijar en la imagen»): fondo, fotos, formas y, si quieres, filtros y máscaras. Queda en los píxeles del PNG y cualquier visor la muestra.
- Capa 0, separador. Es simbólica y no guarda nada. Marca la línea entre lo que queda en píxeles y lo que sigue vivo.
- Capa +1, dinámica. Textos en cada idioma, botones, animaciones, zonas que responden al ratón y los filtros o máscaras que dejas sin hornear. El player la dibuja encima.
La regla práctica: hornea lo que no cambia y deja en la capa +1 todo lo que cambia (un texto, un precio, un botón). Los filtros y las máscaras no tienen capa propia: cada uno va horneado o dinámico, según lo decidas.: la imagen base contiene lo que no cambia, y todo lo que cambia (un texto, un precio, un botón) va en la capa 1.
Paso 2: conoce los modos de vista
El editor tiene tres modos:
- Diseño. Edición completa, con tiradores de transformación, líneas guía y selección múltiple.
- Vista previa o en vivo. Simula cómo se verá el archivo: los efectos al pasar el ratón, los clics y el cambio de idioma
ES | EN. - Paralaje. Muestra la profundidad de las capas al mover el ratón o al hacer scroll.
Trabaja en Diseño y cambia a Vista previa cada pocos minutos. Así detectas un texto que no cabe o un botón que no responde antes de exportar.
Paso 3: añade una forma
Las formas básicas son rectángulo, círculo, estrella, polígono, corazón y trazo libre. Cada una tiene sus parámetros, por ejemplo el radio en el círculo o el número de puntas en la estrella. Todas admiten relleno de color sólido, degradado lineal o radial, y sombra.
Hay además doce formas adicionales para marcos de fotos, como píldora, nube o flor. Si necesitas una forma propia, el editor permite cargar un SVG. Solo conserva la geometría del trazo: scripts, atributos de eventos, enlaces y estilos se eliminan al cargarlo.
Paso 4: escribe el texto en dos idiomas
Un texto en el editor no es un dibujo. Es un nodo de texto que tiene contenido para cada idioma. En el archivo se ve así:
{
"id": "headline_slot",
"type": "text",
"position": [10.5, 20.0],
"style": {
"fontSize": "3.5cqw",
"color": "var(--oim-color-primary, #ffffff)",
"animation": "wave"
},
"content": {
"en": "Experience Interactive Art",
"es": "Experimenta el Arte Interactivo"
}
}
Fíjate en content: cada idioma tiene su propia cadena. El tamaño se expresa en cqw, una unidad relativa al ancho del contenedor. Por eso el texto no se vuelve ilegible en el móvil. Y el color usa una variable semántica, así que se adapta al tema de la web.
Paso 5: añade movimiento
El editor incluye presets de movimiento. Los bucles son pulse, float, bounce, glow y spin. Las micro-interacciones al pasar el ratón son hover-grow, hover-lift y hover-underline. Para el texto hay una animación de onda, en la que cada letra sube y baja según una función seno.
No llenes la pieza de movimiento. Un solo elemento que se mueve atrae la mirada. Cinco elementos moviéndose a la vez la cansan. Si quieres comprobar cómo se verá sin animación, recuerda que el player tiene un atributo disable-animations, y que la guía de accesibilidad explica el efecto para quien tiene el movimiento reducido activado.
Paso 6: pon una foto dentro de una forma
Cualquier forma con área puede contener una foto. Ve a Relleno → Imagen, sube la foto y la forma se llena con ella. Haz doble clic para recolocarla y ampliarla. Si la foto no carga, se ve el color de relleno que quedó debajo.
Las imágenes y los marcos aceptan filtros: blanco y negro, sepia, desenfoque, brillo, contraste, saturación y tono. Los filtros cambian solo la foto, no el borde del marco. Las líneas y los trazos libres no admiten foto.
Paso 7: máscaras, recorte o ventana
Hay dos modos de máscara:
- Recorte. La silueta de la máscara agujerea las capas de debajo, pero la imagen base se conserva.
- Ventana. Dibuja un marco visible alrededor de la zona, y las animaciones se quedan dentro.
Si duplicas una capa con máscara, el editor genera un identificador nuevo. Así no se mezclan dos recortes con el mismo nombre.
Paso 8: describe las imágenes para lectores de pantalla
Selecciona una imagen o un SVG y abre Accesibilidad. Escribe una descripción por idioma, o marca la casilla Decorativa si la imagen no aporta nada. Mientras una imagen no tenga ninguna de las dos cosas, aparece un aviso. La descripción general de la pieza se escribe en el diálogo de exportación.
Paso 9: exporta y comprueba
Al pulsar Exportar .oim, el editor hace cuatro cosas en orden:
- Rasteriza la capa 0 a píxeles limpios, sin los elementos dinámicos.
- Convierte los tamaños en píxeles a porcentajes y unidades
cqw. - Empaqueta el archivo y lo firma con ECDSA P-256.
- Vuelve a leer el resultado con un
<oim-player>dentro del mismo diálogo, antes de que lo descargues.
Ese último paso es útil. Si algo no coincide con lo que viste en el editor, lo verás antes de que llegue a tu web.
Preguntas frecuentes
¿Puedo cambiar el texto de un archivo ya exportado?
Sí, pero el cambio tiene que volver a firmarse. El texto está dentro de los datos firmados, así que editarlo a mano dentro del archivo rompe la firma.
¿Por qué mi archivo exportado no se ve igual en mi web?
Lo más común es que la web no cargue el player, o que el archivo se sirva sin los permisos CORS adecuados. Revisa la guía de inicio rápido y, si el problema persiste, la guía del player.
¿Qué pasa si el archivo que subo ya tiene texto?
Al empaquetar se descartan los metadatos del PNG original (los fragmentos de texto y el EXIF de un JPEG), así que no se arrastran al archivo. Lo que quieras que se lea sobre la imagen tiene que ser una capa de texto nueva, creada en el editor.
¿Dónde aprendo los atributos y las acciones?
En la guía de OIM Studio, que describe el manual visual completo del editor. Para entender qué contiene el archivo por dentro, la especificación del formato es la referencia.
Si quieres saber por qué el archivo exportado puede demostrar que nadie lo tocó, lee el protocolo de firma. Y para ver cómo se integra la pieza en una página, cómo incrustar una imagen interactiva en tu web.