Wednesday, September 25, 2013

Logo 5


This was actually my first logo I came up with. The whole entire time I was thinking of what to create, I kept telling myself to keep an "open mind"... and as I was doing this I was also online shopping. Then, boom. Open Mind Clothing was created. The picture of the polaroids used in the background is also my own (the pictures are of the campus for proof*). I thought it would be clever because it's a picture of polaroids. A picture of a picture, except from a different set of lens. Open mind = different perspectives. Make sense?


Posted by at No comments:

Logo 4


I HATE using the pen tool with a passion. BUT, I actually loved how I was able to manipulate this logo. I wanted to create something for tattoos and when it comes down to them, I think most tattoos are art and have such deep meaning. Most. It's something that's really personal, as if it's coming from "within". That's where I came up with the title Withink. Within and with ink put together. The logo is pretty simple, but I love the way it turned out. And incase no one noticed, the splatter part is supposed to represent a "K" so it's read as "ink".


Posted by at No comments:

Logo 3


This was probably the corniest logo I created, so I don't have much to say about it. Using a camera to represent the photography isn't the most original idea, but I tried incorporating an "H" and "P" somewhere in there; the shutter button, and lens.


Posted by at No comments:

Logo 2


This one is my second least favorite from the bunch. When I came up with the title "Raw Designs" I was thinking of a tribal style the whole entire time. The more I played with it on Illustrator though, the more messy it turned out to be so I was forced to remix it. I kept the style simple, but the idea is still geometric -just less of a tribal feel. I don't hate it, but I'm not in love with it anymore. The logo also is supposed to spell out "raw". The "R" is the most abstract letter; the swirl, the middle piece, and the left bar create the R. The middle piece also acts as the center of the "A" which is easily seen upside down, and for the "W", the middle piece also acts as the middle portion of the letter.


Posted by at No comments:

Logo 1


Here's my awful "Island Catering" logo. I decided to get this one over with first even though it was my last logo. It's definitely my least favorite. For some reason, the idea just seemed so much more clever in my head and on the doodle, but I guess that's why we have trial and error. The "I" and "C" from "Island Catering" is supposed to be in a pan next to an island and they were supposed to represent waves... they look nothing like waves, but I was too set on the font to change the logo. It may look extra cheesy, but these fonts and style are actually the go-to design that you would see everywhere on the island! (Referring to the Philippines and Guam)


Posted by at No comments:

Korean Calligram


Posted by at No comments:

Wednesday, September 11, 2013

Skylined

FINAL CANVAS! (:
Inspired by the infamous New York street artists.

Examples:
http://www.youtube.com/watch?v=T9DN0SYY8NY
http://www.youtube.com/watch?v=zMjiD59D3xE

HTML Code:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> Skylined </title>
</head>

<body>

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

<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

//// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> START HERE

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.rect(0, 0, 800, 600);

// add linear gradient
var grd = context.createLinearGradient(0, 600, 0, 0);
// light blue
grd.addColorStop(0, "rgb(0,0,0)");  
// dark blue
grd.addColorStop(1, "rgb(10,0,80)");
context.fillStyle = grd;
context.fill();

//////////////////// PLANETS

// 5
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = 625;
var centerY = 205;
var radius = 3;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// create radial gradient
var grd = context.createRadialGradient(624, 205, 0, 624, 205, 1);
grd.addColorStop(0, "rgb(243,205,54)");
grd.addColorStop(1, "rgb(199,0,139)");
context.fillStyle = grd;
context.fill();
context.lineWidth = .15;
context.strokeStyle = "rgba(255,255,255,.15)";
context.stroke();

// 4
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = 535;
var centerY = 210;
var radius = 9;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// create radial gradient
var grd = context.createRadialGradient(530, 210, 0, 530, 210, 10);
grd.addColorStop(0, "rgb(111,163,253)");
grd.addColorStop(.4, "rgb(19,87,203)");
grd.addColorStop(1, "rgb(0,33,90)");
context.fillStyle = grd;
context.fill();
context.lineWidth = .25;
context.strokeStyle = "rgba(255,255,255,.15)";
context.stroke();

// 3
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = 450;
var centerY = 235;
var radius = 20;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// create radial gradient
var grd = context.createRadialGradient(440, 230, 0.2, 440, 230, 38);
grd.addColorStop(0, "rgb(228,165,18)");
grd.addColorStop(.35, "rgb(238,3,222)");
grd.addColorStop(.55, "rgb(119,0,178)");
grd.addColorStop(1, "rgb(0,29,97)");
context.fillStyle = grd;
context.fill();
context.lineWidth = .5;
context.strokeStyle = "rgba(255,255,255,.15)";
context.stroke();

// 2
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = 350;
var centerY = 300;
var radius = 75;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// create radial gradient
var grd = context.createRadialGradient(310, 330, 1, 250, 100, 280);
grd.addColorStop(0, "rgb(0,35,80)");
grd.addColorStop(.4, "rgb(115,0,156)");
grd.addColorStop(.65, "rgb(0,101,233)");
grd.addColorStop(1, "rgb(0,80,60)");
context.fillStyle = grd;
context.fill();
context.lineWidth = 1.5;
context.strokeStyle = "rgba(255,255,255,.15)";
context.stroke();

// 1
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = 150;
var centerY = 550;
var radius = 300;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// create radial gradient
var grd = context.createRadialGradient(200, 320, 3, 200, 350, 600);
grd.addColorStop(0, "rgb(255,205,0)");
grd.addColorStop(.4, "rgb(255,0,68)");
grd.addColorStop(.65, "rgb(255,200,0)");
grd.addColorStop(1, "rgb(255,0,0)");
context.fillStyle = grd;
context.fill();
context.lineWidth = 7;
context.strokeStyle = "rgba(255,255,255,.15)";
context.stroke();

// .5
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = 247;
var centerY = -20;
var radius = 100;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// create radial gradient
var grd = context.createRadialGradient(200, -10, 3, 200, 50, 600);
grd.addColorStop(0, "rgb(174,0,209)");
grd.addColorStop(.17, "rgb(156,0,83)");
grd.addColorStop(.65, "rgb(255,200,0)");
grd.addColorStop(1, "rgb(255,0,0)");
context.fillStyle = grd;
context.fill();
context.lineWidth = 4;
context.strokeStyle = "rgba(255,255,255,.15)";
context.stroke();

/////////////// STARS
// 1
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = 247;
var centerY = 100;
var radius = 8;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// create radial gradient
var grd = context.createRadialGradient(247, 100, 0, 247, 100, 8);
grd.addColorStop(0, "rgb(255,255,255)");
grd.addColorStop(.8, "rgba(0,0,0,0)");
grd.addColorStop(1, "rgba(0,0,0,0)");
context.fillStyle = grd;
context.fill();

// 2
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = 107;
var centerY = 210;
var radius = 8;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// create radial gradient
var grd = context.createRadialGradient(107, 210, 0, 107, 210, 8);
grd.addColorStop(0, "rgb(255,255,255)");
grd.addColorStop(1, "rgba(0,0,0,0)");
context.fillStyle = grd;
context.fill();

//3
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = 45;
var centerY = 166;
var radius = 8;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// create radial gradient
var grd = context.createRadialGradient(45, 166, 0, 45, 166, 3);
grd.addColorStop(0, "rgb(255,255,255)");
grd.addColorStop(1, "rgba(0,0,0,0)");
context.fillStyle = grd;
context.fill();

//4
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = 95;
var centerY = 66;
var radius = 8;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// create radial gradient
var grd = context.createRadialGradient(95, 66, 0, 95, 66, 3);
grd.addColorStop(0, "rgb(255,255,255)");
grd.addColorStop(1, "rgba(0,0,0,0)");
context.fillStyle = grd;
context.fill();

//5
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = 495;
var centerY = 366;
var radius = 8;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// create radial gradient
var grd = context.createRadialGradient(495, 366, 0, 495, 366, 3);
grd.addColorStop(0, "rgb(255,255,255)");
grd.addColorStop(1, "rgba(0,0,0,0)");
context.fillStyle = grd;
context.fill();

//6
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = 505;
var centerY = 376;
var radius = 8;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// create radial gradient
var grd = context.createRadialGradient(505, 376, 0, 505, 376, 2);
grd.addColorStop(0, "rgb(255,255,255)");
grd.addColorStop(1, "rgba(0,0,0,0)");
context.fillStyle = grd;
context.fill();

//7
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = 478;
var centerY = 233;
var radius = 8;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// create radial gradient
var grd = context.createRadialGradient(478, 233, 0, 478, 233, 5);
grd.addColorStop(0, "rgb(255,255,255)");
grd.addColorStop(1, "rgba(0,0,0,0)");
context.fillStyle = grd;
context.fill();

//8
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = 408;
var centerY = 135;
var radius = 8;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// create radial gradient
var grd = context.createRadialGradient(408, 135, 0, 408, 135, 5);
grd.addColorStop(0, "rgb(255,255,255)");
grd.addColorStop(1, "rgba(0,0,0,0)");
context.fillStyle = grd;
context.fill();

//9
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = 608;
var centerY = 100;
var radius = 8;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// create radial gradient
var grd = context.createRadialGradient(608, 100, 0, 608, 100, 2);
grd.addColorStop(0, "rgb(255,255,255)");
grd.addColorStop(1, "rgba(0,0,0,0)");
context.fillStyle = grd;
context.fill();

//10
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = 708;
var centerY = 70;
var radius = 8;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// create radial gradient
var grd = context.createRadialGradient(708, 70, 0, 708, 70, 3);
grd.addColorStop(0, "rgb(255,255,255)");
grd.addColorStop(1, "rgba(0,0,0,0)");
context.fillStyle = grd;
context.fill();

//11
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = 668;
var centerY = 40;
var radius = 8;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// create radial gradient
var grd = context.createRadialGradient(668, 40, 0, 668, 40, 4);
grd.addColorStop(0, "rgb(255,255,255)");
grd.addColorStop(1, "rgba(0,0,0,0)");
context.fillStyle = grd;
context.fill();

//12
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = 648;
var centerY = 440;
var radius = 8;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// create radial gradient
var grd = context.createRadialGradient(648, 440, 0, 648, 440, 4);
grd.addColorStop(0, "rgb(255,255,255)");
grd.addColorStop(1, "rgba(255,255,255,0)");
context.fillStyle = grd;
context.fill();

//13
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = 363;
var centerY = 540;
var radius = 8;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// create radial gradient
var grd = context.createRadialGradient(363, 540, 0, 363, 540, 6);
grd.addColorStop(0, "rgb(255,255,255)");
grd.addColorStop(1, "rgba(255,255,255,0)");
context.fillStyle = grd;
context.fill();


///////////////// SKYLINE
///////// BRIDGE
context.beginPath();
context.moveTo(540, 510);
context.lineTo(540, 600);
context.lineWidth = 5;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();
context.beginPath();
context.moveTo(540, 510);
context.lineTo(540, 600);
context.lineWidth = 5;
var grd = context.createLinearGradient(540, 510, 540, 600);
grd.addColorStop(0, "rgba(255,255,255,0.2)");
grd.addColorStop(1, "rgba(255,255,255,0)");
context.strokeStyle = grd;
context.stroke();
//
context.beginPath();
context.moveTo(520, 518);
context.lineTo(520, 600);
context.lineWidth = 5;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();
context.beginPath();
context.moveTo(520, 518);
context.lineTo(520, 600);
context.lineWidth = 5;
var grd = context.createLinearGradient(520, 518, 520, 600);
grd.addColorStop(0, "rgba(255,255,255,0.2)");
grd.addColorStop(1, "rgba(255,255,255,0)");
context.strokeStyle = grd;
context.stroke();
//
context.beginPath();
context.moveTo(500, 523);
context.lineTo(500, 600);
context.lineWidth = 5;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();
context.beginPath();
context.moveTo(500, 523);
context.lineTo(500, 600);
context.lineWidth = 5;
var grd = context.createLinearGradient(500, 523, 500, 600);
grd.addColorStop(0, "rgba(255,255,255,0.2)");
grd.addColorStop(1, "rgba(255,255,255,0)");
context.strokeStyle = grd;
context.stroke();
//
context.beginPath();
context.moveTo(600, 512);
context.lineTo(600, 600);
context.lineWidth = 5;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();
context.beginPath();
context.moveTo(600, 512);
context.lineTo(600, 600);
context.lineWidth = 5;
var grd = context.createLinearGradient(600, 512, 600, 600);
grd.addColorStop(0, "rgba(255,255,255,0.2)");
grd.addColorStop(1, "rgba(255,255,255,0)");
context.strokeStyle = grd;
context.stroke();
//
context.beginPath();
context.moveTo(620, 522);
context.lineTo(620, 600);
context.lineWidth = 5;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();
context.beginPath();
context.moveTo(620, 522);
context.lineTo(620, 600);
context.lineWidth = 5;
var grd = context.createLinearGradient(620, 522, 620, 600);
grd.addColorStop(0, "rgba(255,255,255,0.2)");
grd.addColorStop(1, "rgba(255,255,255,0)");
context.strokeStyle = grd;
context.stroke();
//
context.beginPath();
context.moveTo(640, 531);
context.lineTo(640, 600);
context.lineWidth = 5;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();
context.beginPath();
context.moveTo(640, 531);
context.lineTo(640, 600);
context.lineWidth = 5;
var grd = context.createLinearGradient(640, 531, 640, 600);
grd.addColorStop(0, "rgba(255,255,255,0.2)");
grd.addColorStop(1, "rgba(255,255,255,0)");
context.strokeStyle = grd;
context.stroke();
//
context.beginPath();
context.moveTo(0, 560);
context.lineTo(800, 560);
context.lineWidth = 7;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();
context.beginPath();
context.moveTo(0, 575);
context.lineTo(800, 575);
context.lineWidth = 10;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();
///////// BUILDING
context.beginPath();
context.moveTo(0, 385);
context.lineTo(0, 800);
context.lineWidth = 100;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();
context.beginPath();
context.moveTo(10, 390);
context.lineTo(10, 600);
context.lineWidth = 7;
var grd = context.createLinearGradient(10, 390, 10, 600);
grd.addColorStop(0, "rgba(255,255,255,0.5)");
grd.addColorStop(0.15, "rgba(0,0,0,0)");
grd.addColorStop(0.16, "rgba(255,255,255,0.5)");
grd.addColorStop(0.3, "rgba(0,0,0,0)");
grd.addColorStop(0.31, "rgba(255,255,255,0.5)");
grd.addColorStop(0.75, "rgba(0,0,0,0)");
grd.addColorStop(1, "rgba(0,0,0,0)");
context.strokeStyle = grd;
context.stroke();
//
context.beginPath();
context.moveTo(70, 480);
context.lineTo(70, 800);
context.lineWidth = 50;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();
context.beginPath();
context.moveTo(45, 485);
context.lineTo(45, 600);
context.lineWidth = 7;
var grd = context.createLinearGradient(45, 485, 45, 600);
grd.addColorStop(0, "rgba(255,255,255,0.5)");
grd.addColorStop(0.15, "rgba(0,0,0,0)");
grd.addColorStop(0.16, "rgba(255,255,255,0.5)");
grd.addColorStop(0.75, "rgba(0,0,0,0)");
grd.addColorStop(1, "rgba(0,0,0,0)");
context.strokeStyle = grd;
context.stroke();
context.moveTo(62, 485);
context.lineTo(62, 600);
context.lineWidth = 7;
var grd = context.createLinearGradient(62, 485, 62, 600);
grd.addColorStop(0, "rgba(255,255,255,0.5)");
grd.addColorStop(0.15, "rgba(0,0,0,0)");
grd.addColorStop(0.16, "rgba(255,255,255,0.5)");
grd.addColorStop(0.45, "rgba(0,0,0,0)");
grd.addColorStop(1, "rgba(0,0,0,0)");
context.strokeStyle = grd;
context.stroke();
//
context.beginPath();
context.moveTo(125, 450);
context.lineTo(125, 800);
context.lineWidth = 50;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();
context.beginPath();
context.moveTo(107, 455);
context.lineTo(107, 600);
context.lineWidth = 7;
var grd = context.createLinearGradient(107, 455, 107, 600);
grd.addColorStop(0, "rgba(255,255,255,0.5)");
grd.addColorStop(0.15, "rgba(0,0,0,0)");
grd.addColorStop(0.16, "rgba(255,255,255,0.5)");
grd.addColorStop(0.3, "rgba(0,0,0,0)");
grd.addColorStop(0.31, "rgba(255,255,255,0.5)");
grd.addColorStop(0.45, "rgba(0,0,0,0)");
grd.addColorStop(0.46, "rgba(255,255,255,0.5)");
grd.addColorStop(1, "rgba(0,0,0,0)");
context.strokeStyle = grd;
context.stroke();
//
      context.beginPath();
      context.moveTo(150, 800);
      context.lineTo(150, 380);
      context.lineTo(155, 372);
      context.lineTo(160, 380);
      context.lineTo(160, 800);
      context.lineJoin = 'miter';
      context.fillStyle = "rgb(0,0,0)";
      context.fill();
      context.lineWidth = 50;
      context.strokeStyle = "black";
      context.stroke();
context.beginPath();
context.moveTo(133, 378);
context.lineTo(133, 600);
context.lineWidth = 7;
var grd = context.createLinearGradient(133, 378, 133, 600);
grd.addColorStop(0, "rgb(255,255,255)");
grd.addColorStop(0.8, "rgba(0,0,0,0)");
grd.addColorStop(1, "rgba(0,0,0,0)");
context.strokeStyle = grd;
context.stroke();
context.beginPath();
context.moveTo(144, 378);
context.lineTo(144, 600);
context.lineWidth = 7;
var grd = context.createLinearGradient(144, 378, 144, 600);
grd.addColorStop(0, "rgba(255,255,255,0.5)");
grd.addColorStop(0.5, "rgba(0,0,0,0)");
grd.addColorStop(1, "rgba(0,0,0,0)");
context.strokeStyle = grd;
context.stroke();
//
context.beginPath();
context.moveTo(200, 420);
context.lineTo(200, 800);
context.lineWidth = 50;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();
context.beginPath();
context.moveTo(193, 425);
context.lineTo(193, 800);
context.lineWidth = 7;
var grd = context.createLinearGradient(193, 425, 193, 600);
grd.addColorStop(0, "rgb(255,255,255)");
grd.addColorStop(0.15, "rgba(0,0,0,0)");
grd.addColorStop(0.16, "rgba(255,255,255,0.5)");
grd.addColorStop(0.3, "rgba(0,0,0,0)");
grd.addColorStop(0.36, "rgba(255,255,255,0.5)");
grd.addColorStop(1, "rgba(0,0,0,0)");
context.strokeStyle = grd;
context.stroke();
//
context.beginPath();
context.moveTo(255, 420);
context.lineTo(255, 800);
context.lineWidth = 50;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();
context.beginPath();
context.moveTo(250, 425);
context.lineTo(250, 600);
context.lineWidth = 7;
var grd = context.createLinearGradient(250, 425, 250, 600);
grd.addColorStop(0, "rgba(255,255,255,0.8)");
grd.addColorStop(0.15, "rgba(0,0,0,0)");
grd.addColorStop(0.16, "rgba(255,255,255,0.5)");
grd.addColorStop(0.8, "rgba(0,0,0,0)");
grd.addColorStop(1, "rgba(0,0,0,0)");
context.strokeStyle = grd;
context.stroke();
///////////ARCS
context.beginPath();
context.moveTo(280, 545);
context.quadraticCurveTo(407.5, 575, 570, 495);
context.lineWidth = 5;
context.strokeStyle = 'black';
context.stroke();
///
context.beginPath();
context.moveTo(280, 545);
context.quadraticCurveTo(407.5, 575, 570, 495);
context.lineWidth = 5;
var grd = context.createLinearGradient(280, 0, 570, 0);
grd.addColorStop(0, "rgba(255,255,255,0.8)");
grd.addColorStop(1, "rgba(255,255,255,0)");
context.strokeStyle = grd;
context.stroke();
///
context.beginPath();
context.moveTo(570, 495);
context.quadraticCurveTo(690, 575, 800, 545);
context.lineWidth = 5;
context.strokeStyle = 'black';
context.stroke();
///
context.beginPath();
context.moveTo(570, 495);
context.quadraticCurveTo(690, 575, 800, 545);
context.lineWidth = 5;
var grd = context.createLinearGradient(570, 0, 800, 0);
grd.addColorStop(0, "rgba(255,255,255,0.6)");
grd.addColorStop(1, "rgba(255,255,255,0)");
context.strokeStyle = grd;
context.stroke();
//////////PILLARS
context.beginPath();
context.moveTo(560, 800);
context.lineTo(560, 515);
context.lineTo(570, 495);
context.lineTo(580, 515);
context.lineTo(580, 800);
context.lineJoin = 'bevel';
context.fillStyle = "rgb(0,0,0)";
context.lineWidth = 13;
context.fill();
var grd = context.createLinearGradient(250, 515, 250, 600);
grd.addColorStop(0, "rgb(255,255,255)");
grd.addColorStop(0.6, "rgba(0,0,0,0)");
grd.addColorStop(1, "rgba(0,0,0,0)");
context.strokeStyle = grd;
context.stroke();

//// <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< END HERE

</script>
</body>
</html>
Posted by at No comments:

Wednesday, September 4, 2013

Practice Canvas

So, here's a late upload of my practice canvas. There's nothing in particular going on, it's literally just "practice" hence the title. I started off with the stars, trying to recreate what I did during our last class, then I attempted making a cloud which turned out to look like something off of Dragon Ball Z, thennn I made an awkward heart. I tried the gradient fill with the heart, but it's not as distinct as I hoped it would've turned out to be. As for the idea of the final canvas, that's still pending...
Posted by at No comments:
Subscribe to: Posts (Atom)