Portfolio

                    

                                          

Storyboard for "Shower Song" - Animation Project

Below is the final storyboard for my project "Shower Song".

It took me a few minutes to try to figure out how to introduce each new scene, without making the animation look random or unrelated with the previous scene.  Even so, it was fun trying to put the short story together.

Photoshop Animation Project! Shower Song

For this project, it was challenging trying to figure exactly how to manage the frames and layers in photoshop but it was manageable.

My animation Shower Song is about a girl, singing like the average human, about to take a shower.  But then, when the shower is turned on, she magically appears at her own concert having a pretty fantastic voice (Becky G's).  It is about the magic of showers, how they have the ability to make our voices sound better when we sing.  We have to admit, we've all done this.

In the end, photoshop was not that challenging, it just takes time, patience and a lot of practice to figure out how to have a good outcome and design.

Below is the video!

Photoshop Quote; Run Away With Me

"Run Away With Me" is a well known phrase among songs and films.  I was listening to the song "Run Away With Me" by Carly Rae Jepsen, so I just thought why not keep it simple and make it a cute, maybe cheesy assignment.  I would recommend listening to the song while looking at the final image.  Personally, I think the song sets the mood for this image and was my inspiration for this assignment.  Plus the song connects with the image.

This image is about a young couple, seeing their future together in the world.  They have the galaxy to travel.  They can see the amazing future when they are together.  So, the top image with them having grown old together, they have swam the waters of life and are still madly in love.  Their arms will never tire of holding each other.

This assignment was easy for me to complete, considering I had room for creativity and ideas.  Really, the only struggle I had was trying to find good images to go with the assignment.

The final image contains a total of seven images:
-space background
-map blended into space
-children sitting on the dock
-a small and a large cloud
-the text saying "run away with me"
-senior couple sitting on the dock

Below is the final image

Below are the images I used for this project (all from google):

Magazine Cover; Photoshop

The Surfturf Magazine concept is about the lifestyle of a person who is always at the beach and outdoors.  So, brings both words surf and turf together.  I believe the colors are appropriate for the theme and all flow pretty well.  It has a fun yet relaxed theme.  It took a while to get to a decent name for the cover magazine but it was done and I am happy with the results!  

This project was fairly easy to do. It was a little challenging at first, trying to get the layers in order, so everything is on top of what it is suppose to be.  Also, finding the right fonts and font colors that properly flow together yet have their own style, was a little confusing but fun.  I liked this project, it was easy trying to find good references such as other magazines.

Photoshop Assignment; Chill me with not so chill zombies

I decided to put myself strolling out of the woods, on my way to the beach while being completely indifferent to the zombies in the creeping out of the woods.  

Photoshop, surprisingly, has been the most challenging software I have worked with.  I found it challenging to get myself familiarized with the program, which I am still trying.  I had some difficulty trying to find the correct tools to use to manipulate the layers and my images.  Basically because I have yet to explore so much in the software.  I tried to get the tones in the image of myself as close as possible to the background.  To be honest, most of the time I was laughing just looking at myself ready for the beach, not realizing the zombie apocalypse was going on.

Even so, I will continue practicing Photoshop so I'll be able to take advantage of its great features!

Below is the final result:

Below is the zombie background: (image from http://weabeasties.com/images/ZombieGroupBest.jpg)

Below is the image of myself, which I incorporated into the image from above:

I will dominate you, Photoshop!

ASCII; HTML 5 Codes

For our second assignment, we had to create a a landscape or portrait using html 5.  I chose to do the Tampa Bay Lightning ice rink.  Considering I am a Lightning fan and the image I used as a reference has gradients, curves, circles and it requires for the spaces between the lines and circles to be precise in order for the image to look good.

Below is the image I made with html 5.

file:///Users/Connie/Downloads/Lightning%20Rink.html

Below is the image I used as a reference from google

.

Below is the printed reference image in a graph, used to measure the points more accurately.

Challenges

When I started to work with the first layer, the blue ice background with the gradient, I had some trouble trying to figure out how to put in two separate gradients in a single layer.  After consulting the professor, we managed to figure out how to make the gradients a single gradient with various shades, having it all in one code paragraph.

Afterwards, the red circles, the center circle, the lines and smaller circles were just a matter of very specific measuring and figuring out how to place them with the appropriate spaces between each element.  The graphed reference helped a lot to better visualize the canvas size.  

The Lightning logo in the center circle was fairly easy to measure, but the curved lines around it were a bit of a challenge.  I used the quadratic curve for both lines surrounding the lightning bolt.

I learned how to try to predict where the lines and curves and how to measure the spaces between lines and other elements that are suppose to have a certain distance between each other.

Below is the coding used to make the image.

<!DOCTYPE HTML>

<html>

<head>

<script>

window.onload = function() {

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

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

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

//Light Blue Ice Background

context.beginPath();

context.rect(0, 0, 800, 425);

context.lineWidth = 0;

context.fillStyle = 'rgb(135, 206, 250)';

context.fill();

context.stroke();

//Ice Vertical Reflections

var grd = context.createLinearGradient(95, 400, 675, 400);

grd.addColorStop(.1, 'rgb(130, 201, 245)');

grd.addColorStop(.2, 'rgb(255, 255, 255)');

grd.addColorStop(.3, 'rgb(130, 201, 255)');

grd.addColorStop(.75, 'rgb(130, 201, 245)');

grd.addColorStop(.85, 'rgb(255, 255, 255)');

grd.addColorStop(.95, 'rgb(130, 201, 255)');

context.fillStyle = grd;

context.fill();

//Ice Rink Shape

context.beginPath();

context.moveTo(100, 30)

context.quadraticCurveTo(25, 25, 30, 100)

context.lineTo(30, 300);

context.quadraticCurveTo(25, 405, 100, 400);

context.lineTo(700, 400);

context.quadraticCurveTo(770, 400, 769, 300);

context.lineTo(769, 100);

context.quadraticCurveTo(775, 30, 700, 30);

context.lineTo(100, 30);

context.fillStyle = 'rgb(255, 255, 255)';

context.fill();

context.closePath();

context.lineWidth = 5;

context.strokeStyle = 'gray';

context.stroke();

//Ice Rink Lines

//L Red Line

context.beginPath();

context.moveTo(103, 32);

context.lineTo(103, 398);

context.lineWidth = 3;

context.strokeStyle = 'rgba(255, 0, 0, .5)';

context.stroke();

//R Red Line

context.beginPath();

context.moveTo(697, 32);

context.lineTo(697, 398);

context.lineWidth = 3;

context.strokeStyle = 'rgba(255, 0, 0, .5)';

context.stroke();

//L Blue Line

context.beginPath();

context.moveTo(300, 32);

context.lineTo(300, 398);

context.lineWidth = 5;

context.strokeStyle = 'rgb(58, 150, 230)';

context.stroke();

//Center Red Line

context.beginPath();

context.moveTo(400, 32);

context.lineTo(400, 398);

context.lineWidth = 5;

context.strokeStyle = 'red';

context.stroke();

//R Blue Line

context.beginPath();

context.moveTo(500, 32);

context.lineTo(500, 398);

context.lineWidth = 5;

context.strokeStyle = 'rgb(58, 150, 230)';

context.stroke();

//Ice Rink Goal Lines

//L Goal

context.beginPath();

context.moveTo(103, 199);

context.lineTo(103, 240);

context.bezierCurveTo(70, 250, 70, 190, 103, 199);

context.lineWidth = 1;

context.strokeStyle = 'red';

context.stroke();

context.beginPath();

context.moveTo(93, 220);

context.lineTo(78, 220);

context.lineWidth = 1;

context.strokeStyle = 'red';

context.stroke();

context.beginPath();

context.moveTo(103, 199);

context.bezierCurveTo(90, 190, 90, 250, 103, 240);

context.lineWidth = 1;

context.strokeStyle = 'red';

context.stroke();

context.beginPath();

context.moveTo(103, 196);

context.lineTo(103, 244);

context.bezierCurveTo(140, 244, 140, 195, 103, 196);

context.lineWidth = 1;

context.fillStyle = 'rgb(96, 186, 239)';

context.fill();

context.closePath();

context.strokeStyle = 'red';

context.stroke();

//R Goal

context.beginPath();

context.moveTo(698, 199);

context.lineTo(698, 240);

context.bezierCurveTo(735, 245, 735, 190, 698, 199);

context.lineWidth = 1;

context.strokeStyle = 'red';

context.stroke();

context.beginPath();

context.moveTo(725, 220);

context.lineTo(710, 220);

context.lineWidth = 1;

context.strokeStyle = 'red';

context.stroke();

context.beginPath();

context.moveTo(698, 199);

context.bezierCurveTo(714, 187, 714, 250, 698, 240);

context.lineWidth = 1;

context.strokeStyle = 'red';

context.stroke();

context.beginPath();

context.moveTo(698, 196);

context.lineTo(698, 244);

context.bezierCurveTo(665, 236, 665, 200, 698, 196);

context.fillStyle = 'rgb(96, 186, 239)';

context.lineWidth = 1;

context.fill();

context.closePath();

context.lineWidth = 1;

context.strokeStyle = 'red';

context.stroke();

//Ice Rink Circles

// TL Red Circle

context.beginPath();

context.arc(175, 125, 55, 0, 2 * Math.PI, false);

context.lineWidth = 1;

context.strokeStyle = 'red';

context.stroke();

//TL Circle Center

context.beginPath();

context.arc(175, 125, 1, 0, 2 * Math.PI, false);

context.fillStyle = 'red';

context.fill();

context.stroke();

//TL Circle Lines

context.beginPath();

context.moveTo(173, 65);

context.lineTo(173, 70);

context.strokeStyle = 'red';

context.stroke();

context.beginPath();

context.moveTo(177, 65);

context.lineTo(177, 70);

context.strokeStyle = 'red';

context.stroke();

context.beginPath();

context.moveTo(173, 180);

context.lineTo(173, 185);

context.strokeStyle = 'red';    

context.stroke();

context.beginPath();

context.moveTo(177, 180);

context.lineTo(177, 185);

context.strokeStyle = 'red';

context.stroke();

context.beginPath();

context.moveTo(171, 116);

context.lineTo(171, 121);

context.lineTo(166, 121);

context.strokeStyle = 'red';

context.stroke();

context.beginPath();

context.moveTo(179, 116);

context.lineTo(179, 121);

context.lineTo(184, 121);

context.strokeStyle = 'red';

context.stroke();

context.beginPath();

context.moveTo(171, 134);

context.lineTo(171, 129);

context.lineTo(166, 129);

context.strokeStyle = 'red';

context.stroke();

context.beginPath();

context.moveTo(179, 134);

context.lineTo(179, 129);

context.lineTo(184, 129);

context.strokeStyle = 'red';

context.stroke();

//BL Red Circle

context.beginPath();

context.arc(175, 300, 55, 0, 2 * Math.PI, false);

context.lineWidth = 1;

context.strokeStyle = 'red';

context.stroke();

//BL Circle Center

context.beginPath();

context.arc(175, 300, 1, 0, 2 * Math.PI, false);

context.lineWidth = 1;

context.fillStyle = 'red';

context.fill();

context.strokeStyle = 'red';

context.stroke();

//BL Circle Lines

context.beginPath();

context.moveTo(173, 240);

context.lineTo(173, 245);

context.strokeStyle = 'red';

context.stroke();

context.beginPath();

context.moveTo(177, 240);

context.lineTo(177, 245);

context.strokeStyle = 'red';

context.stroke();

context.beginPath();

context.moveTo(173, 355);

context.lineTo(173, 360);

context.strokeStyle = 'red';

context.stroke();

context.beginPath();

context.moveTo(177, 355);

context.lineTo(177, 360);

context.strokeStyle = 'red';

context.stroke();

context.beginPath();

context.moveTo(171, 291);

context.lineTo(171, 296);

context.lineTo(166, 296);

context.strokeStyle = 'red';

context.stroke();

context.beginPath();

context.moveTo(179, 291);

context.lineTo(179, 296);

context.lineTo(184, 296);

context.strokeStyle = 'red';

context.stroke();

context.beginPath();

context.moveTo(171, 309);

context.lineTo(171, 304);

context.lineTo(166, 304);

context.strokeStyle = 'red';

context.stroke();

context.beginPath();

context.moveTo(179, 309);

context.lineTo(179, 304);

context.lineTo(184, 304);

context.strokeStyle = 'red';

context.stroke();

//TR Red Circle

context.beginPath();

context.arc(625, 125, 55, 0, 2 * Math.PI, false);

context.lineWidth = 1;

context.strokeStyle = 'red';

context.stroke();

//TR Circle Center

context.beginPath();

context.arc(625, 125, 1, 0, 2 * Math.PI, false);

context.lineWidth = 1;

context.fillStyle = 'red';

context.fill();

context.strokeStyle = 'red';

context.stroke();

//TR Circle Lines

context.beginPath();

context.moveTo(623, 65);

context.lineTo(623, 70);

context.strokeStyle = 'red';

context.stroke();

context.beginPath();

context.moveTo(627, 65);

context.lineTo(627, 70);

context.strokeStyle = 'red';

context.stroke();

context.beginPath();

context.moveTo(623, 180);

context.lineTo(623, 185);

context.strokeStyle = 'red';

context.stroke();

context.beginPath();

context.moveTo(627, 180);

context.lineTo(627, 185);

context.strokeStyle = 'red';

context.stroke();

context.beginPath();

context.moveTo(621, 116);

context.lineTo(621, 121);

context.lineTo(616, 121);

context.strokeStyle = 'red';

context.stroke();

context.beginPath();

context.moveTo(629, 116);

context.lineTo(629, 121);

context.lineTo(634, 121);

context.strokeStyle = 'red';

context.stroke();

context.beginPath();

context.moveTo(621, 134);

context.lineTo(621, 129);

context.lineTo(616, 129);

context.strokeStyle = 'red';

context.stroke();

context.beginPath();

context.moveTo(629, 134);

context.lineTo(629, 129);

context.lineTo(634, 129);

context.strokeStyle = 'red';

context.stroke();

//BR Red Circle

context.beginPath();

context.arc(625, 300, 55, 0, 2 * Math.PI, false);

context.lineWidth = 1;

context.strokeStyle = 'red';

context.stroke();

//BR Circle Center

context.beginPath();

context.arc(625, 300, 1, 0, 2 * Math.PI, false);

context.lineWidth = 1;

context.fillStyle = 'red';

context.fill();

context.strokeStyle = 'red';

context.stroke();

//BR Circle Lines

context.beginPath();

context.moveTo(623, 240);

context.lineTo(623, 245);

context.strokeStyle = 'red';

context.stroke();

context.beginPath();

context.moveTo(627, 240);

context.lineTo(627, 245);

context.strokeStyle = 'red';

context.stroke();

context.beginPath();

context.moveTo(623, 355);

context.lineTo(623, 360);

context.strokeStyle = 'red';

context.stroke();

context.beginPath();

context.moveTo(627, 355);

context.lineTo(627, 360);

context.strokeStyle = 'red';

context.stroke();

context.beginPath();

context.moveTo(621, 291);

context.lineTo(621, 296);

context.lineTo(616, 296);

context.strokeStyle = 'red';

context.stroke();

context.beginPath();

context.moveTo(629, 291);

context.lineTo(629, 296);

context.lineTo(634, 296);

context.strokeStyle = 'red';

context.stroke();

context.beginPath();

context.moveTo(621, 309);

context.lineTo(621, 304);

context.lineTo(616, 304);

context.strokeStyle = 'red';

context.stroke();

context.beginPath();

context.moveTo(629, 309);

context.lineTo(629, 304);

context.lineTo(634, 304);

context.strokeStyle = 'red';

context.stroke();

//Center Circle

context.beginPath();

context.arc(400, 225, 112, 0, 2 * Math.PI, false);

context.lineWidth = 8;

context.fillStyle = 'rgba(1, 62, 125, 1)';

context.fill();

context.strokeStyle = 'rgb(153, 169, 232)';

context.closePath();

context.stroke();

context.beginPath();

context.arc(400, 225, 100, 0, 2 * Math.PI, false);

context.lineWidth = 1;

context.strokeStyle = 'white';

context.stroke();

context.beginPath();

context.arc(400, 225, 95, 0, 2 * Math.PI, false);

context.lineWidth = 1;

context.strokeStyle = 'white';

context.stroke();

//Circles Around Center Circle

context.beginPath();

context.arc(325, 125, 1, 0, 2 * Math.PI, false);

context.lineWidth = 1;

context.fillStyle = 'red';

context.fill();

context.strokeStyle = 'red';

context.stroke();

context.beginPath();

context.arc(325, 325, 1, 0, 2 * Math.PI, false);

context.lineWidth = 1;

context.fillStyle = 'red';

context.fill();

context.strokeStyle = 'red';

context.stroke();

context.beginPath();

context.arc(475, 125, 1, 0, 2 * Math.PI, false);

context.lineWidth = 1;

context.fillStyle = 'red';

context.fill();

context.strokeStyle = 'red';

context.stroke();

context.beginPath();

context.arc(475, 325, 1, 0, 2 * Math.PI, false);

context.lineWidth = 1;

context.fillStyle = 'red';

context.fill();

context.strokeStyle = 'red';

context.stroke();

//Tampa Bay Lightning Center Logo

//Lightning Bolt

context.beginPath();

context.moveTo(445, 158);

context.lineTo(415, 190);

context.lineTo(430, 186);

context.lineTo(400, 222);

context.lineTo(415, 218);

context.lineTo(345, 285);

context.lineTo(377, 238);

context.lineTo(362, 242);

context.lineTo(390, 205);

context.lineTo(375, 209);

context.lineTo(405, 168);

context.lineTo(445, 158);

context.fillStyle = 'white';

context.fill();

context.closePath();

context.strokeStyle = 'white';

context.stroke();

//Lightning Bolt Side Lines

//L Line

context.beginPath();

context.moveTo(404, 169);

context.quadraticCurveTo(275, 200, 359, 265);

context.lineTo(365, 256);

context.quadraticCurveTo(283, 200, 401, 174);

context.lineTo(404, 169);

context.fillStyle = 'white';

context.fill();

context.strokeStyle = 'white';

context.stroke();

//R Line

context.beginPath();

context.moveTo(435, 179);

context.quadraticCurveTo(490, 249, 375, 263);

context.lineTo(366, 272);

context.quadraticCurveTo(525, 250, 444, 176);

context.lineTo(435, 179);

context.fillStyle = 'white';

context.fill();

context.closePath();

context.strokeStyle = 'white';

context.stroke();

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

};

</script>

</head>

<body>

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

</body>