Modern Skin: Layer Composition
Creating a Modern Skin --> Intro --> Winamp 2 to Winamp 3+ --> Simple Skin Tutorial --> XML Intro --> Simple Skin Tutorial (Continued) --> Container --> Group --> Relative Positioning --> Complex Skin --> Non-Rect Player --> Layer Composition --> Alpha Channels --> Animatedlayer --> Snap Points --> Drawers --> Skin Scripting --> Drawer Scripting --> Animating a Skin --> Maki Overview --> Glossary
Layer composition is the process by which several images lay on top of each other to produce a complex graphical visualization. It is similar to layers in Photoshop.
The process is:
- produce the images and save them in a file
- define an element to represent that image in your XML
- make a layer using that element
- if you put layers in same area, they will lay on top of each other based on the ordering of the xml code.
Complex Tutorial
File:Complexskin diag layercomp.png
In Complex Tutorial, Group #1 (the first circle from the left), has blue triangle on top of the red circle. This is done through layer composition. Here's the process.
- Make the graphics: the red circle and blue triangle.
- Define the elements in the XML code.
- Define layers using those elements.
- Place the layers in the same area.
Lets go through in detail how do to each step:
Contents
Make the graphics: The Red Circle and Blue Triangle.
red-circle.png File:Red-circle.png
triangle.png File:Triangle.png
Define the Elements in the XML Code
Define Layers Using those Elements