Marcos’s aka Mitokondria Skinmaker Tutorial

 

Quick Intro

 

Two programs needed: Adobe Photoshop and Media Engine Skin Maker

Or to freshen up your Photoshop skills check out these tutorials

 

Media Engine = ME  Skin Maker = SM      Adobe PhotoShop = APS

 

First I’ll start by clarifying that ME SM does not put in the background as part of the button. If you want a round, oval, or any shaped button you actually have to cut a square / rectangular shape of the picture.

The reason for this is that ME only “sees” square / rectangle buttons. So whatever shape you want to use, consider adding in the background in order to make the buttons blend in “seamless” in ME. As shown in the picture the 2^nd and 3^rd squares, the blue represents the background with the shape of the button you’re using.

 

The purpose of SM is to help assigning functions and aligning the “squares” without the headache of writing code for the x & y axis. The rest has to be created with a multi layer capable paint program, like APS (MS Paintbrush won’t cut it here).

 

Using Photoshop

 

Create or find a background of your liking. Please keep in mind that your skin will have more or less layers depending on how much level of detail you are considering.

 

 

This tutorial explains the basics on making a skin. You must be familiar with the basics on layers, layer sets (folder w/ multiple layers) and layer transparencies.

 

While using APS I created multiple layers for each button which then I created into a layer set (a folder). Each layer set becomes a “movable” button in which all the layers move.

 

Each one of my buttons has 5 layers. The two most important layers are the unselected (gray color) and the selected (blue color) button status. The color here can be of your choice.

 

By having these two layers, you can easily change the color on your buttons. This step saves time with making the two different buttons that ME uses.

 

           

After you have created your buttons place them on the background. Adjust them at your own free will.

 

 

 

Now you’re ready to make buttons. The steps below are to “cut out” a button with the rectangular marquee tool in APS:

 

Copy

Create new

Paste

Change the color

Repeat the above steps

 

 

 

Without unselecting the marquee tool you will be able to drag the “cut out” square to another location in your picture. Repeat the steps above for each additional button.

 

When done you would have completed this:

 

 

The easiest way to save the images is to practically overwrite the original .jpg’s from another skin. Just make a copy of the .jpg’s into a temp folder and when you are asked for the save as file name just click on the button that it corresponds with.

 

Using Skin Maker

 

The final step is using SM to make your skin come to life. Right click and create a new skin, name the file. Right click to choose your background. Right click and add image. A white square will appear, then click ok, and the Button Wizard screen will appear. Follow the instructions in the wizard, choosing your images, button functions, and the selection order.

 

Repeat for every button that needs to be created.

 

 

Move the images around by just click-and-drag. Once everything is in place, save your skin and you are done. Congrats on your first skin!