Possible Logo Designs

Icing - Cupcake & Cocktail Bar

Designs (left to right):
1. For the first logo I really wanted a simple, straight to the point approach. I liked the idea of having the name of the business along with a tag line. Then I decided with one "i" I could do something that related to cupcakes and the other to drinks. I really like this logo because of the simplicity.
2. I then began thinking about cupcakes and what else I could do to make them relate to drinks. So I decided to so a more detailed cupcake with a martini olive on top, instead of a cherry. Having the "I" in the middle of the base of the cupcake would stand for the name of the business. After drawing this logo I don't really like it for the vision I had.
3. After the first cupcake logo I thought to try another version of it, but more simple. I liked how I could incorporate the tag line still, in a different way. The overall cupcake is very easy to distinguish, especially if it is shrunk down. From far away people would know it has to do with cupcakes. However, this logo does lack the idea of having drinks involved. 
4. For the martini class logo I thought it was a great idea at first, until I had to add the cupcake. The class alone looked really cool with the olive but the cupcake then looks like it is just sitting there. If I hadn't added the cupcake though, it wouldn't have been recognizable as both cocktails and cupcakes. I also didn't really know how to include the tagline, which I thought was essential. 
5. My last design was meant to look like icing in the shape of an "I" for the name. I also thought I could add colored sprinkles around it. Then I ran into the same problem, combining cupcakes and cocktails in the design. I couldn't think of a way to do that with this design. To be it just isn't what I pictured for my business logo. 

Possible Companies

The ideas I have come up with for possible companies to make logos for are:

• Icings - Cupcakes and Cocktails will be served together. With every homemade cupcake flavor will be a drink to go along with it. It will be aimed toward a more upscale late 20s audience. 
• Whopin' Waffles - A waffle bus outside of campus open Thursday - Sunday 10pm-3am for those midnight cravings or late nights. They will have different toppings for Belgian waffles for a college budget.
• Sweet Teal Photography - A small private owned photography company working out of the South. Specializing in wedding, family, and senior photos. 
• Bayside Burritos - Serving Breakfast Burritos all day. A small local restaurant with different flavors of burritos for all tastes.
• Roll with the Tide - A family restaurant serving seafood located on the water. It would be fairly priced and local food. 

Logos

Originally, I thought I really liked the Pringles logo. I never really looked too much at it, or studied it. When really looking at the logo I wonder why it is a face of a man, what does that have to do with chips? The shape of the man's face makes sense though because it is the same shape as a Pringles chip. I think that this logo is very distinct though, I cannot think of another product with a similar face. This logo is very recognizable as well.  

The Domino's Pizza logo is one of my favorites. I really like the creativity behind the shape and idea. The fact that they used the actual shape and dots of dominos makes it very distinct. To me I also think of a pizza box because the dominos make a square shape. Even without the words, the fact that the shape is on a tilt and the colors clearly are Domino's Pizza. Small or large this logo is also recognizable. 

The Chili's logo is one of the most recognizable logos I know. Even shrunk down to the smallest possible size someone can tell what the logo is representing. Even the colors of the chili resembles a hot chili pepper so when you add the s after it, you read "chili - s" which is exactly what it is. I do not know if it was on purpose but to me the stem of the chili pepper is like the apostrophe before the s. I think this logo is just pretty brilliant. 

I also really like the Target logo. To me red is a very bold color, so against the harsh white, the red really stands out and contrasts. The fact the the logo is in the shape of a bulls eye makes me think of a target. Almost every person knows what the Target logo is because it hasn't changed much ever. Most of the time you even see the logo without the word "Target" underneath it. I don't think the words are even needed. This logo can be shrunk or blown up and everyone still knows what it represents. I can't think of a better way to promote Target. 

Walmart's logo is one I just really do not like. I think it is way too wordy. Without the word "Walmart" no one knows which company this belongs to. The colors also make no sense, I don't understand why they are blue and yellow. This logo is one that needs to be shown large in order to know what it is for. I also do not think the symbol after the word is very distinct, many other companies can have small firework like stars. 

Project 1 ~ ASCII Image

My Project Image

Based off Google Clipart

For this project I began by looking for an image on Google that interested me. I found this clipart of a puppy and thought it was cute :) I then took the picture and drew my own image on the graph. While creating the image in code I changed the colors as well as some of the shapes. In the code I played around with the differences between the quadratic and bezier curves. I really enjoyed this project but did not realize in the beginning the great deal of work that it would take. I believe my image was overall successful. I really like the overall look of it, and most of the curves blend very well together. There are a few areas I could still work on though. I do like writing the codes and seeing my code and work turn into an actual image. It is something I never would have thought I could do. Below is the code I created for the image above:

<!DOCTYPE HTML>

<html>

<head>

<script>

window.onload = function() {

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

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

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

//rectangle

context.beginPath();

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

context.lineWidth = 40;

context.strokeStyle = 'rgb(0, 153, 51)';

//context.fillStyle = 'rgb(205, 225, 255)';

 // add linear gradient

        var grd = context.createLinearGradient(0, 0, 800, 600);

        grd.addColorStop(0, 'rgb(0, 102, 204)');

        grd.addColorStop(1, 'rgb(250, 250, 250)');

        context.fillStyle = grd;

context.fill();

context.stroke();

//puppy face

context.beginPath();

context.moveTo(425, 125);

context.quadraticCurveTo(360, 100, 335, 150);

//left ear

context.bezierCurveTo(325, 125, 245, 115, 200, 145);

context.quadraticCurveTo(130, 180, 50, 275);

context.quadraticCurveTo(28, 315, 50, 355);

context.quadraticCurveTo(80, 400, 150, 380);

context.quadraticCurveTo(210, 360, 275, 280);

//left cheek

context.quadraticCurveTo(240, 340, 250, 400);

context.quadraticCurveTo(265, 450, 300, 463);

context.quadraticCurveTo(350, 480, 400, 453);

context.quadraticCurveTo(420, 440, 430, 420);

//right cheek

context.quadraticCurveTo(460, 445, 485, 450);

context.quadraticCurveTo(538, 458, 575, 422);

context.quadraticCurveTo(605, 388, 598, 350);

context.quadraticCurveTo(588, 245, 520, 190);

//right ear

context.quadraticCurveTo(585, 175, 650, 197);

context.quadraticCurveTo(725, 210, 755, 175);

context.quadraticCurveTo(777, 150, 770, 110);

context.quadraticCurveTo(765, 77, 700, 50);

context.quadraticCurveTo(640, 30, 550, 50);

context.quadraticCurveTo(472, 70, 425, 125);

context.fillStyle = 'rgb(152, 102, 0)';

context.fill();

context.lineWidth = 7;

context.strokeStyle = 'black';

context.stroke();

//lip

context.beginPath();

context.moveTo(395, 455);

context.quadraticCurveTo(445, 490, 485, 450);

context.quadraticCurveTo(460, 445, 430, 420);

context.quadraticCurveTo(420, 440, 395, 455);

context.fillStyle = 'rgb(152, 102, 0)';

context.fill();

context.lineWidth = 7;

context.strokeStyle = 'black';

context.stroke();

//mouth

context.beginPath();

context.moveTo(410, 445);

context.quadraticCurveTo(445, 470, 467, 445);

context.quadraticCurveTo(460, 445, 430, 420);

context.quadraticCurveTo(420, 440, 410, 445);

context.fillStyle = 'rgb(204, 0, 0)';

context.fill();

context.lineWidth = 7;

context.strokeStyle = 'black';

context.stroke();

//nose

context.beginPath();

context.moveTo(428, 420);

context.quadraticCurveTo(450, 400, 462, 375);

context.quadraticCurveTo(465, 355, 450, 350);

context.quadraticCurveTo(430, 350, 425, 370);

context.quadraticCurveTo(415, 355, 400, 355);

context.quadraticCurveTo(384, 365, 390, 380);

context.quadraticCurveTo(410, 405, 428, 420);

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

context.fill();

context.lineWidth = 3;

context.strokeStyle = 'black';

context.stroke();

//freckles right side

context.beginPath();

context.arc(525, 375, 5, 0, 2 * Math.PI, false);

context.fillStyle = 'black';

context.fill();

context.lineWidth = 5;

context.strokeStyle = 'black';

context.stroke();

context.beginPath();

context.arc(485, 385, 5, 0, 2 * Math.PI, false);

context.fillStyle = 'black';

context.fill();

context.lineWidth = 5;

context.strokeStyle = 'black';

context.stroke();

context.beginPath();

context.arc(510, 415, 5, 0, 2 * Math.PI, false);

context.fillStyle = 'black';

context.fill();

context.lineWidth = 5;

context.strokeStyle = 'black';

context.stroke();

//freckles left side

context.beginPath();

context.arc(380, 410, 5, 0, 2 * Math.PI, false);

context.fillStyle = 'black';

context.fill();

context.lineWidth = 5;

context.strokeStyle = 'black';

context.stroke();

context.beginPath();

context.arc(345, 405, 5, 0, 2 * Math.PI, false);

context.fillStyle = 'black';

context.fill();

context.lineWidth = 5;

context.strokeStyle = 'black';

context.stroke();

context.beginPath();

context.arc(360, 435, 5, 0, 2 * Math.PI, false);

context.fillStyle = 'black';

context.fill();

context.lineWidth = 5;

context.strokeStyle = 'black';

context.stroke();

//left eye

context.beginPath();

context.arc(345, 250, 28, 0, 2 * Math.PI, false);

context.fillStyle = 'white';

context.fill();

context.lineWidth = 3;

context.strokeStyle = 'black';

context.stroke();

context.beginPath();

context.arc(347, 260, 18, 0, 2 * Math.PI, false);

context.fillStyle = 'black';

context.fill();

context.lineWidth = 3;

context.strokeStyle = 'black';

context.stroke();

//right eye

context.beginPath();

context.arc(465, 228, 28, 0, 2 * Math.PI, false);

context.fillStyle = 'white';

context.fill();

context.lineWidth = 3;

context.strokeStyle = 'black';

context.stroke();

context.beginPath();

context.arc(468, 237, 18, 0, 2 * Math.PI, false);

context.fillStyle = 'black';

context.fill();

context.lineWidth = 3;

context.strokeStyle = 'black';

context.stroke();

//words

context.font = 'bold 60pt Calibri';

context.fillText('WOOF!', 500, 550);

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

};

</script>

</head>

<body>

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

</body>

</html>

Heart in HTML Coding - 9/12 Homework

Heart Image Attempt 2

Heart Image Attempt 1

Graph of Points and Curves to make the Heart

HTML Code for Attempt 1:

//rectangle

context.beginPath();

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

context.lineWidth = 50;

context.strokeStyle = 'rgb(210, 210, 255)';

//context.fillStyle = 'rgb(205, 225, 255)';

 // add linear gradient

        var grd = context.createLinearGradient(0, 0, 800, 600);

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

        grd.addColorStop(0.5, 'rgb(205, 150, 150)');

        grd.addColorStop(1, 'rgb(255, 210, 210)');

        context.fillStyle = grd;

context.fill();

context.stroke();

//curves

context.beginPath();

context.moveTo(300,325);

context.bezierCurveTo(450, 200, 550, 250, 300, 500);

context.lineWidth = 20;

context.strokeStyle = 'rgb(200, 245, 245)';

context.lineCap = 'round';

context.stroke();

context.beginPath();

context.moveTo(300,325);

context.bezierCurveTo(150, 200, 50, 250, 300, 500);

context.stroke();

HTML Code for Attempt 2:

//rectangle
context.beginPath();
context.rect(0, 0, 800, 600);
context.lineWidth = 50;
context.strokeStyle = 'rgba(255, 204, 102, 0.5)';
//context.fillStyle = 'rgb(205, 225, 255)';
 // add linear gradient
        var grd = context.createLinearGradient(0, 0, 800, 600);
        grd.addColorStop(0, 'rgb(255, 255, 255)');
        grd.addColorStop(0.5, 'rgb(205, 150, 150)');
        grd.addColorStop(1, 'rgb(255, 210, 210)');
        context.fillStyle = grd;
context.fill();
context.stroke();

//curves
context.beginPath();
context.moveTo(400,200);
context.bezierCurveTo(300, 0, 100, 200, 250, 325);
context.quadraticCurveTo(360,400, 400, 500)
context.quadraticCurveTo(460,400, 550, 325)
context.bezierCurveTo(700, 200, 500, 0, 400, 200);
context.lineWidth = 20;
context.strokeStyle = 'rgb(200, 245, 245)';
context.lineCap = 'round';
context.fillStyle = 'rgba(210, 210, 255, 0.5)';
context.fill();
context.stroke();