Enjoy the Power of Layering
Monday, November 3, 2008 by theAVMAN | Discussion: Skinning
The introduction of layering to SKS and Windowblinds has been a tremendous asset,so I thought I would take the time to demonstrate the power it can provide.
Understanding how much times have changed small file size in a .wba is not quite as important as it use to be when dail up meant a 30 min. DL or limited ram meant slow performance.
DSL took care of our DL time and larger ram (especially on 64 bit OS where we are not limited to 3.5 gigs) HELPED to not slow down your system when using a large skin.For the sake of
this demo we will focus on speed of loading and memory usage though because even with all the advancements we all want it faster! Don't we!
Ok lets look at graphics sharing first there are several places we still use not transparent or translucent bitmap images usally large file sizes becuase of what they are .I am going to single
out 4 of them .
(1) Toolbar (or Rebar background as called in SKS6)
(2) Status bar
(3) favorites menu
(4) more programs menu
1st I created my Toolbar keeping in mind I wanted to use it for all 4 images i made it smooth with subtle (not drastic) gradients so it would stretch smoothly.
![]()
Now lets set up sizing margins

Because we are using the same image all sizing margins will be the same and set to stretch
We now have an image that will get as small as we need it or as large as we need it without distortion

Now for the Toolbar and the status bar we don,t need any changes
On to the favorites menu
As you see in the image below we need a place for our icons to reside

This is where the layering comes in .
1st I created our vertical tray it is shown below with a grey canvas so you can see it better but in application is saved as a .png with a transparent canvas
![]()
Then I added a second layer to our image
You can see below where I set the sizing margins this strectches only the blank canvas. SKS set to stretch

Now you can repeat the process for the MoreProgramsMenu
Keep in mind you may have to adjust content margins of the respective item under menu item to get icons to line up just right
Below is a shot of the menu applied

So now we have used 2 images in place of 4 looks like a 50% reduction right? Well lets take a closer look.
Now the ones we created.
![]()
37KB
![]()
4KB
Total 41KB
50% with only 2 images and in some skins where the menus were large it could be be a huge difference
Anyway just loving Layering hope it helps some on
A/V
Reply #2 Monday, November 3, 2008 5:33 PM
ude! Thanks for doing this.
Can't wasit to see how you are goin to use layers.
Reply #5 Tuesday, November 4, 2008 7:03 AM
No Problem
![]()
Thanks Tim
NP Hope they were helpful
I just wanted to show they could be bennificial not just for cool art but functionality also!
Reply #6 Tuesday, January 27, 2009 9:53 AM
ablebodied
The vert.Tray is a second image create your main image then import >next goto layers tab.next press add layer button>

Now you will see new layer highlighted and sayin"you are currently editing this Lay..."
Next press the Image tab now you are only editing the top layer so et paint margins and transparentcy settings appropriately

both top boxes for .png which SKS will convert to tga.........just top box for a .bmp using magic pink(those check box settings hold true for all images)
Note that in the top image the preview in the window will show both layers.
Give it a shot and i will help if I can!
Reply #8 Tuesday, January 27, 2009 11:13 AM
ok, I opened skinstudio, went to Start Menu Popup menu. I selected Background. I decided to use/enhance the image already being used for that menu. Then I went to Layers tab (as you've suggested), added a layer, went back to images Tab. There is now no image selected image scrolldown box. and Unlike your image there are not 4 but only TWO unchecked boxes undernieth (This image has transparent parts) & (This image has an Alpha Channel). So, I checked the two boxes as you've shown. I created an image, imported it. I set the Paint Margins setting to"
Left margin 23
center middle section
paint using Margins
I checked the 'Do Not Paint Middle Area' box
And it workd nicely. Thanks for the help.
I have another question tho. i'd like to create a Start menu popup menu with transparent parts. I've tried to do so, but when applied, the menu is either stretched out or all black regardless of the Paint Margins settings I use. Any clues?
Reply #9 Tuesday, January 27, 2009 11:17 AM
That section cannot be transparent......only .bmp support ![]()
Reply #10 Tuesday, January 27, 2009 11:30 AM
Ok, what do u mean by only .bmp support? Is there some way to use a .bmp image to allow for it to have transparent parts? Or do u mean that the Start Menu popup menu only supports .bmp images (which obviously dont have transparent parts)?
Reply #11 Tuesday, January 27, 2009 11:39 AM
that's what I ment ![]()
the background, that is. Menu items can be .tga
Reply #12 Tuesday, January 27, 2009 6:12 PM
It can be a .tga in sks but what it does not support is alpha in background, layers do support alpha.
And when using .bmp's you use magicpink for transparency (RGB 255,0,255) as mentioned by harley some posts up.
Reply #13 Friday, October 21, 2011 1:20 PM
I fixed all the image links in this tutorial.
Now someone go make something with layers LOL !!!
Hope it helps!
Reply #15 Sunday, October 23, 2011 6:17 AM
I know this is a bit late, but BMP supports 32-bit channel (a.k.a alpha). Or you could just use magic pink although I prefer alpha channel.
Reply #17 Sunday, October 23, 2011 10:42 AM
BMP files do not support alpha channels in WB. Only TGA files are supported for images with an alpha channel.
Reply #18 Sunday, October 23, 2011 11:07 AM
I understand that. I wasn't really specifying for WB but neither did I know that as I haven't attempted to use a BMP with alpha channel since I use TGA format anyway. I apologise if my post may have mislead anyone.
Please login to comment and/or vote for this skin.
Welcome Guest! Please take the time to register with us.
There are many great features available to you once you register, including:
- Richer content, access to many features that are disabled for guests like commenting on the forums and downloading skins.
- Access to a great community, with a massive database of many, many areas of interest.
- Access to contests & subscription offers like exclusive emails.
- It's simple, and FREE!







Reply #1 Monday, November 3, 2008 4:27 PM
With the GUIC's this close I probably should have been skinning but ohwell!