Thursday, March 24, 2016

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.



Posted by at No comments:

Monday, March 21, 2016

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.
Posted by at No comments:

Wednesday, March 16, 2016

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>
Posted by at No comments:
Subscribe to: Posts (Atom)