[guide] make loading indicators for your N900

[leetut]

here im going to show how i make rotating loading indicators for the menu and the bootloader screens,
you will need this freeware gif extraction tool:
[Only registered and activated users can see links. ]
and ill be using photoshop cs4 for everything else.

first go here:
[Only registered and activated users can see links. ]
and right click the rotating superman logo gif, choose 'save image as' and save it to your desktop.

open the gif with the gif frame extraction program, and choose 'save all' and save the 12 seperate images to your desktop.
[Only registered and activated users can see links. ]


from the 12 png images you now have, you only need 8, so i used frame 0,1,3,4,6,7,9,10,
rename them 1,2,3,4,5,6,7,8 and delete the 4 remaining frames from your desktop.

next open photoshop and drag the 8 images into there

[Only registered and activated users can see links. ]


select image 1, click the image tab at the top of the page and select 'canvas size' change it to 125x100 pixels
[Only registered and activated users can see links. ]

then again click the image tab and choose 'image size'
un-tick 'constrain proportions'
resize it to 48x48px
(repeat this for all 8 images)
[Only registered and activated users can see links. ]

next click: file, new, and make a new transparent image, size 384x48px, and name it: wmProgressIndicator
[Only registered and activated users can see links. ]

with the new image selected, click the, 'slice select tool'
in the bar above choose 'divide'
tick 'divide vertically into (8) slices across'
[Only registered and activated users can see links. ]

using the 'paint bucket tool' fill the background of your 8 images a light green color
[Only registered and activated users can see links. ]

then using the 'move tool' drag each of the 8 images into the progress indicator, starting with image 1, then 2, and so on
realign then using the arrow keys on your keyboard
[Only registered and activated users can see links. ]

when your finished, click 'view' tab, choose 'show', and untick 'slices'
(to turn off the slices view)

if any of your images are missaligned
[Only registered and activated users can see links. ]

use the layers box to select each layer and fine tune its position
[Only registered and activated users can see links. ]

next save the image to your desktop as a png
drag the new image back into photoshop
and use the 'magic eraser tool' to erase the green background

[Only registered and activated users can see links. ]


now you can save the final image!

it should now be called wmProgressIndicator.png
put it into usr/share/themes/*YOUR THEME*/images
and reboot phone
----------------------------------------------
another nice little touch is to make a wmMenuIndicator.png
from the first image
remove the green background from image 1 and resize it 24x24px,
then make a new transparent image 48x48px,
(name it wmMenuIndicator.png)
and drag the 24x24 icon into the 48x48 image
position it slightly to the left
then save the image
this also needs to go into usr/share/themes/*YOUR THEME*/images
[Only registered and activated users can see links. ]

the indicator and icon i made in this example are here if anyone wants them:
[Only registered and activated users can see links. ]

[Only registered and activated users can see links. ]

*UPDATE*

a few more menu indicators i made with this method:
[Only registered and activated users can see links. ] indicators.rar
[Only registered and activated users can see links. ]

and my favourite, the skeleton on a spacehopper!
[Only registered and activated users can see links. ] spacehopper.rar
[Only registered and activated users can see links. ]