logo: hhughes photo

this is the final design of the logo for my photography company 'hhughes photo.' i am actually going to be using this logo on my website and i will be using just the writing as a watermark. i wanted to keep the design simple and classic while still having a personal touch. i used a black square to make the writing pop as much as possible and i used my own handwriting for the words. it looks like it is an extremely easy logo to make but it ended up being harder than i had anticipated. it was hard to get all of the letters to look exactly the way that i wanted. i also went through a number of different arrangements of the design before ultimately coming up with this one. i chose to stick with a black and white color scheme because it is eye catching without being too distracting. when you zoom out it is still surprisingly easy to read because the white really pops. to use it as a watermark i will just get rid of the black square and change the color of the words to black with a low opacity. i didn't use any references during the process of making the logo, i just tested a bunch of my handwriting and a number of different arrangements until i came up with what would be the most aesthetically pleasing. i hope you like it as much as i do!

calligram

this is the calligram that i made for class. it's a cheeseburger made of the lyrics for "Cheeseburger in Paradise" by Jimmy Buffet. i hope you like it!

logo critique

the target audience is typically people who travel. the yellow is eye catching, the style is timeless. the logo is successful because it's so timeless and attention grabbing. on the magazines this logo frames what is important and it gives a small picture of the world. 

this logo is also simple and timeless, it is easy to tell that the logo and the company have something to do with the ocean. the logo is successful because you know basically what the company stands for just by looking at it. 

"one for one" is the motto of the company. I read about the logo's history and it is based off of the Argentinean flag because the original shoe design was based off of Argentinean cowboy shoes. the two blue bars could also represent "one for one." the logo is blue also, like the others and it represents reliability. 

another simple blue logo that shows reliability and clarity. the round shape makes it effective because it's kind of a random shape. the logo isn't overbearing and it's know around the world. 

"endangered species conservation." the logo is a giant panda, because it has been endangered for a long time. most people people know what the logo stands for and it's not a written word so it can be understood in a number of languages which helps make it a more successful logo.

logo sketches

logo sketches for hhughes photo:

fictional company ideas

here's my 5 ideas for fictional companies:
 
   a. hhughes photo
   b. Sink or Swim Scuba Co.
   c. Row Your Boat Sailing School
   d. Fork You Fork Co.
   e. Mask Makeup Co.

i think for all of the potential companies having a logo that somewhat shows what the company is will make the logos more effective. all of them should have a simple design that uses bright colours in order to make them more eye catching.

i'm sailing away

i'm not gonna lie, this project was hard, i really enjoyed it though and i couldn't be happier with the finished product. i chose to do a sailboat because i love sailing and i wanted to challenge myself, and it definitely proved to be a challenge.  i found a picture of a sailboat on google that i used as a reference for my project. i graphed a drawing of the original in order to make it easier to plug in the numbers. the boat was the first part that i did, then the sails and then the background. after i finished all the import and stuff i decided to add some clouds and some stars to the sunset in the background to help make it more interesting. adding the gradients and the clouds helped to add just a little bit of depth to the piece but i think the 2D-ness of it is what really makes it pop. i hope you like it!!

references:

code:

<!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, 800, 600);

var grd = context.createRadialGradient(400, 400, 50, 400, 300, 200);

grd.addColorStop(0, 'FFD100');

grd.addColorStop(1, '604395');

context.fillStyle = grd;

context.fill();

//water

context.beginPath();

context.rect(0, 450, 800, 150);

var grd = context.createLinearGradient(0, 450, 800, 150);

grd.addColorStop(0, '#2A44B8');

grd.addColorStop(1, '#2AB8B6');

context.fillStyle = grd;

context.fill();

//stars

context.beginPath();

context.arc(25, 75, 5, 0, 2 * Math.PI, false);

context.fillStyle = '#FFFFFF';

context.fill();

context.strokeStyle = '#FFFFFF';

context.stroke();

context.beginPath();

context.arc(200, 75, 2, 0, 2 * Math.PI, false);

context.fillStyle = '#FFFFFF';

context.fill();

context.strokeStyle = '#FFFFFF';

context.stroke();

context.beginPath();

context.arc(25, 75, 5, 0, 2 * Math.PI, false);

context.fillStyle = '#FFFFFF';

context.fill();

context.strokeStyle = '#FFFFFF';

context.stroke();

context.beginPath();

context.arc(200, 200, 1, 0, 2 * Math.PI, false);

context.fillStyle = '#FFFFFF';

context.fill();

context.strokeStyle = '#FFFFFF';

context.stroke();

context.beginPath();

context.arc(150, 400 , 5, 0, 2 * Math.PI, false);

context.fillStyle = '#FFFFFF';

context.fill();

context.strokeStyle = '#FFFFFF';

context.stroke();

context.beginPath();

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

context.fillStyle = '#FFFFFF';

context.fill();

context.strokeStyle = '#FFFFFF';

context.stroke();

context.beginPath();

context.arc(100, 350, 1, 0, 2 * Math.PI, false);

context.fillStyle = '#FFFFFF';

context.fill();

context.strokeStyle = '#FFFFFF';

context.stroke();

context.beginPath();

context.arc(30, 425, 2, 0, 2 * Math.PI, false);

context.fillStyle = '#FFFFFF';

context.fill();

context.strokeStyle = '#FFFFFF';

context.stroke();

context.beginPath();

context.arc(75, 250, 3, 0, 2 * Math.PI, false);

context.fillStyle = '#FFFFFF';

context.fill();

context.strokeStyle = '#FFFFFF';

context.stroke();

context.beginPath();

context.arc(125, 25, 1, 0, 2 * Math.PI, false);

context.fillStyle = '#FFFFFF';

context.fill();

context.strokeStyle = '#FFFFFF';

context.stroke();

context.beginPath();

context.arc(400, 80, 5, 0, 2 * Math.PI, false);

context.fillStyle = '#FFFFFF';

context.fill();

context.strokeStyle = '#FFFFFF';

context.stroke();

context.beginPath();

context.arc(700, 400, 5, 0, 2 * Math.PI, false);

context.fillStyle = '#FFFFFF';

context.fill();

context.strokeStyle = '#FFFFFF';

context.stroke();

context.beginPath();

context.arc(780, 430, 1, 0, 2 * Math.PI, false);

context.fillStyle = '#FFFFFF';

context.fill();

context.strokeStyle = '#FFFFFF';

context.stroke();

context.beginPath();

context.arc(600, 420, 3, 0, 2 * Math.PI, false);

context.fillStyle = '#FFFFFF';

context.fill();

context.strokeStyle = '#FFFFFF';

context.stroke();

context.beginPath();

context.arc(790, 25, 5, 0, 2 * Math.PI, false);

context.fillStyle = '#FFFFFF';

context.fill();

context.strokeStyle = '#FFFFFF';

context.stroke();

context.beginPath();

context.arc(260, 40, 1, 0, 2 * Math.PI, false);

context.fillStyle = '#FFFFFF';

context.fill();

context.strokeStyle = '#FFFFFF';

context.stroke();

context.beginPath();

context.arc(600, 250, 4, 0, 2 * Math.PI, false);

context.fillStyle = '#FFFFFF';

context.fill();

context.strokeStyle = '#FFFFFF';

context.stroke();

context.beginPath();

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

context.fillStyle = '#FFFFFF';

context.fill();

context.strokeStyle = '#FFFFFF';

context.stroke();

context.beginPath();

context.arc(675, 240, 1, 0, 2 * Math.PI, false);

context.fillStyle = '#FFFFFF';

context.fill();

context.strokeStyle = '#FFFFFF';

context.stroke();

context.beginPath();

context.arc(720, 90, 3, 0, 2 * Math.PI, false);

context.fillStyle = '#FFFFFF';

context.fill();

context.strokeStyle = '#FFFFFF';

context.stroke();

context.beginPath();

context.arc(720, 320, 3, 0, 2 * Math.PI, false);

context.fillStyle = '#FFFFFF';

context.fill();

context.strokeStyle = '#FFFFFF';

context.stroke();

context.beginPath();

context.arc(765, 200, 4, 0, 2 * Math.PI, false);

context.fillStyle = '#FFFFFF';

context.fill();

context.strokeStyle = '#FFFFFF';

context.stroke();

context.beginPath();

context.arc(600, 100, 3, 0, 2 * Math.PI, false);

context.fillStyle = '#FFFFFF';

context.fill();

context.strokeStyle = '#FFFFFF';

context.stroke();

context.beginPath();

context.arc(675, 50, 2, 0, 2 * Math.PI, false);

context.fillStyle = '#FFFFFF';

context.fill();

context.strokeStyle = '#FFFFFF';

context.stroke();

//cloud 1

context.beginPath();

context.moveTo(0, 100);

context.bezierCurveTo(200, 150, 500, 50, 800, 100);

context.lineTo(800, 200)

context.bezierCurveTo(500, 100, 200, 250, 0, 200);

context.lineTo(0, 100);

context.closePath();

context.fillStyle = 'rgba(255, 0, 0, .2)';

context.fill();

context.strokeStyle = 'rgba(255, 0, 0, .1)';

context.stroke();

//cloud 2

context.beginPath();

context.moveTo(0, 400);

context.bezierCurveTo(200, 400, 500, 150, 800, 300);

context.lineTo(800, 400)

context.bezierCurveTo(500, 100, 200, 250, 0, 400);

context.lineTo(0, 400);

context.closePath();

context.fillStyle = 'rgba(250, 160, 180, .2)';

context.fill();

context.strokeStyle = 'rgba(250, 160, 180, .1)';

context.stroke();

//mast

context.beginPath();

context.moveTo(525, 100);

context.lineTo(525, 427);

context.lineWidth = 3;

context.lineCap = 'round';

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

context.stroke();

//boom

context.beginPath();

context.moveTo(525, 400);

context.lineTo(750, 400);

context.lineWidth = 3;

context.lineCap = 'round';

context.stroke();

//main sail

context.beginPath();

context.moveTo(525, 160);

context.bezierCurveTo(480, 225, 470, 300, 525, 400);

context.quadraticCurveTo(580, 350, 750, 400);

context.quadraticCurveTo(600, 300, 525, 160)

context.closePath();

context.fillStyle = '#FAF8D9';

context.fill();

context.lineWidth = 1;

context.strokeStyle = '#FAF8D9';

context.stroke();

//fore sail

context.beginPath();

context.moveTo(525, 140);

context.bezierCurveTo(300, 200, 400, 375, 428, 400);

context.quadraticCurveTo(450, 360, 525, 425);

context.quadraticCurveTo(430, 300, 525, 140)

context.closePath();

context.fillStyle = '#FAF8D9';

context.fill();

context.lineWidth = 1;

context.strokeStyle = '#FAF8D9';

context.stroke();

//burgee

context.beginPath();

context.moveTo(525, 105);

context.lineTo(525, 130);

context.quadraticCurveTo(550, 150, 590, 120);

context.quadraticCurveTo(550, 120, 525, 105)

context.closePath();

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

context.fill();

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

context.lineWidth = 1;

context.stroke();

//hull 

context.beginPath();

context.moveTo(425, 400);

context.bezierCurveTo(475, 525, 650, 475, 750, 450);

context.lineTo(750, 430);

context.bezierCurveTo(650, 425, 500, 445, 425, 400);

context.closePath();

context.fillStyle = '#011345';

context.fill();

context.strokeStyle = '#011345';

context.stroke();

//wave

context.beginPath();

context.moveTo(415, 470);

context.bezierCurveTo(450, 420, 600, 500, 730, 460);

context.quadraticCurveTo(600, 500, 500, 500);

context.quadraticCurveTo(400, 500, 415, 470);

context.fillStyle = '#7BDEE7';

context.fill();

context.strokeStyle = '#7BDEE7';

context.stroke();

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

};

</script>

</head>

<body>

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

</body>

</html>

first real "drawing"

here's the heart that i made in class on monday, i'm pretty proud of it. here's the code that i used to make it...


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

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

var startx = 400;
var starty = 200;

//bezier curve 1
var controlx1 = 525;
var controly1 = 50;
var controlx2 = 650;
var controly2 = 150;
var endx = 550;
var endy = 250;

//quadratic curve 1
var controlx3 = 550;
var controly3 = 250;
var endx2 = 400;
var endy2 = 400;

//quadratic curve 2
var controlx4 = 400;
var controly4 = 400;
var endx3 = 250;
var endy3 = 250;

//bezier curve 2
var controla = 150;
var controlb = 150;
var controla1 = 275;
var controlb1 = 50;
var endx4 = 400;
var endy4 = 200;

context.beginPath();
context.moveTo(startx, starty);
context.bezierCurveTo(controlx1, controly1, controlx2, controly2, endx, endy);
context.quadraticCurveTo(controlx3, controly3, endx2, endy2);
context.quadraticCurveTo(controlx4, controly4, endx3, endy3);
context.bezierCurveTo(controla, controlb, controla1, controlb1, endx4, endy4);
context.fillStyle = 'rgb(255,0,0)';
context.fill();
context.strokeStyle = 'rgb(255, 0, 0)';
context.stroke();

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

};

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