Monday, March 28, 2016

Photoshop Magazine Cover




Photos used:

For this project i decided to really have fun with it. I really enjoy photoshop because it really allowed me to create an overall image that i could see myself designing in the future. Plus,  since we have been doing this project, i have used the skills i have learned to do similar types of magazine covers for a PR plan book. I believe that Illustrator is still my strongest program, but, photoshop has to be the second best project i feel as if i have completed. 
I decided to use the Relay for Life photo of me because because i am helping plan the upcoming RFL event. Since it is in less than a month, i really enjoy posting pictures of it to advertise, etc. even though it is the biggest non-profit event hosted on campus each year. I then decided to use the picture of me at the beach because i love going as much as i can. I grew up going to the beach so again, i decided to add a photo of something i enjoy. I also used the RFL logo because it really aids in the success of my overall magazine cover, it gives it a realistic magazine feel. I then decided to add in a picture of my friend and i at sorority recruitment last year since most sororities have begun the long recruitment practice process for the upcoming fall semester. 
I feel as if this cover really portrays an accurate description of my life here at UT, minus the academic aspect, maybe i should of included a picture of myself studying? Or maybe not. 
Enjoy! 


Posted by at No comments:

Wednesday, March 23, 2016

Photoshop Self Insert Project


I really enjoyed this assignment. Realistically, i took a photo of myself from a cliff in Laguna Beach, California. With the insertion here, it is pretty cool that i looks like i am looking out from a cliff in Santorini, Greece, a place that i have only dreamed about going. Hopefully i can take a photograph similar to this there one day!
Posted by at No comments:

Sunday, March 20, 2016

HTML Project


 

CODE:

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

////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ


////SKY (triangle size of canvas)/////
context.beginPath();
context.rect(0, 0, 800, 600);
context.strokeStyle = '#F900F9';
context.fill();
context.stroke();

/////STAR UPPER LEFT CORNER/////
context.beginPath();
context.moveTo(50, 50);
context.lineTo(0, 100);
context.strokeStyle = '#FFFF00';
context.lineWidth = 1;
context.stroke();

context.beginPath();
context.moveTo(0, 50);
context.lineTo(50, 100);
context.strokeStyle = '#FFF00';
context.lineWidth = 1;
context.stroke();

context.beginPath();
context.moveTo(25, 15);
context.lineTo(25, 150);
context.strokeStyle = '#FFF00';
context.lineWidth = 1;
context.stroke();

context.beginPath();
context.moveTo(0, 75);
context.lineTo(50, 75);
context.strokeStyle = '#FFF00';
context.lineWidth = 1;
context.stroke();

//STAR MIDDLE LEFT//
context.beginPath();
context.moveTo(50, 300);
context.lineTo(100, 350);
context.strokeStyle = '#FFF00';
context.lineWidth = 1;
context.stroke();

context.beginPath();
context.moveTo(50, 350);
context.lineTo(100, 300);
context.strokeStyle = '#FFF00';
context.lineWidth = 1;
context.stroke();

context.beginPath();
context.moveTo(50, 325);
context.lineTo(100, 325);
context.strokeStyle = '#FFF00';
context.lineWidth = 1;
context.stroke();

context.beginPath();
context.moveTo(75, 265);
context.lineTo(75, 385);
context.strokeStyle = '#FFF00';
context.lineWidth = 1;
context.stroke();

////STAR LOWER RIGHT CORNER////

///line from right to left////
context.beginPath();
context.moveTo(750, 600);
context.lineTo(800, 550);
context.strokeStyle = '#FFFF00';
context.lineWidth = 1;
context.stroke();

////line from left to right///
context.beginPath();
context.moveTo(750, 550);
context.lineTo(800, 600);
context.strokeStyle = '#FFFF00';
context.lineWidth = 1;
context.stroke();

 ////intersecting line horizontal///
context.beginPath();
context.moveTo(750, 575);
context.lineTo(800, 575);
context.strokeStyle = '#FFFF00';
context.lineWidth = 1;
context.stroke();

//intersecting line vertical///
context.beginPath();
context.moveTo(775, 540);
context.lineTo(775, 700);
context.strokeStyle = '#FFFF00';
context.lineWidth = 1;
context.stroke();

///STAR RIGHT CORNER OFF SIDE OF GRAPH///
context.beginPath();
context.moveTo(750, 0);
context.lineTo(700, 50);
context.strokeStyle = '#FFFF00';
context.lineWidth = 1;
context.stroke();

context.beginPath();
context.moveTo(700, 0);
context.lineTo(750, 50);
context.strokeStyle = '#FFFF00';
context.lineWidth = 1;
context.stroke();

context.beginPath();
context.moveTo(700, 25);
context.lineTo(750, 25);
context.strokeStyle = '#FFFF00';
context.lineWidth = 1;
context.stroke();

context.beginPath();
context.moveTo(725, 0);
context.lineTo(725, 100);
context.strokeStyle = '#FFFF00';
context.lineWidth = 1;
context.stroke();

//STAR NEAR VENUS///
context.beginPath();
context.moveTo(150, 100);
context.lineTo(200, 150);
context.strokeStyle = '#FFFF00';
context.lineWidth = 1;
context.stroke();

context.beginPath();
context.moveTo(200, 100);
context.lineTo(150, 150);
context.strokeStyle = '#FFFF00';
context.lineWidth = 1;
context.stroke();

context.beginPath();
context.moveTo(150, 125);
context.lineTo(200, 125);
context.strokeStyle = '#FFFF00';
context.lineWidth = 1;
context.stroke();

context.beginPath();
context.moveTo(175, 60);
context.lineTo(175, 200);
context.strokeStyle = '#FFFF00';
context.lineWidth = 1;
context.stroke();

//LINE LEFT TO RIGHT//
context.beginPath();
context.moveTo(700, 250);
context.lineTo(750, 300);
context.strokeStyle = '#FFFF00';
context.lineWidth = 1;
context.stroke();

//LINE RIGHT TO LEFT//
context.beginPath();
context.moveTo(750, 250);
context.lineTo(700, 300);
context.strokeStyle = '#FFFF00';
context.lineWidth = 1;
context.stroke();

//INTERSECTING LINE HORIZONTAL//
context.beginPath();
context.moveTo(700, 275);
context.lineTo(750, 275);
context.strokeStyle = '#FFFF00';
context.lineWidth = 1;
context.stroke();

//INTERSECTING LINE VERTICAL//
context.beginPath();
context.moveTo(725, 220);
context.lineTo(725, 320);
context.strokeStyle = '#FFFF00';
context.lineWidth = 1;
context.stroke();

//STAR UPPER RIGHT CORNER//
context.beginPath();
context.moveTo(150, 450);
context.lineTo(200, 500);
context.strokeStyle = '#FFFF00';
context.lineWidth = 1;
context.stroke();

//LINE FROM LEFT TO RIGHT//
context.beginPath();
context.moveTo(150, 450);
context.lineTo(200, 500);
context.strokeStyle = '#FFFF00';
context.lineWidth = 1;
context.stroke();

//LINE FROM RIGHT TO LEFT//
context.beginPath();
context.moveTo(200, 450);
context.lineTo(150, 500);
context.strokeStyle = '#FFFF00';
context.lineWidth = 1;
context.stroke();

//INTERSECTING HORIZONTAL LINE//
context.beginPath();
context.moveTo(150, 475);
context.lineTo(200, 475);
context.strokeStyle = '#FFFF00';
context.lineWidth = 1;
context.stroke();

//INTERSECTING VERTICAL LINE//
context.beginPath();
context.moveTo(175, 420);
context.lineTo(175, 520);
context.strokeStyle = '#FFFF00';
context.lineWidth = 1;
context.stroke();


//SUN//
context.beginPath();
context.arc(500, 200, 150, 0, 2*Math.PI, false);
//context.fillStyle = '#FF9900';
var grd = context.createRadialGradient(500, 200, 75, 500, 200, 170);
grd.addColorStop(0, '#FFCC66');
grd.addColorStop(.5, '#FF9900');
context.fillStyle = grd;
context.fill();
context.closePath();
context.stroke();

//EARTH//
context.beginPath();
context.arc(340, 480, 75, 0, 2*Math.PI, false);
context.fillStyle = '#0066FF';
context.fill();
context.strokeStyle = '#0066FF';
context.lineWidth = 2;
context.stroke();

//SHAPES INSIDE EARTH//
context.beginPath();
context.moveTo(330, 404);
context.quadraticCurveTo(285, 408, 265, 460);
context.quadraticCurveTo(278, 490, 285, 460);
context.quadraticCurveTo(328, 480, 330, 450);
context.quadraticCurveTo(350, 425, 330, 404);
context.fillStyle = '#336600';
context.fill();

context.beginPath();
context.moveTo(320, 520);
context.quadraticCurveTo(330, 500, 340, 510);
context.quadraticCurveTo(370, 520, 370, 530);
context.quadraticCurveTo(350, 550, 340, 540);
context.fillStyle = '#336600';
context.fill();

context.beginPath();
context.moveTo(355, 445)
context.quadraticCurveTo(370, 430, 390, 440);
context.quadraticCurveTo(390, 450, 370, 460);
context.quadraticCurveTo(375, 470, 355, 455);
context.fillStyle = '#336600';
context.fill();

context.beginPath();
context.moveTo(290, 525);
context.quadraticCurveTo(270, 520, 270, 500);
context.quadraticCurveTo(280, 490, 290, 499);
context.quadraticCurveTo(300, 500, 295, 515);
context.fillStyle = '#336600';
context.fill();

context.beginPath();
context.moveTo(370, 490);
context.quadraticCurveTo(405, 470, 401, 480);
context.quadraticCurveTo(399, 500, 380, 490);
context.quadraticCurveTo(365, 487, 365, 490);
context.fillStyle = '#336600';
context.fill();


context.beginPath();
context.arc(340, 480, 75, 0, 2*Math.PI, false);
var grd = context.createRadialGradient(370, 450, 19, 370, 460, 53);
grd.addColorStop(0, 'rgba(200, 200, 200, .3)');
grd.addColorStop(.5, 'rgba(80, 80, 80, .3)');
context.fillStyle = grd;
context.fill();
context.strokeStyle = '#0066FF';
context.lineWidth = 2;


//context.quadraticCurveTo(controlx, controly, endx, endy);
//context.bezierCurveTo(controlx1, controly1, controlx2, controly2, endx2, endy2);

//VENUS//
context.beginPath();
context.arc(250, 290, 50, 0, 2*Math.PI, false);
//context.fillStyle = '#CC9933';
var grd = context.createRadialGradient(265, 275, 10, 265, 280, 50);
grd.addColorStop(0, '#FFCC33');
grd.addColorStop(.4, '#996600');
context.fillStyle = grd;
context.fill();
context.strokeStyle = '#CC9933';
context.lineWidth = 1;
context.stroke();



//MERCURY//
context.beginPath();
context.arc(290, 145, 30, 0, 2*Math.PI, false);
//context.fillStyle = '#CCCCCC';
var grd = context.createRadialGradient(300, 130, 3, 300, 150, 30);
grd.addColorStop(0, '#999999');
grd.addColorStop(.4, '#666666');
context.fillStyle = grd;
context.fill();
context.strokeStyle = '#CCCCCC';
context.lineWidth = 1;
context.stroke();


//MARS//
context.beginPath();
context.arc(500, 520, 45, 0, 2*Math.PI, false);
//context.fillStyle = '#660000';
var grd = context.createRadialGradient(510, 500, 4.5, 500, 500, 45);
grd.addColorStop(0, '#CC0000');
grd.addColorStop(.5, '#990000');
context.fillStyle = grd;
context.fill();
context.strokeStyle = '#660000';
context.lineWidth = 2;
context.stroke();


//JUPITER//
context.beginPath();
context.arc(680, 430, 100, 0, 2*Math.PI, false);
//context.fillStyle = '#CC3300';
var grd = context.createRadialGradient(710, 350, 4.5, 670, 420, 100);
grd.addColorStop(0, '#CC3300');
grd.addColorStop(.5, '#990000');
context.fillStyle = grd;
context.fill();
context.fill();
context.strokeStyle = '#CC3300';
context.lineWidth = 2;
context.stroke();


//LINES INSIDE OF VENUS//

context.beginPath();
context.moveTo(265, 150);
context.quadraticCurveTo(290, 130, 280, 140);
context.quadraticCurveTo(260, 145, 280, 155);
context.fillStyle = '#CCCCCC';
context.fill();

context.beginPath();
context.moveTo(270, 150);
context.quadraticCurveTo(280, 140, 275, 160);
context.fillStyle = '#CCCCCC';
context.fill();

//SHAPES INSIDE OF MERCURY//
context.beginPath();
context.moveTo(215, 260);
context.quadraticCurveTo(230, 245, 224, 255);
context.quadraticCurveTo(240, 270, 220, 265);
context.fillStyle = '#FFCC66';
context.fill();

context.beginPath();
context.moveTo(270, 320);
context.quadraticCurveTo(280, 310, 270, 305);
context.quadraticCurveTo(250, 320, 255, 310);
context.fillStyle = '#FFCC66';
context.fill();

//SHAPES INSIDE OF MARS//
context.beginPath();
context.moveTo(540, 530);
context.quadraticCurveTo(530, 515, 535, 530);
context.quadraticCurveTo(540, 540, 542, 520);
context.fillStyle = '#663333';
context.fill();

context.beginPath();
context.moveTo(490, 545);
context.quadraticCurveTo(530, 550, 520, 552);
context.quadraticCurveTo(515, 545, 500, 545);
context.fillStyle = '#663333';
context.fill();

context.beginPath();
context.moveTo(460, 530);
context.quadraticCurveTo(480, 510, 470, 530);
context.quadraticCurveTo(480, 545, 465, 540);
context.fillStyle = '#663333';
context.fill();

//SHAPES INSIDE OF JUPITER//

context.beginPath();
context.moveTo(623, 345);
context.quadraticCurveTo(700, 440, 776, 460);
context.fillStyle = '#CC3300';
context.fill();

context.beginPath();
context.moveTo(715, 500);
context.quadraticCurveTo(700, 450, 715, 520);
context.fillStyle = '#CC3300';
context.fill();

context.beginPath();
context.moveTo(615, 450);
context.quadraticCurveTo(640, 530, 690, 520);
context.fillStyle = '#CC3300';
context.fill();

context.beginPath();
context.moveTo(600, 430);
context.quadraticCurveTo(655, 400, 670, 430);
context.quadraticCurveTo(680, 450, 700, 450);
context.quadraticCurveTo(665, 460, 650, 450);
context.fillStyle = '#CC3300';
context.fill();




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

};

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

LINK TO HTML WORK: file:///Users/mariedoffermyre/Documents/PLANETS%20PROJECT.html

So, this project was super complicated for me. I always push myself to understand everything we cover in this course, but, i can say this project is something i really did not catch onto compared to Illustrator. I did enjoy this project after a while because i learned to memorize certain spots on the graph which helped, but, when graphing out my entire project i can say that i did stray from using certain points because it did not work, use radial gradients, create curves using the quadratic curve formula, and also used hexidecimal color coding. I can truly say i took a lot away from this project, but i am still lost when using some parts of the TextWrangler program, as well as coding. This was a very great tool/tactic to get to know though since i plan on taking web design in the upcoming fall semester and the course mainly consists of coding. Coding is a total guessing game, and i can say i am not the most successful at it.

Posted by at No comments:
Subscribe to: Posts (Atom)