Tutorial 1

How to build the color-man.
See demo

I am going to show you how to build this demo.  With Slidebaker and some minimal image editing skills, you can have this up and running within 2 hours.  It is actually quite easy.

Content

Start with any image you like to display.

I downloaded a stock image.  If you have an artist who can create an image for you, that would be even better.  For starters, it is easier to take a vector-image.  Since we are going to cut the image in different layers, it makes it easier to select different image components.

Image editing

I use Inkscape for editing.  It takes about 30 minutes, to free the layers and save them into different png-files.  Since you can only apply 1 color to each layer, you need an extra layer for everything that might be colored seperatly.

8 Layers

Hair, Skin, Jacket, Shirt, Button, Pants, Shoe, Sole

All of these layers need to go into seperate png-files.  It is important, that their background is transparent.  You could not stack the layers on top of eachother, if it weren't for the transparent background.

You can click on the preview to see some example layers.

You noticed that all layers have the same dimensions.  (750x2300)  You do not want to crop the layers down to the image content, as all of the elements would end up in the top left corner.  To make sure, all elements end up at the correct position, create every layer with the overall dimension of 750x2300.

Color preparation

In order to apply colors, the layers should be in grey.  Slidebaker evaluates the brightness of every pixel when colorizing a layer.  Where it is darker, the result will be darker.  For best results, the main area of a grey-layer should have a color value of rbg(128,128,128).  This is called mid-color in Slidebaker.  The layers are png-files.  You can use Gimp to adjust the colors of an entire layer.

Image editing completed

Depending on your image editing skills, this should have taken you around 1 hour.  Don't be frustrated if this took you longer, if you are new to this.  The good new is, you only need to do this once.

Slidebaker integration

Less than 5 minutes.

Simply create a new project with the dimensions 750x2300.  Name it whatever you want.

Upload files

Select all 8 layers and upload them into your Slidebaker project.  When finished, you will see the filecount for this project is 8.  In my case, all files together need .5 MB of storage.

Slidebaker integration completed

Depending of your uploading skills, this should have taken you less than 5 minutes.  Your configurable image is now ready to be used.  The project ID is 136f0654553654f9.  You can generate an image by using the url: http://www.slidebaker.com/iris/irislight?pid=136f0654553654f9&comp= .  The comp paramenter (composition) specifies what layers you want to see.  The layer names are the file names that you uploaded.  You can change the order of the layers within the comp-parameter.  The first layer name will be applied to the image first.  The most top layer has to be the last inside the comp.  If you want colors, all you need to do is define the mid-color for each layer.  Simply write (mc:5599aa) behind a layername and it will apply the color-values (hex values).

hair(mc:e69138)

hair(mc:9900ff)

hair(mc:660000)

Front-End

Minimal HTML / JS requirements - 30 minutes
<IMG id="confiImg" style="max-height:1000px;" src="http://www.slidebaker.com/iris/irislight?pid=136f0654553654f9&comp=schuhsohle,schuhleder,hose,hemd,jacket,hair,skin,knopf">

Simply insert an image with the IMG-Tag and set the src to your Slidebaker project.  The idea is to update the src-attribute when changing a configuration.  This is the absolute minimal Javascript knowledge you need.

Because I am lazy, I just use jquery to change the src.  Since we gave the image an ID (confiImg), it is easy to reference it.

$('#confiImg').attr('src', newUrl);

Track configuration

Before we can evaluate the newUrl, we need to keep track of our configuration.  We have 8 elements that can be configured.  To be exact, these are 8 layers which can come in different colors.  I just store the values in one object.

var colors = { hair: '888888', skin: '888888', jacket: '888888', shirt: '888888', button: '888888', pants: '888888', shoe: '888888', sole: '888888' }

All changes to colors, should be registered in this colors-object.  All we need is a small function that builds the newUrl string.

var comp = 'schuhsohle(mc:'+colors.sole+'), schuhleder(mc:'+colors.shoe+'), hose(mc:'+colors.pants+'), hemd(mc:'+colors.shirt+'), jacket(mc:'+colors.jacket+'), hair(mc:'+colors.hair+'), skin(mc:'+colors.skin+'), knopf(mc:'+colors.button+')';

var newUrl = 'http://www.slidebaker.com/iris/irislight?pid=136f0654553654f9&comp='+comp;

$('#confiImg').attr('src',newUrl);

For chosing the colors, I decided to use Spectrum Color Picker.  It is easy to use and looks fancy.  Whenever the color-picker changes, the color-object must be updated.  Right after, I call the update-image function.  Now the image will update instantly and always show the correct configuration.

See demo