Final Portfolio Work

For my final portfolio, i wanted a design that i thought really represented myself. I love nature and a more "boho" vibe, so, the images i found to use as watermarks on each page as well as the cover page, quote page, table of contents, and the final page were from Adobe Stock (wanted photos as high quality as possible). 

When looking at other previous portfolio assignments, what really caught my eye was the use of two pages to describe an image, so one can really get a good look at the work the other has done throughout the semester without having to shrink it down and ruin the overall quality of the photograph.

I feel as like this portfolio is a really good representation of my art work and i plan on possibly getting a professional version printed for myself. 

Animation Project

For this project, for some reason, i decided to go the extremely hard route. I really enjoy Illustrator, so, making the puppets was no problem for me. But, i got extremely confused when using the program, After Effects. If i was to spend more time in After Effects, i would probably get the hang of using it, but, as of now i'm not the best with it. I struggled with adding music to the project because for some reason the music decided to delete my entire project at one point. Luckily, another student was here to help me get the file back after i thought i completely lost it. Overall, i had a lot of cool ideas for the project and i feel as if i completed it to my full potential due to how much time we were given to complete it. I LOVE illustrator, once again, but, i despise After Effects (i'm a premiere person). This was overall a great learning experience though and i can now say that i am pretty good with making animation puppets!

Story Board:

Photoshop Collage

For my collage project i decided to have photographs of my family portrayed as "memories" through reflections on the water as i look out at the scenery Bayshore Blvd has to offer. 

I love my family and miss them all the time, so this project really means a lot to me. I decided to gray out my surroundings (i.e., the sky, the side walk, the ledge, the city skyline) because i wanted to have total focus on myself reflecting on all of the memories i have made with my family through these photographs the past couple of years. 

I am i huge Goo Goo Dolls fan so i used their song "Name" lyrics on the ledge i am leaning on. I decided to use these lyrics because they really add overall deeper meaning and show how it becomes easy to "lose yourself" in the grand scheme of things (growing up and moving away from your family). I tried to make the lyrics look as if they were carved into the Bayshore wall, making the text looking super realistic. The lyrics that are further down the wall say "the past is never far," which allows a play on the overall image because the text is far.. and the past is sitting right in front of me. 

Finally, i decided to make the sky filled with darker color clouds to add aesthetic value. Also, it shows emphasis on why there is color around myself and the water with the reflections in it.

Staring at the reflections makes me "happy" causing me to be colored in a "gray"world. My family and memories make me happy, aka color aspect :) 

Enjoy! 

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! 

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!

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.

Vector Illustration

For my Vector Illustration i did Kendall Jenner. I really enjoyed this project because it tested my ability to successfully use Illustrator. I find it really cool how i now know how to make someone appear in an illustration format. I will probably use this again in the future.