TUTORIAL for creating Sony Ericsson Themes by hand.

I have been getting a number of requests recently to make theme tutorials, specifically two kinds. First request: Theme Making for Dummies and the other request Theme making for the V800.
I've decided to do them both in one go, so for experienced themers there is probably little new information.

This tutorial can be applied to any and all models, but I will use the Sony Ericsson V800 as demo model.

Before you start making a theme, you need to make sure you have the correct tools. Minimum requirements are:
* Image Editing Software (whichever you want. In this tutorial I'll be using Photoshop 7)
* An example .xml file (usually you'd get this from a theme that is already on your phone, however for V800 users this does not apply as the predefined themes have one minor coding error in them.
* Some images to work with (either downloaded or created yourself)
* an .xml writer (I use XML Writer)
* a TAR archiver (I use ZipZag)

What you need to know is the size of each image that goes into the theme. Once again, normally you would extract those from an existing theme on your phone and just write them down for future reference.
For V800 I have already done so.
The full screen of the V800 is 176x220 pixels.


The V800 theme supports a maximum of 18 different image components. We'll take a look at each one when making the theme.

I'll be making a MAC OSX 'panther' theme today for somebody.
We will start by creating the wallpaper. As shown in the image above the wallpaper needs to be 176x182 pixels. As it happens our wallpaper is an actual Mac wallpaper and it's size does not correspond with our phone wallpaper requirements at all.

So first I shrink the wallpaper by altering the image sizes (Photoshop: Image - Image Size) to a square. This would not work well with non-abstract images, but on the wallpaper it does not do too much harm in my opinion. So now we have a perfect square image to work from.


We will now use the Marquee Tool to create the image size we need. Click the Rectangular marquee Tool and set your settings to 'Fixed Aspect ratio'. Normally you would use the following dimensions: width 176 and height 182, however today I want both the wallpaper and the softkeys to have this panther background, so I will use 176 x 204 instead.

Hit 'Image - Crop' to crop the image to the selected part. Then click 'Image - Image size' and shrink the image to 176 x 204 pixels.
If necessary use the 'Unsharp Mask' to increase the sharpness of the image. 'Filter - Sharpen - Unsharp Mask'

Next we will create the separate wallpaper and softkeys. To be sure we use the right parts for each component we will use a guide to show us where to cut. View - New Guide - 182 px horizontal. You will see a blue line. Now use your marquee tool again and this time set the dimensions to width 176 and height 182. Now start from the top left corner and select the whole wallpaper area.

Use 'CTRL+C to copy this, CTRL+N to open a new document. For simplicity's sake, use easy-to-understand filenames, leave out any spaces or symbols and stick to lowercase only. I will name my image 'wallpaper'. make sure it's 176 x 182 pixels and hit OK. The use CTRL+V to paste in your selection.
Repeat these steps for you softkeys image. Remember to set the Marquee tool to 176 x 22 and name your image 'softkeys1'.


The wallpaper is now done, it doesn't need any further work. We will now save it. Best thing to do is Create a new folder where you will store all theme components together. To keep the image size small, use the 'Save for Web' (or in Image Ready 'Save Optimised') options. I will save this image as .jpg with quality 60.

Back to the softkeys image now. What I want to do is create a see-through overlay of white or grey over the existing image. Since I like rounded edges I will do this with the 'Rounded Rectangle Tool' (in your Tools Palette under shapes)


I will reduce the Opacity of the white shape (in the Layers Palette) to let the underlying image shine through. To add a little bit of effect to the shape, rightclick the layer and choose 'Blending Options'. I will go with a 2px stroke and a 2 px bevel. That finishes the softkeys images. Click 'Save for Web' and save in the same folder where you saved the wallpaper.


Now we need to create the statusbar. Hit CTRL+N for creating a new image. Name this image 'statusbar1' and make sure it's 176 x 16 pixels. Set the background colour to transparent. Click OK.
I will fill my image with white (use the paint bucket tool) first.
The statusbar needs an Apple logo of course.
I will shrink this to a size of 16 px high and then copy and paste it onto my existing statusbar image.
Using the 'Blending Options' on the Layers Palette I add some effect to the apple to make it stand out a bit on the white background.
Finally I add a bevel to the white background itself.

For the desktop, I copy the wallpaper image over and add a layer. I fill this layer with white, and set the opacity to 40. This leaves me with a lighter version of the original wallpaper, which will be sufficient for this theme. I save this image as 'desktop'
I do the same for the softkeys and save this image as 'softkeys2'
For the statusbar I simply alter the colous of the bevel a bit to correspond with this lighter background and save the image as 'statusbar2'.
The softkeys and statusbar images that you use in the the desktop image will be carried through the rest of the theme as well.
So I will use the desktop image as the basis for my menu images as well.

First of all I will set a new guide at 40 px horizontal. This is where I will cut the Title from the background later on.
We will start with the menu background. This background remains the same even though there are three types of title in this theme.
Remember how I like rounded edges? For the menu and the title without tabs I will use the rounded rectangle shape again.I set guides at 1 pixels from each side and draw a new white rounded rectangle. I reduce opacity to 50% for the see-through effect and add some effect to it using the 'Blending Options'.

I merge the layers and cut out the two images I need.

I now go back to my desktop image. I still need to create one more title bar, the one that has the tabs on it. The tabs are 20 pixels high, so I will use the same rounded rectangle shape but I will leave 20 pixels from the top empty.

Once again i copy the top bit of 176 x 40 pixels and name this image 'tabtitle'.

Now let's create the tabs themselves. Both selected and unselected tab are 31 x 20 pixels in size. We need to clearly distinguish them from one another so the end-user can easily see which tab is selected.
Since we've been using rounded rectangles all along. I will use them again for the tabs. I will use a white one for unselected tabs and a blue one for the selected tab.
I will set the opacity to 50% again. Note the grey and white squares that shine through, that shows the image is transparent.

This time, because I want to preserve the transparency, when I click 'save for Web' I will choose .png instead of .jpg as image format.

Now we need to create the last important parts of the menus: the highlights. As mentioned before, there are 2 sizes highlights in the main menus. One is 170 x 51 pixels, which we will name 'bighighlight'. The other one is 170 x 28 pixels and we will therefore name it 'smallhighlight'.
There is something you need to remember here. Most recent Sony Ericsson phones have the habit of 'eating away' a few pixels on each side of all highlights. So to be sure your image will look alright, remember to leave a row of at least 2 pixels empty on all sides of your highlight. This is not the case for V800 themes, but to show you how it is done I will leave some pixels blank anyway
We will use the same familiar 'rounded rectangle' again for the highlights.

Remember to save as .png to preserve the transparency.

That's the regular menus finished then! Only a few more items to go.
First of all let's take a look at the popup. Popups on the latest Sony Ericsson phones are a bit tricky. Their full size is 150 x 150 pixels and this includes the popup title. Many times though, the popup showing on the phone is much smaller than that, and often it does not even display the popup title anyway. No need to do a lot of work on the popup title therefore. Also don;t bother lining your popup up with the rest of the background, as it pops up at the right bottom corner most of the time but not always.

NOTE! On K700 and S700 models, I am told the 'selection box' on the popup is black by default. On those models you need to stick with a light-coloured popup, or else you won't be able to see which item you have selected.
On the V800 this is not the case. The selection box on the V800 defaults to the colour you set as the colour of your highlight, just like it does on the T610. Therefore V800 is OK with dark or black backgrounds.

Right, so we need a 150 x 150 pixels image to match with the rest of the theme.
Since we have been working from one single MAC wallpaper all along, no need to stop now. Go back to your first created image, the wallpaper, and select a square using your Marquee tool.


CTRL+C to copy, CTRL+N for a new document. Name it 'popup' and click OK. If necessary, shrink to 150 x 150 and, again if necessary, sharpen the image.
Select the top part (150 x 32 pixels) and copy to a new document. Name this document 'popuptitle'.


I've added another rounded shape to emphasize the popup title.

Now we need to create the popuphighlight. 144 x 28 pixels, remember to leave 2 pixels empty on each side.
I make this highlight similar to the other two. [img]http://premium.uploadit.org/Vlammetje/popuphighlightuitleg.jpg[/b]

The biggest chunk of image components is now done. There are however two more images that can be added to the V800 there. The first one is the 'small title'. This title does not have a function in the menus, but instead it appears when your browsing wap for example.
This image is 176 x 19 pixels and for that I will use a portion of my desktop image again.


The final image I will make is a background image for the external screen. For this I have found a cute little apple-panther-paw that was designed for a review of the OS.
I select a portion that corresponds with the required size of 80 x 101 pixels
CTRL+C to copy, CTRL+N to open a new document, name it 'external' and hit CTRL+V to paste in your selection.
Shrink to 80 x 101 pixels. Sharpen if necessary.
Now the 'paw' is a bit too green compared with the rest of the theme, so I will adjust it a bit with 'Image - Adjustments - Hue/Saturation'



Well, the most time consuming bit is now done, all images are created.

Tis is where the technical bit starts

Now you need to build the .xml file. The .xml file describes to the phone what the backgrounds are supposed to look like. I have included the .xml file for this theme here for you to look at. What is important to remember is that no items can be left out! You can choose to include an image or not, but regardless of an image being present, you always need to supply a background colour, a text colour, a highlight colour and so on and so forth.
You need to remember that the phone has no way of knwoing what your image backgrouns look like. It will therefore base it's judgment on the colours of the background. If you have a white background colour and a white text colour, but you have a black image in your theme, the phone will still rejected, because to the phone white text on white background is invisible and therefore not valid.
The safest way to go is set the backgroun colour to the colour that is most predominant in your theme. So in my case, I would use different shades of blue for background colours, white for highlight colours, and contrasting colours for text.

Colours need to be described in hex code in your .xml file.

Well then, this is the .xml I wrote for this particular theme.


We're coming up to the last step now. You need to pack all your images and the .xml file together in an archive. Sony Ericsson .thm files are .tar archives, the only thing is they have the extension changed.
So now you need to archive the whole lot as a .tar archive.

Next you need to rename your .tar archive to a .thm file. YOu need to have your file extensions visible to do this.



Your theme is now finished. Now send it to your phone and see how it looks


Happy Theming!

fantabulous

this thread should be renamed to "Sony Ericsson Theming for HardCores"

Great one Vlamm

not sure I got it - could you please go through it all again - a litle more detailed ?

just kidding

Fantastic work Vlam

thanks mate


I could always come over to teach you....

Hi,

cool.... but i think its very difficult to go through all the stepss...

Anybody know.. is there any software package by which we can buld theam for K700i

read the FAQs and look around this forum, there are more then one theme applications to be found, however this thread specifically is for those who do not have access to any of those. Please stick to the topic.

@Vlamm - u r an absolute gem dont really own a V800, but those little pics creation tips do come handy. thanks !

hi. I'm new here and I'm using V800. I read the article of how to make theme for V800.

But I cannot succeed at the last step. I already downloaded Zipzag but I dun know how to use. After I made a *.tar file and rename it to *.thm. It still remains as *.tar file. So can someone elaborate more on how to use the program-Zipzag and do this final stage?

thx a lot!!!

Worse here, I just got a winzip file though I have renamed its extension as thm.

Besure to set zipzag to create a 'tape archive (=.tar file) as this is not it's default selection.

To rename you have to have your file extensions visible on your computer. So your fille needs to display as 'yourtheme.tar' and not as 'yourtheme'

You then need to change the extension only

I have eventually get it solved with "Theme Creator Pro" downloaded from the following site:-

http://members.lycos.co.uk/themecreator/

After installing this software, click on Tool>TAR Wizard and a new window will pop up asking you to add all the files of the theme.

After adding all the XML and pix components into the window and press [Next], BOOM!!!! You got a workable Thm file.

P.S. For those who got similar problem with Zigzag as I do, ThemeCreatorPro comes in as a pretty handy solution to bind the files into thm.

this tutorial is great thanks! but you didnt mention how can we make somethig like this:
http://images.lasyk.net/17168.png
I mean on this man with a gun in the middle and this type of softbar... how to get this cind of colur

You simply make the 176 X 220 image, add the guy with the gun,(To add any bit of image, use the magnetic lasso tool,) copy , paste it in the new image. add any color you want, save the jpeg, re-open it in Photoshop, and then cut the pieces for the softbar, the stand by, and the status

johnflea - that's more to do with photoshop technique rather than theming. you need more practice with photoshop.

Well i say it else, theming is photoshop!

yep I figered out now... theming is just puting parts on wright place... now I understand the secret of themes
thanks guys!

sorri wrong post

May i know where can i download your fantastic theme, and do i need to pay?

themes can be found in the gallery, and are free to download.
WAP may ne charged by your operator.

http://gallery.mobile9.com/

How about those animated orbs...I've poked and proded but still have yet to find out how they are done. For example, the Aurora theme, how do they do those orbs? By orbs, I mean those floating circles that move as you move the nav keys.

Aurora theme? Well animations are quite simple, just do some tuts and use imagination.

Ive read ur theme making thing. still too hard for me so ill leave it to the experst.would you mind making me a theme? i'd really love a camoflouge one with pink and white or pink and purple

Get back to me

Sam

[B][FONT=Arial][COLOR=purple]
hiya

Where and how do u get these files to make themes?? i have photoshop but none of the other ive seen you all mention. help!!

get back to me

Sam

Hello Sam,

Just download some pictures and cut them/resize them to theme size. In the tutorial here you can find how you make a theme. It is quite easy. Bars like highlights are things that you have to make by YOURSELF in photoshop. Just do some tuts or when you are lazy just use some styles.

Just download themecreator and bring the pics in, thats all.

Good luck!