Help - Search - Members - Calendar
Full Version: Tutorial For Creating Sony Ericson Themes By Hand
mobile9 Forum > ThemeMaking > Showcase: Sony Ericsson Themes
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.
user posted image

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.
user posted image
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.
user posted image

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.
user posted image
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'
user posted image
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.
user posted image
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'.
user posted image

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)
user posted image

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.
user posted image

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. user posted image
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. user posted image

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'.
user posted image
I merge the layers and cut out the two images I need. user posted image

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.
user posted image
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.
user posted image
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.
user posted image
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.
user posted image

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'.
user posted image

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

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][/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.
user posted image

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 user posted image
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'
user posted image

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

Tis is where the technical bit starts laugh.gif

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.
<?xml version="1.0"?>
<Sony_Ericsson_theme version="3.1">
  <Theme_creator Name=" Vlammetje - copyright M.C. Vlam ">
  <Background Color="0x3299CC" />
  <Background_image Source="menu.jpg" />
  <Desktop Color="0x3299CC" />
  <Desktop_image Source="desktop.jpg" />
  <Desktop_title_text Color="0xffffff" />
  <Highlight_text Color="0x3299CC" />
  <Highlight Color="0xffffff" />
  <Highlight_image Source="bighighlight.png" />
  <Highlight_small_image Source="smallhighlight.png" />
  <Popup_text Color="0xffffff" />
  <Popup Color="0x3232CC" />
  <Popup_frame Color="0xffffff" />
  <Popup_highlight_text Color="0x3232CC" />
  <Popup_highlight Color="0xffffff" />
  <Popup_highlight_image Source="popuphighlight.png" />
  <Popup_image Source="popup.jpg" />
  <Popup_scrollbar_background Color="0x3232CC" />
  <Popup_scrollbar_slider Color="0xffffff" />
  <Popup_title_text Color="0x3232CC" />
  <Popup_title Color="0xffffff" />
  <Popup_title_image Source="popuptitle.jpg" />
  <Scrollbar_background Color="0x3299CC" />
  <Scrollbar_slider Color="0xffffff" />
  <Secondary_image Source="external.jpg" />
  <Second_display_background Color="0xffffff" />
  <Second_display_operator_text Color="0x3232CC" />
  <Second_display_operator_text_outline Color="0xffffff" />
  <Second_display_text Color="0x3232CC" />
  <Second_display_time_text Color="0x3232CC" />
  <Second_display_time_text_outline Color="0xffffff" />
  <Softkeys_text Color="0x3232CC" />
  <Softkeys Color="0xffffff" />
  <Softkeys_image Source="softkeys2.jpg" />
  <Standby_image Source="wallpaper.jpg" />
  <Standby_operatorname_text Color="0xffffff" />
  <Standby_operatorname_outline Color="0x3232CC" />
  <Standby_softkey_image Source="softkeys1.jpg" />
  <Standby_statusbar_image Source="statusbar1.jpg" />
  <Standby_time Color="0xffffff" />
  <Standby_time_outline Color="0x3232CC" />
  <Statusbar_image Source="statusbar2.jpg" />
  <Tab_text Color="0xffffff" />
  <Tab Color="0x3232CC" />
  <Tab_image Source="tabtitle.jpg" />
  <Tab_selected_image Source="tabselected.png" />
  <Tab_unselected_image Source="tabunselected.png" />
  <Text Color="0xffffff" />
  <Title_image Source="bigtitle.jpg" />
  <Title_small_image Source="smalltitle.jpg" />
  <Title_text Color="0x3299CC" />
  <Title Color="0xffffff" />
  <Wapbrowser_underline Color="0x3299CC" />
  <Wapbrowser_tableborder Color="0x3299CC" />

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.
user posted image
Next you need to rename your .tar archive to a .thm file. YOu need to have your file extensions visible to do this.
user posted image
user posted image

Your theme is now finished. Now send it to your phone and see how it looks smile.gif
user posted image user posted image

Happy Theming! weightlift.gif
notworthy.gif 10.gif fantabulous 10.gif notworthy.gif
this thread should be renamed to "Sony Ericsson Theming for HardCores" tongue.gif

Great one Vlamm thumbsup.gif
not sure I got it - could you please go through it all again - a litle more detailed ?

just kidding devil2.gif

Fantastic work Vlam clap.gif clap.gif
thanks mate smile.gif

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

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 10.gif 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!!!
QUOTE(simtoolkit @ Feb 2 2005, 12:20 AM)
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:-

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:
I mean on this man with a gun in the middle and this type of softbar... how to get this cind of colur byebye.gif
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 wink.gif

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!
QUOTE(Patrick_Lippe @ May 20 2005, 02:01 AM)
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 clap.gif
thanks guys!
sorri wrong post
Xiao Jian
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.
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. 10.gif 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 byebye.gif

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

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!
To actually warm-up, settle down a vital powder room cloth in <a href="">tonsil stone</a> amazing but is not scalding eating normal water, meat wring <a href=""></a> away the natural, and canopy the penis for it. Put some l-arginine and in addition warm sea food greases and your hard-on choosing get hold of may even larger -- and that's without the need of muscle-building pursuits <a href="">penis advantage</a> confirmed! Should you add some weight loss normal routine a good components may Grow. A very good penis enhancement lead regardless of what any specific right information to present the most efficient concluding decision about improving the penis enormous. Lucidity a large number of generally linked to art is recommended, along the way. By doing this is considered the use of member traction devices <a href="">Satellite direct review</a> containing evolved into a new shown way for penis enhancement throughout the last 3 years or thereabouts. Even on a health and wellbeing perception, an incredible provider, selling a particular professionally researched and even put into practice product, considering the encourage from wide range from folks, together with the actual discipline of drugs, should truly keep very little panic on the person.
To successfully warm-up, take it easy an essential rest room bath towel through <a href="">tonsil stones</a> amazing however not scalding taking liquid, required protein amounts shake <a href="">yeast infection</a> at a distance the natural, and canopy the penis by it. Create several l-arginine and in addition hawaii's warm striped bass greases and unfortunately your hard-on choosing obtain even perhaps larger -- and that is not having muscle-building hobbies <a href="">penis advantage review</a> up to now! For those who add some fitness schedule all the optimistic aspects could very well Increase. A great penis enhancement contribute provides you with the very professional important information that provides the best final decision having to do with building your penis significant. Clarity the majority of usually linked with work of art is vital, in the process. With this is considered the use of male member traction devices <a href="">Satellite direct review</a> containing converted into a good validated solution for penis enlargement in the last 3 years and perhaps. With a well-being notion, a terrific organisation, online marketing an excellent professionally verified and perhaps utilize item, with the inform from your wide range about persons, including all of the field of drugs, should truly maintain little or no anxiousness on the new member.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.