leetut | # 1 | 2010-04-30, 16:56 | Report

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.



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




select image 1, click the image tab at the top of the page and select 'canvas size' change it to 125x100 pixels


then again click the image tab and choose 'image size'
un-tick 'constrain proportions'
resize it to 48x48px
(repeat this for all 8 images)


next click: file, new, and make a new transparent image, size 384x48px, and name it: wmProgressIndicator


with the new image selected, click the, 'slice select tool'
in the bar above choose 'divide'
tick 'divide vertically into (8) slices across'


using the 'paint bucket tool' fill the background of your 8 images a light green color


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


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

if any of your images are missaligned


use the layers box to select each layer and fine tune its position


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




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


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



*UPDATE*

a few more menu indicators i made with this method:
http://www.mediafire.com/file/dyy1wj42zmw/menu indicators.rar


and my favourite, the skeleton on a spacehopper!
http://www.mediafire.com/file/5vuwlxnz3oy/skeleton spacehopper.rar

---

Last edited by leetut; 2010-05-10 at 19:05.

leetut | # 2 | 2010-05-09, 11:34 | Report

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


use the slice select tool and divide vertically into 2 slices


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


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


it will look blurred when all 8 images are shown at once



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



repeat this all the way up until you have 8 seperate images saved


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

---

Last edited by leetut; 2010-05-10 at 20:08.

HtheB | # 3 | 2010-05-09, 15:31 | Report

nice tutorial!
Keep up the good work


waiting for the boot indicator tutorial...

OptX | # 4 | 2010-05-09, 15:36 | Report

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

Tiboric | # 5 | 2010-05-09, 15:38 | Report

Cheers lee, your work is always appreciated.

---

Last edited by Tiboric; 2010-05-13 at 17:59.

leetut | # 6 | 2010-05-09, 15:42 | Report

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

Tiboric | # 7 | 2010-05-09, 15:53 | Report

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

---

Last edited by Tiboric; 2010-05-09 at 16:02.

rolan900d | # 8 | 2010-05-09, 20:03 | Report

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

Thanx guys

rolan900d | # 9 | 2010-05-10, 19:50 | Report

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

John McClane | # 10 | 2010-05-10, 19:56 | Report

Excellent Job Lee.
Keep up the good work.