Caligramme: Under the Sea

I created a octopus using different sizes of the same font. I used different sizes of the font to help with the clarity of the image. The smaller the font is the shaper the lines turned out. I wanted to take something kind of complex and simplify it as much as I could. I chose the color purple because it is a common color that people associate with octopus. It says "under the sea"

I also did a caligramme of my favorite musician Jared Watson. In addition to the text tools, I used clipping masks to help form the shapes and the text together. The words I chose to use were "stand tall" it is the title of one of the bands popular songs. I actually have "Stand Tall" tattooed on my foot, so the saying actually has a lot of meaning to me. 

Thumbnails for Logo

Assignment 2

This frozen yogurt company has an effective logo because it is funny and the yogurt swirl is incorporated into another graphic. I like color scheme as well. I think that logos that include what their product/business is about along with something that will help customers remember it. This logo uses the yogurt swirl as hair. The name of the company is funny too, this adds to the effectiveness. 

This frozen yogurt company came up with a icon to use for their company. Sometimes businesses create mascots for their businesses. Within the text the swirl is used as an apostrophe. The color scheme is effective too because it is clearly aimed for children since it is bright and there is a child friendly mascot. 

This logo is effective because the T is actually an ice cream cone. The font works with the T and flows well next to the ice cream cone. The word placement is done well, by putting Ice Cream Co. underneath the w and i in twist. I really like the fact that a graphic is incorporated into the words. I think companies that do this with their logos are more effective. 

The Kolner Zoo logo is extremely effective because it uses positive/negative space to get its message across. There is a Rhino an Giraffe within the elephant. This logo also uses complimentary colors in the text. When complimentary colors are next to each other they stand out more. For a zoo this is a great logo because it represents the business well since more than one animal is represented. I think it is very fun and cute, yet simple and is definitely a logo that people will remember, which is important when creating a logo. 

The Burger King logo is effective because the text itself is within burger buns. This is a great way to subtly include the image of burger within the logo. Logos that include what their company is mainly about in the logo is effective, because it helps customers remember why they are different and what they have. The color scheme is also effective since they are primary colors, so it is simple yet effective. 

The Le Tour de France logo is effective because the letter R is also a person riding a bike. I think the way the letters work into the graphic is effective and creative. The color scheme is also effective because it is simple since one wheel of the bike is the only thing that is yellow. Although there is an extra shape (the yellow circle) it is not confused with the text and the logo itself is fairly easy to ready and understand. 

Brain Storm Ideas for Project 2

Tilt A Swirl Frozen Yogurt
- self serve frozen yogurt
- audience - children
- offering candy and sweets as toppings for the yogurt
- carnival theme

Lucy Apparel
- audience- female teens
- boho style
- cheap but cute clothes

Passio Productions
- house music production company
- DJ
- house music, dub step, etc

Whiskers
- cat store
- cat supplies
- for you crazy cat ladies

Coastline
- roller blade company
- street skating

ASC II Project

I created the nyan cat using HTML codes. I tried to stick to mostly basic shapes. I used a lot of rectangles. I started with the pop tart body and then did the rainbow. Eventually I added the cat features and added stars to the background. This is my first experience using HTML, I would consider myself almost expert in illustrator and photoshop, so this was very different and challenging since it's all codes instead of creating shapes yourself in illustrator. It is very time consuming, but it help me better understand how exactly illustrator works. 

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

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

//background
var x = 0;
var y = 0;
var width = canvas.width;
var height = canvas.height;
context.beginPath();
context.rect(x, y, width, height);
context.fillStyle = 'rgb(0,0,75)';
context.fill();
context.stroke();

//stars

context.beginPath();
context.rect(150, 50, 10, 10);
context.fillStyle = 'rgb(255,255,255)';
context.fill();
context.stroke();

context.beginPath();
context.rect(150, 75, 10, 10);
context.fillStyle = 'rgb(255,255,255)';
context.fill();
context.stroke();

context.beginPath();
context.rect(160, 62, 10, 10);
context.fillStyle = 'rgb(255,255,255)';
context.fill();
context.stroke();

context.beginPath();
context.rect(140, 62, 10, 10);
context.fillStyle = 'rgb(255,255,255)';
context.fill();
context.stroke();


context.beginPath();
context.rect(350, 100, 10, 10);
context.fillStyle = 'rgb(255,255,255)';
context.fill();
context.stroke();

context.beginPath();
context.rect(350, 125, 10, 10);
context.fillStyle = 'rgb(255,255,255)';
context.fill();
context.stroke();

context.beginPath();
context.rect(360, 112, 10, 10);
context.fillStyle = 'rgb(255,255,255)';
context.fill();
context.stroke();

context.beginPath();
context.rect(340, 112, 10, 10);
context.fillStyle = 'rgb(255,255,255)';
context.fill();
context.stroke();


context.beginPath();
context.rect(700, 150, 10, 10);
context.fillStyle = 'rgb(255,255,255)';
context.fill();
context.stroke();

context.beginPath();
context.rect(700, 175, 10, 10);
context.fillStyle = 'rgb(255,255,255)';
context.fill();
context.stroke();


context.beginPath();
context.rect(710, 162, 10, 10);
context.fillStyle = 'rgb(255,255,255)';
context.fill();
context.stroke();

context.beginPath();
context.rect(690, 162, 10, 10);
context.fillStyle = 'rgb(255,255,255)';
context.fill();
context.stroke();

context.beginPath();
context.rect(550, 50, 10, 10);
context.fillStyle = 'rgb(255,255,255)';
context.fill();
context.stroke();

context.beginPath();
context.rect(550, 75, 10, 10);
context.fillStyle = 'rgb(255,255,255)';
context.fill();
context.stroke();

context.beginPath();
context.rect(560, 62, 10, 10);
context.fillStyle = 'rgb(255,255,255)';
context.fill();
context.stroke();

context.beginPath();
context.rect(540, 62, 10, 10);
context.fillStyle = 'rgb(255,255,255)';
context.fill();
context.stroke();

context.beginPath();
context.rect(150, 500, 10, 10);
context.fillStyle = 'rgb(255,255,255)';
context.fill();
context.stroke();

context.beginPath();
context.rect(150, 525, 10, 10);
context.fillStyle = 'rgb(255,255,255)';
context.fill();
context.stroke();

context.beginPath();
context.rect(160, 512, 10, 10);
context.fillStyle = 'rgb(255,255,255)';
context.fill();
context.stroke();

context.beginPath();
context.rect(140, 512, 10, 10);
context.fillStyle = 'rgb(255,255,255)';
context.fill();
context.stroke();

context.beginPath();
context.rect(350, 450, 10, 10);
context.fillStyle = 'rgb(255,255,255)';
context.fill();
context.stroke();

context.beginPath();
context.rect(350, 475, 10, 10);
context.fillStyle = 'rgb(255,255,255)';
context.fill();
context.stroke();

context.beginPath();
context.rect(360, 462, 10, 10);
context.fillStyle = 'rgb(255,255,255)';
context.fill();
context.stroke();

context.beginPath();
context.rect(340, 462, 10, 10);
context.fillStyle = 'rgb(255,255,255)';
context.fill();
context.stroke();

context.beginPath();
context.rect(550, 500, 10, 10);
context.fillStyle = 'rgb(255,255,255)';
context.fill();
context.stroke();

context.beginPath();
context.rect(550, 525, 10, 10);
context.fillStyle = 'rgb(255,255,255)';
context.fill();
context.stroke();

context.beginPath();
context.rect(560, 513, 10, 10);
context.fillStyle = 'rgb(255,255,255)';
context.fill();
context.stroke();

context.beginPath();
context.rect(540, 513, 10, 10);
context.fillStyle = 'rgb(255,255,255)';
context.fill();
context.stroke();

context.beginPath();
context.rect(700, 450, 10, 10);
context.fillStyle = 'rgb(255,255,255)';
context.fill();
context.stroke();

context.beginPath();
context.rect(700, 475, 10, 10);
context.fillStyle = 'rgb(255,255,255)';
context.fill();
context.stroke();

context.beginPath();
context.rect(710, 462, 10, 10);
context.fillStyle = 'rgb(255,255,255)';
context.fill();
context.stroke();

context.beginPath();
context.rect(690, 462, 10, 10);
context.fillStyle = 'rgb(255,255,255)';
context.fill();
context.stroke();

//rainbow
context.beginPath();
context.rect(0, 150, 250, 50);
context.fillStyle = 'red';
context.fill();
context.stroke();

context.beginPath();
context.rect(0, 190, 250, 50);
context.fillStyle = 'orange';
context.fill();
context.stroke();

context.beginPath();
context.rect(0, 220, 250, 50);
context.fillStyle = 'yellow';
context.fill();
context.stroke();

context.beginPath();
context.rect(0, 250, 250, 50);
context.fillStyle = 'green';
context.fill();
context.stroke();

context.beginPath();
context.rect(0, 280, 250, 50);
context.fillStyle = 'blue';
context.fill();
context.stroke();

context.beginPath();
context.rect(0, 310, 250, 50);
context.fillStyle = 'indigo';
context.fill();
context.stroke();

// cat paw 4
//cat paw 2
context.beginPath();
context.arc(225,400,35,0,2*Math.PI,false);
context.fillStyle = 'rgb(80,80,80)';
context.fill();
 context.strokeStyle = 'rgb(80,80,80)';
context.stroke();

context.beginPath();
context.rect(0, 350, 250, 50);
context.fillStyle = 'violet';
context.fill();
context.stroke();

//cat paw 2
context.beginPath();
context.arc(500,400,35,0,2*Math.PI,false);
context.fillStyle = 'rgb(80,80,80)';
context.fill();
 context.strokeStyle = 'rgb(80,80,80)';
context.stroke();

//cat paw 3
context.beginPath();
context.arc(300,400,35,0,2*Math.PI,false);
context.fillStyle = 'rgb(80,80,80)';
context.fill();
 context.strokeStyle = 'rgb(80,80,80)';
context.stroke();
   
 //tail
 context.beginPath();
context.moveTo(200,325);
context.quadraticCurveTo(110, 250, 150, 175);
context.bezierCurveTo(175, 125, 200, 125, 175, 175);
context.quadraticCurveTo(130, 250, 200, 280);
context.fillStyle = 'rgb(80,80,80)';
context.fill();
context.stroke();


//poptart crust

var x1 = 200
var y1 = 150
var width1 = 400
var height1 = 250

context.beginPath();
context.rect(x1, y1, width1, height1);
context.fillStyle = 'rgb(255,255,200)';
context.fill();
context.stroke();

//poptart frosting
var x2 = 250
var y2 = 175
var width2 = 300
var height2 = 200

context.beginPath();
context.rect(x2, y2, width2, height2);
context.fillStyle = 'pink';
context.fill();
 context.strokeStyle = 'pink';
context.stroke();

//sprinkles
context.beginPath();
context.rect(300, 225, 15, 15);
context.fillStyle = 'magenta';
context.fill();
context.stroke();

context.beginPath();
context.rect(350, 325, 15, 15);
context.fillStyle = 'magenta';
context.fill();
context.stroke();

context.beginPath();
context.rect(350, 215, 15, 15);
context.fillStyle = 'magenta';
context.fill();
context.stroke();

context.beginPath();
context.rect(400, 275, 15, 15);
context.fillStyle = 'magenta';
context.fill();
context.stroke();

context.beginPath();
context.rect(275, 300, 15, 15);
context.fillStyle = 'magenta';
context.fill();
context.stroke();



context.beginPath();
context.rect(425, 225, 15, 15);
context.fillStyle = 'magenta';
context.fill();
context.stroke();

context.beginPath();
context.rect(425, 225, 15, 15);
context.fillStyle = 'magenta';
context.fill();
context.stroke();

context.beginPath();
context.rect(450, 300, 15, 15);
context.fillStyle = 'magenta';
context.fill();
context.stroke();



context.beginPath();
context.rect(525, 205, 15, 15);
context.fillStyle = 'magenta';
context.fill();
context.stroke();

  //cat paw 1
  context.beginPath();
context.arc(610,400,35,0,2*Math.PI,false);
context.fillStyle = 'rgb(80,80,80)';
context.fill();
 context.strokeStyle = 'rgb(80,80,80)';
context.stroke();




//cat head

context.beginPath();
  context.moveTo(525,400);
  context.lineTo(500,375);
  context.lineTo(500,225);
  context.lineTo(575,275);
  context.lineTo(650,275);
  context.lineTo(700,225);
  context.lineTo(700,375);
  context.lineTo(675,400);
  context.fillStyle = 'rgb(100,100,100)';
context.fill();
   context.strokeStyle = 'rgb(100,100,100)';
  context.stroke();


//cat face

//eyes
context.beginPath();
context.rect(625, 325, 25, 25);
context.fillStyle = 'rgb(0,0,0)';
context.fill();
context.stroke();

context.beginPath();
context.rect(550, 325, 25, 25);
context.fillStyle = 'rgb(0,0,0)';
context.fill();
context.stroke();

context.beginPath();
context.rect(625, 325, 10, 10);
context.fillStyle = 'rgb(255,255,255)';
context.fill();
context.stroke();

context.beginPath();
context.rect(550, 325, 10, 10);
context.fillStyle = 'rgb(255,255,255)';
context.fill();
context.stroke();

//nose
context.beginPath();
context.rect(600, 350, 10, 10);
context.fillStyle = 'rgb(0,0,0)';
context.fill();
context.stroke();

//mouth

  context.beginPath();
  context.moveTo(550,370);
  context.lineTo(550,380);
  context.lineTo(600,380);
  context.lineTo(600,370);
    context.lineWidth = 3;
     context.strokeStyle = 'rgb(0,0,0)';
  context.stroke();

context.beginPath();
  context.moveTo(650,370);
  context.lineTo(650,380);
  context.lineTo(600,380);
    context.lineWidth = 3;
  context.strokeStyle = 'rgb(0,0,0)';
  context.stroke();

  //cheeks
    context.beginPath();
context.arc(675,345,10,0,2*Math.PI,false);
context.fillStyle = 'pink';
context.fill();
 context.strokeStyle = 'pink';
context.stroke();

context.beginPath();
context.arc(525,345,10,0,2*Math.PI,false);
context.fillStyle = 'pink';
context.fill();
 context.strokeStyle = 'pink';
context.stroke();






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

};

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

Heart HTML

Code that I used:



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

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

var x = 0;
var y = 0;
var width = canvas.width;
var height = canvas.height;
context.beginPath();
context.rect(x, y, width, height);
context.fillStyle = 'rgb(150,150,255)';
context.fill();
context.stroke();


var x1 = 400
var y1 = 500
var controlX1 = 100
var controlY1 = 300
var controlX2 = 200
var controlY2 = 100
var endX1 = 400
var endY1 = 200

var controlX3 = 600
var controlY3 = 100
var controlX4 = 700
var controlY4 = 300
var endX2 = 400
var endY2 = 500

context.beginPath();
context.moveTo(x1,y1);
context.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX1, endY1);
context.bezierCurveTo(controlX3, controlY3, controlX4, controlY4, endX2, endY2);
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>