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

As long as you save yur skin you can open it at a later date to finish it.

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: - Caption Bar

Open Skin Creator and click on New at the top left.
Click on the first icon - Caption Bar- and choose Edit Image. It will open in the editor of your choice.
The brighter colours are your main colour and the faded colours are your idle colours.
Note: 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.
The above step applies to any icon with the pink in. I will not keep repeating it.

Use your Selection Tool set to Rectangle, Feather 0 to Select the prominent areas.
Go to Selections - Float - Defloat and add a new Raster layer.
Fill with the colour (pattern/ scrap paper etc) you have chosen for your main colour and add an Inner Bevel of your choice.
Do not Select.
Activate the bottom layer and hit delete on the keyboard. Deselect.
On the bottom layer go to Selections - Select All - Float - Defloat and add a new Raster layer. Fill with the second (idle) colour (pattern/ scrap paper etc) of choice.
Apply the Inner Bevel you used earlier and deselect.
Delete the bottom layer and then unhide all layers.
Now you need to add the Icons to the buttons.
You can either use my guide below (left click and then right click and save when it opens) or use anything you choose. (Small flowers, bees, hearts etc). If you are using colours please make sure they are dark enough to show against your chosen main colours.



Go to File Save and close the image. It should now be updated in the Skin Creator.

Before you go any further in IM Skin Creator 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.

Step 1: - Menu Bar and Tool Bar

Click on the 2nd item - Menu Bar - and choose Edit Image. It will open in the editor of your choice. Repeat for the 3rd icon - Tool Bar - as you need to work on these two together.
These are the ones your images go on. I used my 3rd paper for these.
You will also need to open the image you wish to have on your skin. The Maximum height should be 70 pixels.
Press shift D to made a copy of the Tool bar. On the duplicate go to Promote Background to Layer.
Go to Image Canvas Size 240 x 200.
Copy and paste your Menu Bar as a new layer and use your mover tool to line the two layers up.
Hide Layer 1 (Tool Bar layer) and activate the top layer (Menu Bar layer).
Add a new Raster layer, call it Lines and using your paint brush on size 1 choose a very pale shade of your chosen colour and draw a single line along the bottom of the image.
Choose a dark shade of the chosen colour and draw a single line above this lighter one.
Activate the original Menu Bar layer and go to Selections - Select All - Float- Defloat.
Add a new Raster layer call it Menu Bar and fill it with your chosen colour (pattern/ scrap paper etc).
Delete the original copied layer.
Unhide the bottom (Tool Bar layer) and go to Selections - Select All - Float- Defloat.
Add a new Raster layer call it Tool Bar and fill it with your chosen colour (pattern/ scrap paper etc).
Delete the original copied layer.
Deselect.
Copy and paste the image you wish to decorate your skin with as a new layer and move it to the top.
Duplicate.
Hide all layers apart from your top duplicate image, the Lines layer and the Menu Bar layer.
Activate the Menu Bar layer, go to Selections - Select All - Float- Selections - Invert.
Activate the duplicate image layer and hit delete on your keyboard. Deselect.
Merge layers visible.
Edit copy and paste into your original Menu Bar bmp image. Merge Visible and save.
It should update in your IM Skin Creator.
Go back to the image we were working on and hide the merged layer.
Unhide the image layer and the Tool Bar layer.
Activate the Tool Bar layer and go to Selections - Select All - Float - Selections - Invert.
Activate the image layer and hit delete on your keyboard. Deselect.
Merge layers visible.
Edit copy and paste into your original Tool Bar bmp image. Merge Visible and save.
It should update in your IM Skin Creator.

Step 3: - Status Bar

Click on Edit Image. In PSP promote background to layer.
Use your Magic Wand and select the pink areas and also the black and white areas to the right of the image. Promote selections to layer.
Activate the bottom layer and hit delete on the keyboard.
Add a new Raster layer and using the same light and dark shades you used for the lines on the menu bar draw the light and dark lines in on this layer using the original as a guide.
Activate the bottom layer and go to Selections - Select All - Float - Defloat.
Add a new raster layer and fill with your colour (pattern/ scrap paper etc).
Deselect.
Unhide all layers, merge all visible and save. It should update in IM Skin Creator.

Step 4: - Inner Caption Bar

I used the same pattern I used for my prominent areas on this.
Click on Edit Image. In PSP promote background to layer.
Fill with the colour (pattern/ scrap paper etc) and apply the same Inner Bevel we used on the Caption Bar.
file save File - Save. It should update in IM Skin Creator.

Step 5: - Inner Button

I used the same pattern I usedfor my prominent areas on this.
Click on Edit Image. In PSP promote background to layer.
Add a new raster layer and using the same dark colour you used for the icons on your Caption Bar and using my guide below (left click and then right click and save) draw in the lines and arrows.



Activate the bottom layer and fill with your prominent background. Add the same Inner Bevel we used earlier. Merge visible and save. It should update in IM Skin Creator.

Step 6: - Contact Viewer

I used a 3rd background for these.
Click on Edit Image. In PSP promote background to layer.
Add a new raster layer and use the same colours for the arrows as you used in your Caption Bar draw and the same light and dark colours you used on your lines in the Menu Bar and using my guide below (left click and then right click and save) draw in the lines and arrows.



Activate your background layer and fill with your background.
Merge visible and save. It should update in IM Skin Creator.

Step 7: - Message Viewer

This is actually exactly the same as the Contact Viewer so repeat the above or open the Contact Viewer and copy and paste as a new layer into your Message Viewer bmp.
Merge visible and save. It should update in IM Skin Creator.

Step 8: - Borders

Click on Edit Image. In PSP promote background to layer.
Using my guide below (left click and then right click and save) and light and dark shades of your colours draw in the lines on a new raster layer.



Activate the background layer, select your pink areas and promote to layer. Activate background layer and delete.
Still on the bottom layer use your Selection tool to select the left (dark area).
Go to Selections - Select All - Float - Defloat. Add a new raster layer and fill with your prominent background.
Whether or not you add an Inner Bevel is up to you. I chose not to. Deselect.
Use your Selection tool to select the lighter area on the right.
Go to Selections - Select All - Float - Defloat. Add a new raster layer and fill with your idle background.
Deselect.
Activate your bottom layer and fill with the pink.
Merge visible and save. It should update in IM Skin Creator.

Step 9: - Splitters

Click on Edit Image. In PSP promote background to layer.
I used my 3rd background for these.
Using my guide below (left click and then right click and save) and light and dark shades of your colours draw in the lines on a new raster layer.



Fill the background layer with your chosen background. Merge visible and save. It should update in IM Skin Creator.

Step 10: - New Mail

You can choose to keep IM's original, if you do just choose the Copy From default button.
If you are making your own remember to check the sizes specified by IM in the bottom left box in Skin Creator. I chose to use Hearts for these Icons.
You can use a Preset Shape just make sure Antialias is turned off.
The one on the right is an idle icon so it should be a slightly different shade to the other 3.
Add your icons on a new layer and fill the background layer with the hot pink.
Merge visible and save. It should update in IM Skin Creator.
DO NOT CLOSE THE IMAGE IN PSP

Step 11: - Reply - Reply All - Forward and Delete

You can choose to keep IM's original, if you do just choose the Copy From default button.
If you are making your own remember to check the sizes specified by IM in the bottom left box in Skin Creator.
I used the same icons we used in the New Mail.
If you want to use the same just copy and paste the New Mail image as a new layer on these images. Merge visible and save. It should update in IM Skin Creator.

Step 12: - Send Receive

You can choose to keep IM's original, if you do just choose the Copy From default button.
If you are making your own remember to check the sizes specified by IM in the bottom left box in Skin Creator.
Click on Edit Image. In PSP promote background to layer.
Add your designs and make sure you fill the bottom layer with the hot pink. Merge visible and save. It should update in IM Skin Creator.

Step 13: - Pop Up Button

You can choose to keep IM's original, if you do just choose the Copy From default button.
Click on Edit Image. In PSP promote background to layer.
Add a new raster layer and using the lighter and darker shades used in the previous images draw on the arrowws over the ones shown.
Merge visible and save. It should update in IM Skin Creator.

Step 14: - AAA - Address Book - Notifier and Skin

You can choose to keep IM's original, if you do just choose the Copy From default button.
Click on Edit Image. In PSP promote background to layer.
If you are making your own remember to check the sizes specified by IM in the bottom left box in Skin Creator.
Click on Edit Image. In PSP promote background to layer.
The icons on the right are idle icons so they should be a slightly different shade to the others. Use the same colours you have used for the previous images.
Add your designs and make sure you fill the bottom layer with the hot pink. Merge visible and save. It should update in IM Skin Creator.

Step 15: - IncrediCenter

You can choose to keep IM's original, if you do just choose the Copy From default button.

Step 16: - Chevron

Click on Edit Image. In PSP promote background to layer.
Add a new raster layer and draw over the arrows in a colour of choice.
Fill the background layer with the hot pink. Merge visible and save. It should update in IM Skin Creator.

Step 17: - Junk Bar

Click on Edit Image. In PSP promote background to layer.
I used my 3rd background for this.
Add a new raster layer and using the light colour you used for the light line on your Menu Bar draw a single pixel line on the left side.
Fill the background with colour (pattern/ scrap paper etc) of choice. Merge visible and save. It should update in IM Skin Creator.

Step 18: - Approve - Empty Folder - Junk Settings

You can choose to keep IM's original, if you do just choose the Copy From default button.
If you are making your own remember to check the sizes specified by IM in the bottom left box in Skin Creator.
Click on Edit Image. In PSP promote background to layer.
The icons on the right are idle icons so they should be a slightly different shade to the others.
Use the same colours you have used for the previous images.
Add your designs and make sure you fill the bottom layer with the hot pink. Merge visible and save. It should update in IM Skin Creator.

Step 19: - Approved Icons

You can choose to keep IM's original, if you do just choose the Copy From default button.
If you are making your own remember to check the sizes specified by IM in the bottom left box in Skin Creator.
Click on Edit Image. In PSP promote background to layer.
The icon on the right is the idle icon so it should be a slightly different shade to the other.
Use the same colours you have used for the previous images.
Add your designs and make sure you fill the bottom layer with the hot pink. Merge visible and save. It should update in IM Skin Creator.

Step 20: - Bg Image

Click on Edit Image. In PSP promote background to layer.
Fill with the colour (pattern/ scrap paper etc) of choice.
Merge visible and save. It should update in IM Skin Creator.

Step 21: - Ads Button

You can choose to keep IM's original, if you do just choose the Copy From default button.
If you are making your own remember to check the sizes specified by IM in the bottom left box in Skin Creator.
Click on Edit Image. In PSP promote background to layer.
The icon on the right is the idle icon so it should be a slightly different shade to the other.
Use the same colours you have used for the previous images.
Add your designs and make sure you fill the bottom layer with the hot pink. Merge visible and save. It should update in IM Skin Creator.

Step 22: - Search

Click on Edit Image. In PSP promote background to layer.
I used my 3rd background for these.
Using my guide below (left click and then right click and save when it opens) and light and dark shades of your colours draw in the outline on a new raster layer.



Select the center area of the search icon with your Magic Wand and add a new raster layer. Move this to the bottom and fill with a very pale shade of the colour used.
Activate the bottom layer and fill with a colour (pattern/ scrap paper etc) of choice. (I used my 3rd background). Merge visible and save. It should update in IM Skin Creator.

Make sure you save your skin.

Part one is now done. Click HERE to go to part 2.

 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