Animation: Final Anamatic

Animation: Story Bord

Lyrical Collage

To begin this collage, I researched into various different quotes from a variety of songs, poems, and movies.  One of my favorite movies growing up has always been Peter Pan.  From both the book- written by J.M. Barrie- and the disney movie both have quotes that stick in my mind.  One in particular, and that I chose to make the focal point of my lyrical collage goes as follows: 'You know that place between sleep and awake, the place where you can still remember dreaming?  That's where I will always love you.  That's where I'll be waiting."

To begin this project, I chose a galaxy/sky image, but it wasn't quite how I wanted it so I flipped it upside down and cropped the watermark out.

I wanted to make it appear as though they were flying across the sky, above the clouds.  I, therefore, used a city image, layered it under the clouds and lowered the opacity of the sky.  The city lights twinkled through the clouds.  I then deleted parts of the sky and left some of the clouds blocking out the city below.

Next, I wanted to create the divide between Neverland and real life.  I collected an image of the moon, but it was to reflect on water.  This was meant to be the water that is prominent in the story of Peter Pan, e.g. the still river they glide over whilst flying, the ocean surrounding the islands of Neverland on which the pirate ship floats, and the mermaid lagoon.

This wasn't the texture I wanted the moon to have, so I layered another one underneath it.  I messed around with various tools, such as the opacity and eraser tool to get seamless layering.

I then added Peter Pan and co. flying.  I used an image of there silhouettes on a white background.  I used the quick selection tool to separate the shadows from the background and moved them slightly to the left.  I changed the opacity, and then the opacity of the eraser and surrounded the whole in the background, creating a shadow effect on the clouds below, shadowing them flying.

Next was Tinker bell, for which I repeated this process.  I positioned her to be sprinkling fairy dust on the word "dreaming" as I felt it was fitting.

I then typed pup various different sections to create the quote, editing each text box to entertain it in the picture, e.g. curving around the moon and shadows.  On each of these, I edited the colors and opacity of the writing.  My aim was to make it appear subtly, so you have to look for it to see it.

In the word love I used to images, brought them away from their backgrounds, skewed them and layered them, once again, editing the opacity.  I then merged the layers and included them in the word "love."

My finished lyrical collage (not really lyrical, but a quote) turned out like this:

Custom Graphic

I created an image on a letter-sized, portrait sheet using Adobe Photoshop.  To do so, I limit myself to only using custom graphics - brushes, patterns, gradients, blending modes, etc. 

I used the gradient fill to bring out both the sky and grass, as to ensure the end design wasn't flat.

I created two brush designs to fill in the stars, using the pen tool and added stars to the sky in a variety of different sized brush strokes.  I then used a pre-created brush stroke to add grey detail and a little depth into the moon.

On the grass, I also used a pre-created brush stroke to add detail.  I used a variety of different greens to add further texture whilst using this brush. 

As far as the patterns went, I created a rug.  To do this, I took an image from the internet, and attempted to get rid of any seams using tools such as offset and clone.  I then went on the background image and used the lasso tool to draw a shape before using the mask layers to reveal the pattern behind it.  I experimented chaining/unchaining the pattern/texture and skewing it to help create a sort of perspective.  After adding the silhouette of a lady stargazing, I placed the same pattern over the top of the whole image, lowered the opacity, and used the filters to create an overall more vibrant tone. 

I ensured that the final result makes some use of the elements of 2D Design (weight, balance, color harmony, etc.) and that the entire canvas is filled.

The pattern was made from the following image:

The overall finished image came out as the following:

Magazine Cover

With this project, I designed a magazine cover following the requirements; using only primary photographic images of myself, and composing it on Adobe Photoshop.  I used various methods and techniques to intertwine the various different aspects of this cover, such as text and images.  I stuck to a color scheme of reds and black to match the images on the screen and to make the cover appear united.  I also used a variety of different typography styles to keep up the energetic and exciting appearance.

Photoshop

To begin my work in Photoshop, I gathered two images; one primary image of myself, and one secondary image of somewhere I would like to visit/be/go.  Using various different tools available in Adobe Photoshop, I carefully cut myself out of the original image and put it on a new background.  I then carefully went around the outline of me in order to ensure none of the original background was showing in an effort to merge the two images together flawlessly.  To further this, I made an effort to ensure the sun would be shining on my body the same way to make it look more realistic.  I then edited the pictures accordingly using features such as 'saturation', 'levels', 'brightness', and many others.  I also erased the rock jutting out over my leg to appear intertwined and as one image.

The original image:

The original background:

The merged image:

Heart

As a practise for HTML, I also composed this heart to practice both shapes such as curves and lines, as well as finer details such as colors and stroke details.

The code for this image is as follows:

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

////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
var x = 400;
var y = 200;
var controlx1 = 300;
var controly1 = -10;
var controlx2 = 50;
var controly2 = 150;
var endx = 200;
var endy = 320;
var controlx3 = 320;
var controly3 = 400;
var endx2 = 400;
var endy2 = 550;
var controlx4 = 480;
var controly4 = 400;
var endx3 = 600;
var endy3 = 320;
var controlx5 = 750;
var controly5 = 150;
var controlx6 = 500;
var controly6 = -10;


context.beginPath();
context.moveTo(x, y);
context.bezierCurveTo(controlx1, controly1, controlx2, controly2, endx, endy);
context.quadraticCurveTo(controlx3, controly3, endx2, endy2);
context.quadraticCurveTo(controlx4, controly4, endx3, endy3);
context.bezierCurveTo(controlx5, controly5, controlx6, controly6, x, y);
context.closePath();
context.lineWidth = 20;
context.fillStyle = 'rgb(255, 0, 0)';
context.fill();
context.strokeStyle = 'rgb(150, 0, 0)';
context.stroke();


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

};

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