Chameleon > Theme Park

Resizing Themes

(1/4) > >>

Blackosx:
Resizing Themes for the Chameleon Bootloader

Themes without a background, for instance the default Chameleon theme, are very flexible as device icons can be allowed to float in the screen space and therefore look great on many different screen resolutions. It's only when a theme is designed to fit on to a background and the device icons are required to be in a certain position to achieve a 'full effect', that a theme will then need resizing if you want to use it at a different resolution.

Some people have asked me if I can resize my themes to fit their screen resolution and although I can do that it is time consuming and with so many different resolutions being used I thought I could maybe build this guide to help. It should work on all themes, not just mine, but if you encounter any problems then please post them here so this guide can be accurate for anyone else wishing to resize a theme.

This will also come in handy for using my older themes that I created when I had a video display issue in that although I use a screen resolution of 1680x1050, I used to have a problem where Chameleon would only see a maximum screen resolution of 1280x1024. This was caused by having my display connected via VGA with a DVI-VGA adaptor, not direct DVI. That meant that the themes I supplied were designed at 1680x1050 but squashed to 1280x1024 so they looked correct when the screen stretched them to fit. So for my older themes the graphics needed resizing to be unstretched.



First a brief explanation of a theme.

Themes are made from a set of 30 PNG files and 1 theme.plist file. The 30 PNG files contribute to 8 sections which are:

Background (1 x file)
Boot (1 x file)
Device (10 x files)
Fonts (2 x files)
Logo (1 x file)
Menu (11 x files)
Progress Bar (2 x files)
Text Scroll (2 x files)

The theme.plist file contains properties for where each section is positioned, levels of transparency, and screen size. For further information on these values see the table in the Creating Themes Guide.



Resizing

Before you resize a theme it's wise to think about screen ratios as resizing a theme which was designed for a 16:10 display (for instance 1680x1050), to fit a 4:3 display (for instance 1024x768) will result in squashed images. The only way to keep the images properly proportioned is to resize a theme for a resolution that uses the same ratio. This illustration on wikipedia shows exactly this with the use of colours. But if a theme is supplied in only one ratio and the themes' creator is no longer around to assist, then you have no option but to try it and see how it comes out.

All we need to do is resize selected graphics from the intended size to the required size.
DO NOT resize the fonts as they need to be resized manually (thanks to fassl for this, see Reply#2)

The sections to concentrate on are Background, Boot, Device and Logo. So that makes 13 files in total.

To do the resizing I have found a free program by Marco Rotatori called iResizer which allows batch resizing and scaling of images at different proportions. Download it from http://download.cnet.com/iResizer/3000-2192_4-145812.html

It's pretty straightforward, but here's a few simple steps you get you up an running.

1. Add just the following 13 PNG files in to the iResizer window:



Note: If the theme doesn't use a background and a logo and those files are empty then you can omit those from this.

2. In settings tab, switch to %, and enter the values based on the following calculation.

Divide the required size by the orginal size and mulitply by 100.

So, if you use 1024x768 and you want to use one a theme which is at 1280x1024 then..
1024/1280*100=80 (Width will be 80%)
768/1024*100=75 (Height will be 75%)

EDIT: 9th July 2010 - nesnfsn has kindly posted a spreadsheet showing pre-calculated resizing percentages. Click here for the post

Leave resolution at 72dpi and leave the checkboxes unticked.

The iResizer Window will look like this:



3. In the Saving tab, select a destination location, select Old_name + Extension, select PNG from the drop down menu.

4. Click resize.



Final Steps

Now combine these revised graphics with the other untouched files from the theme. Then edit the theme.plist and change the screen_width and screen_height values to match your resolution. So for the example used above, you will want to have them set as follows:

   <key>screen_width</key>
   <string>1024</string>
   <key>screen_height</key>
   <string>768</string>

If the themes' designer used proportional positioning for the theme elements then hopefully the position of the graphics should not be affected and you shouldn't need to change anything else.

Blackosx:
I have followed this procedure on my Blackosx_3D_Theme, resizing to 640x480 using x50%, y%47%.  I haven't tried it myself so I don't know if it will work or not. If anybody does try it then please post back to let me know if it works or not.

fassl:
If you want to resize fonts be careful. It needs a full red pixel (R:255 G:0 B:0) to separate the characters, as you can see on the shipped themes. When resizing it, it will most likely blur that pixel and break the character detection.

ellale20:
thanks for the this
i just want to know how can i know which size i need
i have lenovo s10e and i don't know how to get the size or resolution i need

ellale20:
i see know in my yahoo widget that my resolution is 1024X576
is this what i need to resize themes?

Navigation

[0] Message Index

[#] Next page

Go to full version