This guide will walk you through the basic steps of creating an optimized screensaver for kindle devices. It is aimed at the Kindle 3
and Kindle DX
I am using Adobe Photoshop CS5 in this guide but any version of Photoshop will work just fine.
Shades of Grey
The Kindle 3 and Kindle DX support the following sixteen shades of grey:
| #ffffff ::: 255 255 255 |
| #eeeeee ::: 238 238 238 |
| #dddddd ::: 221 221 221 |
| #cccccc ::: 204 204 204 |
| #bbbbbb ::: 187 187 187 |
| #aaaaaa ::: 170 170 170 |
| #999999 ::: 153 153 153 |
| #888888 ::: 136 136 136 |
| #777777 ::: 119 119 119 |
| #666666 ::: 102 102 102 |
| #555555 ::: 85 85 85 |
| #444444 ::: 68 58 68 |
| #333333 ::: 51 51 51 |
| #222222 ::: 34 34 34 |
| #111111 ::: 17 17 17 |
| #000000 ::: 0 0 0 |
The key to great looking screensavers is to make sure we only use these sixteen shades of grey.
Step 1.
First you need to download the photoshop colour table below. You will be using it in step 3.
Now let’s open up Photoshop and create a new blank document. Nothing tricky here.
- For the Kindle create a document 600 pixels wide and 800 pixels tall.
- For the Kindle DX create a document 824 pixels wide and 1200 pixels tall.
I’m going to create a regular Kindle screensaver for this guide.
Step 2.
In this step you should make something awesome! Simple, high contrast designs look really great on the Kindle’s e-ink display so I’m going to make a great big ampersand set in Feijoa.
Step 3.
Once you’ve got your design all worked out it’s time to optimize for the Kindle by reducing colour to the 16 supported shades of grey.
In the top Photoshop menu choose Image > Mode > Indexed Color
Photoshop will ask you if you want to flatten layers. Choose OK.
You should now have the Indexed Color window floating in front of you. Click on the Palette menu and choose Custom…
You should now see the Color Table menu. This is where we are going to load the colour table you downloaded at the beginning of this guide. On the right side of the menu click Load… Locate kindle3colours.act and choose it.
The Color Table should now display the 16 Kindle supported greys only. hit OK to close this window.
Now back in the Indexed Color window let’s disable dithering. Under Options click the Dither menu and choose None.
You can hit OK to close the Indexed Color window now.
Step 4.
Our design is now ready to export! In the Photoshop top menu choose File > Save for Web & Devices
There are a few setting we want to change in the Save for Web & Devices menu.
- Set the file format to PNG-8
- Set “No Dither”
- We can deslect Transparency
- Set Colors to 16
- Deselect “Convert to sRGB”
Step 5.
That’s it! Save the file and give yourself a pat on the back. You can now transfer the screensaver onto your Kindle.
If you would like to share your creation on KindleSavers please head over to the submit page and upload it.