Hi all, my first tutorial in here,
I am gonna make this tutorial as easy as possible to understand, using a lot of images.
Make sure you can see them.
The purpose for this tutorial is to minimize the time consumed in making themes with Nokia Themes Studio.
Well, kindda like that.
I hope it's useful. Ok, here we go..


Software : Adobe Photoshop 7.0 and screen captured program.
Tutorial level : intermediate
Legal stuff : images used within this tutorial are belong to Capcom Comics.
Main Idea : Using dummy guide from Nokia Themes Studio and manipulated in Adobe to get more details and perfect placement.
Suggestion : while following this tutorial, better use your own image.

The Idle Screen's image

Cutout Technique one.

Close any running program and open Adobe.
Open the file you want to use, bigger size is better.
After googling around, I guess this pic is qualified for idle screen (I cropped it )



Duplicate the background layer by dragging it to the new layer's icon in the layer window.
This will make a new layer named layer 1. See pic below :



Click on the background layer in layer window to make it active and Edit - Fill with magenta color.
Now click on the layer 1 in layer window to make it active.

Zoom about 400% to 500% so you can see the pixels.
Choose polygonal lasso, set the feather to 0, and turn on the anti-aliased.
Now make a selection to the picture.
If your images is very big, then follow the selection I demonstrated below, that is not all the image selected in onetime but partially.
After selected, hit delete button to erase the part you selected and start making a new selection again.
If your image is small and you manage to make the images you wanted in a selection, then just select - inverse then hit the delete button.

Point : try to make your selection not to right in the middle between the main image and the background, but a little bit to the image's side

Right after you erase the selected part, you can see the background is the magenta color we chose before.
The reason for this is because it's easier to see if you cut the image a bit too far to the background's side.
If do have like that, zoom again and do the selection with polygonal lasso again to the parts that you think is not good enough.
Do not use eraser or pencil to edit the pixel.

The result I have is like this :

Now create a new file with 176x280, white background, name it "idle screen".

Here comes the interesting part :
Use this image below for dummy guide.
It was captured from Nokia Themes Studio,
so you gonna need the capture screen to get this if you dont have yet,
or just use this one.

Select all on that image and copy paste it into the "idle screen" we just created.
It will create a layer 1 as its name and click on it to make it active.
Right under the layer's tab, there is a list box with "normal" for it's default option.
Change this into multiply, like this pic :



Ofcourse there is nothing change, yet.

Now back to the cutout image, hold CTRL button and click on the cutout image's thumbnail, this will make a selection automatically to the layer.
Click on the layer to make it active.
Edit - Copy and Paste it into the "idle screen", this will make a new layer again.

Scaling down

As you can see, the cutout image is too big to fit, so now we need to scale it down..
Uh, wait..can you see the dummy guide is working properly?



Edit - transform - scale on this layer.
Click the chain button to lock the vertical and horizontal scale.
Drag the top-left corner into the middle diagonally.
If you click outside the scale's square, or change the scale direction make sure the chain button is still down.
After it fits, click on the checked button to apply the scale.

The main purpose is here :

Now you can make your design, with this dummy guide, you know where are the position for every elements (clock, status area, signal & battery) and...the most incredible thing is you can even make your own op logo with any idle screen images as your design. So it will be perfectly placed matching the image.

The trick is :
make an op logo(your own) in your phone active (better with full border),
screen capture it and send it to your pc,
copy paste it on your "idle screen" in Adobe, again make it into multiply.
Use the square selection to select the image you use in your idle screen, using the oplogo border as your guide.
Copy paste it into new file, same size with op logo ofcourse ( double check is a must).
Apply your theme, apply the op logo, there you go...
Almost all of my created themes are using fullscreen image design, and never make a place for op logo and I'm sick and tired have to see the vodafone text as my op logo..that's why I created this thing. hehehe

You can use mine here though :

The Dummy Idle :





Transparent OP LOGO? Why not?

This is an example in using the dummy guide.



and my result....



Always have your creations saved as layers or in .psd format, might be useful one day.
Flatten image the layers to save it into .jpg .bmp, etc..

The Application background

Cutout technique two

This one is good for background, let's do this



Open the "idle screen", click on the background layer in layer window.
Select - all then copy paste it into a new file.
Flatten image this layer (will become background).
Select all on the image above, or use your own image, again copy paste it into the new file.
This will create a new layer.
Scale it if necessary to fit the image's size.
Then again using polygonal lasso, this time is feather 5 and still anti-aliased on, start make a selection.



Point : Make sure the selection is around 2-3 pixels from the background. See the pic carefully.
And after the selection is completed (this time is fully selected not partially like before!) hit the apply mask button in the layer window.

It will create a new thumbnail beside the main pic's thumbnail.
Right click on it and apply the mask.

It depends on you if you are satisfied with the current result.
But I dont, and I put this easy fx.

Duplicate the layer, and move the second layer from the top, alittle bit to the right from the current position.
Use filter blur - motion blur and set it to 0 degree and offset around 30.



Here is the result :



Sorry I forgot to make the dummy guide for this.
[edited]

The Dummy Background




The Dummy Tabs :

Two tabs


Three tabs


Four tabs


Two long tabs - left & right


Three long tabs - left, middle, right

The Pinboard

Use your own imagination

(hehehe, I need this badly, since I dont want to troubled the input list with my design..)

The pinboard dummy :


My layout :

Finished materials :


That's it. Happy theme-ing

This tutorial ends here

Great tutorial u got here man! Will be helpful for many ppl

sg-god, thank you, too bad the aid design in theme studio not helping alot, eh..

Guys..check this out

Link

[B][SIZE=14]GOOD JOB THANXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Thankx pal THat Waz GR8

That was really informative, and i appreciate the efforts..!!

I have Downloaded and installed Carbide Ui Nokia Theme Studio v3.1 and i hope to find an easy tutorial and Guides (icons, masks, and goodies that are available for the Previous versions of Nokia Theme Studio.

Regards,
Shek_Ruse

Hi Shek_Ruse, have you found any guides on Carbide.ui?

i got some problems changing the default icons to those i've downloaded from this website. so i'd really appreciate it if you told me how to change the icons.. Thanks !!

hi.. nokia n73 music edition gt theme to download to my hp ornot... the website at mobile 9 itizz supported.. becoz i only gt nokia n73... i ask u the pc suite only suitable for extension tat is .sis or .jar will atuomatic download to yr hp itizz...

thanks

how do install themes on my 5500