Overview

What is a userbar?

Userbars are small icons attached to the signatures of some forum and email users to express the interests and personality of the poster. While userbars vary greatly in style and meaning, generally they all:

Are 350 pixels wide
Are 19 pixels tall
Contain a gradient background
Contain a scanline pattern
Contain at least one logo layer
Contain a description text, usually in the 10pt "Visitor" font with a 1 pixel border around the text.
Contain a white see-through ellipse to give it its shine.

All userbars created with the Userbar Designer meet the loose standards described above.

Userbar artists use a wide variety of applications and platforms to create some pretty stunning userbars, but they almost invariably paint userbars in several basic layers. The Userbar Designer is no exception.

Anatomy of a Userbar

Gradient Layer

The gradient layer is normally the lowest layer on the userbar and is a gradual transition from one color to another. The colors chosen for the gradient should match the look of the logo you plan on choosing for this userbar.

Scanline Pattern Layer

The scanline pattern is usually a medium opacity layer that covers the gradient layer, and sometimes a logo layer. Most often this is a pattern of diagonal lines, but can be changed to any repeatable pattern or omitted completely.

Logo Layers

Logo layers give the userbar its distinct meaning and more often than not contain a company or brand logo. The graphic in the logo layer is often resized without maintaining aspect ratio to be slightly taller than the userbar, but still recognizable.

Text Layer

The text layer is the description of the userbar, often with the word "user" at the end (eg. "Pencil User"). While while a few userbar artists choose to use exotic fonts, most use the 10pt "Visitor" font with a 1 pixel border to maintain a more uniform look with other userbars, regardless of artist. All text layers for userbars created with the Userbar Designer will be in the "Visitor" font.

Shine Layer

The "shine" is almost always the top layer, and gives the userbar its shinny look. The shine is really just a white ellipse with low opacity covering roughly 50% of the userbar.

Completed Userbar

Use the checkboxes below the enable/disable the different layers of our sample userbar to get a feel for what the different layers are used for.