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.(IMG:http://premium.uploadit.org/Vlammetje/V800themecomponents.jpg)

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.(IMG:http://premium.uploadit.org/Vlammetje/pantherbluewall.jpg) 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.(IMG:http://premium.uploadit.org/Vlammetje/panthersquare.jpg)

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.(IMG:http://premium.uploadit.org/Vlammetje/pantherselected.jpg) 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'(IMG:http://premium.uploadit.org/Vlammetje/pantherstandyphone.jpg)

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.(IMG:http://premium.uploadit.org/Vlammetje/selectedwallpaper.jpg) 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'.(IMG:http://premium.uploadit.org/Vlammetje/wallandsoft.jpg)

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)(IMG:http://premium.uploadit.org/Vlammetje/softshape.jpg)

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.(IMG:http://premium.uploadit.org/Vlammetje/softkeysfinished.jpg)

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. (IMG:http://premium.uploadit.org/Vlammetje/apple.jpg) 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. (IMG:http://premium.uploadit.org/Vlammetje/statusuitleg.jpg)

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'.(IMG:http://premium.uploadit.org/Vlammetje/menusprep.jpg) I merge the layers and cut out the two images I need. (IMG:http://premium.uploadit.org/Vlammetje/titlemenu.jpg)

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.(IMG:http://premium.uploadit.org/Vlammetje/tabmenuuitleg.jpg) 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.(IMG:http://premium.uploadit.org/Vlammetje/tabsuitleg.jpg) 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 anywayWe will use the same familiar 'rounded rectangle' again for the highlights.(IMG:http://premium.uploadit.org/Vlammetje/highlightsuitleg.jpg) 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.(IMG:http://premium.uploadit.org/Vlammetje/popupselect.jpg)

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'.(IMG:http://premium.uploadit.org/Vlammetje/popupselect.jpg)

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.(IMG:http://premium.uploadit.org/Vlammetje/smalltitleuitleg.jpg)

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 (IMG:http://premium.uploadit.org/Vlammetje/externalselect.jpg) 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'(IMG:http://premium.uploadit.org/Vlammetje/extfinal.jpg)

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

Tis is where the technical bit starts :lol:

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.

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.

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?

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!!![right][snapback]99765[/snapback][/right]

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