Calligramme

I chose to do a cake for my Calligramme using Adobe Illustrator. The shape of the cake is my inspiration for my logo, and I thought it created a unique look with just the text showing. Adobe Illustrator is definitely hard for me, so I took a simple design and created an image of text. It came out better than I expected.

Rough Sketches of Logos

Here are a few sketches I drew for a potential logo for my baking company.

Logos

After searching on the web, I found some logos that I was familiar with and critiqued each one on its appearance and how effective it is.

I chose Blondie's Cookies because I work here part time. The company started out in Indiana and the owner "Blondie" opened 4 stores down in Florida. I like this logo because it is a giant cookie, so it's very obvious what she sells, even if it didn't have the name of the cookie shop on it. I think having the bite in the cookie gives it a unique look, setting it aside from any other picture of a cookie, such as Chips-o-Hoy! or Mrs. Fields. Some things I don't like about the logo is that the brown color is a little boring to me, I think it should be a more "chocolate" brown to give the cookie a more appealing look.

Gigi's Cupcakes is one of the most popular cupcake companies around the United States. There is one located in downtown Tampa that I recently visited. This logo is something that I would love to do something like for my "What's Baking?" company. In this logo, I like the curly letters in the name "GiGi" and of course the unique looking cupcake. The colors make it vibrant and it stands out. One thing that may not benefit this logo though is that without the name of the company, I am not sure if the cupcake is distinguishable enough to represent the company on its own.

This is Starbucks' older logo. It is very recognizable, and their business has established itself enough that they stopped putting the actual "Starbucks Coffee" around the mermaid goddess. Although the image is very recognizable to everyone for their coffee, I always wondered where they got the logo and how the girl represents a coffee company. If I were to start a coffee company I would have made it a coffee bean or a coffee cup with steam coming out of it. But maybe that's just it, maybe their company wanted to go with something abstract that made it so different from all the rest of the coffee companies.

Coldstone has established itself well with their signature "ice cream cone" logo. I like the cone and clearly it represents their product right away. I don't know if I would have chosen those exact colors. The mustard yellow and red remind me of the McDonalds logo, which is maybe what they were going for to attract attention. But I would have picked a pastel color for the actual ice cream because that makes me think of sweet and cute. I think this logo definitely is geared towards kids because the ice cream is clearly recognizable to them and when they see it, they will want to go in that store.

Dairy Queen's logo is one that I am not very fond of. From what I know, Dairy queen is known for their ice cream and blizzards and I know they sell hot dogs and other fast food as well. But their logo doesn't have anything to do with their product. If the  DQ was not in the center of the logo, it isn't as recognizable because the shape and colors don't really stand out to me. I think if they made a different shape or had different color combinations, then it would be more of an effective logo for me. 

Company Ideas

When I was thinking about different things to come up with for 5 fictional company ideas, I automatically was drawn to a bakery or something to do with food! So here are my ideas:

1. What's Baking? Custom Cakes and Desserts or "Nikki's Cupcakes"

-This is already a name I have created for myself as I have been making cakes and cupcakes for some clients out of my home. I would love to establish this idea even more. I like the name "Nikki's Cupcakes" but I don't just like to do cupcakes, I like to make all kinds of desserts and I do a lot of cakes for birthdays, graduations, baby showers, and special events so I don't want to just limit myself to cupcakes.

2. The Pregnant Lady

-I was thinking of when girls get pregnant and the food cravings that they have. And how when someone is craving ice cream with pickles, it is hard to find without making it on your own. So I thought of a company titled "The Pregnant Lady". This could be anything from a cupcake shop or ice cream place that offers bizarre flavors and mix ins that would bring in a lot of people who are not just pregnant but for anyone to try something new. Ex: Bacon and Chocolate Chip cupcake or Banana Split Sundae with french fries.

3. Time to Fondue!
-This would be a name for a fondue restaurant. I went to "The Melting Pot" for Valentine's Day and fell in love with the kind of food they had and for the experience in itself. This place would have all kinds of cheeses, chocolate, and sauces to fondue and would be a little bit less expensive than "The Melting Pot" so more people could enjoy this experience without having to spend a fortune!

4. Annie's Creations
-My mom likes to crochet different things for family as well as friends. She makes baby hats for my sister, who is a baby photographer at Brandon hospital. My sister uses the hats for her photos for the babies. My mom also makes scarves as well. My mom's name is Anne, so I think that this would be a cute name for her company if she was to extend her business to the public.

5. Wine Slushies
-I went to the fair last weekend and while looking through the expo hall with all the vendors and different buyers and seller booths, I found this lady who sold "Wine Slushies". She makes these cute little bags with different flavors that consist of this powdered mix with sugar. You basically poor a type of bottled wine into a plastic bag, put it in the fridge, and in an hour or so it comes out to be a flavored slushie that takes on the flavor of your wine and the flavor of the mix (chocolate, kiwi, there are specific flavors for specific wines). She gave out samples and they were quite delicious! I think this would be a great business for someone to invest in, so I chose it as a product for a possible company.

Project I Graphic Design HTML 5

I first wanted to design a cupcake because I am obsessed with baking and thought it would be cool to use if I ever decided to create my own logo for my baking business. It took me awhile to figure out what else to put, so then I included the music staff with the notes and the microphone to signify what is most important in my life: singing and baking. So this graphic design is a simple picture that describes me. What I learned from using HTML 5 was that it takes a lot of patience and a lot of time. But in the end, it's worth it, because I was really happy with what I created, even though it was sad how long it took me! Below I have pasted the entire code for the image. For the cupcake base and wrapper, I just simply connected lines and created stripes to make the wrapper look more realistic. For the frosting, I used bezier curves to create the cloud-like white frosting on top of the cupcake. For the sprinkles, I just used colored lines and thickened them to make them look like rainbow sprinkles. Then the music staff: This part took me the longest because I had to use bezier curves to create the 5 lines on the staff. Then for each music note, I created a filled in circle and attached lines to them producing quarter notes and eight notes. I the canvas graph to try and pinpoint where the notes should go on the staff so they would appear in the exact points. After that, I used a bezier curve to form the microphone wire and used lines to create the microphone base, a circle for the actual head of the mike, and a line in the center to give it more detail. On top of the cupcake, I used a circle and a bezier curve to create the cherry on top! And for the background, I used a liner gradient from light pink fading into a darker pink. I played around with a lot of colors for this part, and decided on this one because one of my favorite colors is pink and I thought it made the cupcake and the black music notes stand out the best.

I used this picture of music notes as a guide to help me create my own.

 

CODE:

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

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

///Background///
context.beginPath();
context.rect(0, 0, 800, 600);
var grd = context.createLinearGradient(0, 0, 800, 600);
grd.addColorStop(0, 'pink');
grd.addColorStop(1, '#F52887');
context.fillStyle= grd;
context.fill();
context.stroke();


///Cupcake Base///
context.beginPath();
context.moveTo(300, 240);
context.lineTo(325, 375);
context.lineTo(475, 375);
context.lineTo(500, 240);
context.lineTo(300, 240);
context.closePath();
context.lineWidth=3;
context.lineCap = 'round';
context.fillStyle= '#5CB3FF';
context.fill();
context.stroke();

///Cupcake Wrapper///
context.beginPath();
context.moveTo(320, 240);
context.lineTo(340, 375);
context.stroke();

context.beginPath();
context.moveTo(340, 240);
context.lineTo(360, 375);
context.stroke();

context.beginPath();
context.moveTo(365, 240);
context.lineTo(380, 375);
context.stroke();

context.beginPath();
context.moveTo(390, 240);
context.lineTo(400, 375);
context.stroke();

context.beginPath();
context.moveTo(415, 240);
context.lineTo(420, 375);
context.stroke();

context.beginPath();
context.moveTo(440, 240);
context.lineTo(440, 375);
context.stroke();

context.beginPath();
context.moveTo(470, 240);
context.lineTo(460, 375);
context.stroke();


///Cupcake Frosting///
context.beginPath();
context.moveTo(305, 190);
context.bezierCurveTo(275, 200, 275, 230, 300, 250);
context.bezierCurveTo(325, 258, 345, 250, 350, 235);
context.bezierCurveTo(350, 275, 375, 280, 400, 275);
context.bezierCurveTo(425, 270, 430, 255, 430, 242);
context.bezierCurveTo(448, 253, 460, 260, 475, 260);
context.bezierCurveTo(500, 260, 535, 235, 495, 190);
context.bezierCurveTo(500, 125, 450, 105, 430, 105);
context.bezierCurveTo(315, 95, 300, 150, 305, 190);
context.closePath();
context.lineWidth=5;
context.fillStyle= 'white';
context.fill();
context.stroke();


///Sprinkles on Cupcake///
context.beginPath();
context.moveTo(380, 190);
context.lineTo(400, 180);
context.lineWidth=5;
context.strokeStyle= '#FEFE03';
context.stroke();

context.beginPath();
context.moveTo(348, 150);
context.lineTo(366, 140);
context.strokeStyle= '#FE0307';
context.stroke();

context.beginPath();
context.moveTo(458, 130);
context.lineTo(475, 153);
context.strokeStyle= '#3503FE';
context.stroke();

context.beginPath();
context.moveTo(415, 160);
context.lineTo(430, 175);
context.strokeStyle= '#C80FE9';
context.stroke();

context.beginPath();
context.moveTo(325, 205);
context.lineTo(340, 224);
context.strokeStyle= '#05B726';
context.stroke();

context.beginPath();
context.moveTo(435, 210);
context.lineTo(418, 230);
context.strokeStyle= '#FF921C';
context.stroke();

context.beginPath();
context.moveTo(375, 240);
context.lineTo(390, 250);
context.strokeStyle= '#1CFFF0';
context.stroke();

context.beginPath();
context.moveTo(480, 210);
context.lineTo(500, 230);
context.strokeStyle= '#F00068';
context.stroke();


///Cherry///
context.beginPath();
context.arc(400, 90, 30, 0 , 2 * Math.PI, false);
context.fillStyle= 'rgb(255, 0, 0)';
context.fill();
context.strokeStyle= 'black';
context.stroke();


///Cherry Stem///
context.beginPath();
context.moveTo(400, 60);
context.bezierCurveTo(405, 50, 375, 15, 350, 23);
context.stroke();

///Music Staff///
context.beginPath();
context.moveTo(0, 350);
context.bezierCurveTo(50, 340, 110, 340, 145, 370);
context.bezierCurveTo(200, 425, 400, 440, 530, 400);
context.bezierCurveTo(600, 375, 675, 360, 800, 360);
context.lineWidth=2;
context.stroke();

context.beginPath();
context.moveTo(0, 375);
context.bezierCurveTo(50, 365, 110, 365, 145, 395);
context.bezierCurveTo(200, 450, 400, 465, 530, 425);
context.bezierCurveTo(600, 400, 675, 385, 800, 385);
context.stroke();

context.beginPath();
context.moveTo(0, 400);
context.bezierCurveTo(50, 390, 110, 390, 145, 420);
context.bezierCurveTo(200, 475, 400, 490, 530, 450);
context.bezierCurveTo(600, 425, 675, 410, 800, 410);
context.stroke();

context.beginPath();
context.moveTo(0, 425);
context.bezierCurveTo(50, 415, 110, 415, 145, 445);
context.bezierCurveTo(200, 500, 400, 515, 530, 475);
context.bezierCurveTo(600, 450, 675, 435, 800, 435);
context.stroke();

context.beginPath();
context.moveTo(0, 450);
context.bezierCurveTo(50, 440, 110, 440, 145, 470);
context.bezierCurveTo(200, 525, 400, 540, 530, 500);
context.bezierCurveTo(600, 475, 675, 460, 800, 460);
context.stroke();


context.beginPath();
context.moveTo(5, 350);
context.lineTo(5, 450);
context.lineWidth=8;
context.lineCap= 'butt';
context.stroke();

context.beginPath();
context.moveTo(15, 348);
context.lineTo(15, 448);
context.lineWidth=2;
context.stroke();


///Microphone///


context.beginPath();
context.moveTo(600, 600);
context.bezierCurveTo(540, 540, 620, 490, 720, 300);
context.bezierCurveTo(750, 250, 750, 200, 725, 190);
context.lineWidth=10;
context.stroke();

context.beginPath();
context.moveTo(720, 200);
context.lineTo(728, 180);
context.lineTo(640, 130);
context.lineTo(630, 160);
context.lineTo(720, 200);
context.lineWidth=3;
context.fillStyle= 'black';
context.fill();
context.stroke();

context.beginPath();
context.arc(610, 133, 30, 0, 2*Math.PI, false);
context.lineWidth=5;
context.fillStyle= 'rgb(100, 100, 100)';
context.fill();
context.stroke();

context.beginPath();
context.moveTo(598, 163);
context.lineTo(623, 103);
context.lineWidth=8;
context.lineCap= 'round';
context.stroke();



///Music Notes///
context.beginPath();
context.arc(50, 420, 10, 0, 2 * Math.PI, false);
context.fillStyle= 'black';
context.fill();
context.lineWidth=2;
context.stroke();

context.beginPath();
context.moveTo(60, 420);
context.lineTo(60, 335);
context.lineCap= 'butt';
context.stroke();

context.beginPath();
context.arc(110, 400, 10, 0, 2*Math.PI, false);
context.fillStyle= 'black';
context.fill();
context.stroke();

context.beginPath();
context.arc(140, 430, 10, 0, 2*Math.PI, false);
context.fillStyle= 'black';
context.fill();
context.stroke();

context.beginPath();
context.moveTo(120, 400);
context.lineTo(120, 330);
context.stroke();

context.beginPath();
context.moveTo(120, 330);
context.lineTo(150, 340);
context.lineWidth=8;
context.stroke();

context.beginPath();
context.moveTo(150, 340);
context.lineTo(150, 430);
context.lineWidth=2;
context.stroke();

context.beginPath();
context.arc(200, 413, 10, 0, 2*Math.PI, false);
context.fillStyle= 'black';
context.fill();
context.stroke();

context.beginPath();
context.moveTo(190, 413);
context.lineTo(190, 503);
context.stroke();

context.beginPath();
context.arc(260, 453, 10, 0, 2*Math.PI, false);
context.fillStyle= 'black';
context.fill();
context.stroke();

context.beginPath();
context.moveTo(250, 453);
context.lineTo(250, 543);
context.stroke();

context.beginPath();
context.arc(330, 485, 10, 0, 2*Math.PI, false);
context.fillStyle= 'black';
context.fill();
context.stroke();

context.beginPath();
context.moveTo(340, 485);
context.lineTo(340, 410);
context.stroke();

context.beginPath();
context.moveTo(340, 410);
context.lineTo(380, 405);
context.lineWidth=8;
context.stroke();

context.beginPath();
context.moveTo(380, 405);
context.lineTo(380, 460);
context.lineWidth=2;
context.stroke();

context.beginPath();
context.arc(370, 460, 10, 0, 2*Math.PI, false);
context.fillStyle= 'black';
context.fill();
context.stroke();

context.beginPath();
context.arc(415, 470, 10, 0, 2*Math.PI, false);
context.fillStyle= 'black';
context.fill();
context.stroke();

context.beginPath();
context.moveTo(425, 470);
context.lineTo(425, 410);
context.stroke();

context.beginPath();
context.moveTo(425, 410);
context.lineTo(460, 415);
context.lineWidth=8;
context.stroke();

context.beginPath();
context.moveTo(460, 415);
context.lineTo(460, 480);
context.lineWidth=2;
context.stroke();

context.beginPath();
context.arc(450, 480, 10, 0, 2*Math.PI, false);
context.fillStyle= 'black';
context.fill();
context.stroke();

context.beginPath();
context.arc(490, 500, 10, 0, 2*Math.PI, false);
context.fillStyle= 'black';
context.fill();
context.stroke();

context.beginPath();
context.moveTo(500, 500);
context.lineTo(500, 420);
context.stroke();

context.beginPath();
context.arc(550, 458, 10, 0, 2*Math.PI, false);
context.fillStyle= 'black';
context.fill();
context.stroke();

context.beginPath();
context.moveTo(560, 458);
context.lineTo(560, 375);
context.stroke();

context.beginPath();
context.arc(600, 478, 10, 0, 2*Math.PI, false);
context.fillStyle= 'black';
context.fill();
context.stroke();

context.beginPath();
context.moveTo(610, 480);
context.lineTo(610, 400);
context.stroke();

context.beginPath();
context.arc(680, 415, 10, 0, 2*Math.PI, false);
context.fillStyle= 'black';
context.fill();
context.stroke();

context.beginPath();
context.moveTo(670, 415);
context.lineTo(670, 470);
context.stroke();

context.beginPath();
context.moveTo(670, 470);
context.lineTo(705, 460);
context.lineWidth=8;
context.stroke();

context.beginPath();
context.moveTo(705, 460);
context.lineTo(705, 400);
context.lineWidth=2;
context.stroke();

context.beginPath();
context.arc(715, 400, 10, 0, 2*Math.PI, false);
context.fillStyle= 'black';
context.fill();
context.stroke();

context.beginPath();
context.arc(760, 435, 10, 0, 2*Math.PI, false);
context.fillStyle= 'black';
context.fill();
context.stroke();

context.beginPath();
context.moveTo(770, 435);
context.lineTo(770, 360);
context.stroke();







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

};

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

Heart Design in HTML 5

It was very hard to get used finding the right coordinates to make a perfect rounded heart using the codes for a bezier and quadratic curve. But once I finished half of the heart, it was easier to match up the points on the other side to complete the heart. Then after I put color to it, it turned out a lot better than I thought!

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

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

context.beginPath();
context.rect(0, 0, 800, 600);
var grd=context.createLinearGradient(0, 300, 800, 300);
grd.addColorStop(0, 'rgb(250, 50, 240)');
grd.addColorStop(1, 'rgb(100, 200, 50)');
context.fillStyle = grd;
context.fill();
context.stroke();


context.beginPath();
context.moveTo(390, 175);
context.bezierCurveTo(275, 25, 125, 175, 300, 340);
context.quadraticCurveTo(350, 390, 390, 450);
context.quadraticCurveTo(430, 390, 480, 340);
context.bezierCurveTo(655, 175, 505, 25, 390, 175);
context.fillStyle= 'rgb(255, 0, 0)';
context.fill();
context.stroke();










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

};

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