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>

Vector Illustration Assignment

I absolutely love Zedd's music! So I decided to make my second assignment a tribute to him and his music.

Below, is the original image from Google.

  

Exquisite Corpse; Ted

Queen Tea Logo

Queen Tea

As I was creating the Queen Tea logo, I had the idea of a simple, calming yet noticeable image for the company.  This logo can be viewed clearly in almost any size; on a billboard, business cards, labels, etc.  Thus, making this logo easy to manage for the company's products.

Every color has its purpose in the logo.  The tea cup has a yellow, cream color.  This color is calming, meaning purity.  The idea of purity in the logo represents the purity of the tea; the consumers are having pure tea.  Many tea lovers like the idea of pure and organic in their tea.  The crown is black, so it has a strong contrast against the cream yellow cup.  The color black means elegance.  The company's products and image has an elegant approach.  This isn't some ordinary tea shop, this is Queen Tea.  The crown deserves an elegant yet simple color, like black.  For the green tea leafs in the center, representing the "T" in Tea the other tea leaf in the bottom right corner, representing the "Q" in Queen with a deep, smooth green.  This green tone represents nature, harmony and freshness.  The consumers will perceive this tea as natural, good quality tea.  This green also contrasts well against the black and yellow it has in its background.

The logo's shape is direct and simplistic.  The tea cup is clearly shown, already having the tea leaf at the bottom right corner gives the consumers the message that it is a tea cup.  The crown in the center shows dominance over the logo.  Its black and bold elegance can be related to the Queen of England. Considering England is one the most well known tea consumers worldwide.  In the center of the crown, the green, bold T made of tea leafs is part of what dominates the logo.  It stands on the crown, like it showing power over tea.  The tea leaf in the bottom right corner gives an organic shift to the tea cup and so the logo itself.  

I find this logo to have a good representation of the company's concept.  Elegant, calming and natural.  

Panda Caligramme

Queen Tea Logo Thumbnail Sketches

Here are a few thumbnail sketches for the Queen Tea concept.  

This first sketch presents a Q, formed with a clean circle and a tea leaf to the bottom right.  The Q is crowned by a tea crown, where two tea leafs are forming a T in the top center.

For this second sketch, a tea bag is used as a background.  In the center of the tea bag, there is a crown drawn to resemble tea grains and on top of the crown there is a Q on top of a T, representing Queen Tea.

In this third sketch, there is a Q colored as if it were made out of tea grains in a tea bag.  On top of the tea bag, there is a string attached to a small paper with the letter T on it, giving it an organic feel with the string.  Next to the tea bag, the rest of the word "Queen".

The fourth sketch has a tea cup with a tea leaf on the bottom right corner, representing a Q.  Inside the cop, there is a crown containing a large T in the center of the crown.

Finally for this fifth sketch, is a bird's eye view of a cup, with a tea leaf on the bottom right corner, also resembling a Q.  Then in the center of the Q, a clear T is behind the tea leaf.

Analyzing Logos

One of the logos that have caught my attention because of its creative yet simple design is the Toyota logo.  

   

If one looks closely, one can see all of Toyota's name letters incorporated in the logo.  Ever since a friend showed this to me, I just loved it.  I can also see headlights or wheels in the name's TOYOT.  The logo has such simple, flowing lines that connect and form a well connected shape.  A circle can resemble completion, connection, trust.  The logo is easily recognizable from afar.  The metallic effect gives it a modern, mechanic look and looks exactly the same when used on the automobile.  The red name calls the attention and is clearly read from great distances.  The font is clean and clear,   Since the name is short and simple, thus memorable.

-

Another logo that caught my attention due to its smart design is Burger King's logo.

The logo makes me want to get a burger every time I see it.  The logo has a pronounced burger shape, with bright red words and a happy toned yellow.  It demonstrates how the burger shape is bigger than the buns, giving the illusion of a thick, juicy waiting to be eaten.  The buns have a sort of shine, giving the logo depth and volume.  The blue line surrounding the words can represent speed, continuity.  Like Nike's logo, it can be viewed as a "swoosh!".  This gives the impression of fast service.  The font is clear and connected with the logo, it is an important part of it.  The colors work well together, having effective negative space between each colorful element, making the words and art flow together.  The yellow and red are also very well known for their food significance, giving the consumers an appetite.  They also call the attention from afar, if the consumer is driving or walking, the Burger King logo can be seen clearly any time of the day.

-

Beats by Dr. Dre logo has become a famous music icon within the last couple of years.

What makes this logo so useful is that its design is very flexible.  The company keeps producing and creating newer headphones with different colors and themes.  The logo fits great with any change they make to the headphones, it is an adaptable logo.  In any color or theme, the logo is still clear and recognizable.  The consumers can also edit the colors and design, without it harming or making the logo less visible.  The logo itself has the same shape of the headphones.  It can also be viewed as a musical note.  The "b", standing for "beats" has always been recognizable and has a simplistic, modern design to the product.

-

The Crocs logo is another one that has always been recognizable, since it first started.

Crocs shoe brand target all audiences, but mainly children.  Since the shoes are mostly made out of lasting plastic representing tough, crocodile skin, children would use it more for their young adventures.  The logo has a smiling crocodile, with a young smirk and wide open eyes.  The crocodile itself looks young but with rough skin, skin that can go through anything, which is the product's intention.  The contrast the white crocodile gives the black, circular background makes it clear from far distances.  As opposed to if the crocodile were black with a white, circular background.  The name Crocs is playful and fun to say.  Children and their parents can remember it easily.  The font is a little similar to Crayola's logo font.  Filling, circular, clear and has a young feel to it.

-

DoubleTree is a Hilton chain, spread all over the world and I have always appreciated its traditional and classy design.

DoubleTree has two beautifully designed trees incorporated into the D's vertical line.  The tree trunks resemble a "II", referencing to the "Double".  The logo contains two fonts.  The word "DoubleTree" has its own, in a way separating it from "Hilton".  Even though it is a Hilton branch, it has its own identity and brand.  Fun fact: people remember it for the delicious complimentary cookies, having a DoubleTree special recipe.  While Hilton keeps its own identity with its iconic font.  The logo works together while also having different, separate elements.  The art is what represents it, the name brands it, then Hilton claims it.

-