Skin Tutorial : Local

Post general questions related to skin development here. Skins in development may also be placed here to solicit comments.

Moderators: Support Staff², Support Staff, AvantGuard, Developer

Forum rules
When posting a topic about a new skin you have released, follow the sample posts here. If your post does not closely resember the sample post, you risk getting it deleted. This is not to try to make you life difficult, it is to keep a consistent look throughout the forum to assist the downloaders.
Posts: 1791
Joined: Thu May 08, 2003 9:13 pm
Windows Version: Windows
Avant Version:
Location: The Motor City

Skin Tutorial : Local

Post by TomServo » Tue May 25, 2004 4:16 pm

Moved it here. Easier for others to help keep it up to date. Latest version updated by BigC.

-- Begin --

Skinning Tutorial Part 1: The Tools

These tutorials were created to help fill the gap on just how to create skins for Avant Browser. This first part will go over the tools that can be used to create skins.

To create the actual skin, you will need the Skin Factory. Download it here.

Tools that could be used include: Photoshop is not really the best choice for this since you need crisp, sharp lines. So, when you scale and resize, you get a blending/blurring that plays with the final output where you need a sharp icon.

Icon editors have their own problem, most do not output to a BMP file. My fix around this is to edit in the icon editor and then screen shot it into photoshop for final cleanup and exporting.

Another thing I have noticed with some icon editors is that they may not do all the sizes you need for AB icons. AB uses 16x16 for small icons, 24x24 for large icons and 21x21 for the system icons. Some icon editors do not have the option for 24x24 and 21x21 .. but this is where something like photoshop will come in handy. You can create at 32x32 and then bring into photoshop and scale it down to 24x24 or 21x21 and just a little cleanup will be needed.

Skinning Tutorial Part 2: The Background

So, now we know what kind of tools that can be used. Lets get down to business.

First we will talk about the background. Skin Factory lets you set the top and bottom background image. This image can be tiled or stretched. The background image can be any size, so long as it is small enough so that enough content is shown and you know what you are looking at.

Most backgrounds are going to be a repeating pattern so the tile option is what will most commonly be used. Stretching can be used, but that can cause some distortion with larger resolutions.

The best way to figure out what works in to play around with image sizes and settings within Skin Factory. Also, look at skins other people have created to get other ideas of how to use backgrounds.

Remember! People have to be able to read the text! So, design your skins carefully if your using really dark colors.

Skinning Tutorial Part 3: The Icons

The meat and potatoes of any skin are the icons that are used. I have already gone into the tools that can be used. Now, some more information on the icons themselves.

Icons need a background/transparent color of fuchsia (RGB: 255,0,255). This color will be replaced with what is behind it.

System Icons
These are the icons that are normally in the upper right. There are 11 different system icons with 4 different states each. Meaning you need to make 44 different images.

These icons are 21x21 (pixels) in size. That is the TOTAL CANVAS size, the actual image can be smaller.

The states of the icon button are:
  • Normal: the image will be displayed when the button is
    enabled and mouse is not hovered on.
  • Hot: the image will be displayed when the button is enabled and mouse is hovered on.
  • Down: the image will be displayed when the button is pressed down.
  • Disable: the image will be displayed when the button is
Open the Skin Factory to see what these states look like in default mode.

Toolbar Icons
These icons are the images that are normally right below the text menu options.

These image have a MAX CANVAS size of 24x24 (pixels) for the large icons and 16x16 (pixels) for the small set of these icons, like the System Icons the actual image can be smaller.

You can make the large and small icons different if you wish, but it is best to make them the same design.

Unlike the system icons, you only need to create one large and one small toolbar icon.

Tab bar Icons
These are the images that are shown on each tab on the windows tab bar within Avant. They get displayed sequentially as each webpage loads creating an animation like effect.

These images have a max canvas size of 18x18 (pixels) and there are 10 total. The first 9 create the page load animation and the last image is what's displayed when the page is completely loaded & no favicon is present.

Other Icons
There are also 59 other images that can be changed. These icons show mostly on the Avant Browser Options dialog page as well as in the side panel, on the status bar, and on some menus.

The total canvas size for these are 16x16 (pixels)

Skinning Tutorial Part 4: Color & Visual Styles

Ok, thats enough about icons, lets move on to color & visual style.

In Skin Factory you can change the color of the toolbar font (the text) and the progress bar (the page load meter on the status bar, bottom right of AB). You'll see these settings on the bottom right hand side of Skin Factory.

Visual Styles
Beneath the color options you'll see a selection of visual styles. Visual styles affect how the menus and side panel look. They also control the highlight effect made when the mouse hovers over the toolbar icons.

There are 8 styles to choose from:
  • Default
  • MonaiXP
  • Nexos4
  • Office11Adaptive
  • OfficeXP
  • Roma
  • Tristan2
  • Xito
The easiest way to see the difference between each style is to load each of the 8 skins that are included in Avant. Each one uses a different visual style.

Skinning Tutorial Part 5: Building the Skin

So, now we know the basics. What to do from here you ask? Now we build all the images.

The easiest skin is one where you just change the top and bottom backgrounds, hardest is where you change every image.

Currently there are 44 system icons, 21 large toolbar icons, 21 small toolbar icons, 10 tab icons and 59 other for a grand total of 155 images. Remember, you don't have to finish your skin in an hour. Quality over quantity ;)

I recommend not concerning yourself too much with the system icons and do them later. Work on the Large Toolbar images first, it is easier to scale down than to scale up. Remember to keep your edges sharp, the background color is only totally replaced if it is unshaded. Blurred edges can result in a pink outline when placed.

Be sure to name descriptively, so you know what image goes where!

Now you can put the skin together. Open up the Skin Factory app, now the first thing you have to remember is to ignore the top five rows, they are just a guide to help you see what the skin will look like. The three rows under the search bar, and the images to the right of the display window are the ones you click on to change the images for the skin. The tab and other images are changed via the drop down menus on the right.

When done, click the save button on the bottom and save the file. You can either save into "C: \\Program Files\\Avant Browser\\Skins" or into a development folder and copy there manually later.

To get your skin to show up in Avant Browser, you have to exit the browser completely and start it up again. Then go into Tools -> Skin -> Your Skin to load up your skin.