Business Card and Logo - 5

Original Picture:


Onto Illustrator:


Onto Business Cards:

Business Card and Logo - 4

Original Picture:


Onto Illustrator:


Onto Business Cards:

Business Card and Logo - 3

Original:


Onto Illustrator:


Onto Business Cards:

Business Card and Logo - 2

Original Picture:

Onto Illustrator:

Onto Business Card:

Business Card & Logo - 1

Orignal Picture:

Onto Illustrator:

Onto Business Cards:

Calligram: "Brida"

My Calligram was based of off a book by my favorite author, Paulo Coelho. The words you see are all excerpts of his books, or quotes from him.

My first HTML5 Canvas Drawing-- Finn, The Human

This is my first HTML5 Canvas drawing, featuring Finn, The Human from Adventure time!

Here is the step by step process I went through to achieve the final picture.

and here is a close up of my final drawing:

// BACKGROUND context.beginPath(); context.rect(0, 0, 800, 600); context.fillStyle = "rgb(69, 189, 237)"; context.fill(); context.lineWidth = 7; context.strokeStyle = "rgb(69, 189, 237)"; context.stroke(); context.closePath(); var grd = context.createRadialGradient(400, 50, 10, 300, 50, 300); // light blue grd.addColorStop(0, 'rgb(69, 189, 237)'); // dark blue grd.addColorStop(1, 'rgb(42, 160, 211)'); context.fillStyle = grd; context.fill(); //HEAD context.beginPath(); context.moveTo(90, 510); context.quadraticCurveTo(90, 510, 90, 144); context.quadraticCurveTo(100, -5, 180, 130); context.quadraticCurveTo(200, 200, 530, 150); context.quadraticCurveTo(600, -7, 625, 130); context.quadraticCurveTo(633, 150, 640, 510); context.quadraticCurveTo(650, 510, 85, 514); context.lineWidth = 10; context.fillStyle = 'white'; context.fill(); context.strokeStyle = 'black'; context.stroke(); context.closePath(); // FACE context.beginPath(); context.save(); context.translate(canvas.width / 2, canvas.height / 2); context.scale(2, 1.2); context.beginPath(); context.arc(-15,40, 110, 0, 6.75, false); context.restore(); context.fillStyle = 'rgb(252, 210, 192)'; context.fill(); context.lineWidth = 5; context.strokeStyle = 'black'; context.stroke(); context.closePath(); // LEFT BLUSH context.beginPath(); context.save(); context.translate(canvas.width / 2, canvas.height / 2); context.scale(2, 1); context.beginPath(); context.arc(-62, -20, 13, 0, 6.75, false); context.restore(); context.fillStyle = 'rgb(247, 173, 177)'; context.fill(); context.lineWidth = 1; context.strokeStyle = 'rgb(247, 173, 177)'; context.stroke(); context.closePath(); context.beginPath(); context.arc(260, 278, 6.5, 0, 6.75, false); context.fillStyle = 'white'; context.fill(); context.lineWidth = 0; context.strokeStyle = 'white)'; context.stroke(); context.closePath(); //BLUSH context.beginPath(); context.arc(297, 220, 70, 1.8, 2, false); context.lineWidth = 1.1; context.strokeStyle = 'black'; context.stroke(); context.closePath(); context.beginPath(); context.arc(305, 220, 70, 1.8, 2, false); context.lineWidth = 1; context.strokeStyle = 'black'; context.stroke(); context.closePath(); context.beginPath(); context.arc(316, 220, 70, 1.8, 2, false); context.lineWidth = .7; context.strokeStyle = 'black'; context.stroke(); context.closePath(); // LEFT EYE context.beginPath(); context.arc(280, 260, 10, 0, 6.75, false); context.fillStyle = 'black'; context.fill(); context.lineWidth = 5; context.strokeStyle = 'black'; context.stroke(); context.closePath(); //RIGHT BLUSH context.beginPath(); context.save(); context.translate(canvas.width / 2, canvas.height / 2); context.scale(2, 1); context.beginPath(); context.arc(30, -30, 13, 0, 6.75, false); context.restore(); context.fillStyle = 'rgb(247, 173, 177)'; context.fill(); context.lineWidth = 1; context.strokeStyle = 'rgb(247, 173, 177)'; context.stroke(); context.closePath(); context.beginPath(); context.arc(479, 266, 5, 0, 6.75, false); context.fillStyle = 'white'; context.fill(); context.lineWidth = 0; context.strokeStyle = 'white)'; context.stroke(); context.closePath(); // RIGHT EYE context.beginPath(); context.arc(450, 250, 10, 0, 6.75, false); context.fillStyle = 'black'; context.fill(); context.lineWidth = 5; context.strokeStyle = 'black'; context.stroke(); context.closePath(); //BLUSH context.beginPath(); context.arc(437, 235, 50, 1, 7, true); context.lineWidth = 1; context.strokeStyle = 'black'; context.stroke(); context.closePath(); context.beginPath(); context.arc(428, 237, 50, 1, 7, true); context.lineWidth = 1; context.strokeStyle = 'black'; context.stroke(); context.closePath(); context.beginPath(); context.arc(420, 239, 50, 1, 7, true); context.lineWidth = 1; context.strokeStyle = 'black'; context.stroke(); context.closePath(); //MOUTH context.beginPath(); context.arc(370, 210, 70, 1.8, 7.4, true); context.lineWidth = 4; context.strokeStyle = 'black'; context.stroke(); context.closePath();