Enjoy the Power of Layering

from WinCustomize Forums

 

 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 :grin:


 

 

skinning
6,352 views 18 replies
Reply #1 from WinCustomize Forums Top

With the GUIC's this close I probably should have been skinning but ohwell! :grin:

Reply #2 from WinCustomize Forums Top

ude!  Thanks for doing this.

Can't wasit to see how you are goin to use layers.

The Political Machine 2024
Reply #3 from WinCustomize Forums Top

Great tut, Harley :thumbsup:

Reply #4 from WinCustomize Forums Top

Thanks for the tips! :beer:

Reply #5 from WinCustomize Forums Top

ude! Thanks for doing this.
End of quote

No Problem

Can't wasit to see how you are goin to use layers.
End of quote

;)

Great tut, Harley
End of quote

Thanks Tim

Thanks for the tips!
End of quote

NP Hope they were helpful

 

I just wanted to show they could be bennificial not just for cool art but functionality also!

Reply #6 from WinCustomize Forums Top

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 #7 from WinCustomize Forums Top

Rather good tut, Harley. Should go to the Wiki!  :thumbsup:

Reply #8 from WinCustomize Forums Top

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 from WinCustomize Forums Top

That section cannot be transparent......only .bmp support :S

Reply #10 from WinCustomize Forums Top

Quoting 2of3, reply 9
That section cannot be transparent......only .bmp support
End of 2of3's quote

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 from WinCustomize Forums Top

Or do u mean that the Start Menu popup menu only supports .bmp images (which obviously dont have transparent parts)?
End of quote

that's what I ment :)

the background, that is. Menu items can be .tga

Reply #12 from WinCustomize Forums Top

That section cannot be transparent......only .bmp support
End of quote

It can be a .tga in sks but what it does not support is alpha in background, layers do support alpha.

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)?
End of quote

And when using .bmp's you use magicpink for transparency (RGB 255,0,255) as mentioned by harley some posts up.

Reply #13 from WinCustomize Forums Top

I fixed all the image links in this tutorial. :)  Now someone go make something with layers LOL !!!

Hope it helps!

 

Reply #14 from WinCustomize Forums Top

To find.... 5*

Reply #15 from WinCustomize Forums Top

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 from WinCustomize Forums Top

Quoting roflmfaoo, reply 15
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.
End of roflmfaoo's quote

BMP files do not support alpha channels in WB.  Only TGA files are supported for images with an alpha channel.

Reply #18 from WinCustomize Forums Top

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.