View Full Version : Tutorial ~ How to Make Mask for Icons - Nokia Theme Studio



fuadjani
4th May 2006, 13:31
Step by Step guide

Basic requirement:
Adobe Photoshop or any other Nice photo editing tool (any version - i am using Photoshop 8.0)

Step - 1

Open PNG format image in photoshop

(i use to convert PNG ICON to PNG ICON MASK then PNG ICON MASK to BMP MASK)

[Only registered and activated users can see links]

Step - 2

Take mouse to layer box where icon image you can see (small) right click and "select layer transparency"
when you click on option "select layer transparency" blinking black and white line start on sorrounding of image follow on Step - 3

[Only registered and activated users can see links]

Step - 3

Here your icon image got selection with the help of option "select layer transparency"[b/] Now you can fill it with any colour but here we are making black and white mask so follow on Step - 4 with Screenshot

[Only registered and activated users can see links]

Step - 4

Now you have to [b]Fill image White Colour to make it disappear

[Only registered and activated users can see links]

Step - 5

When the "Fill" box pop up just use white colour press ok (image will change to white)

[Only registered and activated users can see links]

[Only registered and activated users can see links]

Step - 6

Note: In every Picture There is two order by default but for "jpeg" "bmp" (in our case) layers are locked which are combined and locked
1. background
2. Image

As you can see in Screenshot you have to select inverse to highlight background to make it black

[Only registered and activated users can see links]

Step - 7

Step - 7 ~ Take mouse to image. Right click and select fill option
Step - 7.1 ~ Fill box pop up select black colour and press ok
Step - 7.2 ~ Icon is now black and white

[Only registered and activated users can see links]
[Only registered and activated users can see links]
[Only registered and activated users can see links]

Note: Now masking is finished save as PNG Format then open and save as BMP format without editing anything

Now you can resize mask file which is BMP Format in my case i keep the icon file "PNG" and resize but icon mask file shud be "BMP"

If any mistake occured please forgive and inform to make correction
If any knowledge shared here is less or wrong please inform to make it more convenient and helpful

Best regards
Fuadjani

ashpreet_htbk
10th May 2006, 16:28
Yes ! Yes ! ...

Finally got it ... gr8 work..
Topic sticky for now.. as needed...

benjiro_isozaki
16th May 2006, 08:11
Nice.. I need this before making themes.. thanks fudjani..

as2k3
23rd May 2006, 11:51
usefull tutorial

Caller
25th May 2006, 16:50
Very useful. Are there any tutorials to create a tranparent mask for the wallpapers in a theme? U know for that white transparent mask that covers the "in menu" wallpaper.

10x

Xardas
25th May 2006, 17:12
Thanks fuadjani for tutorial by your help i started to make my own icons lfor example my inverted Dna themes' menu icon My reputation goes to you bro..

kaiyan
26th May 2006, 11:17
thanx alot
i needed that to make themes

heyboy
31st May 2006, 11:43
that really hard to make =p thx

fuadjani
10th June 2006, 19:59
thiz is step by step image guide thtz why lukz hard :D ..juz a minute work bro once or twice you need to use mice otherwize keyboard shortcut and viola u r done
@Caller Masking what you mentioning about really cudnt understand sorry mate i could not see any mask option in editing Wall paper

fiendishmortal
11th June 2006, 16:42
Can you make an automation file for masking the icons?

store106
13th June 2006, 16:08
great man..
u teach me alot.. now i can start to make my new icon..
(i will try my best..hehehe :P)

cheri
9th July 2006, 14:39
All the informations are good and usfull thanks to
all poster

Pinkoney
23rd August 2006, 07:55
That's great.. I've been trying to do it for a long long time... Thanks so much..

pan_chie
24th September 2006, 04:00
thanks a lot... it's really help me

Cydonia
5th November 2006, 17:19
Excellent tutorial, thank you :)

fakrul
22nd January 2007, 08:38
where can i get, adobe photoshop pls.....

Blue_Ray
22nd January 2007, 09:24
Go to pc app link section. u will find photoshop there. ;)

hmvrulz
3rd July 2007, 23:19
i hav icon of size 255 * 255

how can i make a icon 44* 29 for the list view..............
without losing the aspect ratio

if i just resize 29*29...
the icon is not placed at the centre if i try to move it am not able to move the mask icon with the orginal one....

kawaiiriza
28th August 2007, 10:41
oh no!!step4&5 image doesnt exist!!can u upload it again pliz...i really need it!!thx

Eddicts60
11th August 2008, 13:52
Im using CS3..so it would be the DIFFERENTS OPTION on CS3..any tute for CS3 by creating this?Please help and post CREATING MASK WITH CS3..Thank You :)