Resizing Themes

[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?

[Blackosx]

The screen resolution that Chameleon will use is dependent on what resolutions it can find with your hardware when it runs. It will probably be 1024x576 but you can check by pressing down arrow when you get you see the device selection screen in Chameleon, then selecting video options from the menu that will appear. If 1024x576 is in the list then hopefully that is what it's using.

If you now know your resolutions you can proceed with resizing.

[Macslap]

I tried using this method for resizing a particular theme ("Hackintosh 2" to be exact). The theme came as 1920x1200x32. I need it to be resized to 1680x1050. So I took all the files mentioned in this tutorial and resized them to that size using iResizer. That process went well and I even double checked the images to make sure they were resized.

I slapped them into the Hackintosh 2 theme folder to replace the original files, changed the theme's plist to reflect the changes:

<key>boot_height</key>
<string>1200</string> (changed to 1050)
<key>boot_width</key>
<string>1920</string> (changed to 1680)

and then rebooted. The result was that the theme was quite a bit smaller than my screen.

So then..I figured that maybe I there was something I was missing. I wnet and looked at the plist again...and at the bottom of the script there was another place to change the resolution

<key>screen_height</key>
<string>1200</string>
<key>screen_textmargin_h</key>
<string>10</string>
<key>screen_textmargin_v</key>
<string>10</string>
<key>screen_width</key>
<string>1920</string>

So I changed those numbers to correspond to my desired resolution as well (1680x1050). Rebooted and no go.

Doing some experimentation I realized that no matter what I changed those numbers to...it had no effect on the size of the theme. Btw...my monitor is hooked directly up to my video card...no adapter.

I searched like crazy trying to find an article to help me figure out what resolution Chameleon was using for the boot menu screen but no luck. I seen where you mentioned that by pressing down arrow when you get to boot screen a device selection screen in Chameleon should apprear. Well it does, and it gives me a long list of resolutions but it doesn't appear to give me any choice to select a resolution, nor does it look like it have selected a default one.

So I got a hold of a small program called "Lizard" that allows you to set Chameleon options with resolution being one of them. So I tried everyone of them...and still no success.

Basically i tried every resizing option I could think of and every combination of screen resolution and plist settings...and nothing would work. Or it would change things but not to what I wanted.It just kept getting more and more confusing as I went.

So I just ended up putting everything back to default and reinstalling the theme as I downloaded it. I went back into Lizard..set the damn screen resolution for Chameleon to back to 1920x1200x32 (which by the way is a screen resolution under MacOS that reports to me saying "Input Not Supported" but works fine during Chameleons boot menu...go figure). I did some resizing until the only thing I could do is change the "background.png" to 1600x1200. That finally worked or at least centered the background image . The icons are still their original size...which doesn't look bad.

I starting to think that the plist that came with this theme isn't written right or something. I have not yet downloaded any other themes to compare it to.

Is there anything in what I've explained that looks as if I didn't do it right?

This should be just a matter of resizing the images and changing the resolution size in the theme.plist right?

Where the heck can you easily find out what resolution Chameleon is using? I checked under the video info menu...but all that shows is a long list of resolutions but no to indicate you can select anything.

[Blackosx]

Hi Macslap

Thanks for the detailed explanation, though unfortunately I have no definite answer for you.

The resolution that Chameleon ultimately uses is dependent on what it detects from your hardware and all we can do is suggest what it uses with the screen_height and screen_width key/strings in the theme.plist. From what you have said, you have resized the theme correctly. The boot_height & boot width key strings won't have any effect for your theme.

Selecting the Video Info option from the menu that appears when you press down arrow displays the list of resolutions that Chameleon can find with your hardware. You can't select anything from it, it just serves as a reference to know what's available.

My display uses a native resolution of 1680x1050 but when I used to have it connected with a VGA-DVI converter, 1280x1024 was the largest resolution that appeared in the Video Info resolution list. Therefore, if I tried using a 1680x1050 theme it would be displayed incorrectly. Only when I connected it using DVI-DVI did 1680x1050 appear in the list. Now I know you have said you already use DVI-DVI but I am just highlighting the fact that Chameleon will default to the largest resolution it can find in the list.

But when I had the problem originally I also wanted to know what resolution was being used and devised the following rudimentary test. I resorted to creating a few backgrounds at different sizes, each showing a square, some keylines and markers for the edge of screen. Then I dropped one background in to the themes folder an rebooted to see if it drew that particular background in the correct position and to see if the square was stretched or not. By repeating this with various sized backgrounds I was able to identify what it was using. Not very scientific but it worked.

[Evildemon989]

Is there anyway to resize a 1920x1200 size theme to 1024x768? When I tried to resize a theme to 1024x768 from 1920x1200, the icons look crushed. This most likely has to do with going from widescreen to 4:3.

[Blackosx]

Is there anyway to resize a 1920x1200 size theme to 1024x768? When I tried to resize a theme to 1024x768 from 1920x1200, the icons look crushed. This most likely has to do with going from widescreen to 4:3.

Hi Evildemon989

Because of the different screen ratio, as you have already worked out, the only way to resize a theme is to maybe resize individual elements differently, for instance reduce the device icons by an equal percentage, but make them small enough to fit. It might not be ideal, but short of opening the graphic files in an image editor and manually scaling them etc. it might be your only way.

The ideal solution is for the theme designer to supply the theme in different ratios, like I have with my Big_screen_MkII theme, but it does require a fair bit of extra work to do and I haven't do it for all of my themes.

Have a go and if you get really stuck, post a request for help in that particular theme's thread and hopefully the theme's designer will respond for you

[Evildemon989]

Yea, that's kind of what I figured. I'll see what I can do. That's one reason I can't wait to get a better monitor.

[Krishna21]

Ok..today's my off.

I have 1366x768. And I would like to use BlackOSX_Big..

I did 1366/1280*100 but got 106.71875..so..106 percent?

768/1280*100 was fine, 75%. But unsure about 1366..

What should I do ?

[Blackosx]

Hi Krishna21

Well done for trying

The Blackosx_BIG theme was one of my early ones and I only ever designed it at 1680x1050 which is a 16:10 ratio. Your intended resolution of 1366 x 768 is a 16:9 screen ratio so it means if we do resize it to fit your display, it will be stretched to fit.

The calculations for your resolution will be
1366/1680 * 100 = 81.3
768/1050 * 100 = 73.14

So as you can see, 81% reduction in the width and 73% reduction in the height.
You can go ahead and resize using those values but like I say, it will looked stretched.

I still have the original Photoshop files for that theme, so if I get a chance today, I will redesign it for a 16:9 ratio and upload it to the Blackosx_BIG thread.
EDIT: Done - Revised background and device icons uploaded

[Krishna21]

u rock !

[hozey]

Hope you're still out there helping people.  I'm totally new to themes.  I've tried iResizer, but it crashed for some reason.  I'm trying to convert a 1400x1500 background.png to 1280x800.  In the theme.plist, I changed screen_height to 800 and screen_width to 1280.  The results gave me just half a screen of the image I want.  I guessed it has to do with the background_position_x, which is set at 50% and background_position_y, which is set at 0.  So I set them to 100 and 0 respectively.  My screen went back to the dull gray of Apple.  Well, there's nothing to lose so let's try 0 (no % sign and 0 respectively.  That did it.  Just wanted to put my two cents worth in hoping to help someone else who might not know what he's doing, but is willing to experiment.  Thanks for you site; it put me on the right track.

Hozey