[guide] make loading indicators for your N900
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 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 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 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 next click: file, new, and make a new transparent image, size 384x48px, and name it: wmProgressIndicator http://img249.imageshack.us/img249/3280/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 using the 'paint bucket tool' fill the background of your 8 images a light green color http://img687.imageshack.us/img687/9396/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 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 use the layers box to select each layer and fine tune its position http://img293.imageshack.us/img293/8784/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 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 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 *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 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 |
Re: [guide] make loading indicators for your N900
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 use the slice select tool and divide vertically into 2 slices http://img28.imageshack.us/img28/6461/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 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 it will look blurred when all 8 images are shown at once http://img689.imageshack.us/img689/4501/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 repeat this all the way up until you have 8 seperate images saved http://img169.imageshack.us/img169/3893/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 |
Re: [guide] make loading indicators for your N900
nice tutorial! :)
Keep up the good work :) waiting for the boot indicator tutorial... :D |
Re: [guide] make loading indicators for your N900
Good Job Lee :)
Followed step by step and what can i say ? Working perfect ^^ |
Re: [guide] make loading indicators for your N900
Cheers lee, your work is always appreciated. :)
|
Re: [guide] make loading indicators for your N900
wow thanks guys!
looks like ill have to post the boot indicator tutorial now! |
Re: [guide] make loading indicators for your N900
Quote:
Edit: BTW I prefer your 'Classic' avatar, lol |
Re: [guide] make loading indicators for your N900
Nice to see my remark brought Lee's work back on track in here....
Thanx guys |
Re: [guide] make loading indicators for your N900
I deleted post 2 and 3 to clear the way for leetut
|
Re: [guide] make loading indicators for your N900
Excellent Job Lee.
Keep up the good work. |
Re: [guide] make loading indicators for your N900
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 |
Re: [guide] make loading indicators for your N900
|
Re: [guide] make loading indicators for your N900
Looks cool bro....
|
Re: [guide] make loading indicators for your N900
michael knight, the lone crusader, a man who does not exist!
|
Re: [guide] make loading indicators for your N900
damn that boot loader looks cool, shame we cant make it longer though.
|
Re: [guide] make loading indicators for your N900
Quote:
|
Re: [guide] make loading indicators for your N900
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 |
Re: [guide] make loading indicators for your N900
I know!
It was meant to be funny, not be a stupid ***... Hahahahahaha But kudos 4 that bro |
Re: [guide] make loading indicators for your N900
it was funny to be honest!
and i did think you meant it as a joke, i know you too well mate:) |
Re: [guide] make loading indicators for your N900
Lucky me.....
|
Re: [guide] make loading indicators for your N900
Amazing work, Knight Rider just did it for me!
Many thanks, D4rKlar |
Re: [guide] make loading indicators for your N900
a nice source here:
http://ajaxload.info/ |
Re: [guide] make loading indicators for your N900
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 |
Re: [guide] make loading indicators for your N900
super. nice job
|
| All times are GMT. The time now is 11:09. |
vBulletin® Version 3.8.8