Tuesday 18 February 2014

[HowTo] Jolla Phone Ambience text color with Paint Shop Pro

Jolla Phone Ambience design, desired text color using Paint Shop Pro

Walkthrough for creating your own energy saving background with Paint Shop Pro in Windows. In this guide we create an energy saving black background with your desired font color. Selected color is used in Sailfish UI on Jolla Phone. Ok, open your Paint Shop Pro and follow the path:
  1. Select New (CTRL+N). Create a new image:
    1. Width 540
    2. Height 1600
    3. background color black (RGB 0,0,0)
  2. Select New (CTRL+N). Create a second new image:
    1. Width 1
    2. Height 4
    3. Backgrounf color black (RGB 0,0,0) 
  3. Zoom in to the second image until you see the four pixels.
  4. Change the color of the bottom pixel only:
    1. Use tool "Paint Brush" with size 1 (all other tool values at 100)
    2. Select you desired color to the brush (Materials -> Foregroung color)
    3. Click on the bottom pixel
  5. Select all (CTRL+A) and copy (CTRL+C)
  6. Activate the first image by clicking it's window
  7. Paste (CTRL+L) your selection (1x4 image) as a new layer to your background image (540x1600)
Additionally you can decorate your image with any greyscale photos, or create any colorful header to the top (use area of 113 px high on top for your header, colors used there doesn't affect to the text color).

Your image is ready. For some reason you can't save the image directly to Jolla Phone from Paint Shop Pro, so let's save it to the computer and move it to the phone:
  1. Select Save As...
    1. Name: [your image name]
    2. Format: JPEG
    3. Options: Compression factor 1
    4. Target: Any folder in your computer
    5. Save
    6. (you see a warning about merging and a confirmation: select Yes)
  2. Open the target folder in windows
  3. Copy the image (CTRL+C)
  4. Connect your Jolla to your PC with USB cable. Select "PC connection" from Jolla's screen.
  5. Browse to phone folder: Pictures / Jolla
  6. Paste the image to Sailfish / Phone Memory / Pictures / Jolla (CTRL+V)
For next, let's create a favourite ambience of the image. You can disconnect the USB cable now:
  1. Start Gallery app in your Jolla.
  2. Select "Photos" 
  3. Tap on your new image.
    (note: at this point your display seems totally black)
  4. Tap again. Image drops to the bottom and options become visible
  5. Select "Create ambience" from Pulley menu
  6. Flick right two times to return to the gallery menu
  7. Select "Ambiences"
  8. Tap on your new ambience (black square)
  9. Tap on the star icon. The ambience is now favourited
  10. Write a name and select your desired tones for your new ambience
  11. Flick left to Save
We are ready. Your new ambience is available in your favourite ambience selection screen (accessible with Swipe left/right from the home screen or the lock screen).

Example Background

Tap twice for full size (540 x 1600) image. You can save this directly to Jolla Phone:
http://reviewjolla.blogspot.com/2014/01/ambience-background-design.html


3 comments:

  1. Hi!

    Has the functionality changed in 1.0.8? I used your "jolla" background and modified it little. First I recolored "jolla" text yellow and set the middle pixel to green. Result was yellow text. Then I used green "jolla" and red middle pixel and it resulted to green text.

    -Juha

    ReplyDelete
    Replies
    1. Seems like that, yes. I reproduced this changing only the "Jolla" logo green, no pixels added and the result was a green highlight color. I should update this article then...

      Delete
    2. 2nd test: I desaturated the whole top bar (both logos) and added 1 green pixel by the instructions in the article. Result: Green highlight color. The 1 pixel tactic seems to work when there are only greayscale colors elsewhere. Ps. Thanks for bringing this up Juha!

      Delete