The final output of the image looks like this below.

If you look into html parts, It's create using different divs as below. All the div are placed one on one using CSS and making the position to absolute.

<div id="tproduct" class="timage" style="z-index: 30; background-image: url('main-mask.png') ;"></div>
<div id="tdesign1" class="timage" style="z-index: 20; background-image: url('design1.png');"></div>
<div id="tdesign2" class="timage" style="z-index: 20; background-image: url('design2.png');"></div>
<div id="tmaincolor" class="timage" style="background-color:blue;"></div>
<div id="tembellishment" class="timage" style="z-index: 10; background-image: url('flower.png');"></div>

If we look at separately it will look like this below.

etc

My question is how can I create a single image using above set of divs and images? I can use PHP or jQuery?

I only want the steps or guidance how it should be done. Thanks