Mash Up!

What you will be learning.

Today you will be learning how to do a mash up. A mash up cosists of a group of photos cut into segments that you then can scroll through to make wacky pictures! This can be used for entertainment purposes such as the example below where we are matching up celebrities.

Photoshop Settings

To get the images to line up correctly set up a base photoshop document. Then from there set a base image and mark the image of from the top to the forehead. From the forehad to the bottom of the eyes. Then from the eyes to the bottom of the nose. And from there the bottom of the nose to the bottom of the face. From there you want to make a new document for each segment with the height of the base segment and the width the average width should be about 500px and the height should be around 600px.

Example of base template.

From there begin to add the image parts to the strip templates. Then bring a new picture into the base template and change the opcaity. Increase or decrease the size of the new photo to fit the grid you laid out from there repeat the steps of making the selection and then moving them into their designated strips. And that is how you make the image strips for the mashup!

Example of a finished image strip

Example

Due to the size of the example HERE is the example!

Code Required

HTML Markup

<div id="container4">
<div id="pic_box">
<div id="forehead" class="face">
<img src="../lib/img/mashup/headstrip.jpg">
</div>
<div id="eyes" class="face">
<img src="../lib/img/mashup/eyestrip.jpg">
</div>
<div id="nose" class="face">
<img src="../lib/img/mashup/nosestrip.jpg">
</div>
<div id="mouth" class="face">
<img src="../lib/img/mashup/mouthstrip.jpg">
</div>
</div>

CSS Markup

body{
	background-color:black;
	background-image:url(../lib/img/mashup/background1.jpg);
	background-attachment:fixed;
}
#top{
    color: #3AB849;
  margin: 0 auto;
  font-family: 'Orbitron', sans-serif;
  width: 1280px;
  line-height: 3;
  font-size: 26px;
  background-color: black;
  padding-top: 40px;
}
#container4{
	margin-top:120px;
}
#pic_box{
    width: 496px;
  height: 591px;
  z-index: 2;
  overflow: hidden;
  margin: 0 auto;
  box-shadow: 17px 11px 24px #3AB849;
   border-radius: 229px 229px 229px 229px;
}
.face{
	position:relative;
	left:0px;
	top:0px;
	z-index:1;
	cursor:pointer;
}
#forehead{
	height:172px;
}
#eyes{
	height:100px;
}
#nose{
	height:100px;
}
mouth{
	height:220px;
}
#wrapper{
	width:960px;
	margin:0 auto;
}
#container4{
	margin-top: 160px;
  margin-left: 65px;
}
h1{
  font-size: 40px;		
}
.backbtn {
	text-decoration: none;
	width: 100px;
}
.backbtn h2 {
	  font-family: 'Open Sans Light 300', sans-serif;
  font-size: 30px;
  margin-top: 90px;
  box-shadow: 9px 5px 22px #33AD46;
  background-color: #070A0F;
  border-radius: 50%;
  width: 100px;
  height: 50px;
  color: #3AB849;
  text-decoration: none;
  padding-left: 36px;
  padding-top: 10px;
  }
.backbtn a {
	text-decoration: none;
}
#headwrap {
  width: 100%;
  background-color: black;
  box-shadow: 3px 8px 15px #3AB849;
}

Javascript Markup 

$(document).ready(function(){
 	var headclick = 0 , eyeclick = 0, noseclick = 0, mouthclick = 0;
//start forehead click
	$("#forehead").click(function(){
	if(headclick < 5){
		$("#forehead").animate({left:"-=500"},500);
		headclick+=1;
	}
	else{
		$("#forehead").animate({left:"0px"},500);
		headclick=0;
	}
	});
//start eye click
	$("#eyes").click(function(){
	if(eyeclick < 5){
		$("#eyes").animate({left:"-=500"},500);
		eyeclick+=1;
	}
	else{
		$("#eyes").animate({left:"0px"},500);
		eyeclick=0;
	}
	});
// start nose click
	$("#nose").click(function(){
	if(noseclick < 5){
		$("#nose").animate({left:"-=500"},500);
		noseclick+=1;
	}
	else{
		$("#nose").animate({left:"0px"},500);
		noseclick=0;
	}
	});
	//start mouth click
	$("#mouth").click(function(){
	if(mouthclick < 5){
		$("#mouth").animate({left:"-=500"},500);
		mouthclick+=1;
	}
	else{
		$("#mouth").animate({left:"0px"},500);
		mouthclick=0;
	}
	});
}); // end document

Back