× Initiating database migration review
× Database migration started

Size and position on a marker

This is an applied example of how to match the size and position relative to another from Photoshop in Blippar by using one layer as a marker and the other as a flat asset.
The images received from a client are most likely going to be nice and large in size, normally around 2000px or more.

First thing you need to do is to create a marker for the blipp. This could be part of the image or a separate image altogether.

Either way the image you need to end up with should be either 800 pixels wide or high depending on the overall aspect ratio of the supplied image. This should then be saved out as a JPG file using medium quality (around 30).

For example, let's assume this is the image received from a client:

The marker is going to be the picture of the car found in the background (800px x 450px):

Within the blipp, the picture of the car is going to fill up the background of the blipp by being applied on a plane mesh. Therefore, a texture needs to be created in order to be applied to the plane mesh. This texture needs to be as large as possible, and the shape is not really a concern here as it will be re-shaped once applied to the mesh.


Let's resize the marker image to 1024x1024 and save this out as a JPG:

Now we need to think about the other graphical asset in the picture supplied by the client: the logo. This needs to sit at the top of the picture of the car. To achieve this, we will create a texture with transparency either as a pair of a JPG and a separate Alpha mask (as described in the “Images” guide), or a 24-bit PNG if size is not too much of a factor.

The object which makes up the logo layer needs to have a size which is in powers-of-two, so in this case the canvas has been resized to 512px x 128px. You also need to make sure that none of the actual image reaches the edges of the canvas.


Now, how do we determine how the mesh making up the logo have to sit in relation to the mesh which holds the car background? In Photoshop, for example, you can use rulers to determine the transformation coordinates.

These coordinates can now be used to position the mesh in the 3D space containing the logo texture directly in the blipp.
Note that the Y axis points in the opposite direction in Photoshop than in Blippar.