The Finale

       

 
 
 
 
 

My final project is composed of my projects and assignments from throughout the semester. My front cover and back cover consist of my first HTML5 assignment and in essence my first assignment so I thought it was a good way to end my semester and my final project by coming full circle.

Just Another Day in the Park

This animation project was not as difficult as I thought it would be although it was very time consuming. The first thing I learned in animation was how to bounce a ball so I decided to use what I learned in my project. The animation starts with a bird flying into a park where a boy is bouncing a ball by himself. The ball then rolls off screen and another boy bring the ball back to the boy and they start playing with the ball together. Unfortunetly, the boy in the red shirt throws the ball over the boys head and that boy leaves. The animation finishes with another bird flying from the park and into the sky to end the story. 

I'm On Top

"Cause I'm on top of the world, ay"
            - On Top of the World, Imagine Dragons

The song as a whole, but more importantly, the beginning of the chorus, illustrates those that have done everything but feel like the aren't getting anything back but something changes that makes them feel invincible. I wanted to represent this by showing a person (man or woman, although I chose a woman because it relates to me) laying down in bed thinking of being invincible and being on top of the world. She could be pondering on her struggles but at the end she is looking toward the end goal. The background, the bed, the woman, the earth, the thinking bubbles, and the woman on top of the earth were all separate images that i combined to create this scene. Although it is simple, I believe that sometimes simplicity speaks louder that a fuller picture. I then painted the top thinking bubble black and added white dots to represent the stars. In addition, I added the lyrics to the picture, because it ties in as a decal that is very commonly used and ties in with the room and the simplicity of it all.

Holidays :)

I was thinking of Christmas time when I started his assignment, but being Jewish I decided to combine the two. The blue/grey background was a pattern I created, as well as the "table" that the menorah is on. As far as my brushes, I created the christmas lights brush with a Hannukah theme, I created the menorah brush, the lights brush, and the dreidel brush. The only thing original from photoshop was the "snow" which came from a dust brush that Photoshop already had.

FEVER Magazine

I have done countless magazine covers, but this project in particular was a challenge because I have to use pictures of myself. I was intrigued by the word fever so I decided to use it as my title, and because a lot of magazine have their title at the top I decided to put it vertically to make it different. In the moment I was feeling stressed so I made my magazine about stress and how to destress. The pictures look cohesive even though I changed the filter on the pictures to give them the same texture. 

Stairs!

I chose to place myself in this beautiful scenery because I fell in love with the landscape of the stairs along the water. I was struggling with this on my computer because I didn't have a mouse but it seemed to work perfectly know which is a relief. It worked perfectly that both pictures have a staircase. 

New:

Original:

Dumbo Plays Soccer

Elephants are one of the most majestic creatures that roam the earth. In a way you could say that they are one of my favorite animals, but as soon as I saw the original picture, I knew it was what I wanted to do. I tried doing the background from the original instead of the sky but I like that I made it my own. In addition, I like how the color of the ball compliments the color of the elephant. I am actually very proud of this piece. 

Vector:

Original:

Exquisite Corpse!

This exquisite corpse was inspired by the sketches we made in class. I tried to stay true to what a robot would look like through the colors but creating the gradients proved difficult because I could figure out how to center them. I am especially proud of the head because I was the one that sketched the head in class so I tried to stay true to my vision. 

Cakes & Bakes

Cakes & Bakes is a bakery that provides baking lessons as well. I chose to make the logo pink and green because the colors are eye-popping. In addition, frosting pastries is a big part of appealing treats and its part of any class baking class so I wanted to incorporate it into the logo. The frosting is pink because pink frosting is used all over the world in bakeries to attract customers. I traced the icing bag from the image on the bottom. I had trouble deciding which tool to use and how to trace it. Making the lines was even kind of difficult. I outlined the name of the bakery with the frosting to emphasize the name and I used the frosting bag kind of like an explanation point. 

Under the Sea

For my caligramme project I decided to do a crab. At first it was a random thought but then I started to play the movie The Little Mermaid in my head. As a result, I ended up filling the crab with the lyrics of "Under the Sea" along with other random sentences to make my crab. 

Cakes & Bakes

These are my logos for my company, Cakes & Bakes. I am still unsure of which one I want to use but I like the one with the frosting bag, the rolling pin, and the one with the cupcake inside the circle. 

The Logos of Our Time

Starbucks. The Starbucks logo is probably one of the most effective and recognizable logos of our time. Anywhere you go in the world, you can recognize that it is a Starbucks shop just by looking at the green logo. The color and symbol of the mermaid are unique. Additionally, because Starbucks doesn't do commercials or advertising, the logo needs to stand out among other coffee shops. 

Nike. The Nike symbol is easily the most recognizable logo worldwide. Although its seems like an insignificant check mark, the Nike checkmark can be seen big or small on any product or billboard but it is effective because of its simplicity. In addition, the "Just Do It" saying complements the simplicity of the logo.

Disney. The Walt Disney logo is probably the first logo I memorized. It was the beginning of every Disney movie I watched and it was on everything Disney related. The castle represent the magic that Disney as a whole and the unique font gives the logo the creative touch that Disney inspires. It is a recognizable logo worldwide.

Chili's. Chili's is probably one of the simplest and most outspoken logos of our time. The logo doesn't even use letters to represent the brand name of the restaurant. The logo is also red which is a color that stands out compared to other colors. 

Target. Target's logo of the two circles is an ingenious idea. The symbol of a bullseye and the color red appeals to the eye of the consumer, almost instantaneously. I think target is an easily recognizable logo because of its simplicity and attraction. 

Making A Mark

Cakes & Bakes.  This business will be a bakery where you will not only will be able to eat delicious treats but learn how to bake them as well.

Become Another Person. This business will sell costumes throughout the year for every occasion.

Connect Yourself. This product is a universal phone charger.

Strike Em' Out. This company provides people with resources and networks to learn the game of baseball.

Deliver. This company provides the service of picking up any food item from any restaurant and delivering to your doorstep without any hassle and having to deal with the restaurants.

In A Galaxy Far Far Away

For this project I decided to create the solar system. You have all the planets, the sun, and even a shooting star to portray such a majestic canvas. You have the sun, Mercury, Venus, Earth and its moon, Mars, Jupiter, Saturn, Uranus, Neptune, and a shooting star to convey what the solar system looks like through my eyes. Originally, all the planets were a single color, but the more I stared at the image I had created, the more I realized it needed something so I added a radial gradient to a couple of the planets. Then I tried to convey a 3-D effect for Saturn's ring using a quadratic curve. I started with the sun and made my way out all the way to Neptune, since Pluto has recently been considered a dwarf planet. I think I was successful in creating this piece because you can truly tell it is the solar system.

var x = 0;
var y = 0;
var height = 800;
var width = 600;

//Background
context.beginPath();
context.rect(x, y, height, width);
context.fillStyle = '#000033';
context.fill();
context.stroke();

var centerx = 0;
var centery = 0;
var radius = 250;
var startx1 = 0;
var starty1 = 0;
var startRadius1 = 300;
var endx1 = 250;
var endy1 = 220;
var endRadius1 = 230;

//Sun
context.beginPath();
context.arc(centerx, centery, radius, 0, 2*Math.PI, false);
var grd = context.createRadialGradient(startx1, starty1, startRadius1, endx1, endy1, endRadius1);
grd.addColorStop(.7, '#FF6600');
grd.addColorStop(1, 'yellow');
context.fillStyle = grd;
context.fill();
context.stroke();

var x2 = 300;
var y2 = 0;
var controlx1 = 290;
var controly1 = 290;
var endx1 = 0;
var endy1 = 300;

//Mercury Ring
context.beginPath();
context.moveTo(x2, y2);
context.quadraticCurveTo(controlx1, controly1, endx1, endy1);
context.strokeStyle = 'black';
context.lineWidth = 3;
context.stroke();

var centerx1 = 285;
var centery1 = 100;
var radius1 = 20;

//Mercury
context.beginPath();
context.arc(centerx1, centery1, radius1, 0, 2*Math.PI, false);
context.fillStyle = 'grey';
context.fill();
context.strokeStyle = 'grey';
context.stroke();

var x3 = 350;
var y3 = 0;
var controlx2 = 350;
var controly2 = 350;
var endx2 = 0;
var endy2 = 350;

//Venus Ring
context.beginPath();
context.moveTo(x3, y3);
context.quadraticCurveTo(controlx2, controly2, endx2, endy2);
context.strokeStyle = 'black';
context.lineWidth = 3;
context.stroke();

var centerx2 = 150;
var centery2 = 330;
var radius2 = 40;

//Venus
context.beginPath();
context.arc(centerx2, centery2, radius2, 0, 2*Math.PI, false);
context.fillStyle = 'burlywood';
context.fill();
context.strokeStyle = 'cornsilk';
context.stroke();

var x4 = 400;
var y4 = 0;
var controlx3 = 430;
var controly3 = 430;
var endx3 = 0;
var endy3 = 400;

//Earth Ring
context.beginPath();
context.moveTo(x4, y4);
context.quadraticCurveTo(controlx3, controly3, endx3, endy3);
context.strokeStyle = 'black';
context.lineWidth = 3;
context.stroke();

var centerx3 = 375;
var centery3 = 200;
var radius3 = 40;
var startx = 375;
var starty = 200;
var startRadius = 40;
var endx = 395;
var endy = 220;
var endRadius = 40;

//Earth
context.beginPath();
context.arc(centerx3, centery3, radius3, 0, 2*Math.PI, false);
var grd = context.createRadialGradient(startx, starty, startRadius, endx, endy, endRadius);
grd.addColorStop(0, 'green');
grd.addColorStop(1, 'blue');
context.fillStyle = grd;
context.fill();
context.stroke();


var centerx3 = 430;
var centery3 = 150;
var radius3 = 10;

//Moon
context.beginPath();
context.arc(centerx3, centery3, radius3, 0, 2*Math.PI, false);
context.fillStyle = 'silver';
context.fill();
context.strokeStyle = 'silver';
context.stroke();

var x5 = 450;
var y5 = 0;
var controlx4 = 500;
var controly4 = 500;
var endx4 = 0;
var endy4 = 450;

//Mars Ring
context.beginPath();
context.moveTo(x5, y5);
context.quadraticCurveTo(controlx4, controly4, endx4, endy4);
context.strokeStyle = 'black';
context.lineWidth = 3;
context.stroke();

var centerx4 = 200;
var centery4 = 435;
var radius4 = 35;

//Mars
context.beginPath();
context.arc(centerx4, centery4, radius4, 0, 2*Math.PI, false);
context.fillStyle = 'maroon';
context.fill();
context.strokeStyle = 'brown';
context.stroke();

var x6 = 550;
var y6 = 0;
var controlx5 = 600;
var controly5 = 600;
var endx5 = 0;
var endy5 = 550;

//Jupiter Ring
context.beginPath();
context.moveTo(x6, y6);
context.quadraticCurveTo(controlx5, controly5, endx5, endy5);
context.strokeStyle = 'black';
context.lineWidth = 3;
context.stroke();

var centerx4 = 535;
var centery4 = 270;
var radius4 = 95;
var startx2 = 535;
var starty2 = 270;
var startRadius2 = 205;
var endx2 = 630;
var endy2 = 365;
var endRadius2 = 95;

//Jupiter
context.beginPath();
context.arc(centerx4, centery4, radius4, 0, 2*Math.PI, false);
var grd = context.createRadialGradient(startx2, starty2, startRadius2, endx2, endy2, endRadius2);
grd.addColorStop(.7, 'peru');
grd.addColorStop(1, 'goldenrod');
context.fillStyle = grd;
context.fill();
context.stroke();

var x7 = 100;
var y7 = 600;
var controlx6 = 700;
var controly6 = 700;
var endx6 = 650;
var endy6 = 0;

//Saturn Ring
context.beginPath();
context.moveTo(x7, y7);
context.quadraticCurveTo(controlx6, controly6, endx6, endy6);
context.strokeStyle = 'black';
context.lineWidth = 3;
context.stroke();

var centerx5 = 650;
var centery5 = 100;
var radius5 = 60;
var startx3 = 650;
var starty3 = 100;
var startRadius3 = 80;
var endx3 = 710;
var endy3 = 160;
var endRadius3 = 90;

//Saturn
context.beginPath();
context.arc(centerx5, centery5, radius5, 0, 2*Math.PI, false);
var grd = context.createRadialGradient(startx3, starty3, startRadius3, endx3, endy3, endRadius3);
grd.addColorStop(.7, 'navajowhite');
grd.addColorStop(1, 'linen');
context.fillStyle = grd;
context.fill();
context.lineWidth = 3;
context.stroke();

var x8 = 150;
var y8 = 600;
var controlx7 = 800;
var controly7 = 800;
var endx7 = 730;
var endy7 = 0;

//Uranus Ring
context.beginPath();
context.moveTo(x8, y8);
context.quadraticCurveTo(controlx7, controly7, endx7, endy7);
context.strokeStyle = 'black';
context.lineWidth = 3;
context.stroke();

var centerx6 = 640;
var centery6 = 530;
var radius6 = 55;

//Uranus
context.beginPath();
context.arc(centerx6, centery6, radius6, 0, 2*Math.PI, false);
context.fillStyle = 'MediumTurquoise';
context.fill();
context.strokeStyle = 'lightblue';
context.stroke();

var x9 = 90;
var y9 = 600;
var controlx8 = 900;
var controly8 = 900;
var endx8 = 790;
var endy8 = 0;

//Neptune Ring
context.beginPath();
context.moveTo(x9, y9);
context.quadraticCurveTo(controlx8, controly8, endx8, endy8);
context.strokeStyle = 'black';
context.lineWidth = 3;
context.stroke();

var centerx7 = 745;
var centery7 = 460;
var radius7 = 50;

//Neptune
context.beginPath();
context.arc(centerx7, centery7, radius7, 0, 2*Math.PI, false);
context.fillStyle = 'RoyalBlue';
context.fill();
context.strokeStyle = 'lightblue';
context.stroke();

var x10 = 590;
var y10 = 100;
var controlx10 = 520;
var controly10 = 90;
var endx10 = 725;
var endy10 = 100;

//Saturn's Rings
context.beginPath();
context.moveTo(x10, y10);
context.quadraticCurveTo(controlx10, controly10, endx10, endy10);
context.strokeStyle = 'orange';
context.lineWidth = 10
context.stroke();

var centerx20 = 300;
var centery20 = 500;
var radius20 = 10;

//Shooting Star
context.beginPath();
context.arc(centerx20, centery20, radius20, 0, 2*Math.PI, false);
context.fillStyle = 'white';
context.fill();
context.strokeStyle = 'grey';
context.lineWidth = 3
context.stroke();

context.beginPath();
context.moveTo(310, 500);
context.bezierCurveTo(340, 500, 370, 500, 390, 530);
context.bezierCurveTo(330, 490, 360, 490, 380, 520);
context.stroke();

Hearts Pump

This was my first ever project on HTML 5. I was cool to see how a "simple" could can create something like this heart. It definitely takes a lot to create something on HTML 5 but this is a great first assignment to take me into my project. 

//Box
var x = 0;
var y = 0;
var width = 700;
var height = 600;
var grdstartx = 175;
var grdstarty = 125;
var grdendx = 525;
var grdendy = 410;

context.beginPath();
context.rect(x, y, width, height);
var grd = context.createLinearGradient(grdstartx, grdstarty, grdendx, grdendy);
grd.addColorStop(0, 'rgb(100, 0, 150)');
grd.addColorStop(1, 'rgb(0, 255, 0)');
context.fillStyle = grd;
context.fill();
context.stroke();

//Top Left
var startx = 300;
var starty = 200;
var controlx1 = 200;
var controly1 =  50;
var controlx2 = 3;
var controly2 = 200;
var endx1 = 200;
var endy1 = 350;

//Bottom Left
var controlx3 = 300;
var controly3 = 410;
var endx2 = 350;
var endy2 = 500;

//Bottom Right
var controlx4 = 375;
var controly4 = 410;
var endx3 = 450;
var endy3 = 325;

//Top Right
var controlx5 = 575;
var controly5 = 200;
var controlx6 = 400;
var controly6 = 50;

//Heart
context.beginPath();
context.moveTo(startx, starty);
context.bezierCurveTo(controlx1, controly1, controlx2, controly2, endx1, endy1);
context.quadraticCurveTo(controlx3, controly3, endx2, endy2);
context.quadraticCurveTo(controlx4, controly4, endx3, endy3);
context.bezierCurveTo(controlx5, controly5, controlx6, controly6, startx, starty);
context.closePath();
context.lineWidth = 5;
context.fillStyle = 'rgb(200, 0, 0)';
context.fill();
context.stroke();

Ready. Set. Go.

Hi, my name is Raquel Sacal. I am currently a sophomore at The University of Tampa with an Advertising and Public Relations major. I am part of a sorority, the homecoming board, and work as a Gateways mentor. As a result, my hands are a bit full, but I enjoy every minute of it. I love designing and taking pictures. In essence, I like to get creative, even if its just a simple arts and crafts project. Although I was taught all throughout high school how to use Adobe programs, such as Photoshop and Illustrator, and am Photoshop certified, I would like to refresh my skills and hopefully learn something that I was not taught before, such as learning more about InDesign. In addition, I am excited to create work that will become the stepping stone to a successful creative career in the future. I look forward to learning new things and relearning what I might have already learned!