Project 2: Part 2

 Logo Sketches

Logos: Part 1

Company Names:

1. Hands and Feet- an organization that feeds and clothes the homeless and offers support and counseling for the broken and hurting in the community. It also builds relationships with the homeless to try to find them job opportunities, better living arrangements, support, etc.

2. Metamorphosis- a organization that helps girls who struggle with self worth and image issues. It offers counseling and programs that helps girls realize how special they really are.

3. Apartment 62 - a company that sells vintage inspired, chic home decor. This would take the vinatge, flea market style I love but revamp it to make it more modern and classy so that it can fit in with any style home.

4. Canvas inc.- a art supply store that caries everything an artist could ever need, from brushes to clay.

5. Autumn-a clothing store that sells modern, trendy clothes with a vintage flare.

Project 2: Logos

Logos are apart of our everyday lives. We are surrounded by logos everywhere we go, but we don't normally notice how much they are apart of our lives till we stop and think about all the products we use everyday and how their logos help us relate to those products.

1.                                                                       

            

Starbucks has one of the most recognizable logos I know, but maybe that is just because I'm a little obsessed with their products. Their logo can be put on shirts, mugs, coffee bags, or anything else. The mermaid is also a strong graphic by itself, it is not too detailed but made up of clean graphic lines and shapes. If you shrink it down it might not be as readable as McDonald's golden arches but I feel like it is still as successful. 

        

2.

 

The Olympics logo is an amazing logo. It is so simple but so powerful, it is universal and can be understood by any language . It is simply made up of five circles that are blue, yellow, red, green, and black. So simple, and yet if you show this to almost anyone they will immediately recognize it. 

 3.

Chili's logo is a classic example of many logos of popular food chains like Taco Bell, Burger King, and Applebee's. The company name has interesting typography and the logo includes a simple image that represents the name of the company. Applebee's has an apple and Taco Bell has a bell, and Chili's has, as you might have guessed, a chili for their logo. While it might not be that creative it is very affective. 

4.

I love Canon cameras, but I don't think their logo is that successful. The typography of the logo is unique and works well for the logo, but I feel like logos are more successful when it has a bold graphic that can be shrunk down but still be recognizable. I think the Canon logo is kind of boring, while I think that keeping things relatively simple is good for a successful logo this one is too simple.

 5.

        

 Target has a pretty succesful logo. Even without the word target the symbol of the red and wite target is still recognizable, no matter what the size. It seems that companies with simple, single word names have some of the most successful logos, like apple and shell, because the logo is a simple bold graphic of the name.

Project 1

var x = 0;
var y = 0;
var width = 800;
var height = 600;
var startX = 400
var startY = 0
var endX = 400
var endY = 600

//rectangle
context.beginPath();
context.rect(x, y, width, height);
//context.fillStyle = 'rgb(102,255,204)';
//context.fill();
context.lineWidth = 5;
context.strokeStyle = 'blue'
// add linear gradient           
    var grd = context.createLinearGradient(startX, startY, endX, endY);
    // light blue
    grd.addColorStop(0, "#8ED6FF");
    // dark blue
    grd.addColorStop(1, "#004CB3");
    context.fillStyle = grd;
    context.fill();
context.stroke();


var radius = 60

//circle
    context.beginPath();
    context.arc(600, 100, radius, 0 , 2 * Math.PI, false);
    context.lineWidth = 1
     // create radial gradient
        var grd = context.createRadialGradient(600, 100, 20, 600, 100, 100);
        // light yellow
        grd.addColorStop(0, 'rgb(255,255,153)');
        // dark yellow
        grd.addColorStop(1, 'rgb(204,153,0)');
      
        context.fillStyle = grd;
        context.fill();
    //context.strokeStyle = 'yellow'
    //context.fillStyle = 'yellow'
    //context.fill();


//1st Triangle
context.beginPath();
context.moveTo(180, 145);
context.lineTo(0, 500);
context.lineTo(0, 600);
context.lineTo(360,600);
context.lineTo(360, 500);
context.lineTo(180, 145);
context.lineWidth = 3
context.strokeStyle = 'black'
context.fillStyle = 'rgb(153,153,153)';
context.fill();
context.stroke();
//peak
context.beginPath();
context.moveTo(180,145);
context.lineTo(116,275);
context.lineTo(150,235);
context.lineTo(170,275);
context.lineTo(190,235);
context.lineTo(210,275);
context.lineTo(227,235);
context.lineTo(180,145);
context.fillStyle = 'white'
context.fill();


//2nd Triangle
context.beginPath();
context.moveTo(400, 50);
context.lineTo(200, 500);
context.lineTo(600, 500);
context.lineTo(400, 50);
context.lineWidth = 3
context.strokeStyle = 'black'
context.fillStyle = 'rgb(153,153,153)';
context.fill();
context.stroke();

//Peak
context.beginPath();
context.moveTo(330,200);
context.lineTo(350,260);
context.lineTo(380,200);
context.lineTo(410,260);
context.lineTo(440,200);
context.lineTo(470,260);
context.lineTo(480,230);
context.lineTo(400,50);
context.lineTo(330,200);
context.fillStyle = 'white'
context.fill();



//3rd Triangle
context.beginPath();
context.moveTo(670,140);
context.lineTo(515,500);
context.lineTo(515,600);
context.lineTo(800,600);
context.lineTo(800,440);
context.lineTo(670,140);
context.fillStyle = 'rgb(153,153,153)';
context.fill();
context.stroke();
//peak
context.beginPath();
context.moveTo(670,140);
context.lineTo(618,260);
context.lineTo(635,310);
context.lineTo(655,260);
context.lineTo(680,310);
context.lineTo(700,260);
context.lineTo(720,310);
context.lineTo(730,280);
context.lineTo(670,140);
context.fillStyle = 'white'
context.fill();



//4th Triangle
context.beginPath();
context.moveTo(150,220);
context.lineTo(0,600);
context.lineTo(300,600);
context.lineTo(150,220);
context.fillStyle = 'rgb(102,102,102)';
context.fill();
context.stroke();
//peak
context.beginPath();
context.moveTo(150,220);
context.lineTo(102, 340);
context.lineTo(130, 310);
context.lineTo(145, 340);
context.lineTo(160, 310);
context.lineTo(180, 340);
context.lineTo(190, 320);
context.lineTo(150, 220);
context.fillStyle = 'white'
context.fill();



//5th Triangle
context.beginPath();
context.moveTo(580,250);
context.lineTo(430,600);
context.lineTo(750,600);
context.lineTo(580,250);
context.fillStyle = 'rgb(102,102,102)';
context.fill();
context.stroke();
//peak
context.beginPath();
context.moveTo(580,250);
context.lineTo(529,370);
context.lineTo(560,340);
context.lineTo(575,370);
context.lineTo(590,340);
context.lineTo(610,370);
context.lineTo(623,336);
context.lineTo(580,250);
context.fillStyle = 'white'
context.fill();



//6th Triangle
context.beginPath();
context.moveTo(360, 265);
context.lineTo(180, 600);
context.lineTo(540, 600);
context.lineTo(360, 265);
context.fillStyle = 'rgb(80,80,80)';
context.fill();
context.stroke();
//peak
context.beginPath();
context.moveTo(360,265);
context.lineTo(314,350);
context.lineTo(330,385);
context.lineTo(345,350);
context.lineTo(365,385);
context.lineTo(380,350);
context.lineTo(400,385);
context.lineTo(410,360);
context.lineTo(360,265);
context.fillStyle = 'white'
context.fill();


//cloud
context.globalAlpha = 0.5
context.beginPath();
context.moveTo(170, 80);
context.bezierCurveTo(130, 100, 130, 150, 230, 150);
context.bezierCurveTo(250, 180, 320, 180, 340, 150);
context.bezierCurveTo(420, 150, 420, 120, 390, 100);
context.bezierCurveTo(430, 40, 370, 30, 340, 50);
context.bezierCurveTo(320, 5, 250, 20, 250, 50);
context.bezierCurveTo(200, 5, 150, 20, 170, 80);
 // complete custom shape
context.closePath();
context.fillStyle = 'white'
context.fill();

Heart

var canvaswidth = 800
var canvasheight = 600

//rectangle
context.beginPath();
context.rect(0, 0, canvaswidth, canvasheight);
  var grd = context.createLinearGradient(400, 0, 400, 600);
        // light
        grd.addColorStop(0, 'rgb(153,255,255)');
        // dark
        grd.addColorStop(1, 'rgb(0,153,153)');
        context.fillStyle = grd;
        context.fill();
context.stroke();




var x = 400;
var y = 200;
var controlX1 = 300;
var controlY1 = 0;
var controlX2 = 100;
var controlY2 = 200;
var endX = 250;
var endY = 325;
var controlX = 380;
var controlY = 400;
var endX2 = 400;
var endY2 = 500;
var controlX3 = 435;
var controlY3 = 400;
var endX3 = 550;
var endY3 = 325;
var controlX4 = 700;
var controlY4 = 200;
var controlX5 = 500;
var controlY5 = 0;
var endX4 = 400;
var endY4 = 200;

context.beginPath();
context.moveTo(x,y);
context.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX, endY);
context.quadraticCurveTo(controlX, controlY, endX2, endY2);
context.quadraticCurveTo(controlX3, controlY3, endX3, endY3);
context.bezierCurveTo(controlX4, controlY4, controlX5, controlY5, endX4, endY4);
context.fillStyle = 'rgb(255, 51, 102)';
  context.fill();
context.lineWidth = 9;
context.lineCap = 'round'
context.strokeStyle = 'pink'
context.stroke();