IPB
2 Pages V   1 2 >  
Reply to this topicStart new topic
> Tutorial For Creating Sony Ericson Themes By Hand, V800 theme example
Vlammetje
post Nov 20 2004, 11:18 AM
Post #1



Group Icon

Group: Admin Team
Posts: 4400
Joined: 9-November 03
From: Den Haag
Member No.: 1851



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.
(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)
Go to the top of the page
 
+Quote Post
Vlammetje
post Nov 20 2004, 11:19 AM
Post #2



Group Icon

Group: Admin Team
Posts: 4400
Joined: 9-November 03
From: Den Haag
Member No.: 1851



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.
Go to the top of the page
 
+Quote Post
Vlammetje
post Nov 20 2004, 11:20 AM
Post #3



Group Icon

Group: Admin Team
Posts: 4400
Joined: 9-November 03
From: Den Haag
Member No.: 1851



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 anyway
We 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)

I've added another rounded shape to emphasize the popup title. (IMG:http://premium.uploadit.org/Vlammetje/popuptitledetail.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]

This post has been edited by Vlammetje: Nov 28 2004, 03:03 PM
Go to the top of the page
 
+Quote Post
Vlammetje
post Nov 20 2004, 11:20 AM
Post #4



Group Icon

Group: Admin Team
Posts: 4400
Joined: 9-November 03
From: Den Haag
Member No.: 1851



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.

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

Well then, this is the .xml I wrote for this particular theme.
QUOTE
<?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" />
  </Sony_Ericsson_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.
(IMG:http://premium.uploadit.org/Vlammetje/mactar.jpg)
Next you need to rename your .tar archive to a .thm file. YOu need to have your file extensions visible to do this.
(IMG:http://premium.uploadit.org/Vlammetje/tarrename.jpg)
(IMG:http://premium.uploadit.org/Vlammetje/thmrenamed.jpg)

Your theme is now finished. Now send it to your phone and see how it looks :)
(IMG:http://premium.uploadit.org/Vlammetje/macthemefinished.jpg) (IMG:http://premium.uploadit.org/Vlammetje/macthemeext.jpg)

Happy Theming! :weightlift:
Go to the top of the page
 
+Quote Post
adonisdemon
post Nov 20 2004, 11:35 AM
Post #5



Group Icon

Group: Admin Team
Posts: 23870
Joined: 4-February 04
From: LDN
Member No.: 6549



:pray: :10: fantabulous :10: :pray:
Go to the top of the page
 
+Quote Post
Patrick
post Nov 22 2004, 08:57 PM
Post #6



Group Icon

Group: Admin Team
Posts: 5872
Joined: 2-October 03
From: booked a ticket to heaven
Member No.: 3



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

Great one Vlamm :good:
Go to the top of the page
 
+Quote Post
Spawn
post Dec 2 2004, 11:18 AM
Post #7



Group Icon

Group: Certified Themer
Posts: 1385
Joined: 7-October 03
From: Denmark
Member No.: 126



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

just kidding :devil:

Fantastic work Vlam :clap2: :clap2:
Go to the top of the page
 
+Quote Post
Vlammetje
post Dec 2 2004, 01:04 PM
Post #8



Group Icon

Group: Admin Team
Posts: 4400
Joined: 9-November 03
From: Den Haag
Member No.: 1851



thanks mate :)


I could always come over to teach you.... :devil:
Go to the top of the page
 
+Quote Post
naren_prj
post Dec 29 2004, 04:51 AM
Post #9





Group: Partial Members
Posts: 1
Joined: 18-December 04
Member No.: 60458



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


Go to the top of the page
 
+Quote Post
Vlammetje
post Dec 29 2004, 10:57 AM
Post #10



Group Icon

Group: Admin Team
Posts: 4400
Joined: 9-November 03
From: Den Haag
Member No.: 1851



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.
Go to the top of the page
 
+Quote Post
evanrue
post Jan 2 2005, 02:08 PM
Post #11





Group: Members
Posts: 113
Joined: 27-March 04
From: Malaysia
Member No.: 10106



@Vlamm - u r an absolute gem :10: dont really own a V800, but those little pics creation tips do come handy. thanks !
Go to the top of the page
 
+Quote Post
simtoolkit
post Feb 1 2005, 09:20 AM
Post #12





Group: Partial Members
Posts: 1
Joined: 31-January 05
Member No.: 84827



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!!!
Go to the top of the page
 
+Quote Post
stanbize
post Mar 4 2005, 07:47 AM
Post #13





Group: Partial Members
Posts: 2
Joined: 1-March 05
Member No.: 99929



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

Worse here, I just got a winzip file though I have renamed its extension as thm.
Go to the top of the page
 
+Quote Post
Vlammetje
post Mar 9 2005, 02:53 AM
Post #14



Group Icon

Group: Admin Team
Posts: 4400
Joined: 9-November 03
From: Den Haag
Member No.: 1851



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
Go to the top of the page
 
+Quote Post
stanbize
post Mar 11 2005, 07:20 PM
Post #15





Group: Partial Members
Posts: 2
Joined: 1-March 05
Member No.: 99929



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 post has been edited by stanbize: Mar 11 2005, 07:23 PM
Go to the top of the page
 
+Quote Post

2 Pages V   1 2 >
Reply to this topicStart new topic

 

Lo-Fi Version Time is now: 29th August 2014 - 02:59 AM