Tuesday, December 1, 2015

Animation Project

Although I had no experience working with animation in photoshop, I was able to enjoy this project a lot. I found using my past project, based off Philadelphia, and combining that with this project made it even more enjoyable. Conor and I did not find it too difficult, however we did face some challenges with the changing of sizes of objects to make them appear more realistic. The switching of frames was also tricky because we did not want the "checkered" background to appear on the video. Another challenge we faced was finding a good spot to cut the video at. The song was over a minute and it took us a while to do each second, but we are happy with where we decided to stopped. All and all we are happy with the outcome of the video!

Wednesday, November 11, 2015

Photoshop- song lyrics

The words I used for this project came from The Fresh Prince of Belair. The images I used were all to describe the city of brotherly love. I enjoyed playing around with the tools on photoshop, I just had some issues because of my lack of expertise in photoshop. I was a little frustrated with my lack of knowledge within the tools. 

Wednesday, November 4, 2015

Photoshop







I found this project to be very fun, being able to combine images I have taken prior and put them into photoshop was really neat. I had some issues using the stamp tool to remove the edges around the two smaller pictures, which I could not figure out. Other than that I think everything turned out really nice and I was happy with my final product. 

Monday, October 26, 2015

Photoshop Demo




I enjoyed the combining of these two images to make the final product. With the use of the quick selection tool and the dodge tool I was able to implement the unseen lighting in the bayshore picture and crop myself out perfectly. Other than the awkward halo above my head I am happy with how the picture turned out. 


Wednesday, October 21, 2015

Pikachu

This project was extremely challenging and frustrating. I had issues with the chart and the points my lines were supposed to go, and the direction they actually went. Another frustrating aspect was coding, saving, then checking and having a minor error in the code that messed up the entire image. My besier curve was another struggle, and the mouth did not come out as I had intended. The last struggle was the pokeball, I couldn't not get the color of the smallest circle to be white which was annoying. Overall I am happy with how it turned out.  







file:///Users/Clay/Documents/Picture.html


<!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);
//fill
context.fillStyle = 'rgb(19, 229, 68)';
context.fill();
context.stroke();

//Picachu Tail
//Quadratic Curve
context.beginPath();
context.moveTo(360, 110)
context.quadraticCurveTo(280, 100, 205, 120);
context.quadraticCurveTo(200, 210, 210, 200);
context.lineTo(325, 175);
context.lineTo(325, 215);
context.lineTo(345, 210);
context.quadraticCurveTo(345, 205, 355, 190)
context.lineTo(345, 190);
context.quadraticCurveTo(340, 180, 360, 110);
context.fillStyle = 'rgb(255, 255, 0)';
context.fill();
context.stroke();

//Head

context.beginPath();
context.moveTo(345, 210)
context.quadraticCurveTo(360, 180, 375, 150);
context.quadraticCurveTo(350, 100, 380, 50);
context.quadraticCurveTo(410, 80, 415, 135);
context.quadraticCurveTo(485, 120, 515, 160);
context.quadraticCurveTo(560, 140, 610, 160);
context.quadraticCurveTo(580, 193, 520, 195);
context.quadraticCurveTo(520, 215, 505, 250);
context.quadraticCurveTo(460, 325, 380, 290);
context.quadraticCurveTo(330, 255, 345, 210);
context.fill();
context.stroke();



//body

context.beginPath();
context.moveTo(345, 387);
context.lineTo(330, 450);
context.lineTo(530, 450);
context.quadraticCurveTo(490, 420, 490, 385);
context.quadraticCurveTo(530, 405, 560, 410);
context.quadraticCurveTo(580, 410, 570, 390);
context.quadraticCurveTo(480, 280, 465, 292);
context.quadraticCurveTo(418, 310, 380, 290);
context.quadraticCurveTo(353, 270, 350, 260);
context.lineTo(330, 300);
context.fill();
context.stroke();

//Left Arm
context.beginPath();
context.moveTo(350, 259);
context.quadraticCurveTo(265, 315, 310, 370);
context.quadraticCurveTo(345, 405, 380, 370);
context.quadraticCurveTo(420, 330, 370, 325);
context.quadraticCurveTo(345, 320, 340, 325);
context.fill();
context.stroke();

//Black right eye
context.beginPath();
context.arc(465, 220, 12, 0, 2*Math.PI, true);
context.fillStyle = 'rgb(0, 0, 0)';
context.fill();
context.stroke();
//context.stroke();

//Black Left eye
context.beginPath();
context.arc(400, 200, 12, 0, 2*Math.PI, true);
context.fillStyle = 'rgb(0, 0, 0)';
context.fill();
context.stroke();
//context.stroke();

//white right eye
context.beginPath();
context.arc(463, 214, 6, 0, 2*Math.PI, true);
context.fillStyle = 'rgb(255, 255, 255)';
context.fill();
context.stroke();
//context.stroke();

//white Left eye
context.beginPath();
context.arc(405, 196, 6, 0, 2*Math.PI, true);
context.fillStyle = 'rgb(255, 255, 255)';
context.fill();
context.stroke();
//context.stroke();

//nose
context.beginPath();
context.moveTo(425, 229);
context.lineTo(415, 224);
context.lineTo(415, 232);
context.lineTo(425, 229);
context.fillStyle = 'rgb(0, 0, 0)';
context.fill();
context.stroke();
//nose

//mouth
//Bezier Curve
context.beginPath();
context.moveTo(380, 230);
context.bezierCurveTo(370, 255, 390, 280, 440, 260);
context.stroke();
//mouth


//left cheek
context.beginPath();
context.arc(358, 225, 16, 0, 2*Math.PI, true);
context.fillStyle = 'rgb(247, 6, 6)';
context.fill();
context.stroke();
//context.stroke();

//right cheek
context.beginPath();
context.arc(465, 270, 16, 0, 2*Math.PI, true);
context.fillStyle = 'rgb(247, 6, 6)';
context.fill();
context.stroke();
//context.stroke();

//left ear
context.beginPath();
context.moveTo(365, 120)
context.quadraticCurveTo(350, 83, 380, 50);
context.quadraticCurveTo(405, 81, 405, 90);
context.fillStyle = 'rgb(0, 0, 0)';
context.fill();
context.stroke();
//context.stroke();

//right ear
context.beginPath()
context.moveTo(550, 150)
context.quadraticCurveTo(582, 150, 610, 160);
context.quadraticCurveTo(570, 195, 540, 193);
context.fillStyle = 'rgb(0, 0, 0)';
context.fill();
context.stroke();


//bottom half of pokeball
context.beginPath();
context.arc(200, 300, 70, 0, 2*Math.PI, false);
context.fillStyle = 'rgb(255, 255, 255)';
context.fill();
context.stroke();
//context.stroke


//top pokeball
context.beginPath();
context.arc(200, 300, 70, 0, Math.PI, true);
context.fillStyle = 'rgb(255, 6, 0)';
context.fill();
context.stroke();
//context.stroke();

//middle line pokeball
context.beginPath();
context.moveTo(144,300);
context.lineTo(255,300)
context.lineWidth = 30;
context.lineCap = 'round'
context.strokeStyle = 'rgba(0, 0, 0, 1)';
context.stroke();
//context.stroke


//pokeball circle
context.beginPath();
context.arc(200, 300, 10, 0, 2*Math.PI, false);
context.fillStyle = 'rgb(0, 0, 100)';
context.fill();
context.stroke();
//context.stroke


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

};

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




Wednesday, October 7, 2015

Animated Image


This project at first was very challenging with my original image because of the intense detail, abstract background, and awkward lighting. I ended up choosing a different image, and used the new adobe tools to re create my picture. The most challenging parts of this process was proportioning of each body part, choosing the right color of skin tone, and the recreation of my hair. I ended up changing the background and some of the shadowing was also difficult, however I am happy with my final product.