How to create an OSD skin for Volume²

Every Volume² on-screen display skin is a folder of PNG images and one Skin.xml file. There's no special editor: you draw the pictures in any image editor, describe where they go in the XML, and restart Volume². This guide builds a real skin, Signal, the one in the screenshot below, and explains every part along the way.

Before you start

• Skins only apply to the Skin style. In Settings → OSD, set Style to Skin. (The other two styles, Text and TrackBar, are drawn by Volume² itself.)
• Skins live in the Osd Skins folder inside the Volume² program folder. Each skin is one subfolder, and the folder name is the skin name you see in the list.
• Volume² reads skins when it starts. After every change to a skin, restart Volume², or nothing will seem to happen. This catches almost everyone once.
• The easiest start is to copy an existing skin folder, rename it, and change it. All the skins that ship with Volume² are in the OSD Skins folder on GitHub, including Signal.

What's in a skin folder

Three files are required. Everything else is optional and is used when it's present and enabled in Skin.xml.

Three ways to draw the level

The Orientation attribute on the meter decides how the picture turns into a volume level, and Max means something different in each case.

For frame strips, 101 frames (0 to 100) gives a picture for every percent, but a handful of frames is fine for an icon. The original skin guide also recommends even numbers for image and frame sizes.

Building Signal step by step

Signal is a dark panel with a speaker icon, the device name, the level in green and a thin bar underneath.

1. The background: Back.png

The images in this section are shown at twice their real size.

A 240×84 dark rounded rectangle. Its size sets the size of the indicator, and every position below is measured from its top-left corner (X to the right, Y down).

2. The bar: Meter.png

A 200×6 green bar, the full bar at 100%. With Orientation="HORIZONTAL" and Max="200", Volume² reveals it one pixel per step, from the left.

<Meter X="20" Y="56" Orientation="HORIZONTAL" Min="0" Max="200"
       HideOnMute="false" Colorize="false"/>

A darker track behind the bar is simply painted into Back.png at the same position, so the empty part of the bar still shows.

3. The speaker icon: Meter_Effect.png

Four 24×24 speaker icons stacked vertically (24×96 in total), from quiet to loud. BitStripBottom with Max="3" (four frames minus one) makes Volume² pick the icon that matches the level.

<MeterEffect Enable="true" Orientation="BitStripBottom" Min="0" Max="3"
             LayerIndex="0" HideOnMute="true" X="20" Y="15"
             Colorize="false" FileName=""/>
<MeterMuteEffect Enable="true" LayerIndex="0" X="20" Y="15" Colorize="false"/>

HideOnMute="true" hides these icons while muted, and MeterMuteEffect draws Mute_Effect.png (a grey speaker with a cross) in the same place instead.

4. The text: device name and level

Text is drawn with a font, so it needs no images. A skin can have more than one <Text> element; Signal has two:

<Text Enable="true" X="50" Y="28" MaxWidth="150" Format="%D" FormatMute="%D"
      Alignment="0" HideOnMute="false" LayerIndex="-1">
  <Font Size="16" Color="#FFE8EDF4" ColorMute="#FF7C8896" Name="Segoe UI"
        Bold="false" Italic="false"/>
</Text>
<Text Enable="true" X="223" Y="25" Format="%V%" FormatMute="%V%"
      Alignment="2" HideOnMute="false" LayerIndex="-1">
  <Font Size="20" Color="#FF3FD3A2" ColorMute="#FF7C8896" Name="Segoe UI"
        Bold="true" Italic="false"/>
</Text>

• The first line is the device name (%D), left-aligned, cut off at 150 pixels so long names don't run into the level.
• The second is the level (%V, followed by a percent sign), right-aligned so its right edge stays at X = 223 whether it shows 5% or 100%.
• Alignment is 0 for left, 1 for centre, 2 for right, and X is the left, centre or right point accordingly.
• Format is used normally and FormatMute while muted. Colours are #AARRGGBB: the first pair is opacity, FF for solid.

These codes can go in Format:

5. The thumbnail: Preview.png

A small picture of the finished skin, shown in the skin list in settings.

6. The rest of Skin.xml

Around those pieces, the file has a header and a few general settings:

<?xml version="1.0" encoding="utf-8"?>
<XMLskinSettings>
  <Info>
    <Author>Alexandr Irza</Author>
    <WebSite>https://irzyxa.blogspot.com/</WebSite>
    <SkinVersion>3.0</SkinVersion>
  </Info>
  <OSD>
    <FadeSteps>18</FadeSteps>
    <ShowSteps>36</ShowSteps>
    <Colorization>false</Colorization>
    <ColorizationColor>-1</ColorizationColor>
    <Background Colorize="false"/>
    <!-- Meter, MeterEffect and Text from the steps above -->
    <PeakMeter Enable="false" ... />
  </OSD>
  <Layers/>
</XMLskinSettings>

• ShowSteps and FadeSteps set how fast the indicator fades in and out (0 to 255; higher is faster).
• Colorization set to true, with Colorize="true" on the parts you choose, tints them with the Windows accent colour instead of your own. ColorizationColor of -1 means "use the system colour"; an #AARRGGBB value sets a fixed one. Windows 11 v3 Dark uses this to match your accent colour.
• PeakMeter can draw a live level meter of the sound that's playing on the indicator, with Meter_All.png (mono) or Meter_Left.png and Meter_Right.png (stereo).

The fastest way to get every element with sensible defaults is to copy Skin.xml from an existing skin. The original skin guide also describes a shortcut: create an empty skin folder, open Skin Settings for it and press Apply, and Volume² writes a Skin.xml with every parameter for you to fill in. The full Signal file is on GitHub.

Layer order

Parts are drawn in a fixed order: background, animation, meter, text, digits, glass, glow. For the effect graphic and the peak meter you choose where they go with LayerIndex:

• -1 what the shipped skins use for text
• 0 after the background (under everything else)
• 1 after the animation
• 2 after the meter
• 3 after the text
• 4 after the digits
• 5 after the glass

Test it

1. Put the skin folder in Osd Skins.
2. Restart Volume².
3. Open Settings → OSD, set Style to Skin and choose your skin.
4. Change the volume, then mute and unmute, to see both states.

If something is in the wrong place, adjust the X and Y numbers, restart and look again. A few rounds is normal.

Tips

• Paint the static parts into Back.png. Anything that doesn't change with the volume (a border, an empty track, a label) belongs in the background, not in a separate layer.
• Transparency works. PNG transparency is kept, so rounded corners and shadows on Back.png show over the desktop.
• Older skins look different. Skins made before the current format use separate elements such as <MeterOrientation> instead of attributes. They still load, and the original skin guide (in Russian) describes that format and the tray and peak-meter skins.

Share it

Made something you like? Post it in the comments below or open an issue on GitHub with the skin folder attached. Good skins can join the collection that ships with Volume², with your name in the Author field.