Ana Sofia's Blog...: February 2013

Thursday, February 28, 2013

Calligramme

For the calligramme exercise, I chose the outline of the Statue of Liberty. The silhouette is filled with different words that represent New York City and in the center I included the image of the famous "I love NY" logo that represents the city. After doing this exercise I can say I've mastered the text skill; it was very time consuming because of the great variety of fonts there was to choose form.

Tuesday, February 19, 2013

Company Logo Thumbnails

Logos Critique

Apple:

The apple logo is easily recognized by most of the world. Even though it’s very simple and it doesn't have any words, it achieves it point and it’s well known by its customers. There isn't any direct relationship between the logo and the products sold in this store, but it continuous use of the logo in every device made under this brand, has allowed people to identify the logo and its products.

Red Bull:

Red Bull is an energy drink that doesn’t have any relationship between the product’s name and the actual product. Instead there is a relationship between the image that represents this brand and the name. Even people that don’t know this brand may guess that the product’s name is Red Bull because that’s what is portrayed in the image. It a very simple logo and it has also had a positive effect within the audience.

Domino Pizza:

The Domino Pizza logo doesn’t have any relationship with what they sell. The relationship is shown between the name and the logo. Everybody that sees the red and blue domino knows it represents domino’s pizza. The logo and the brand definitely have had a positive impact with the audience because it has become a worldwide known chain of pizza.

LG:

LG is an electronic appliance company that is known for their high quality equipments. As the logos and slogan stat, the make life good. This is a very simple logo that all of their appliances carry. It not only represents the company’s name, but at the same time it reminds customers of their slogan.

Gatorade:

Gatorade is one of the most famous an energy drinks for athletes. It orange lightning/ thunder image represents the energy or power the can be achieved by the drink. It’s another simple logo, but that also managed to have a good effect with its customers. Even though the bottling of the drink has changed throughout the years its logo stays the same, allowing a bond with the drink.

Sunday, February 17, 2013

Company Logos List

1. Salon Coquette

An all woman beauty salon. Services offered: hair styling, manicure and pedicure

2. Your First ABC’s

Early childhood school (nursery, junior kinder and kindergarten)

3. Electronics 101

A music store the sales cd records and any music related equipments.

4. Supreme Gym

Multitask gym

5. Caribe

Swimwear, internationally made swimsuits and accessories.

Tuesday, February 12, 2013

Project 1: Pringles

For project number one I decided to do the Pringles' logo. I choose it because I could apply several techniques. From the cartoon, pringle man, to the letters and background shapes, I was able to use a wide range of shapes, lines, and even gradients. This was a very challenging but at the same time interesting project. Even though it was very time consuming and now a day there are lots of programs that will allow us to design a lot faster, I don't regret having worked with programming. It was interesting to know whats behind those programs and be able to understand how the graphics work.

Project 1: Pringles Code

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

////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
//backgorund
context.beginPath();
context.rect(0,0,800,600);
context.lineWidth = 5;
context.strokeStyle = 'rgb(0,0,0)';
context.fillStyle = 'rgb(255,255,255)';
context.fill();
context.stroke();

//red rectangle
context.beginPath();
context.moveTo(200,200);
context.quadraticCurveTo(225,350,300,600);
context.quadraticCurveTo(400,525,500,500);
context.quadraticCurveTo(520,325,525,175);
context.quadraticCurveTo(350,150,200,200);
context.lineCap = 'round';
context.lineWidth = .5;
context.strokeStyle = 'rgb(193, 27, 23)';
var grd = context.createLinearGradient(200,250,525,175);
grd.addColorStop(0,'rgb(128, 5, 23)');
grd.addColorStop(.25,'rgb(193, 27, 23)');
grd.addColorStop(.5,'rgb(255,0,0)');
grd.addColorStop(1,'rgb(193, 27, 23)');
context.fillStyle = grd;
context.fill();
context.stroke();

//white face oval
context.beginPath();
      context.arc(365, 180, 120, 50, Math.PI, false);
      context.closePath();
      context.lineWidth = 5;
      context.fillStyle = 'rgb(255,255,255)';
      context.fill();
      context.strokeStyle = 'rgb(255,255,255)';
      context.stroke();

//tie right
context.beginPath();
context.moveTo(375,305);
context.lineTo(440,325);
context.lineTo(440,270);
context.lineTo(375,305);
context.lineWidth = 5;
context.strokeStyle = 'rgb(0,0,0)';
var grd = context.createLinearGradient(350,305,444,325);
grd.addColorStop(1,'rgb(0,0,0)');
grd.addColorStop(.65,'rgb(200, 5, 23)');
context.fillStyle = grd
context.fill();
context.lineCap = 'round';
context.stroke();

//face border left side
context.beginPath();
context.moveTo(265,150);
context.bezierCurveTo(220,200,245,265,310,290);
context.bezierCurveTo(320,290,220,250,265,150);
context.fillStyle = 'rgb(0,0,0)';
context.fill();
context.stroke();

//face border right side
context.beginPath();
context.moveTo(450,135);
context.bezierCurveTo(515,160,500,260,442,273);
context.bezierCurveTo(485,260,500,170,450,135);
context.fillStyle = 'rgb(0,0,0)';
context.fill();
context.stroke();

//tie left
context.beginPath();
context.moveTo(375,305);
context.lineTo(300,275);
context.lineTo(310,335);
context.lineTo(375,305);
context.lineWidth = 5;
context.strokeStyle = 'rgb(0,0,0)';
var grd = context.createLinearGradient(300,310,365,305);
grd.addColorStop(0,'rgb(0,0,0)');
grd.addColorStop(.3,'rgb(128, 5, 23)');
grd.addColorStop(.5,'rgb(200, 5, 23)');
grd.addColorStop(1,'rgb(193, 27, 23)');
context.fillStyle = grd
context.fill();
context.lineCap = 'round';
context.stroke();

//right side 2 hair loop curve
context.beginPath();
context.moveTo(390,110);
context.quadraticCurveTo(405,110,435,125);
context.bezierCurveTo(450,70,355,90,390,110);
var grd = context.createLinearGradient(355,140,430,90);
grd.addColorStop(.5,'rgb(200, 90, 36)');
grd.addColorStop(.7,'rgb(171, 86, 36)');
grd.addColorStop(1,'rgb(97, 39, 5)');
context.fillStyle = grd
context.fill();
context.lineCap = 'round';
context.stroke();

//right side hair loop Curve
context.beginPath();
context.moveTo(355,109);
context.bezierCurveTo(390,115,413,113,420,135);
context.bezierCurveTo(445,120,400,70,355,109);
var grd = context.createLinearGradient(355,140,420,100);
grd.addColorStop(0,'rgb(97,39,5)');
grd.addColorStop(.3,'rgb(154, 67, 16)');
grd.addColorStop(.5,'rgb(200, 90, 36)');
grd.addColorStop(.7,'rgb(171, 86, 36)');
grd.addColorStop(1,'rgb(97, 39, 5)');
context.fillStyle = grd
context.fill();
context.lineCap = 'round';
context.stroke();

//left side 2 hair loop curve
context.beginPath();
context.moveTo(320,120);
context.quadraticCurveTo(305,120,275,140);
context.bezierCurveTo(260,85,355,95,320,120);
var grd = context.createLinearGradient(320,120,275,125);
grd.addColorStop(.5,'rgb(200, 90, 36)');
grd.addColorStop(.7,'rgb(171, 86, 36)');
grd.addColorStop(1,'rgb(97, 39, 5)');
context.fillStyle = grd
context.fill();
context.lineCap = 'round';
context.stroke();

//left side hair loop Curve
context.beginPath();
context.moveTo(355,109);
context.bezierCurveTo(320,125,295,125,295,150);
context.bezierCurveTo(265,130,310,80,355,109);
var grd = context.createLinearGradient(355,140,295,150);
grd.addColorStop(.5,'rgb(200, 90, 36)');
grd.addColorStop(.7,'rgb(171, 86, 36)');
grd.addColorStop(1,'rgb(97, 39, 5)');
context.fillStyle = grd
context.fill();
context.lineCap = 'round';
context.stroke();

//letter P
context.beginPath();
context.moveTo(155,390);
context.lineTo(165,407);
context.lineTo(180,400);
context.lineTo(250,550);
context.lineTo(270,540);
context.lineTo(243,473);
context.moveTo(243,473);
context.bezierCurveTo(300,425,250,330,155,390);
context.fillStyle = 'rgb(255,255,0)';
context.fill();
context.lineWidth = 9;
context.stroke();

context.beginPath();
context.moveTo(207,400);
context.lineTo(230,447);
context.moveTo(230,447);
context.bezierCurveTo(255,435,242,390,207,400);
context.fillStyle = 'rgb(0,0,0)';
context.fill();
context.lineWidth = 9;
context.stroke();

//letter r
context.beginPath();
context.moveTo(264,395);
context.lineTo(300,500);
context.lineTo(317,490);
context.bezierCurveTo(283,410,300,405,308,400);
context.lineTo(305,380);
context.bezierCurveTo(290,374,280,397,282,395);
context.lineTo(277,385);
context.lineTo(264,395);
context.closePath();
context.lineWidth = 8;
context.fillStyle = 'rgb(255,255,0)';
context.fill();
context.stroke();

//letter i
context.beginPath();
context.moveTo(311,387);
context.lineTo(335,480);
context.lineTo(352,470);
context.lineTo(330,373);
context.moveTo(330,373);
context.quadraticCurveTo(323,385,311,387);
context.fillStyle = 'rgb(255,255,0)';
context.fill();
context.lineWidth = 8;
context.stroke();

context.beginPath();
context.arc(312,362,9, 0 , 2 * Math.PI, false);
context.fillStyle = 'rgb(255,255,0)';
context.fill();
context.lineWidth = 7;
context.stroke();

//letter n
context.beginPath();
context.moveTo(338,370);
context.lineTo(360,467);
context.lineTo(373,460);
context.lineTo(360,390);
context.quadraticCurveTo(365,375,372,388);
context.lineTo(383,454);
context.lineTo(396,449);
context.lineTo(384,379);
context.bezierCurveTo(378,365,365,360,355,375);
context.lineTo(352,363);
context.lineTo(338,370);
context.lineWidth = 8;
context.fillStyle = 'rgb(255,255,0)';
context.fill();
context.stroke();

//letter g
context.beginPath();
context.moveTo(430,360);
context.bezierCurveTo(425,350,405,345,398,365);
context.bezierCurveTo(388,390,398,465,430,430);
context.bezierCurveTo(430,475,430,500,410,485);
context.lineTo(407,500);
context.moveTo(407,500);
context.bezierCurveTo(410,500,430,525,443,483);
context.lineTo(448,345);
context.lineTo(431,345);
context.lineTo(430,360);
context.lineWidth = 8;
context.fillStyle = 'rgb(255,255,0)';
context.fill();
context.stroke();

context.beginPath();
context.moveTo(426,375);
context.bezierCurveTo(410,366,412,430,425,410);
context.lineWidth = 8;
context.lineTo(426,375);
context.fillStyle = 'rgb(0,0,0)';
context.fill();
context.stroke();

//letter l
context.beginPath();
context.moveTo(458,323);
context.lineTo(454,442);
context.lineTo(470,442);
context.lineTo(477,323);
context.lineTo(460,323);
context.fillStyle = 'rgb(255,255,0)';
context.fill();
context.lineWidth = 9;
context.stroke();

//letter e
context.beginPath();
context.moveTo(497,405);
context.bezierCurveTo(525,400,535,360,526,349);
context.bezierCurveTo(515,334,500,330,486,355);
context.bezierCurveTo(477,370,465,465,525,440);
context.lineTo(523,422);
context.moveTo(523,422);
context.bezierCurveTo(510,427,497,431,497,405);
context.lineWidth = 8;
context.fillStyle = 'rgb(255,255,0)';
context.fill();
context.stroke();

context.beginPath();
context.moveTo(497,387);
context.bezierCurveTo(505,380,515,375,513,360);
context.bezierCurveTo(496,342,495,380,497,387);
context.lineWidth = 5;
context.fillStyle = 'rgb(0,0,0)';
context.fill();
context.stroke();

//letter s
context.beginPath();
context.moveTo(587,365);
context.bezierCurveTo(550,335,530,360,545,395);
context.bezierCurveTo(565,430,550,447,530,425);
context.lineTo(531,445);
context.moveTo(531,445);
context.bezierCurveTo(550,465,583,447,570,413);
context.bezierCurveTo(560,390,550,355,580,380);
context.lineTo(587,365);
context.lineWidth = 8;
context.fillStyle = 'rgb(255,255,0)';
context.fill();
context.stroke();

//whisker right
context.beginPath();
context.moveTo(380,210);
context.bezierCurveTo(400,160,449,215,450,180);
context.moveTo(450,180);
context.bezierCurveTo(475,230,400,250,380,210);
var grd = context.createLinearGradient(385,210,450,210);
grd.addColorStop(0,'rgb(97,39,5)');
grd.addColorStop(.3,'rgb(154, 67, 16)');
grd.addColorStop(.5,'rgb(171, 86, 36)');
grd.addColorStop(.7,'rgb(154, 67, 16)');
grd.addColorStop(1,'rgb(97, 39, 5)');
context.fillStyle = grd
context.fill();
context.moveTo(380,210);
context.bezierCurveTo(420,180,440,225,452,189);
context.moveTo(383,215);
context.bezierCurveTo(410,195,435,245,455,195);
context.lineWidth = 4;
context.stroke();

//whisker left
context.beginPath();
context.moveTo(380,210);
context.bezierCurveTo(325,150,312,225,290,197);
context.moveTo(290,197);
context.bezierCurveTo(300,250,365,250,380,210);
var grd = context.createLinearGradient(378,210,290,210);
grd.addColorStop(0,'rgb(97,39,5)');
grd.addColorStop(.3,'rgb(154, 67, 16)');
grd.addColorStop(.5,'rgb(171, 86, 36)');
grd.addColorStop(.7,'rgb(171, 86, 36)');
grd.addColorStop(1,'rgb(154, 67, 16)');
context.fillStyle = grd
context.fill();
context.moveTo(380,210);
context.bezierCurveTo(315,177,322,245,290,200);
context.moveTo(377,215);
context.bezierCurveTo(328,203,343,247,299,218);
context.lineWidth = 4;
context.stroke();

//left eye
context.beginPath();
context.moveTo(330,140);
context.quadraticCurveTo(325,150,330,160);
context.quadraticCurveTo(335,170,340,160);
context.quadraticCurveTo(345,150,340,140);
context.quadraticCurveTo(335,130,330,140);
context.lineWidth = 4;
context.fillStyle = 'rgb(0,0,0)';
context.fill();
context.stroke();

// left white eye
context.beginPath();
context.arc(336, 149,5, 0 , 2 * Math.PI, false);
context.fillStyle = 'rgb(255,255,255)';
context.fill();
context.lineWidth = 2;
context.stroke();

//right eye
context.beginPath();
context.moveTo(390,140);
context.quadraticCurveTo(385,150,390,160);
context.quadraticCurveTo(395,170,400,160);
context.quadraticCurveTo(405,150,400,140);
context.quadraticCurveTo(395,130,390,140);
context.lineWidth = 4;
context.fillStyle = 'rgb(0,0,0)';
context.fill();
context.stroke();

// right white eye
context.beginPath();
context.arc(394, 149,5, 0 , 2 * Math.PI, false);
context.fillStyle = 'rgb(255,255,255)';
context.fill();
context.lineWidth = 2;
context.stroke();

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

};

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

Tuesday, February 5, 2013

Heart Code

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

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

//background variable
var rectxb = 0
var rectyb = 0
var rectwidthb = 800
var rectheightb = 600

//backgorund
context.beginPath();
context.rect(rectxb, rectyb, rectwidthb, rectheightb);
context.lineWidth = 5;
context.strokeStyle = 'rgb(59, 156, 156)';
context.fillStyle = 'rgb(59, 156, 156)';
context.fill();
context.stroke();

//rectangle
var rectx = 150
var recty = 125
var rectwidth = 400
var rectheight = 375

//gradient rect
var startx = 150;
var starty = 125;
var endx = 150;
var endy = 405;

//Rectangle
context.beginPath();
context.rect(rectx, recty, rectwidth, rectheight);
context.lineWidth = 5;
context.strokeStyle = 'rgb(0,0,0)';
var grd = context.createLinearGradient(startx, starty, endx, endy);
grd.addColorStop(0,'rgb(0,0,0)');
grd.addColorStop(.30,'rgb(255,255,255)');
grd.addColorStop(.60,'rgb(150,150,150)');
grd.addColorStop(1,'rgb(0,0,0)');
context.fillStyle = grd;
context.fill();
context.stroke();

//Rectangle 2 Variables
var rectx2 = 200
var recty2 = 175
var rectwidth2 = 300
var rectheight2 = 275

//Rectangle 2
context.beginPath();
context.rect(rectx2, recty2, rectwidth2, rectheight2);
context.lineWidth = 10;
context.strokeStyle = 'rgb(0,0,0)';
context.fillStyle = 'rgb(50,175,50)';
context.fillStyle = 'black';
context.fill();
context.stroke();

//Bezier Curve Variables
var startx2 = 350;
var starty2 = 275;
var controlX1 = 275;
var controlY1 = 150;
var controlX2 = 150;
var controlY2 = 290;
var cornerX2 = 350;
var cornerY2 = 400;
var controlX3 = 550;
var controlY3 = 290;
var controlX4 = 425;
var controlY4 = 150;
var endx2 = 350;
var endy2 = 275;

//Bezier Curve
context.beginPath();
context.moveTo(startx2, starty2);
context.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, cornerX2, cornerY2);
context.bezierCurveTo(controlX3, controlY3, controlX4, controlY4, endx2, endy2);
context.lineCap = 'round';
context.lineWidth = .5;
context.strokeStyle = 'black';
context.fillStyle = 'red'
context.fill();
context.stroke();

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

};

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