[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:
http://www.evanolds.com/dl/GIFFrame.exe
and ill be using photoshop cs4 for everything else.

first go here:
http://www.gifmania.co.uk/comic/Superman/
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.
http://img94.imageshack.us/img94/9771/18755935.png (http://img94.imageshack.us/i/18755935.png/)


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

http://img684.imageshack.us/img684/5524/10436486.png (http://img684.imageshack.us/i/10436486.png/)


select image 1, click the image tab at the top of the page and select 'canvas size' change it to 125x100 pixels
http://img339.imageshack.us/img339/6429/90045706.png (http://img339.imageshack.us/i/90045706.png/)

then again click the image tab and choose 'image size'
un-tick 'constrain proportions'
resize it to 48x48px
(repeat this for all 8 images)
http://img156.imageshack.us/img156/4859/90552019.png (http://img156.imageshack.us/i/90552019.png/)

next click: file, new, and make a new transparent image, size 384x48px, and name it: wmProgressIndicator
http://img249.imageshack.us/img249/3280/99521084.png (http://img249.imageshack.us/i/99521084.png/)

with the new image selected, click the, 'slice select tool'
in the bar above choose 'divide'
tick 'divide vertically into (8) slices across'
http://img691.imageshack.us/img691/9475/65272892.png (http://img691.imageshack.us/i/65272892.png/)

using the 'paint bucket tool' fill the background of your 8 images a light green color
http://img687.imageshack.us/img687/9396/76011592.png (http://img687.imageshack.us/i/76011592.png/)

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
http://img697.imageshack.us/img697/3820/99217870.png (http://img697.imageshack.us/i/99217870.png/)

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

if any of your images are missaligned
http://img443.imageshack.us/img443/6974/67173065.png (http://img443.imageshack.us/i/67173065.png/)

use the layers box to select each layer and fine tune its position
http://img293.imageshack.us/img293/8784/76253639.png (http://img293.imageshack.us/i/76253639.png/)

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

http://img697.imageshack.us/img697/7676/38219411.png (http://img697.imageshack.us/i/38219411.png/)


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
http://img38.imageshack.us/img38/9265/94145708.png (http://img38.imageshack.us/i/94145708.png/)

the indicator and icon i made in this example are here if anyone wants them:
http://www.mediafire.com/file/gnljvzd4zte/superman.rar

http://img695.imageshack.us/img695/8103/tututu.png (http://img695.imageshack.us/i/tututu.png/)

*UPDATE*

a few more menu indicators i made with this method:
http://www.mediafire.com/file/dyy1wj42zmw/menu indicators.rar
http://img7.imageshack.us/img7/83/46600580.gif (http://img7.imageshack.us/i/46600580.gif/)

and my favourite, the skeleton on a spacehopper!
http://www.mediafire.com/file/5vuwlxnz3oy/skeleton spacehopper.rar
http://img404.imageshack.us/img404/2026/spacehopper.png (http://img404.imageshack.us/i/spacehopper.png/)

[leetut]

BOOT LOADER INDICATOR (part1 - cheers for the space rolan900d!)

this is very similar to the other loader, except you need 8 seperate images this time:

make a transparent image 192x48px
name it: indicator_update1
http://img263.imageshack.us/img263/1483/77704581.png (http://img263.imageshack.us/i/77704581.png/)

use the slice select tool and divide vertically into 2 slices
http://img28.imageshack.us/img28/6461/95647276.png (http://img28.imageshack.us/i/95647276.png/)

next you need 8 images (use the same process as the above guide to extract them from your gif)
resize your 8 images to 48px height
(the length can be anything up to 192px if your original gif is rectangle shape)
but mines square so i resized them 48x48px
http://img163.imageshack.us/img163/8848/51482623.png (http://img163.imageshack.us/i/51482623.png/)

starting with image 1, drag each of the 8 images into the centre of your blank transparent image, on top of each other,
the centre slice acts as a snap to grid line
position all 8 icons on the centre of the slice line
http://img696.imageshack.us/img696/783/89640845.png (http://img696.imageshack.us/i/89640845.png/)

it will look blurred when all 8 images are shown at once
http://img689.imageshack.us/img689/4501/89441344.png (http://img689.imageshack.us/i/89441344.png/)


in the layers box unclick the eye icons, all except 'layer 0' and 'layer 1'
save this image as: indicator_update1

next unclick 'layer 1' and show 'layer 2'
save this image as: indicator_update2
http://img691.imageshack.us/img691/5897/33541887.png (http://img691.imageshack.us/i/33541887.png/)


repeat this all the way up until you have 8 seperate images saved
http://img169.imageshack.us/img169/3893/81338338.png (http://img169.imageshack.us/i/81338338.png/)

and pop them into usr/share/icons/hicolor/scalable/hildon
and reboot phone
this indicator shows while booting, and in the media player when waiting for videos to start playing
the ones i made are here:
http://www.mediafire.com/file/0xyojzznmcm/superman boot loader.rar

if you have patience you could try making more than 1 slice down the centre, and put your first image on the left, the second image a little to the right, the next a little more ect...
and the loader would move left to right as well as rotating!
you probs dont even need 'slice tool guide lines' to do this.

heres a few more of these i made with this method:
http://www.mediafire.com/file/4jj4ejjzgzo/loading indicators.rar
http://img12.imageshack.us/img12/1660/39560850.gif (http://img12.imageshack.us/i/39560850.gif/)

[HtheB]

nice tutorial! :)
Keep up the good work :)


waiting for the boot indicator tutorial... :D

[OptX]

Good Job Lee :)
Followed step by step and what can i say ?
Working perfect ^^

[Tiboric]

Cheers lee, your work is always appreciated. :)

[leetut]

wow thanks guys!
looks like ill have to post the boot indicator tutorial now!

[Tiboric]

wow thanks guys!
looks like ill have to post the boot indicator tutorial now!

Is that on MF coz I might have missed that one... please put up and we can start posting some custom .png's. in here.

Edit: BTW I prefer your 'Classic' avatar, lol

[rolan900d]

Nice to see my remark brought Lee's work back on track in here....

Thanx guys

[rolan900d]

I deleted post 2 and 3 to clear the way for leetut

[John McClane]

Excellent Job Lee.
Keep up the good work.

[leetut]

cheers john, yippee ki ay!

boot loader part1 has been added, and updated part 1 with a few extra loaders

ill do boot loader part3 in a couple of days

[leetut]

knight rider scanner loading indicator:

http://www.mediafire.com/file/gmiydozlghj/knight loader.rar

[rolan900d]

Looks cool bro....

[leetut]

michael knight, the lone crusader, a man who does not exist!

[dj_steve]

damn that boot loader looks cool, shame we cant make it longer though.

[rolan900d]

damn that boot loader looks cool, shame we cant make it longer though.

Keep rebooting!

[leetut]

yeah i think steve means longer in length ROL bro!
theres got to be a way to change the 192x48px window size
and more frames than 8 would be cool too

[rolan900d]

I know!

It was meant to be funny, not be a stupid ***...

Hahahahahaha

But kudos 4 that bro

[leetut]

it was funny to be honest!
and i did think you meant it as a joke, i know you too well mate:)

[rolan900d]

Lucky me.....

[D4rKlar]

Amazing work, Knight Rider just did it for me!

Many thanks,

D4rKlar

[viovoxer]

a nice source here:
http://ajaxload.info/

[viovoxer]

hi guys..got problem...
how to make it centre?
i do indicator icon for media player loading but it not centred.
help me please...
what i'm missing

[fotis9]

super. nice job