Caligramme

For my caligramme I simply went with a design of a sun. The quote "good vibes" has always stuck with me and I thought that the combination of this quote and the sun gave a summer-like vibe. The colors I chose were all warm colors and varied from orange, red, and yellow. I thought giving the caligramme a background color made the colors of the text show up a little better, rather than just simply on a white background.

Logo Sketches

Analyzing Logos

The logo's overal color theme is different shades of blue and white. It is a very simple logo, but yet still incorporates the title of the company into the actual design. The light blue wave wrapping around the dark blue bubble creates a successful consistency in the appearance. The target audience is not really able to be identified by looking at this logo.

The In-N-Out Burger logo is in yellow and red, much like many other fast food logos. It is shown that the colors red and yellow together create more of an appetite among consumers. The yellow arrow running through the words gives the effect of literally fast food. I like the style because it is simple and straight to the point. The target audience is for fast-food goers of any ages. It is a simple but successful logo.

Unlike the first two logos, this logo runs vertically instead of horizontally. The navy blue color gives the feel of a mature audience or an older consumer. There are many details within the horse and jockey, which may be a problem when looking at the logo from a distance. However the way that the word "Polo" is larger than "Ralph Lauren" is a successful technique. 

This logo is typically always shown on a diagonal slant with a thick white boarder. The letters are in a gradient from light brown to dark brown. The use of the color brown resembles the chocolate found in these candies, making this logo successful. The audience however is not shown within this logo. Due to it's simplicity and large type, from a far or up close this logo is very easy to identify.

The colors used in this Pringles logo consist of yellow, red, brown, and white. Again, yellow and red are usually used when selling food. The mustache and hair and bow tie of the smiley face gives the logo a 'fun' vibe, making it appealing to teenagers or younger generations. I would say I like this logo because it is fun but yet simple.

WebRep

currentVote

noRating

noWeight

Ideas for Logos

1. "CBudd Photography" - This would be a logo for my own photography business. I already use this phrase on all of my photo websites and everywhere so if I could make a logo to go along with it, it would be perfect. The logo would simply represent me as a photographer.
2. "Hueman Food" - This is actually my brother's vegan food truck name and business. I think it would be fun to play around with some ideas to give him a possible new logo. His food truck features nothing but deliciously very vegan foods, located in California.
3. "DJ Smoke" - The logo for this is actually to help my other brother who is a music artist. I would create a logo he could possibly put on CD covers and websites. If he had a trademark logo he could be remembered easily by it. His stage name is DJ Smoke.
4. "Roxx Water Ice" - My mom has been trying to create her own vegan water ice business this past year and it really needs the perfect logo to represent it. The water ice flavors range from mango to lemonade, and they are 100% vegan! 
5. "Homebody" - This was a past business idea from my mother that was never really pursued. She has been an artist for over 30 years and has become an expert at it. She has created murals and wall paintings in our very own home that are breathtaking! She wanted to possibly do the same thing for other people's homes. 

Project #1

For this project I wanted to create something very funky and fun revolving around one of the things I love the most - photography! I wanted the end result to be somewhat abstract and complex but not too overwhelming. The loops coming from the right, top, and left are meant to give the effect of flashes going off from cameras. I love how many different colors I used and combined to give off that 'funky' feeling. It was difficult to create the slanted cameras at first, but I eventually got the hang of it. Also, deciding on what exact words I wanted to insert into the project was difficult. I decided to go with something similar to a slogan of a company - "Capture The Moment". Using the graph below made designing this project so much easier.

<!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;

var startX = 400;

var startY = 100;

var endX = 400;

var endY = 550;

context.beginPath();

context.rect(x,y,width,height);

 var grd = context.createLinearGradient(startX, startY, endX, endY);

  grd.addColorStop(0, 'rgb(50, 0, 225)');

  grd.addColorStop(1, 'rgb(200, 100, 175)');

  context.fillStyle = grd;

context.fill();

context.lineWidth = 8;

context.strokeStyle = 'rgb(0, 0, 0)';

context.stroke();

//quadratic curve from left

var quadX = 200;

var quadY = 400;

var quadendX = 200;

var quadendY = 600;

context.beginPath();

context.moveTo(0, 400);

context.quadraticCurveTo(quadX, quadY, quadendX, quadendY);

context.lineWidth = 5;

context.strokeStyle = 'rgb(250, 50, 200)';

context.stroke();

var quadX2 = 300;

var quadY2 = 400;

var quadendX2 = 200;

var quadendY2 = 600;

context.beginPath();

context.moveTo(0, 300);

context.quadraticCurveTo(quadX2, quadY2, quadendX2, quadendY2);

context.lineWidth = 5;

context.strokeStyle = 'rgb(250, 50, 100)';

context.stroke();

var quadX3 = 400;

var quadY3 = 400;

var quadendX3 = 200;

var quadendY3 = 600;

context.beginPath();

context.moveTo(0, 200);

context.quadraticCurveTo(quadX3, quadY3, quadendX3, quadendY3);

context.lineWidth = 5;

context.strokeStyle = 'rgb(250, 50, 50)';

context.stroke();

//loop from top

var x2 = 800;

var y2 = 600;

var controlX = 700;

//var controlY = 50;

var endX = 400;

var endY = 0;

for (var i = 0; i < canvas.height; i+=20){

context.beginPath();

context.moveTo(x2, i);

context.quadraticCurveTo(controlX, i, endX, endY);

context.strokeStyle = 'rgb(300, 200, 175)';

context.lineWidth = 2;

context.stroke();

}

//loop from bottom

var x2 = 0;

var y2 = 700;

var controlX = 600;

//var controlY = 50;

var endX = 700;

var endY = 800;

for (var i = 0; i < canvas.height; i+=30){

context.beginPath();

context.moveTo(x2, i);

context.quadraticCurveTo(controlX, i, endX, endY);

context.strokeStyle = 'rgb(300, 200, 400)';

context.lineWidth = 2;

context.stroke();

}

//loop from the right

var x2 = 0;

var y2 = 0;

var controlX = 50;

//var controlY = 300;

var endX = 800;

var endY = 100;

for (var i = 0; i < canvas.height; i+=10){

context.beginPath();

context.moveTo(x2, i);

context.quadraticCurveTo(controlX, i, endX, endY);

context.strokeStyle = 'rgb(100, 175, 300)';

context.lineWidth = 3;

context.stroke();

}

//loop from left

var x2 = 800;

var y2 = 600;

var controlX = 700;

//var controlY = 50;

var endX = 0;

var endY = 350;

for (var i = 0; i < canvas.height; i+=10){

context.beginPath();

context.moveTo(x2, i);

context.quadraticCurveTo(controlX, i, endX, endY);

context.strokeStyle = 'rgb(300, 100, 75)';

context.lineWidth = 2;

context.stroke();

}

//quadratic from the top

var quadX4 = 200;

var quadY4 = 100;

var quadendX4 = 600;

var quadendY4 = 600;

context.beginPath();

context.moveTo(550, 0);

context.quadraticCurveTo(quadX4, quadY4, quadendX4, quadendY4);

context.lineWidth = 5;

context.strokeStyle = 'rgb(0, 300, 0)';

context.stroke();

var quadX5 = 200;

var quadY5 = 200;

var quadendX5 = 600;

var quadendY5 = 600;

context.beginPath();

context.moveTo(400, 0);

context.quadraticCurveTo(quadX5, quadY5, quadendX5, quadendY5);

context.lineWidth = 3;

context.strokeStyle = 'rgb(0, 200, 0)';

context.stroke();

var quadX6 = 200;

var quadY6 = 300;

var quadendX6 = 600;

var quadendY6 = 600;

context.beginPath();

context.moveTo(300, 0);

context.quadraticCurveTo(quadX6, quadY6, quadendX6, quadendY6);

context.lineWidth = 1;

context.strokeStyle = 'rgb(0, 100, 0)';

context.stroke();

//bezier curves from right

var controlX3 = 0;

var controlY3 = 0;

var controlX4 = 400;

var controlY4 = 400;

var endX = 800;

var endY = 400;

context.beginPath();

context.bezierCurveTo(controlX3, controlY3, controlX4, controlY4, endX, endY);

context.lineWidth = 3;

context.strokeStyle = 'rgb(100, 200, 500)';

context.stroke();

var controlX5 = 0;

var controlY5 = 50;

var controlX6 = 400;

var controlY6 = 500;

var endX2 = 800;

var endY2 = 400;

context.beginPath();

context.bezierCurveTo(controlX5, controlY5, controlX6, controlY6, endX2, endY2);

context.lineWidth = 3;

context.strokeStyle = 'rgb(100, 100, 400)';

context.stroke();

var controlX7 = 0;

var controlY7 = 100;

var controlX8 = 400;

var controlY8 = 600;

var endX3 = 800;

var endY3 = 400;

context.beginPath();

context.bezierCurveTo(controlX7, controlY7, controlX8, controlY8, endX3, endY3);

context.lineWidth = 3;

context.strokeStyle = 'rgb(100, 50, 300)';

context.stroke();

    

//big camera

var grdstartX = 400;

var grdstartY = 50;

var grdendX = 100;

var grdendY = 325;

context.beginPath();

  context.moveTo(150, 200);

  context.lineTo(225, 425);

  context.lineTo(585, 310);

  context.lineTo(500, 90);

  context.lineTo(150, 200);

  context.closePath();

  context.lineWidth = 10;

  var grd2 = context.createLinearGradient(grdstartX, grdstartY, grdendX, grdendY);

  grd.addColorStop(0, 'rgb(0, 300, 300)');

  grd.addColorStop(1, 'rgb(0, 500, 500)');

   context.fillStyle = 'grd2';

    context.fill();

  context.lineJoin = 'round';

  context.strokeStyle = 'rgb(0, 0, 0)';

  context.stroke();

  

//flash

context.beginPath();

context.moveTo(170, 210);

context.lineTo(230, 190);

context.lineTo(241, 220);

context.lineTo(180, 240);

context.lineTo(170, 210);

context.closePath();

context.lineWidth = 5;

context.stroke();

//circle

 var canvas = document.getElementById('myCanvas');

      var context = canvas.getContext('2d');

      var centerX = 375;

      var centerY = 250;

      var radius = 60;

      context.beginPath();

      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

      context.fillStyle = 'white';

      context.fill();

      context.lineWidth = 5;

      context.strokeStyle = 'rgb(0, 0, 0)';

      context.stroke();

      

    var canvas = document.getElementById('myCanvas');

      var context = canvas.getContext('2d');

      var centerX2 = 375;

      var centerY2 = 250;

      var radius2 = 40;

      context.beginPath();

      context.arc(centerX2, centerY2, radius2, 0, 2 * Math.PI, false);

      context.fillStyle = 'rgb(0, 0, 0)';

      context.fill();

      context.lineWidth = 5;

      context.strokeStyle = 'rgb(0, 0, 0)';

      context.stroke();

//shutter

context.beginPath();

context.moveTo(400, 120);

context.lineTo(395, 107);

context.lineTo(460, 86);

context.lineTo(465, 100);

context.closePath();

context.lineWidth = 8;

context.lineJoin = 'round';

context.fillStyle = 'rgb(0, 300, 300)';

  context.fill();

context.stroke();

//camera bottom right

context.beginPath();

context.moveTo(650, 400);

context.lineTo(760, 450);

context.lineTo(725, 525);

context.lineTo(610, 475);

context.lineTo(650, 400);

context.closePath();

context.lineWidth = 5;

context.lineJoin = 'round';

 context.fillStyle = 'rgb(100, 20, 300)';

  context.fill();

context.stroke();

 var canvas = document.getElementById('myCanvas');

      var context = canvas.getContext('2d');

      var centerX = 685;

      var centerY = 465;

      var radius = 20;

      context.beginPath();

      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

      context.fillStyle = 'white';

      context.fill();

      context.lineWidth = 3;

      context.strokeStyle = 'rgb(0, 0, 0)';

      context.stroke() 

      

 var canvas = document.getElementById('myCanvas');

      var context = canvas.getContext('2d');

      var centerX = 685;

      var centerY = 465;

      var radius = 12;

      context.beginPath();

      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

      context.fillStyle = 'rgb(0, 0, 0)';

      context.fill();

      context.lineWidth = 3;

      context.strokeStyle = 'rgb(0, 0, 0)';

      context.stroke();

      

//shutter

context.beginPath();

context.moveTo(714, 428);

context.lineTo(717, 420);

context.lineTo(748, 433);

context.lineTo(745, 441);

context.closePath();

context.lineWidth = 3;

context.lineJoin = 'round';

 context.fillStyle = 'rgb(100, 20, 300)';

  context.fill();

context.stroke();

        

//flash

context.beginPath();

context.moveTo(653, 410);

context.lineTo(680, 423);

context.lineTo(672, 437);

context.lineTo(645, 425);

context.lineTo(653, 410);

context.closePath();

context.lineWidth = 3;

context.stroke();        

//camera upper left

context.beginPath();

context.moveTo(75, 25);

context.lineTo(175, 52);

context.lineTo(150, 125);

context.lineTo(50, 95);

context.lineTo(75, 25);

context.closePath();

context.lineWidth = 5;

context.lineJoin = 'round';

context.strokeStyle = 'rgb(0, 0, 0)';

 context.fillStyle = 'rgb(200, 0, 200)';

  context.fill();

context.stroke();

 var canvas = document.getElementById('myCanvas');

      var context = canvas.getContext('2d');

      var centerX = 115;

      var centerY = 75;

      var radius = 18;

      context.beginPath();

      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

      context.fillStyle = 'white';

      context.fill();

      context.lineWidth = 3;

      context.strokeStyle = 'rgb(0, 0, 0)';

      context.stroke();

 var canvas = document.getElementById('myCanvas');

      var context = canvas.getContext('2d');

      var centerX = 115;

      var centerY = 75;

      var radius = 10;

      context.beginPath();

      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

      context.fillStyle = 'rgb(0, 0 ,0)';

      context.fill();

      context.lineWidth = 3;

      context.strokeStyle = 'rgb(0, 0, 0)';

      context.stroke();

//shutter

context.beginPath();

context.moveTo(135, 42);

context.lineTo(138, 30);

context.lineTo(168, 37);

context.lineTo(164, 50);

context.closePath();

context.lineWidth = 3;

context.lineJoin = 'round';

context.fillStyle = 'rgb(200, 0, 200)';

  context.fill();

context.stroke();

//flash

context.beginPath();

context.moveTo(80, 35);

context.lineTo(100, 41);

context.lineTo(96, 50);

context.lineTo(77, 44);

context.lineTo(80, 35);

context.closePath();

context.lineWidth = 3;

context.stroke();  

//words

var textx = 50;

var texty = 550;

context.beginPath();

  context.font = '60pt Brush Script MT';

context.fillStyle = 'rgb(300, 300, 100)';

      context.fillText('Capture The Moment', textx, texty);

      context.strokeStyle = 'rgb(0, 0, 0)';

      context.lineWidth = 2;

      context.strokeText('Capture The Moment', textx, texty);

    context.lineWidth = 20; 

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

};

</script>

</head>

<body>

<canvas id="myCanvas" width="800" height="600"></canvas>

</body>

</html>

WebRep

currentVote

noRating

noWeight

Heart

 

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

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

//rectangle


var x2 = 0;
var y2 = 0;
var rectwidth = canvas.width;
var rectheight = canvas.height;
var startX = 400;
var startY = 100;
var endX6 = 400;
var endY6 = 550;


context.beginPath();
context.rect(x2,y2,rectwidth,rectheight);
var grd = context.createLinearGradient(startX, startY, endX6, endY6);
  grd.addColorStop(0, 'rgb(300, 70, 200)');
  grd.addColorStop(1, 'rgb(100, 30, 300)');
  context.fillStyle = grd;
  context.fill();
context.stroke();






//heart

//bezier
var x = 390;
var y = 175;
var controlX1 = 285;
var controlY1 = 25;
var controlX2 = 125;
var controlY2 = 175;
var endX2 = 300;
var endY2 = 340;

//quadratic
var controlX3 = 350;
var controlY3 = 390;
var endX3 = 390;
var endY3 = 470;

//quadratic
var controlX4 = 430;
var controlY4 = 390;
var endX4 = 470;
var endY4 = 350;

//bezier
var controlX5 = 655;
var controlY5 = 185;
var controlX6 = 525;
var controlY6 = 25;
var endX5 = x;
var endY5 = y;


context.beginPath();
context.moveTo(x, y);
context.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX2, endY2);
context.quadraticCurveTo(controlX3, controlY3, endX3, endY3);
context.quadraticCurveTo(controlX4, controlY4, endX4, endY4);
context.bezierCurveTo(controlX5, controlY5, controlX6, controlY6, endX5, endY5);
context.closePath();
context.fillStyle = 'rgb(300, 0 , 0)';
context.fill();
context.lineWidth = 10;
context.strokeStyle = 'rgb(255, 150, 200)';
context.stroke();






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

};

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