Final In Design

Animation 4/25

I made a video about what a girl should wear on her birthday and how her roommate can be critical on what she should wear. I used photos in photoshop using a timeline. I first took a picture of my roommates room so the background was the same. Then I took a bunch of pictures of myself facing all directions in all different outfits so I can have free range to move myself around the background. I then took a picture of my roommate indicating yes or no. I extracted my roommate, the folding screen and myself and put it in the background. I also recorded myself for the dialogue and imported the voices for the video. I really enjoyed this project, it was fun to manipulate the images to make it seem like they were moving. 

Storyboard Sketches

I'm going to do a girl trying to find a birthday outfit. She tries on all pretty outfits and her roommate keeps saying "NO!" and until finally she comes out with a ridiculous outfit on and her roommate loves it and says "YES!". She keeps going behind a curtain and shows up with a different outfit when she returns. I'm going to use photoshop and use pictures but not stop motion. I'm excited for this project. 

Collage Environment 4/6

I used the song lyrics from the song "I'll be" by Edwin McCain for my collage inspiration. This song is a love song but this set of lyrics made me think of a father-daughter bond. I took pictures from google and personal pictures of family to have the years of their lives throughout the landscape. I first have a newborn in the back, then age 5 on the bench, a teenager in the middle, a young women at her wedding and then finally the daughter all grown up waiting to meet her Dad again in heaven. I wanted to use a mixture of a black and white filter and a sepia tone filter to set the emotion and scene. I also decided to use the lyrics in the photo so that it didn't look like just a bunch of people in the park and show that it's stages of one persons life. I liked this project because I liked using a song for inspiration and had fun extracting all these photos and putting it into one. 

Magazine Cover

So I decided to do a magazine cover about my roommates and I. I used the original In Touch Magazine layout but added "with West Cass" since that is our old street name. I used the $19.05 amount because that number is what people refer to us as "1905", as a group. I used all headlines for each roommate as the total opposite of what's going on in their lives. Brittany is moving home to New York for her boyfriend and is leaving her job here in Tampa. Maya is a workout fanatic and would never give up working out or "lifting". Sam has been dating her boyfriend for 4 years and he would never say no to formal. Abby is obsessed with her nephew and can't not bring him up every minute so I said she was charged with kidnapping him as a joke. Our lease is ending and myself and Brittany are moving back to New York so we don't know what is next for all of us. As for using photoshop, I absolutely loved it. I'm familiar with the program because I use it for work but I had a lot of fun mimicking an actual magazine cover. The biggest trouble I came across was getting the banner across Brittany's bubble to have the same edges as the circle because it was originally a rectangle. I just used the eclipse and inverted the image and used the eraser to erase around the edges to make it round. This was my favorite project thus far. Enjoy! Below are my original images.

Self Insertion 3/23

I used a photo of myself from halloween when I was dressed as a WWE Diva. I inserted myself in the WWE ring in the middle of a match. I used eraser and lasso tool to cut me out of the original photograph and then used the Free Transform tool to resize myself as well as turning me so I stood level to the floor. I also used the Blending option tool to give myself a shadow that matched the girl lying on the floor. I also brightened the photo of myself to match the light tones of the skin of the other two girls and added a little contrast. This was a fun assignment for me because I have used Photoshop before but not for something like this.

ASCII HTML

I wanted to do a old Nintendo controller because I felt coding would look cool with having an out of date reference photo. I first Googled an image of the controller and put it on the graph shell in Photoshop. I printed it out and proceeded to write all of the x,y coordinates. I followed the HTML template guide under Professor Corrigans blog, which helped a lot. Making the rectangles is what I found easiest to do, especially the four in the middle because they all of the same code so it was easy to duplicate all four of those but just moving down the Y coordinates. The most trouble I had was with the gradient color scheme for the Nintendo controller itself and with the bezier curve. It took a lot of playing around with coordinates to make everything just right and how I wanted it. I liked this project because I would have never learned how to do this otherwise but it was just really time consuming. Hope you enjoy! See reference photo below.

 

CODING

<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
//Background
context.beginPath();
context.rect(0,0,800,600);
var grd = context.createLinearGradient(0,600,800,0)
grd.addColorStop(0,'rgb(255,255,255)');
grd.addColorStop(1,'rgb(0,0,0)');
context.fillStyle=grd;
context.fill();
context.stroke();

//bezier cord
context.beginPath();
context.moveTo(400, 400);
context.bezierCurveTo(240, 780, 870, 270, 750, 900);
context.lineWidth=11;
context.stroke();

//Outer edge council
context.beginPath();
context.rect(50,150,700,300);
context.lineWidth=5;
context.fillStyle= "Gray";
context.fill();
context.stroke();


//inner edge council
context.beginPath();
context.rect(75,180,650,240);
var grd = context.createLinearGradient(0,600,800,0)
grd.addColorStop(0,'rgb(100,100,100)');
grd.addColorStop(1,'rgb(0,0,0)');
context.fillStyle=grd;
context.fill();
context.stroke();

//direction buttons
context.beginPath();
context.moveTo(165,262);
context.lineTo(165,310);
context.lineTo(125,310);
context.lineTo(125,350);
context.lineTo(165,350);
context.lineTo(165,390);
context.lineTo(210,390);
context.lineTo(210,350);
context.lineTo(250,350);
context.lineTo(250,310);
context.lineTo(210,310);
context.lineTo(210,265);
context.lineTo(165,265);
context.fillStyle= "Gray";
context.fill();
context.stroke();

//button 1
context.beginPath();
context.rect(510,330,70,70);
context.fillStyle= "Gray";
context.fill();
context.stroke();

//button 2
context.beginPath();
context.rect(605,330,70,70);
context.fillStyle= "Gray";
context.fill();
context.stroke();

//circle in button 1
context.beginPath();
context.arc(545,365,30,0,2*Math.PI,false);
context.fillStyle= "red";
context.fill();
context.stroke();

//circle in button 2
context.beginPath();
context.arc(640,365,30,0,2*Math.PI,false);
context.fillStyle= 'rgb(215,0,0)';
context.fill();
context.stroke();

//middle rectangles
context.beginPath();
context.rect(325,200,150,25);
context.fillStyle= "Gray";
context.fill();
context.stroke();

context.beginPath();
context.rect(325,250,150,25);
context.fillStyle= "Gray";
context.fill();
context.stroke();

context.beginPath();
context.rect(325,300,150,25);
context.fillStyle= "Gray";
context.fill();
context.stroke();

context.beginPath();
context.rect(325,350,150,50);
context.fillStyle= "gray";
context.fill();
context.stroke();

//tiny buttons in middle
context.beginPath();
context.rect(350,368,38,15);
context.fillStyle= "Gray";
context.fill();
context.stroke();

context.beginPath();
context.rect(410,368,38,15);
context.fillStyle= "Gray";
context.fill();
context.stroke();

//start button
context.font = 'Bold 25px Impact';
context.fillStyle = 'rgb(215,0,0)';
context.fillText("S", 350, 272);
context.strokeStyle = 'white';
context.lineWidth = 1;
context.strokeText('S', 350, 272);

context.font = 'Bold 25px Impact';
context.fillStyle = 'rgb(215,0,0)';
context.fillText("T", 370, 272);
context.strokeStyle = 'white';
context.lineWidth = 1;
context.strokeText('T', 370, 272);

context.font = 'Bold 25px Impact';
context.fillStyle = 'rgb(215,0,0)';
context.fillText("A", 390, 272);
context.strokeStyle = 'white';
context.lineWidth = 1;
context.strokeText('A', 390, 272);

context.font = 'Bold 25px Impact';
context.fillStyle = 'rgb(215,0,0)';
context.fillText("R", 410, 272);
context.strokeStyle = 'white';
context.lineWidth = 1;
context.strokeText('R', 410, 272);

context.font = 'Bold 25px Impact';
context.fillStyle = 'rgb(215,0,0)';
context.fillText("T", 430, 272);
context.strokeStyle = 'white';
context.lineWidth = 1;
context.strokeText('T', 430, 272);

//B button
context.font = 'Bold 18px Impact';
context.fillStyle = 'rgb(215,0,0)';
context.fillText("A", 570, 417);
context.strokeStyle = 'white';
context.lineWidth = 1;
context.strokeText('A', 570, 417);

//A button
context.font = 'Bold 18px Impact';
context.fillStyle = 'rgb(215,0,0)';
context.fillText("B", 665, 417);
context.strokeStyle = 'white';
context.lineWidth = 1;
context.strokeText('B', 665, 417);

//Nintendo Name
context.font = 'Bold 40px Impact';
context.fillStyle = 'rgb(215,0,0)';
context.fillText("N", 530, 272);
context.strokeStyle = 'white';
context.lineWidth = 1;
context.strokeText('N', 530, 272);

context.font = 'Bold 40px Impact';
context.fillStyle = 'rgb(215,0,0)';
context.fillText("i", 550, 272);
context.strokeStyle = 'white';
context.lineWidth = 1;
context.strokeText('i', 550, 272);

context.font = 'Bold 40px Impact';
context.fillStyle = 'rgb(215,0,0)';
context.fillText("n", 560, 272);
context.strokeStyle = 'white';
context.lineWidth = 1;
context.strokeText('n', 560, 272);

context.font = 'Bold 40px Impact';
context.fillStyle = 'rgb(215,0,0)';
context.fillText("t", 580, 272);
context.strokeStyle = 'white';
context.lineWidth = 1;
context.strokeText('t', 580, 272);

context.font = 'Bold 40px Impact';
context.fillStyle = 'rgb(215,0,0)';
context.fillText("e", 590, 272);
context.strokeStyle = 'white';
context.lineWidth = 1;
context.strokeText('e', 590, 272);

context.font = 'Bold 40px Impact';
context.fillStyle = 'rgb(215,0,0)';
context.fillText("n", 610, 272);
context.strokeStyle = 'white';
context.lineWidth = 1;
context.strokeText('n', 610, 272);

context.font = 'Bold 40px Impact';
context.fillStyle = 'rgb(215,0,0)';
context.fillText("d", 630, 272);
context.strokeStyle = 'white';
context.lineWidth = 1;
context.strokeText('d', 630, 272);

context.font = 'Bold 40px Impact';
context.fillStyle = 'rgb(215,0,0)';
context.fillText("o", 650, 272);
context.strokeStyle = 'white';
context.lineWidth = 1;
context.strokeText('o', 650, 272);

//R circle
context.beginPath();
context.arc(680,240,10,0,2*Math.PI,false);
context.lineWidth=2;
context.strokeStyle = 'red';
context.stroke();


context.font = 'Bold 18px Impact';
context.fillStyle = 'rgb(215,0,0)';
context.fillText("R", 675, 247);
context.strokeStyle = 'white';
context.lineWidth = 1;
context.strokeText('R', 675, 247);

//chip quadratic
context.beginPath();
context.moveTo(300, 148);
context.quadraticCurveTo(400, 50, 500, 148);
context.fillStyle= "Gray";
context.fill();
context.strokeStyle = 'black';
context.lineWidth = 5;
context.stroke();





////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ

};

</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>