Creating parallax images

Introduction

If you're not already familiar with parallax images then the best way to understand them is to view one, take a look at the parallax image featured in this tutorial from José Julián Londoño Calle.

Parallax images are made up of up to 6 layers. When a user moves their mouse over the image, the layers each move at different speeds along the X, Y, or Z axis in order to create the illusion of each layer being a different distance from the camera.

In this tutorial we're going to show how you can generate parallax images from existing artwork to give them a new dimension.

What makes a good parallax image?

In our experience almost any image can be made into a parallax image, but some definitely work better than others:

• Images with features at 2 or more distinct distances from the camera make the most of the parallax effect
• With the exception of the background layer all the other layers in a parallax image need some transparent pixels to allow layers below them to be seen. Images that have been flattened can be difficult to work with as each layer has to be painstakingly cutout. Picking an image where you still have access to manipulate (hide and show) layers or a 3D render where you're able to render each layer separately is an easier option
• To allow the layers within the image to move you need the layers to be larger in size than the viewport you define, how much larger depends on the amount of movement, so make sure you pick an image large enough to accommodate your viewport and desired movement

Preparing your image

The first task in preparing your image is to identify the different layers. In this tutorial well be using an image from artist José Julián Londoño Calle, take a look at the image below where we've identified and outlined the different layers we want to use.

Including the background (composed of the sky and distant ocean) 5 layers have been identified in total; each of them represented by a different outline color. You might notice that the 2 most foreground layers have been identified as separate layers (blue and red) even though they are technically at the same distance from the camera, splitting the layers out like this gives us a bit more flexibility when they're at the edge of the viewport as you'll see a little later on.

Cutting out the layers

Each layer now needs to be separated out and saved as an image. With the exception of the background image all the other layers must be saved out in a format that supports transparency. In most cases this means PNGs as these support alpha, the alternative is to use GIFs which also supports transparency but not alpha, meaning they tend to produce edges that look sharp/jagged and can produce artefacts when moving along the Z axis. Unlike PNGs, GIFs do support animations which can add another dimension to your image.

The slideshow below shows the result of cutting out each of the layers from our image:

Tip: For the foreground layers you'll see there's a certain amount of feathering around the scenery, this is one of the reasons why it's easier to work with images that haven't been flattened.

Creating a parallax image

Now that we have each of the layers saved out in a separate image we can create our parallax image. Start by visiting your profile page, clicking on the upload button and selecting the parallax image option from the upload menu.

Having selected the parallax image option you'll see the (hopefully by now) familiar upload interface. Unlike uploading a single shot or slideshow, parallax images require you to upload a preview image that will be displayed in the card and pop-up view, for this we recommend that you upload the full image composition (and remember to use the crop tool to select your ideal crop).

Uploading and ordering your layers

At the bottom of the page is the image upload widget for the layers. Either drag and drop your layer images on to the widget or click the widget and select them in the file browser that appears. Once you've uploaded your layers it's important that you check they are in the correct order, background to foreground, if you need to change the order click on a layer thumbnail and drag it to a new position within the other layers.

Uploading and ordering your layers

Tip: You might have noticed that the transparent areas within the layer preview thumbs appear black. That's okay, it is a side effect the thumbs being saved as JPEGs and it has no impact on the final image.

Configuring the viewport, axes and layers

The most important step, (and perhaps the most tricky), in creating a parallax image is configuring your images behaviour. Remember parallax images are interactive, as a viewer mouses over the image the layers move independently along the X, Y and/or Z axes to create the illusion of depth. In order to achieve this illusion we need to;

• configure the viewport's size
• link the mouse movement to the relevant axes within the image
• and position and set the amount of movement of each layer

To configure the image start by selecting the preview button located at the bottom right of the page.

After selecting the preview button a full view preview of your image will be displayed. The layers may appear to be out of position; the viewport size will be set to that of the background layer (so will probably be oversized) and when you mouse over the image nothing will happen - all this is to be expected as we haven't set any of the configuration options yet.

In the image above you can see a toolbar at the bottom of the window, this wont initially be visible and you'll need to scroll down to reveal it. Using the tools within the toolbar we'll be able to configure the behaviour of the parallax image. We'll start by running through what each tool does.

Layer select tool

The layer select tool allows you to specify which layer you are configuring. Some configuration options apply to the whole image whereas others only apply to the currently selected layer. Initially the first layer (our background layer) is selected. Click on any of the other numbers to select a different layer.

Move layer tool

The move layer tool allows you to change the initial position of the currently selected layer. When the tool is on transparent pixels in the currently selected layer will be tinted red and all other layers will be static. To move the layer click anywhere within the image and then drag the layer to a new position.

When the move tool is off the image will return to the preview state and behave as configured.

Set layer movement tool

The set layer movement tool allows you to define how much the currently selected layer will move along its  axis relative to the movement of the mouse. The distance for the X and Y axis is given as a percentage of the viewport width and height respectively. For example, given a viewport 1,000 pixels wide, if we set the value of X to 10% then when the viewer's mouse is positioned far left the layer will appear -100px from it's initial position and when positioned far right it will appear +100px from it's initial position.

If the X or Y movement of the mouse is linked to the Z axis then the percentage given is applied as scale, for example if the Y mouse movement is linked to the Z axis and the value of Y is 10%, then when the viewer's mouse is positioned at the top of the viewport the layer will appear at a scale of 0.9 (90%), and when positioned at the bottom of the viewport the layer will appear at a scale of 1.1 (110%).

Tip: Start with distance values between 1-10% and then adjust in small increments. Higher values can be a little disorientating initially.

Tip: Make sure you check each layer's position when the mouse cursor is at each edge of the image, if a layer has a cropped edge and this is visible when the mouse is position at one edge of the image it will somewhat ruin the illusion.

Viewport size tool

The viewport size tool allows you to set the size in pixels of the parallax image. In most cases the viewport will be smaller in size than the layers themselves to allow them to move within the viewport and not reveal their edges.

Axes tool

The axes tool allows you to link the movement of the user's mouse to an axis in the parallax image, where:

• X axis moves layers within the image horizontally
• Y axis moves layers within the image vertically
• Z axis scales layers within the image giving the impression that they are moving closer or further away from the camera

Putting it all together

The following video runs through the configuration of the parallax image in this tutorial. Remember there's no one way to configure a parallax image, and each image is different, so allow yourself a little time to experiment with the different options.

Parallax images are a new feature of the 3dtotal website and we're really excited to see what's possible when put in the hands of our talented community of artists.