Monday, May 1, 2017
Friday, April 21, 2017
Animation
Since my collage was scattered postcards, I thought it would make sense to animate them so it appeared that they were being tossed onto a table. Then for the final postcard, which was the focal point of my collage, I animated some of the elements separately to make the animation more interesting. Since the collage was inspired by the song "New York Soul" by Jon Bellion, I used the beginning of it for the sound portion of the animation.
Sunday, April 9, 2017
Collage
Monday, April 3, 2017
Magazine Cover
For this assignment I chose to create the cover to a travel magazine. When I was searching for a photo of me to use for a magazine I found pictures from when I went kayaking and decided from there creating a travel magazine would be a good fit. I focused the magazine on Florida so my photo would make sense. I wanted to make the background image fit the whole cover, because thats how the majority of travel magazines look. For the text and other images I made sure to add drop shadows to increase the contrast between them and the background so it was easily readable.
Monday, March 27, 2017
Self Insertion
Just a cute candid from the time Justin Timberlake took me to the Grammys with him.
-original photos-
Tuesday, March 21, 2017
ASCII Assignment
Rather than recreating a logo for this assignment, I decided to challenge myself and create an image of my own. I started my process by drawing this cute cartoon whale on paper and drawing a graph over it. Then I used Illustrator to graph my image again digitally to help with determining the control points for the curves of the whale's body. Then after some trial and error and a few more details I was able to create the image you see here. I have very little experience working with code to create illustrations like this, so overall, I'm happy with the way it turned out.
- code -
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
//tail
context.beginPath();
context.moveTo(475, 285);
context.quadraticCurveTo(474, 279, 470, 275);
context.bezierCurveTo(425, 225, 455, 170, 450, 150);
context.bezierCurveTo(465, 170, 525, 195, 515, 250);
context.bezierCurveTo(565, 230, 620, 265, 630, 257);
context.bezierCurveTo(605, 275, 575, 315, 525, 310);
context.quadraticCurveTo(510, 307, 500, 310);
//body
context.bezierCurveTo(480, 325, 475, 375, 425, 390);
context.quadraticCurveTo(300, 425, 200, 385);
context.bezierCurveTo(130, 350, 140, 225, 200, 200);
context.quadraticCurveTo(275, 175, 340, 200);
context.bezierCurveTo(400, 220, 425, 345, 460, 320);
context.bezierCurveTo(470, 310, 475, 305, 475, 285);
context.closePath();
context.fillStyle = "rgb(200, 255, 250)";
context.fill();
context.lineWidth =2;
context.stroke();
//eye
context.beginPath();
context.moveTo(200, 310);
context.bezierCurveTo(190, 270, 250, 270, 240, 310);
context.quadraticCurveTo(220, 305, 200, 310);
context.fillStyle = "white";
context.fill();
context.lineWidth =1;
context.stroke();
//pupil
context.beginPath();
context.arc(215, 293, 10, 0, 2*Math.PI, false);
context.closePath();
context.fillStyle = "black";
context.fill();
context.strokeStyle = "rgb(120, 70, 180)";
context.lineWidth =4;
context.stroke();
//eye shine
context.beginPath();
context.arc(212, 289, 4, 0, 2*Math.PI, false);
context.closePath();
context.fillStyle = "white";
context.fill();
//blowhole
context.beginPath();
context.moveTo(270, 200);
context.bezierCurveTo(272, 195, 281, 195, 283, 200);
context.bezierCurveTo(281, 205, 272, 205, 270, 200);
context.fillStyle = "rgb(70, 70, 70)";
context.fill();
context.lineWidth =1;
context.strokeStyle = "rgb(0, 0, 0)";
context.stroke();
//belly
context.beginPath();
context.moveTo(425, 389);
context.quadraticCurveTo(300, 424, 201, 385);
context.quadraticCurveTo(175, 371, 166, 350);
context.bezierCurveTo(275, 340, 320, 425, 425, 389)
context.closePath();
context.fillStyle = "rgb(240, 255, 250)";
context.fill();
//fin
context.beginPath();
context.moveTo(280, 368);
context.bezierCurveTo(275, 410, 325, 427, 340, 440);
context.quadraticCurveTo(350, 400, 325, 373);
context.fillStyle = "rgb(200, 255, 250)";
context.fill();
context.lineWidth =2;
context.strokeStyle = "rgb(0, 0, 0)";
context.stroke();
//smile
context.beginPath();
context.moveTo(164, 350);
context.quadraticCurveTo(218, 355, 225, 335);
context.lineWidth =1;
context.stroke();
//cheek
context.beginPath();
context.moveTo(230, 325);
context.bezierCurveTo(232, 317, 251, 317, 253, 325);
context.bezierCurveTo(251, 333, 232, 333, 230, 325);
context.closePath();
context.fillStyle = "rgb(255, 190, 225)";
context.fill();
//water droplets
context.beginPath();
context.moveTo(275, 175);
context.bezierCurveTo(255, 130, 240, 125, 225, 125);
context.bezierCurveTo(215, 128, 215, 140, 225, 145);
context.bezierCurveTo(235, 150, 260, 150, 275, 175);
context.lineWidth =1;
context.closePath();
context.fillStyle = "rgb(240, 255, 250)";
context.fill();
context.stroke();
context.beginPath();
context.moveTo(275, 160);
context.bezierCurveTo(280, 125, 300, 105, 325, 100);
context.bezierCurveTo(347, 100, 342, 128, 325, 130);
context.bezierCurveTo(300, 135, 285, 140, 275, 160);
context.lineWidth =1;
context.closePath();
context.fillStyle = "rgb(240, 255, 250)";
context.fill();
context.stroke();
context.beginPath();
context.moveTo(270, 140);
context.bezierCurveTo(270, 120, 275, 85, 250, 75);
context.bezierCurveTo(246, 72, 232, 70, 230, 85);
context.bezierCurveTo(230, 105, 255, 100, 270, 140);
context.lineWidth =1;
context.closePath();
context.fillStyle = "rgb(240, 255, 250)";
context.fill();
context.stroke();
context.beginPath();
context.moveTo(279, 120);
context.bezierCurveTo(280, 120, 277, 87, 289, 86);
context.bezierCurveTo(300, 92, 285, 110, 279, 120);
context.lineWidth =1;
context.closePath();
context.fillStyle = "rgb(240, 255, 250)";
context.fill();
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
- references -
Monday, February 27, 2017
Vector Illustration
I really wanted to challenge myself with this vector illustration, so I chose to create my dog Zoey. She is a brindle boxer so there are a variety of colors in her fur, I really tried to capture all the different shades in order to make her look as accurate as possible. I also spent a decent amount of time making the eyes look realistic. Overall, I'm proud of the results and enjoyed working on this assignment in illustrator.
-the original photo-
Subscribe to:
Posts (Atom)