Photoshop Assignment

Our professor asked us to create an image by using photoshops tools like brushes, patterns, and gradients. The catch to the project was that most of the tools we used should be self made. By doing this, the students could start to master the technique of creating graphics through photoshop. In my project below, most of the work is self made. The sky is a gradient of yellow and light/dark blues. I used a diamond gradient because it made the yellow look like the sun! I then used a brush to write out the phrase "I love you." I used the distortion and blurring tools to make the words look the airplane wrote them... kinda like clouds. The plane is a cut out from a picture online. If I had more time on the project I would have liked to make my own airplane, but unfortunately that was not the case. The grass is a self made pattern from a image I found on google. I then used the perspective tool in transforming the shape of the grass to look more 3D. Finally, I drew out a flower and defined it as a brush then started to add simple touches to the grass. Although my project is simple, I find it cute and fun! I plan on giving it to my nana for Easter since the colors of the flowers remind me of Easter and she appreciate my small artworks :)

Photos found on Google Images, Used in Project: 

Cut out of airplane 

Grass Image used for self made pattern 

Magazine Cover

In class, we were asked to use a minimum of three images and some text to construct a magazine cover. I cut myself out of three different images to get the final product that is on the magazine cover. The original photos used are below the cover. I made myself into a devil and an angel who are trying to influence the middle picture of myself, who obviously feels overwhelmed. I tried to keep it simple with my text because too much text or images together makes me feel like it's cluttered. Overall, I'm pretty happy with my magazine cover, I think the idea is really cute. My favorite part would have to be the title of the magazine because I think the drop shadow makes it look very clean and professional. I really enjoy photoshop and being able to completely warp and change an image with different tools so this project was very fun to do!

Original Pictures :

Self Insertion

This is my self insertion project! Our professor asked us to insert ourselves in a place that we have never been before. Since I've always been adventurous, daring, and admiring of nature, I thought it would only make sense to place myself at a high altitude in front of a beautiful scene. The first two picture are my final projects. The first picture I like to call "Stepping into the Fog" because I have edited my self to look like half of my body is beginning to be taken in by the fog. I did this by lowering the opacity of the eraser and erasing part of my upper body. For the second picture I inserted myself stepping on the rocks. The only thing I had to do to fit myself into the scenery is change my contrast. I also changed my saturation to be more of an orange or red because my picture was set at the time of sunset. The last three photos are the original images that I based my projects on. Overall I really enjoyed this project, and hopefully one day I will be able to take a REAL picture of myself in these beautiful places. :)

HTML Project

This project had to have been the hardest art project I have ever done, but having an awesome, patient, and understanding professor gave me the ability to make it the best I could be. At first, I thought I could do the cartoon Mickey Mouse head, but after much failure I decided I might have bitten off more than I could chew. After talking to my mom about a couple ideas she thought that it would be cute to do the city emoji, and I agreed! Below is the city emoji and the graph that I drew my sketch on. HTML is VERY touchy and if you have one number or letter wrong you may ruin your whole project. By graphing my sketch out it was very easy for me to plug in the points and see where things were going to be placed.

TA DA! This is my end product, that I'm honestly very proud of! It took me a lot of time and patience to  figure out all of the positions for the shapes. The most difficult part would have probably been the colors, especially the gradient, just because when adding in colors sometimes the whole project would go blank and I would have to figure out what happened and fix it! I would say that my project resembles the emoji very well. If I could change anything it would probably be to figure out the positioning of the curves around the sun better, although it's very difficult to figure out the control points for them... Overall I'm very happy and proud of my product. I had absolutely no knowledge of HTML before this project so now that I do, I can really appreciate other student's intricate projects! Being skilled in this area of art really takes talent!  

CODE FOR PROJECT:

<!DOCTYPE HTML>

<html>

<head>

<script>

window.onload = function() {

var canvas = document.getElementById("myCanvas");

var context = canvas.getContext("2d");

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

//radiance

context.beginPath();

context.moveTo(280,0);

context.lineTo(325,25); 

context.stroke();

context.beginPath();

context.moveTo(225, 125);

context.bezierCurveTo(125, 125, 225, 1, 50, 25);

context.stroke();

context.beginPath();

context.moveTo(225,200);

context.lineTo(100,250); 

context.stroke();

context.beginPath();

context.moveTo(325, 300);

context.bezierCurveTo(360, 360, 125, 325, 135, 400);

context.stroke();

context.beginPath();

context.moveTo(550,300);

context.lineTo(625,425); 

context.stroke();

context.beginPath();

context.moveTo(625, 225);

context.bezierCurveTo(700, 150, 700, 300, 775, 250);

context.stroke();

context.beginPath();

context.moveTo(625,125);

context.lineTo(775,75); 

context.stroke();

context.beginPath();

context.moveTo(575, 50);

context.bezierCurveTo(575, 0, 660, 50, 650, 0);

context.stroke();

//circle (sun)

context.beginPath();

context.arc(425, 150, 150, 0, 2*Math.PI, false); 

var grd=context.createRadialGradient(375, 50, 100, 425, 100, 200); 

grd.addColorStop(0, '#ff9933');

grd.addColorStop(1, '#ffcc00');

context.fillStyle = grd;

context.fill();

context.stroke();

//first rectangle

context.beginPath();

context.rect(0, 375, 100, 225); 

context.fillStyle = '#ff9900'; 

context.fill();

context.stroke();

//windows for first

context.beginPath();

context.rect(5, 390, 20, 20); 

context.fillStyle = '#ffffcc'; 

context.fill();

//third rectangle

context.beginPath();

context.rect(200, 300, 100, 300);

context.fillStyle = '#000000'; 

context.fill(); 

context.stroke();

//windows for third

context.beginPath();

context.rect(265, 325, 25, 25); 

context.fillStyle = '#ffffcc'; 

context.fill();

context.beginPath();

context.rect(225, 375, 25, 25); 

context.fillStyle = '#ffffff'; 

context.fill();

context.beginPath();

context.rect(250, 500, 25, 25); 

context.fillStyle = '#ffffcc'; 

context.fill();

//second rectangle

context.beginPath();

context.rect(0, 500, 150, 100); 

context.fillStyle = '#cc3300'; 

context.fill();

context.beginPath();

context.rect(150, 450, 75, 150); 

context.fillStyle = '#cc3300'; 

context.fill();

//windows for second

context.beginPath();

context.rect(25, 550, 25, 25); 

context.fillStyle = '#ffffff'; 

context.fill();

context.beginPath();

context.rect(150, 525, 25, 25); 

context.fillStyle = '#ffffcc'; 

context.fill();

//fourth rectangle

context.beginPath();

context.rect(300, 450, 50, 150);

context.fillStyle = '#ff9900'; 

context.fill(); 

context.stroke();

//windows for fourth

context.beginPath();

context.rect(318, 460, 20, 20); 

context.fillStyle = '#ffffcc'; 

context.fill();

//fifth rectangle

context.beginPath();

context.rect(350, 250, 150, 350);

context.fillStyle = '#cc3300'; 

context.fill(); 

context.stroke();

//windows for fifth

context.beginPath();

context.rect(400, 300, 20, 20); 

context.fillStyle = '#ffffff'; 

context.fill();

context.beginPath();

context.rect(450, 375, 20, 20); 

context.fillStyle = '#ffffcc'; 

context.fill();

context.beginPath();

context.rect(400, 500, 20, 20); 

context.fillStyle = '#ffffff'; 

context.fill();

//sixth rectangle

context.beginPath();

context.rect(450, 450, 50, 150);

context.fillStyle = '#000000'; 

context.fill(); 

context.stroke();

context.beginPath();

context.rect(500, 350, 75, 250); 

context.fillStyle = '#000000'; 

context.fill();

context.stroke();

context.beginPath();

context.rect(575, 450, 50, 150); 

context.fillStyle = '#000000'; 

context.fill();

context.stroke();

//window for sixth

context.beginPath();

context.rect(515, 400, 25, 25); 

context.fillStyle = '#ffffff'; 

context.fill();

context.beginPath();

context.rect(550, 525, 25, 25); 

context.fillStyle = '#ffffcc'; 

context.fill();

context.beginPath();

context.rect(550, 475, 25, 25); 

context.fillStyle = '#ffffcc'; 

context.fill();

context.beginPath();

context.rect(460, 550, 25, 25); 

context.fillStyle = '#ffffcc'; 

context.fill();

//seventh rectangle

context.beginPath();

context.rect(600, 300, 175, 300);

context.fillStyle = '#cc3300'; 

context.fill(); 

context.stroke();

context.beginPath();

//windows for seventh

context.rect(700, 325, 20, 20); 

context.fillStyle = '#ffffff'; 

context.fill();

context.beginPath();

context.rect(700, 375, 20, 20); 

context.fillStyle = '#ffffcc'; 

context.fill();

context.beginPath();

context.rect(625, 525, 20, 20); 

context.fillStyle = '#ffffff'; 

context.fill();

context.beginPath();

context.rect(650, 460, 20, 20); 

context.fillStyle = '#ffffcc'; 

context.fill();

//last rectangle 

context.beginPath();

context.rect(700, 475, 100, 125);

context.fillStyle = '#000000'; 

context.fill(); 

context.stroke();

//windows for last

context.beginPath();

context.rect(735, 500, 20, 20); 

context.fillStyle = '#ffffcc'; 

context.fill();

context.beginPath();

context.rect(760, 535, 20, 20); 

context.fillStyle = '#ffffcc'; 

context.fill();

context.beginPath();

context.rect(710, 550, 20, 20); 

context.fillStyle = '#ffffff'; 

context.fill();

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

};

</script>

</head>

<body>

<canvas id="myCanvas" width="800" height="600"></canvas>

</body>

</html>​