Friday, September 28, 2012

Calligramme

My calligramme was made using the lyrics from a song entitled "Edward Benz, 27 Times" by the band La Dispute placed inside the shape of a knife. The song is about an old man (Edward Benz) whose schizophrenic son stops taking his medication and ends up stabbing him 27 times.


Tuesday, September 25, 2012

Logo Sketches

  These are the 5 logos that I came up for the fragrance line by Charles Montgomery Burns. They are in order from my favorite to least favorite.

1)

This is a stylized contour line of Mr. Burns face. 


2)


The idea behind this would just be an elegant stylized monogram

3)


Mr. Burns signature is used for the logo in this design

4)


First of all please forgive how bad this sketch is but the idea would be to have a design based on the iconic pose of Mr. Burns' hands 

5)


This logo idea is a little more abstract but I think that it could still work well. The three circles make a triangle to represent a pyramid which symbolize ancient power (because Mr. Burns is old...get it?); however, these circles also reference the three age spots found on Mr. Burns balding head.





Saturday, September 22, 2012

Project 2: Part 1 Company/product ideas

    I must admit that when I first tried to think of ideas for this project I got a little stressed out. Since the project was assigned I had all intentions of taking the whole thing completely serious and think of companies (or products) that would be viable as a real company/product. After a few hours of brainstorming that got me nowhere I took a break from the whole thing and decided to relax by watching some television. Eureka!!! Inspiration finally struck! Why not let television be my muse? Listed below are five ideas for  companies/products that were all inspired by characters from The Simpsons.

1) Charles Montgomery Burns - This would be a line of fragrances (like Tommy Hilfiger)  from the lovable evil millionaire. These colognes would be geared towards rich, heartless businessmen with scents such as: Excellent, and Eau de Money.

2) Springfield Skate Shop - In my imagination after Bart Simpson grows up he to opens a skate shop in Springfield.

3) Full Nelson Private Security - Here school bully Nelson puts his talents to good use by creating a private security company to protect the movers and shakers of Springfield.

4) Flanders Bar & Grill - After being raised by an ultra conservative father the Flanders boys decide to rebel and open up a bar & grill.

5) Millhouse Brewery - Years of rejection at the hand of Lisa Simpson lead Millhouse to the bottle, but out of this pain he finds his true passion. Millhouse opens up a microbrewery in the heart of Springfield that plans to overthrow Duff Beer.

Friday, September 21, 2012

Creative Logos

   One of my absolute favorite things in design is the creative interplay between positive and negative space in logo design. I have chosen five logos that creatively use positive and negative space well, some a little more subtly than others but all of them amazing nonetheless. I hope you enjoy these logos as much as I do. The logos are listed from least subtle to how did I miss that?!

5)

In this design for Illusion Studios the designer (Anthony Lane) used white in the negative space of the "S" to link both the foreground and background into one cohesive unit. 





4)

This logo for Z Films uses two strips of movie film to frame out a "z" in the negative space.


3)

The logo for Wine Searcher cleverly uses two forms to create what the company is all about. The glasses are easily recognizable but the green lines are also the contour lines of two wine bottles hidden in negative space.

2)

This one is so cool to me! The woman in the yoga pose in positive space frames the shape of Australia in negative space using the arm that is grabbing her lifted leg. 

1)

Ok, so I chose the Fedex logo as my favorite because I may be the only person who didn't notice the use of negative space after years of seeing the logo, but I'm sure some others have missed it too. Have you ever noticed the arrow that is formed by the "E" and the "X"? If you never have before it will probably be the first thing that you see from now on when you see the logo...at least it is for me.






Sunday, September 16, 2012

Project 1: ASCII

The graphic that I did for this project was based off a painting (see below) that I did over the summer for my new place. For both the painting and this project I reference the movie 300 and based the look of the helmet on the one worn by King Leonidas. In this version I have "SPARTANS" written under the helmet and the number 31 (the year the college was founded) to make the graphic show a little more school spirit. Hope you like it!

Here is a detail shot of the painting that inspired the graphic:






















This is the drawing for the project:
























Work in progress:

This was by far the most time consuming portion of the entire project. To be honest the was a lot of trial and error in getting the quadratic curves and bezier curves the way that I liked them, but after all was said in done I am happy with the final helmet. The little details to try and give the helmet a little texture was actually the most annoying part of the whole thing...





































Adding in the text:




















The final result:








Here is the code for the final graphic: 

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

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

//Background//
context.beginPath();
context.rect(0, 0, canvas.width, canvas.height);
var grd = context.createLinearGradient(0, 600, 800, 0);
grd.addColorStop(0, 'rgb(150,150,150)');
grd.addColorStop(.5, 'rgb(75,75,75)');
grd.addColorStop(1, 'rgb(190,190,190)');
context.fillStyle = grd;
context.fill();

//Helmet//
//left eye top triangle//
context.beginPath();
context.moveTo(325,250);
context.lineTo(375,250);
context.lineTo(375,275);
context.lineTo(325,250);
context.fillStyle = 'rgb(0,0,0)';
context.fill();
context.stroke();
context.closePath();
//inside helmet path//
context.beginPath();
context.moveTo(375,330);
context.lineTo(330,330);
context.lineTo(330,490);
context.lineTo(425,425);
context.lineTo(425,400);
context.lineTo(700,462);
//straight lines//
context.lineTo(650,400);
context.lineTo(650,225);
context.lineTo(500,200);
context.lineTo(375,225);
context.lineTo(375,330);
context.fillStyle = 'rgb(0,0,0)';
context.fill();
context.stroke();
context.closePath();
//left eye bottom beveled edge//
context.beginPath();
context.moveTo(375,325);
context.lineTo(325,325);
context.lineTo(325,500);
context.lineTo(330,490);
context.lineTo(330,330);
context.lineTo(375,330);
context.lineTo(375,325);
context.fillStyle = 'rgb(255,201,76)';
context.fill();
context.stroke();
context.closePath();
//line in left eye bottom beveled edge//
context.beginPath();
context.moveTo(325,325);
context.lineTo(330,330);
context.stroke();
//Hair in helmet//
context.beginPath();
context.moveTo(403,75);
context.quadraticCurveTo(390,30,350,5);
context.bezierCurveTo(450,5,685,50,692,226);
context.lineTo(403,75);
context.fillStyle = 'rgb(0,0,0)';
context.fill();
context.stroke();
//top portion of helmet//
context.beginPath();
context.moveTo(400,144);
context.lineTo(400,75);
context.bezierCurveTo(500,75,650,75,692,226);
context.lineTo(400,144);
context.fillStyle = 'rgb(255,201,76)';
context.fill();
context.closePath();
context.stroke();
//Helmet outside//
context.beginPath();
context.moveTo(325, 250);
context.bezierCurveTo(400, 50, 650, 50, 700, 250);
context.moveTo(700,250);
context.bezierCurveTo(710, 300, 710, 375, 687, 400);
context.quadraticCurveTo(675,425,700,462);
context.quadraticCurveTo(625,400,550,400);
context.lineTo(550,462);
context.lineTo(450,500);
context.lineTo(450,325);
context.lineTo(500,325);
context.lineTo(500,375);
context.lineTo(510,325);
context.lineTo(540,325);
context.lineTo(575,300);
context.lineTo(600,250);
context.lineTo(510,250);
context.lineTo(500,225);
context.lineTo(500,250);
context.lineTo(400,250);
context.moveTo(400,250);
context.quadraticCurveTo(390,300,400,350);
context.lineTo(375,375);
context.lineTo(369,350);
context.lineTo(375,330);
context.lineTo(375,250);
context.lineTo(325,250);
context.moveTo(375,330);
context.lineTo(375,375);
context.fillStyle = 'rgb(255,201,76)';
context.fill();
context.closePath();
context.stroke();
//helmet details//
context.beginPath();
context.arc(400, 200, 2, 0 , 2 * Math.PI, false);
context.stroke();
context.fillStyle = 'rgb(0,0,0)';
context.fill();
context.closePath();

context.beginPath();
context.arc(350, 225, 1, 0 , 2 * Math.PI, false);
context.stroke();
context.fillStyle = 'rgb(0,0,0)';
context.fill();
context.closePath();

context.beginPath();
context.arc(550, 150, 2, 0 , 2 * Math.PI, false);
context.fillStyle = 'rgb(0,0,0)'
context.fill();
context.closePath();
context.closePath();

context.beginPath();
context.arc(575, 200, 3, 0 , 2 * Math.PI, false);
context.fillStyle = 'rgb(0,0,0)'
context.fill();
context.closePath();

context.beginPath();
context.arc(615, 275, 1, 0 , 2 * Math.PI, false);
context.fillStyle = 'rgb(0,0,0)'
context.fill();
context.closePath();

context.beginPath();
context.arc(600, 300, 2, 0 , 2 * Math.PI, false);
context.fillStyle = 'rgb(0,0,0)'
context.fill();
context.closePath();

context.beginPath();
context.arc(675, 275, 2, 0 , 2 * Math.PI, false);
context.fillStyle = 'rgb(0,0,0)'
context.fill();
context.closePath();

context.beginPath();
context.arc(640,175, 2, 0 , 2 * Math.PI, false);
context.fillStyle = 'rgb(0,0,0)'
context.fill();
context.closePath();

context.moveTo(475,425)
context.lineTo(500,450)
context.lineWidth = .2;
context.stroke();

context.moveTo(460,375);
context.lineTo(525,440);
context.stroke();

context.moveTo(515,400);
context.lineTo(525,410);
context.stroke();
//helmet highlights//
context.beginPath();
context.arc(450,175, 50, 0 , 2 * Math.PI, false);
var grd=context.createRadialGradient(450, 175, 45, 450, 175, 5);
  grd.addColorStop(0, 'rgb(255,201,80)');
  grd.addColorStop(1, 'rgb(250,250,200)');
  context.fillStyle = grd;
  context.fill();

context.beginPath();
context.moveTo(415,90);
context.lineTo(415,120);
context.quadraticCurveTo(450,90,510,90);
context.quadraticCurveTo(450,80,415,90);
var grd = context.createLinearGradient(415, 100, 510, 100);
  grd.addColorStop(0, 'rgb(250,250,200)');
  grd.addColorStop(.8, 'rgb(279,201,80)');
context.fillStyle = grd
context.fill();
context.closePath();

context.font = 'bold 300px Georgia';
context.strokeStyle = 'rgb(90,90,90)';
context.lineWidth = 3;
context.strokeText('3', 25,475);

context.font = 'bold 300px Georgia';
context.strokeStyle = 'rgb(90,90,90)';
context.lineWidth = 3;
context.strokeText('1', 125,475);


context.font = 'Bold 100px Georgia';
context.fillStyle = 'rgb(215,0,0)';
context.fillText("S", 25, 575);
context.strokeStyle = 'white';
context.lineWidth = 3;
context.strokeText('S', 25, 575);
  
context.font = 'Bold 100px Georgia';
context.fillStyle = 'rgb(215,0,0)';
context.fillText("P", 125, 575);
context.strokeStyle = 'white';
context.lineWidth = 3;
context.strokeText('P', 125, 575);

context.font = 'Bold 100px Georgia';
context.fillStyle = 'rgb(215,0,0)';
context.fillText("A", 225, 575);
context.strokeStyle = 'white';
context.lineWidth = 3;
context.strokeText('A', 225, 575);

context.font = 'Bold 100px Georgia';
context.fillStyle = 'rgb(215,0,0)';
context.fillText("R", 325, 575);
context.strokeStyle = 'white';
context.lineWidth = 3;
context.strokeText('R', 325, 575);

context.font = 'Bold 100px Georgia';
context.fillStyle = 'rgb(215,0,0)';
context.fillText("T", 425, 575);
context.strokeStyle = 'white';
context.lineWidth = 3;
context.strokeText('T', 425, 575);

context.font = 'Bold 100px Georgia';
context.fillStyle = 'rgb(215,0,0)';
context.fillText("A", 525, 575);
context.strokeStyle = 'white';
context.lineWidth = 3;
context.strokeText('A', 525, 575);

context.font = 'Bold 100px Georgia';
context.fillStyle = 'rgb(215,0,0)';
context.fillText("N", 625, 575);
context.strokeStyle = 'white';
context.lineWidth = 3;
context.strokeText('N', 625, 575);

context.font = 'Bold 100px Georgia';
context.fillStyle = 'rgb(215,0,0)';
context.fillText("S", 725, 575);
context.strokeStyle = 'white';
context.lineWidth = 3;
context.strokeText('S', 725, 575);




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

};

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


Monday, September 10, 2012

My Heart...

Here is my heart masterpiece!!! enjoy :)

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

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

context.beginPath();
context.rect(0, 0, canvas.width, canvas.height);
context.fillStyle = 'rgb(100,50,100)'
context.fill();


context.beginPath();
context.moveTo(400,600);
context.quadraticCurveTo(650,500,700,300);
context.bezierCurveTo(700,150,550,50,400,200);
context.bezierCurveTo(300,50,100,150,100,300);
context.quadraticCurveTo(150,500,400,600);
context.fillStyle = 'rgb(255,50,50)'
context.fill();





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

};

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