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


 

 

theAVMAN
Reply #1 Monday, November 3, 2008 4:27 PM

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

ZubaZ
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.

2of3
Reply #3 Monday, November 3, 2008 5:46 PM

Great tut, Harley

BONEHEADdb
Reply #4 Monday, November 3, 2008 5:50 PM

Thanks for the tips!

theAVMAN
Reply #5 Tuesday, November 4, 2008 7:03 AM

ude! Thanks for doing this.

No Problem

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

Great tut, Harley

Thanks Tim

Thanks for the tips!

NP Hope they were helpful

 

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

theAVMAN
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!

 

DrJBHL
Reply #7 Tuesday, January 27, 2009 10:01 AM

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

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

2of3
Reply #9 Tuesday, January 27, 2009 11:17 AM

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

ablebodied
Reply #10 Tuesday, January 27, 2009 11:30 AM

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

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

2of3
Reply #11 Tuesday, January 27, 2009 11:39 AM

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

that's what I ment

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

voidcore
Reply #12 Tuesday, January 27, 2009 6:12 PM

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

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

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

theAVMAN
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!

 

RedneckDude
Reply #14 Friday, October 21, 2011 1:50 PM

To find.... 

roflmfaoo
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.

Disturbedcomputer
Reply #16 Sunday, October 23, 2011 10:02 AM

BM

Neil Banfield
Reply #17 Sunday, October 23, 2011 10:42 AM

roflmfaoo
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.

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

roflmfaoo
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!



web-wc01