Wednesday, February 28, 2018

Analyzing Good Logos

Good Logos

FedEx














This is a great logo because it is very simple and memorable. Especially the hidden arrow in the logo. Once you see it, you can never unsee it. It can work in a smaller or bigger size, with or without color. It is timeless and can be used over and over again. The font and colors are appropriate to the company.

Pepsi











This is a great logo because of its hidden meaning. The meaning is that if you drink too much Pepsi, you start to look the the logo. This is what makes it memorable. It is versatile and can be made in different colors or on a bigger scale. Once you see the hidden man, then you will always think about it. This logo is also not too complex, which makes it easier to be familiar with.

NBC

























This logo is great because of the contrast of the bright colors and the black text. If the text was bright, it would be too distracting for someone viewing the logo. It also has a hidden symbol which is that the bright colors are peacock feathers. This makes it pretty memorable and simple. This logo has been timeless and has only had color and texture changes over the years.

Analyzing Bad Logos

Bad Logos:

Locum 











This logo is not memorable because of the crazy background. This logo has a placement fail and the heart should be replaced. This is not appropriate for a realtor company because of the font and color used. It seems like it would be more appropriate for a logo of a drink, if the heart is replaced. 

CatWear







This logo is not simple because the cat with the letter C is too confusing and the way the cat is placed. It is hard to see the A, the cat makes. This would not be versatile because if it was made smaller, it would be even harder to understand. 

London Olympics 

















This logo has way too much going on for it to be simple and memorable. We cannot figure out what is going on. We only know its the olympics from the olympic flag. It would not work as a smaller logo so it would not be versatile. 



Tuesday, February 27, 2018

Selfie Calligram

For this project, I had to read the speech as well as look up the name of the school.  I decided to add the names to my hair so they are easy to read as well as the name of the school. Then I decided to add the speech with can be read in some parts but in others it cannot. I added G L, representing Gun Laws for my eyes. I added a little of a comedic relief with my nose and the size of it.

This is the same calligram image but this is without the gradient. 



Thursday, February 8, 2018

Poochie Canvas Project


For this project, when we got assigned it, I thought about my dog. I made this project with my dog in mind and even used similar colors. I did change some things along the way but the concept was mostly about my dog.




Code:

///Background
var myGradient = context.createLinearGradient(0,0,800,0);
myGradient.addColorStop(0,    "rgba(0,127,70,1)"    );
   myGradient.addColorStop(0.5,  "rgba(151,255,208,1)"  ); //

myGradient.addColorStop(1,    "rgba(176,255,219,1)"     );

//// Rectangle

context.beginPath();


context.rect(0,0,canvas.width,canvas.height);



context.closePath();

context.fillStyle = myGradient;
context.fill();

context.beginPath();

//Body
var grdbody = context.createRadialGradient(600,300,400,650,10,400);
grdbody.addColorStop(0,"rgba(255,212,151,1)");
grdbody.addColorStop(0.5,"rgba(255,222,176,1)");
grdbody.addColorStop(1, "rgba(199,124,17,1)");

context.moveTo(210,380);
context.bezierCurveTo(330,900,500,900,600,375);
context.bezierCurveTo(550,180,230,190,210,375);





context.closePath();
context.fillStyle = grdbody;
context.fill();


/// Head
context.beginPath();

var head = context.createRadialGradient(600,300,400,650,100,40);

head.addColorStop(0,"rgba(199,124,17,1)");
head.addColorStop(0.5,"rgba(255,222,176,1)");
head.addColorStop(1,"rgba(255,212,151,1)");
context.moveTo(330,375);
context.bezierCurveTo(100,100,40,20,500,37);
context.bezierCurveTo(730,80,600,200,500,375);




context.closePath();

context.fillStyle = head;
context.fill();

//Mouth
context.beginPath();


context.moveTo(350,350);
context.quadraticCurveTo(200,500,400,451);
context.quadraticCurveTo(650,500,500,351);

context.closePath();

context.fillStyle = head;
context.fill();

//Ear 1
context.beginPath();

var ear1 = context.createRadialGradient(600,200,400,600,200,300);

ear1.addColorStop(0,"rgba(199,124,17,1)");
ear1.addColorStop(0.5,"rgba(255,222,176,1)");
ear1.addColorStop(1,"rgba(127,106,76,1)");

context.moveTo(170,90); //A
context.quadraticCurveTo(10,400,100,401); //Cp1 B
context.quadraticCurveTo(310,390,200,115); //Cp2, A


context.closePath();

context.fillStyle = ear1;
context.fill();


// Ear 2
context.beginPath();

var ear2 = context.createRadialGradient(600,20,400,600,20,30);

ear2.addColorStop(0,"rgba(199,124,17,1)");
ear2.addColorStop(0.5,"rgba(255,222,176,1)");
ear2.addColorStop(1,"rgba(255,212,151,1)");


context.moveTo(610,90); //A
context.quadraticCurveTo(850,400,690,401); //Cp1 B
context.quadraticCurveTo(510,380,610,115); //Cp2, A


context.closePath();

context.fillStyle = ear2;
context.fill();

// eye 1
context.beginPath();



context.arc(500,150,40,0,Math.PI*2,false);


 context.closePath();

 context.fillStyle = "rgba(255,255,255,1)";
 context.fill();

// Pupil 1
context.beginPath();


context.arc(500,150,20,0,Math.PI*2,false);


   context.closePath();
context.fillStyle="rgba(0,0,0,0.3)";
context.fill();

// Eye 2
context.beginPath();

context.arc(300,150,40,0,Math.PI*2,false);


 context.closePath();

 context.fillStyle = "rgba(255,255,255,1)";
 context.fill();

// Pupil 2
context.beginPath();


context.arc(300,150,20,0,Math.PI*2,false);


   context.closePath();
context.fillStyle="rgba(0,0,0,0.3)";
context.fill();

/// Nose

context.beginPath();

context.moveTo(390,400);
context.quadraticCurveTo(420,510,450,400);

context.closePath();
context.fillStyle = "rgba(0,0,0,1)";
context.fill();

//whiskers

context.beginPath();

  context.moveTo(556,350);
context.lineTo(500,400);

context.closePath();

context.lineWidth = 1;
context.stroke();

context.beginPath();

  context.moveTo(610,350);
context.lineTo(500,410);

context.closePath();

context.lineWidth = 1;
context.stroke();

context.beginPath();

  context.moveTo(670,350);
context.lineTo(500,420);

context.closePath();

context.lineWidth = 1;
context.stroke();


context.beginPath();

  context.moveTo(720,350);
context.lineTo(500,430);

context.closePath();

context.lineWidth = 1;
context.stroke();

// Whiskers 2


context.beginPath();

  context.moveTo(276,350);
context.lineTo(350,400);

context.closePath();

context.lineWidth = 1;
context.stroke();


context.beginPath();

  context.moveTo(200,350);
context.lineTo(350,410);

context.closePath();

context.lineWidth = 1;
context.stroke();

 context.beginPath();

  context.moveTo(160,350);
context.lineTo(350,420);

context.closePath();

context.lineWidth = 1;
context.stroke();

 context.beginPath();

  context.moveTo(110,350);
context.lineTo(350,430);

context.closePath();

context.lineWidth = 1;
context.stroke();

/// tail

context.beginPath();

var tail = context.createRadialGradient(400,300,400,650,100,600);

tail.addColorStop(0,"rgba(199,124,17,1)");
tail.addColorStop(0.5,"rgba(255,222,176,1)");
tail.addColorStop(1,"rgba(255,212,151,1)");

context.moveTo(100,900);
context.quadraticCurveTo(23,220,105,500);
context.quadraticCurveTo(195,250,200,900);



context.closePath();
context.fillStyle = tail;
context.fill();

//Spot on tail

context.beginPath();


context.arc(130,600,46,0,Math.PI*2,false);


   context.closePath();
context.fillStyle="rgba(0,0,0,0.5)";
context.fill();