OIM editor getting started guide: first steps

OIM Studio is the visual editor where .oim files are created and exported. If you have never used it, it may look like any other design tool. The difference is in what gets saved: every text, animation and action is stored as data inside the file, not as pixels. This guide walks through the first steps, in the order you would do them.

The web editor is at studio.oim.media. You sign in with an account. It is in closed beta, so access is not open to everyone yet.

Before you start

You need a base image in PNG, and, if you want text, the texts in the languages you will use. Think about the piece before you open the editor. A poster with a headline, a price and a button is a good first project.

Step 1: understand the three layers

The canvas is split into three layers. It helps to know them, because each has a different job:

• Layer −1, baked. What you fix in the image ("Fix in image"): background, photos, shapes and, if you want, filters and masks. It becomes the PNG's pixels and any viewer shows it.
• Layer 0, separator. It is symbolic and stores nothing. It marks the line between what becomes pixels and what stays live.
• Layer +1, dynamic. Text in every language, buttons, animations, zones that respond to the mouse, and the filters or masks you leave unbaked. The player draws it on top.

The practical rule: bake what does not change and keep everything that changes (a text, a price, a button) in layer +1. Filters and masks have no layer of their own: each one is baked or dynamic, as you decide.: the base image holds what does not change, and everything that changes (a text, a price, a button) goes in layer 1.

Step 2: know the view modes

The editor has three modes:

1. Design. Full editing, with transform handles, guide lines and multiple selection.
2. Preview or live. Simulates how the file will look: hover effects, clicks and language switching ES | EN.
3. Parallax. Shows the depth of the layers when you move the mouse or scroll.

Work in Design, and switch to Preview every few minutes. That way you catch a text that does not fit or a button that does not respond before you export.

Step 3: add a shape

The basic shapes are rectangle, circle, star, polygon, heart and freehand. Each has its own parameters, for example the radius of a circle or the number of points on a star. All of them accept a solid colour, a linear or radial gradient, and a shadow.

There are also twelve extra shapes for photo frames, such as pill, cloud or flower. If you need your own shape, the editor lets you load an SVG. It keeps only the path geometry: scripts, event attributes, links and styles are removed on load.

Step 4: write text in two languages

A text in the editor is not a drawing. It is a text node with content for each language. In the file it looks like this:

{
  "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"
  }
}

Look at content: each language has its own string. The size is expressed in cqw, a unit relative to the width of the container. That is why the text does not become unreadable on a phone. And the colour uses a semantic variable, so it follows the theme of the website.

Step 5: add movement

The editor includes motion presets. The loops are pulse, float, bounce, glow and spin. The hover micro-interactions are hover-grow, hover-lift and hover-underline. For text there is a wave animation, in which each letter rises and falls along a sine function.

Do not fill the piece with motion. One moving element catches the eye. Five moving at once tire it. If you want to see how it looks without animation, remember that the player has a disable-animations attribute, and that the accessibility guide explains the effect for people who have reduced motion turned on.

Step 6: put a photo inside a shape

Any shape with an area can hold a photo. Go to Fill → Image, upload the photo, and the shape fills with it. Double-click to reposition and zoom it. If the photo fails to load, the fill colour underneath shows.

Images and frames accept filters: black and white, sepia, blur, brightness, contrast, saturation and hue. Filters change only the photo, not the frame's stroke. Lines and freehand strokes cannot take a photo.

Step 7: masks, cut-out or window

There are two mask modes:

• Cut-out. The shape of the mask punches holes through the layers below, while the base image is kept.
• Window. It draws a visible frame around the area, and the animations stay inside it.

If you duplicate a masked layer, the editor generates a new identifier, so two cut-outs do not share the same name.

Step 8: describe images for screen readers

Select an image or an SVG and open Accessibility. Write a description for each language, or tick Decorative if the image adds nothing. While an image has neither, a warning appears. The overall description of the piece is typed in the export dialog.

Step 9: export and check

When you press Export .oim, the editor does four things in order:

1. Rasterises layer 0 into clean pixels, without the dynamic elements.
2. Converts pixel sizes into percentages and cqw units.
3. Packages the file and signs it with ECDSA P-256.
4. Reads the result back with an <oim-player> inside the same dialog, before you download it.

That last step is useful. If something does not match what you saw in the editor, you see it before the file reaches your website.

Frequently asked questions

Can I change the text of a file that is already exported?

Yes, but the change has to be signed again. The text is inside the signed data, so editing it by hand inside the file breaks the signature.

Why does my exported file not look the same on my website?

The most common reason is that the website does not load the player, or that the file is served without the right CORS permissions. Check the quick start guide and, if the problem continues, the player guide.

What happens if the file I upload already has text in it?

When packaging, the metadata of the original PNG is discarded (its text chunks, and the EXIF of a JPEG), so it is not carried into the file. Anything you want to read over the image has to be a new text layer, created in the editor.

Where do I learn the attributes and actions?

In the OIM Studio guide, which describes the editor's visual manual. To understand what the file contains inside, the format specification is the reference.

If you want to know why the exported file can prove nobody touched it, read the signing protocol. And to see how the piece fits into a page, read how to embed an interactive image on your website.