This tutorial was written by Monti on July 13th 2007. It's concept is copyrighted to Monti. Any creation you make from my ideas are yours. You may print out this tutorial for your own personal use, but please do not copy it in any way to put online, pass out or rewrite without my permission or worse yet attempt to claim as your own.

For this tutorial you will need

Paint Shop Pro
Animation Shop
Incredimail Skin Creator - Download HERE.

A Cold Drink will come in handy too as it is a long repetitive tutorial.

Ok we are ready to start.

REMEMBER TO SAVE OFTEN

Some things to note before we start.

1: Once you have edited your first Icon go to File - Save As and save with the name of your choice. It has to be the exact name as you cannot change it later.
2: Before you do anything go to Tools - Select External Editors and browse for the editor of your choice. I use PSP 9. The default is Paint.
3: If at any time after your first Save you wish to see how your skin looks so far just choose the Preview Icon at the top of the Skin Creator and Incredimail will open with the skin you are working on.
4: The Description Panel at the bottom left of the Skin Creator tells you what size your image must be (including seperate Icon sizes if applicable) and where the Icon is used in IM.
5: The panel at the bottom right shows you where the Icon will be used.
6: The hot Pink Colour - #FF00FF - is needed to keep the Transparency so make sure the same pink is used on your finished item.
I use my Magic Wand (Tolerance - 10, Feather - 0) to select all the pink areas and then promote them to a new raster layer then activate your original layer, promote to full layer and press delete on your keyboard. Hide the promoted layer for now and work on your original layer.
7: It is a good idea to make yourself a colour chart with various shades of the colours you wish to use for easy reference. Start from very very pale and go all the way to a dark shade.
8: I like to use 2 Contrasting colours (patterns/ Scrap papers etc) for my skins and possibly a third as the main colour.

Step 1: - ALL Icons

You can copy ALL or some of these from default.
It is a good idea to Edit the ones with lines and draw over the lines in colours to suit your skin.
You can also use icons for them if you want to as used in part one of this tut.

Step 2: - Compose Bar

I used my 3rd background for this.
Choose Edit Image. It will open in the editor of your choice.
Add a new Raster layer.
Using the light colour you used for the light line on your menu bar draw a single pixel line on the top.
Using the dark colour you used for the dark line on your menu bar draw a single pixel line on the bottom.
Fill the background with the colour (pattern/ scrap paper etc) of choice. I used my 3rd background.

Step 3: - Look Up Gif, Attach Clip Gif, Content Gif and Babylon MSG Gif

If you are changing the colours or icon of this one remember to do it in Animation Shop as it needs to be saved as a gif file with a transparent background.
Save it where you can find it and then click on get image in IM Skin and browse for the Gif.

Step 1: - Content Caption

Click on Edit Image. It will open in the editor of your choice.
Promote to layer.
You will need your prominent and idle backgrounds for this one.
Select the left part (dark part) of the image and add a new layer. Fill with the prominent background and add the same Inner Bevel you have used throughout.
Go to Selections - Invert and fill with the idle colour. Add the same Inner Bevel.
Deselect and save. It should update in IM Skin Creator.

Step 2: - Content Btn

Click on Edit Image. It will open in the editor of your choice.
Promote to layer.
Select all the pink areas and Promote to Layer.
Activate the background layer and press delete on your keyboard. Deselect
Add a new raster layer and draw on your Arrow icons, use the ones on there as a guide.
Select the 6 dark icons and float them.
Add a new raster layer and fill with your prominent background. Add the same Inner Bevel.
Selections - Invert - Selections Float. Fill with the idle background and add the same Inner Bevel. Deselect and save. It should update in IM Skin Creator.

Step 3: - Style Box Bar

Step 4: - Letters, Animations, Sounds and ECards

Copy from default or add your own icons.

Step 5: - Content Scroll Up

Click on Edit Image. It will open in the editor of your choice.
Promote to layer.
You can use my guide below (left click and then right click and save when it opens).
If you are using colours please make sure they are dark enough to show against your chosen main colours.



Add the lines and arrows on a new layer on your ContentScrollUp.bmp, fill the background with your 3rd background or a colour of choice.
If you wish you can add an Inner Bevel.
Merge visible and save. It should update in IM Skin Creator.

Step 6: - Content Scroll Down

Click on Edit Image. It will open in the editor of your choice.
Promote to layer.
You can use my guide below (left click and then right click and save when it opens).
If you are using colours please make sure they are dark enough to show against your chosen main colours.



Add the lines and arrows on a new layer on your ContentScrollDown.bmp, fill the background with your 3rd background or a colour of choice.
If you wish you can add an Inner Bevel.
Merge visible and save. It should update in IM Skin Creator.

Step 7: - Content Pane

Step 8: - Get From File

Step 9: - Get From Web

You can copy there from default but your background colour will be different.
Alternatively Edit Image. It will open in the editor of your choice.
Promote to layer.
Use my guide below (left click and then right click and save when it opens) to draw in the lines needed (on a new raster layer) using your pale and dark colours you have used for the other lines.



Fill the background with the same pale colour you used on the Get From Web. Merge visible and save. It should update in IM Skin Creator.

Step 10: - Credits Pane

You can copy there from default but your background colour will be different.
Alternatively Edit Image. It will open in the editor of your choice.
Promote to layer.
Use my guide below (left click and then right click and save when it opens) to draw in the lines needed (on a new raster layer) using your pale and dark colours you have used for the other lines.



Fill the background with the same pale colour you used on the Get From Web. Merge visible and save. It should update in IM Skin Creator.

Step 11: - Collections and Content bmp's

Copy from default or use icons of your choice.

Step 1: - All Icons

Until you have more practice I would recommend copying from default or adding your own icons to all apart from the Status bar.

Step 2: - Status Bar

Click on Edit Image. It will open in the editor of your choice.
Add a new raster layer and using my guide below (left click and then right click and save when it opens) to draw in the lines needed (on a new raster layer) using your pale and dark colours you have used for the other lines.



Fill the background with the same pale colour you used on the Get From Web. Merge visible and save. It should update in IM Skin Creator.

Make sure you save your skin.

Part two is now done. Click HERE to go to part 3.

 HOME

This webset is NOT linkware and was designed exclusively for Monti's Pixel Playground.
DO NOT remove anything on this page without express permission from Monti ©2006-2011