Ambience background design

This post is for helping people in designing their own ambience backgrounds for Jolla. Knowing how Sailfish OS handles images or photos when turning them into an ambience might give you some advantage to create the most beautiful backgrounds.

While scrolling from screen to another, first thing to note is that the lower you go, the more Jolla cloaks the image - ending up with 100% cloaking in the 2nd launcher screen. Cloak is a partially transparent layer on top of your image, colored with the same tone as the text color which Jolla chooses from the image (see using greyscale images).

Second, let's take a look at the pixel limits for each element and screen. Ideal size for a background image is 540x1600px to take the full advantage of the partial scrolling of the background. In this guideline, top is considered as y = 0 and the pixels mentioned are counted from the top.

Pulley menu header, sized 540x113px, is visible only when the pulley menu on top is opened. If using e.g. a logo on this area, note that the first selection "Settings" is partially inside this area. When using a logo in center, leave it above 100px.


Lock screen image begins right after the header, showing area from y=114 to y=1073 (height 960px). The upper part of the lock screen area is also used as a background for the pulley menu (from y=0 to y=430). The lower part is shared with the home screen. Area not visible on the home screen begins from y=114 and ends to y=353 (height 240px)


Home screen image, y=354 to y=1313 (height 960px) is already cloaked strongly. Image is quite dark and toned with the text color, hiding any colourful details. The opposite colous (compared to the text colour) turns into grey.


Home screen image bottom, from y=1074 to y=1313 (height 240px) is not shared with the lock screen. There, if you want to design a backround for your favourite apps, you can top it between y=1150 (right below the covers) and y=1184 (right above the app icons). It looks good in the middle, setting favourite apps background from y=1167 to y=1313 (height 147px)


The 1st launcher screen background is so strongly cloaked that it doen't matter much in designing. Leaving it totally white tones it with your text color, barely visible (better visible with high screen brigtness). With white, 1/3 of your launcer background bottom differs from 2/3 on top which is cloaked from your home screen image. Area visible only on the 1st launcher screen is from y=1314 to y=1600 (using one launcher), or from y=1314 to y=1457 (using two launcher screens). 2nd or further launcher screen are cloaked 100%.

Some suggestion based on these measurements:

• Use a header, sized 540x113px. It's nice to have a hidden element, only visible when opening the pulley menu
• Share a photo among rest of the screens, sized 540x1200px. The top of the photo works as a pulley menu background, the bottom is visible only in your home screen, the last 140px beeing left behind your favourite apps.
• Use a simple, bright coloured square for the rest, sized 540x287px. With this square use can try to affect to your desired text colour (however if your photo is already colourful, Jolla might choose a color from that anyway).

Download the image of this post to help you in design

Image above has a full size of 540x1600px. You can freely use it - click it twice to open it in full size, save it to your computer and use it as a background on your image manipulation program. You can also see how it looks like as an ambience background on your Jolla to see the measurements in action.

Share your Ambience designs or find great ambiences to your Jolla

You can already find a lot of great backgrounds, all in the right size (540x1600px). So far there are mostly pure images (without header/other special designs), but I hope we'll see some full designs soon too.

• If you have a dropbox account, you can upload your designs here.  
• Lot is shared also at JollaWalls, service was opened Nov-2013
• KiriKrush (twitter link) has been very active with his flickr album

Jolla Ambience / background articles elsewhere

• JollaUsers, another great blog, has shared a similar article earlier
  (with much better images but with some less mathematics)
• Discussion around ambiences at Jolla Together
• (comment with your link, I'm happy to add more)