 |
| 75 colors at 236k |
 |
| 64 Colors at 216k |
 |
| 4 colors at 74k |
 |
| 16 colors 122k |
Monday, November 16, 2015
Thursday, November 5, 2015
Thursday, October 29, 2015
Poster Project
I did my poster on body modifications because I've always liked how they looked. Just because someone decides to add something to themselves doesn't mean they need to be labeled differently. Majority of the modifications are drawn on to make the overall idea stand out more.
Friday, October 16, 2015
Complete 5 logo's
Food Artist
Detective
Photographer
I've always loved photography so I of course had to make a photographer business card! This is the only logo that I did not use my initials in some way to create the shapes. Although the three legs of the tripod do some what form the outline of an M (unintentional).
Apparel Associate
This logo was inspired by my current job at Dicks Sporting Goods, where I work in the apparel department. Professor Santiago said this was very 80's, which he was 100% correct. I wanted to go with the softer colors, but also very different colors. This logo was surprisingly difficult for me to make.It took me awhile to make the M and I look the way I wanted it to. The hanger was almost impossible to make look realistic so I used sharper edges on the hanger and added shapes to the front and back of the cards to tie it all together.
Web Designer Logo
This was the last logo that I created. I wasn't quite sure what I wanted to do with it, but ultimately ended up making it a web designer business card. The logo was created using the initials of my name, MNI. I originally was going to use this logo for a snowboarding business card. I could use the M as mountains and the the dot from my I as the sun, but I felt this logo had a more sophisticated look to it so I stuck with the Web Designer. I really like the simple look of this one.
Brainstorming and drawing my logo's
Thursday, October 15, 2015
Tuesday, September 29, 2015
Final Canvas Project ; Polaroid
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> here goes the title of your project </title>
<style type="text/css">
body,td,th {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
color: #000;
}
body {
background-color: #FFF;
}
#myCanvas { border: rgb(102,0,255) medium dashed; }
</style>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
//// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> START HERE
var background = context.createLinearGradient(0,0, canvas.width, canvas.height);
context.beginPath();
background.addColorStop(0,"rgb(204,255,209)");
background.addColorStop(0.25, "rgb(204,255,255)");
background.addColorStop(0.5,"rgb(204,204,255)");
background.addColorStop(1, "rgb(229,204,255)");
background.addColorStop(0.75,"rgb(255,255,204)");
context.rect(0,0, canvas.width, canvas.height);
context.fillStyle = background;
context.fill();
context.closePath();
///////////hair
var hair = context.createLinearGradient(0,0, canvas.width, canvas.height);
hair.addColorStop(0.5,"rgb(92,26,26)");
hair.addColorStop(0.20,"rgb(153,0,0)");
hair.addColorStop(0.15,"rgb(102,51,0)");
context.beginPath();
context.moveTo(150,270);
context.quadraticCurveTo(100,100,350,40);
context.quadraticCurveTo(600,100,550,270);
context.quadraticCurveTo(350,100,150,270);
context.fillStyle = hair;
context.fill();
context.stroke();
context.closePath();
//lines on hair
context.beginPath();
context.moveTo(160,250);
context.bezierCurveTo(100,100,300,100,300,50);
context.stroke();
context.closePath();
////
context.beginPath();
context.moveTo(170,250);
context.bezierCurveTo(110,110,310,110,310,60);
context.stroke();
context.closePath();
////
context.beginPath();
context.moveTo(180,240);
context.bezierCurveTo(120,120,320,120,320,70);
context.stroke();
context.closePath();
///
////
context.beginPath();
context.moveTo(190,230);
context.bezierCurveTo(130,130,330,130,330,60);
context.stroke();
context.closePath();
///
context.beginPath();
context.moveTo(190,230);
context.bezierCurveTo(130,130,330,130,330,60);
context.stroke();
context.closePath();
///
context.beginPath();
context.moveTo(200,220);
context.bezierCurveTo(140,140,340,140,340,70);
context.stroke();
context.closePath();
///
context.beginPath();
context.moveTo(200,230);
context.bezierCurveTo(150,150,350,150,350,80);
context.stroke();
context.closePath();
////
context.beginPath();
context.moveTo(200,200);
context.bezierCurveTo(200,150,350,150,350,80);
context.stroke();
context.closePath();
////
context.beginPath();
context.moveTo(200,230);
context.bezierCurveTo(200,160,360,160,360,90);
context.stroke();
context.closePath();
///
context.beginPath();
context.moveTo(240,230);
context.bezierCurveTo(200,170,360,170,360,100);
context.stroke();
context.closePath();
////
context.beginPath();
context.moveTo(260,230);
context.bezierCurveTo(200,180,360,180,360,110);
context.stroke();
context.closePath();
//
context.beginPath();
context.moveTo(290,230);
context.bezierCurveTo(200,190,360,190,360,110);
context.stroke();
context.closePath();
///OTHER DIRECTION
context.beginPath();
context.moveTo(550,250);
context.bezierCurveTo(550,150,550,150,450,80);
context.stroke();
context.closePath();
////
context.beginPath();
context.moveTo(540,250);
context.bezierCurveTo(540,140,540,140,440,70);
context.stroke();
context.closePath();
////
context.beginPath();
context.moveTo(530,250);
context.bezierCurveTo(530,130,530,140,430,80);
context.stroke();
context.closePath();
///////
context.beginPath();
context.moveTo(520,240);
context.bezierCurveTo(520,130,520,140,420,90);
context.stroke();
context.closePath();
///
///////
context.beginPath();
context.moveTo(510,230);
context.bezierCurveTo(510,130,510,150,400,80);
context.stroke();
context.closePath();
/////
context.beginPath();
context.moveTo(500,220);
context.bezierCurveTo(500,130,500,150,400,80);
context.stroke();
context.closePath();
////
context.beginPath();
context.moveTo(490,210);
context.bezierCurveTo(490,130,490,150,410,80);
context.stroke();
context.closePath();
///
context.beginPath();
context.moveTo(480,200);
context.bezierCurveTo(480,150,480,160,400,80);
context.stroke();
context.closePath();
///
context.beginPath();
context.moveTo(470,200);
context.bezierCurveTo(470,150,450,160,380,80);
context.stroke();
context.closePath();
///
context.beginPath();
context.moveTo(460,200);
context.bezierCurveTo(470,150,440,160,380,80);
context.stroke();
context.closePath();
//
context.beginPath();
context.moveTo(450,200);
context.bezierCurveTo(460,150,430,160,370,80);
context.stroke();
context.closePath();
//
context.beginPath();
context.moveTo(440,200);
context.bezierCurveTo(450,150,420,160,360,80);
context.stroke();
context.closePath();
///
context.beginPath();
context.moveTo(430,200);
context.bezierCurveTo(440,150,410,160,360,80);
context.stroke();
context.closePath();
//
context.beginPath();
context.moveTo(420,190);
context.bezierCurveTo(430,150,400,160,360,80);
context.stroke();
context.closePath();
//
context.beginPath();
context.moveTo(410,190);
context.bezierCurveTo(420,150,390,160,360,100);
context.stroke();
context.closePath();
//
context.beginPath();
context.moveTo(400,190);
context.bezierCurveTo(400,150,370,160,360,100);
context.stroke();
context.closePath();
//
context.beginPath();
context.moveTo(390,190);
context.bezierCurveTo(390,150,350,160,360,100);
context.stroke();
context.closePath();
//
context.beginPath();
context.moveTo(370,180);
context.bezierCurveTo(380,150,340,160,365,100);
context.stroke();
context.closePath();
//
context.beginPath();
context.moveTo(350,180);
context.bezierCurveTo(380,150,340,160,365,100);
context.stroke();
context.closePath();
//
context.beginPath();
context.moveTo(330,180);
context.bezierCurveTo(370,150,340,160,365,100);
context.stroke();
context.closePath();
//
context.beginPath();
context.moveTo(310,180);
context.bezierCurveTo(360,150,340,160,365,100);
context.stroke();
context.closePath();
///BUUUUNNNN
var hair = context.createLinearGradient(0,0, canvas.width, canvas.height);
hair.addColorStop(0.5,"rgb(92,26,26)");
hair.addColorStop(0.20,"rgb(153,0,0)");
hair.addColorStop(0.15,"rgb(102,51,0)");
context.beginPath();
context.moveTo(250,80);
context.quadraticCurveTo(275,-20,350,0);
context.quadraticCurveTo(400,-20,440,75);
context.fillStyle = hair;
context.fill();
context.stroke();
context.closePath();
///band around bun
context.beginPath();
context.moveTo (255,70);
context.lineTo(440,70);
context.lineTo(440,80);
context.lineTo(250,80);
context.lineTo(255,70);
context.fillStyle = "black";
context.fill();
context.stroke();
context.closePath();
///face
context.beginPath();
context.moveTo(150,270);
context.quadraticCurveTo(250,550,400,500);
context.quadraticCurveTo(490,430,550,270);
context.quadraticCurveTo(350,100,150,270);
context.fillStyle = "rgb(255,204,153)";
context.fill();
context.stroke();
context.closePath();
//body of camera//
var camerabody = context.createLinearGradient(0,0, canvas.width, canvas.height);
camerabody.addColorStop(0.25,"rgb(255,255,255)");
camerabody.addColorStop(0.75,"rgb(255,255,153)");
camerabody.addColorStop(0.25,"rgb(240,174,174)");
context.beginPath();
context.moveTo(200,200);
context.lineTo(500,200);
context.lineTo(500,420);
context.lineTo(510,430);
context.lineTo(190,430);
context.lineTo(200,420);
context.lineTo(200,200);
context.fillStyle = camerabody;
context.fill();
context.stroke();
context.closePath();
//bottom half of camera
context.beginPath();
context.moveTo(190,430);
context.lineTo(215,500);
context.lineTo(490,500);
context.lineTo(510,430);
context.lineTo(190,430);
context.fillStyle = "black";
context.fill();
context.stroke();
context.closePath();
//lense outer
context.beginPath();
context.arc(350,310,80,0,Math.PI,true);
context.fillStyle = "black";
context.fill();
context.stroke();
context.closePath();
context.beginPath();
context.arc(350,310,80,0,Math.PI,false);
context.fillStyle = "black";
context.fill();
context.stroke();
context.closePath();
//lense middle
context.beginPath();
context.arc(350,310,60,0,Math.PI,true);
context.fillStyle = "rgb(128,128,128)";
context.fill();
context.stroke();
context.closePath();
context.beginPath();
context.arc(350,310,60,0,Math.PI,false);
context.fillStyle = "rgb(128,128,128)";
context.fill();
context.stroke();
context.closePath();
//lense smallest
var camerabody = context.createLinearGradient(0,0, canvas.width, canvas.height);
camerabody.addColorStop(0.5,"rgb(192,192,192)");
camerabody.addColorStop(0.25,"rgb(0,153,153)");
camerabody.addColorStop(0.75,"rgb(224,224,224)");
context.beginPath();
context.arc(350,310,40,0,Math.PI,true);
context.fillStyle = camerabody;
context.fill();
context.stroke();
context.closePath();
var camerabody = context.createLinearGradient(0,0, canvas.width, canvas.height);
camerabody.addColorStop(0.5,"rgb(192,192,192)");
camerabody.addColorStop(0.25,"rgb(0,153,153)");
camerabody.addColorStop(0.75,"rgb(224,224,224)");
context.beginPath();
context.arc(350,310,40,0,Math.PI,false);
context.fillStyle = camerabody;
context.fill();
context.stroke();
context.closePath();
///bottom film strip
context.beginPath();
context.moveTo(215,460);
context.lineTo(485,460);
context.lineTo(485,480);
context.lineTo(215,480);
context.lineTo(215,460);
context.fillStyle = "rgb(91,83,81)";
context.fill();
context.stroke();
context.closePath();
//button
context.beginPath();
context.arc(250,390,20,0,Math.PI,true);
context.fillStyle = "red";
context.fill();
context.stroke();
context.closePath();
context.beginPath();
context.arc(250,390,20,0,Math.PI,false);
context.fillStyle = "red";
context.fill();
context.stroke();
context.closePath();
///peep hole
var peephole = context.createLinearGradient(5,11, canvas.width, canvas.height);
peephole.addColorStop(1,"rgb(255,255,153)");
peephole.addColorStop(0.25,"rgb(192,192,192)");
peephole.addColorStop(0.25,"rgb(255,255,255)");
context.beginPath();
context.moveTo(420,210);
context.lineTo(490,210);
context.lineTo(490,260);
context.lineTo(420,260);
context.lineTo(420,210);
context.fillStyle = peephole;
context.fill();
context.stroke();
context.closePath();
///middle color line 1 yellow
context.beginPath();
context.moveTo(350,390);
context.lineTo(350,430);
context.lineTo(360,430);
context.lineTo(355,390);
context.lineTo(360,390);
context.fillStyle = "yellow";
context.fill();
context.stroke();
context.closePath();
///middle color line 2 blue
context.beginPath();
context.moveTo(355,390);
context.lineTo(355,430);
context.lineTo(360,430);
context.lineTo(360,390);
context.lineTo(355,390);
context.fillStyle = "rgb(102,255,255)";
context.fill();
context.stroke();
context.closePath();
//middle color line 3 pink
context.beginPath();
context.moveTo(345,390);
context.lineTo(345,430);
context.lineTo(350,430);
context.lineTo(350,390);
context.lineTo(345,390);
context.fillStyle = "pink";
context.fill();
context.stroke();
context.closePath();
//textttttt
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.font = 'bold 10pt Tahoma';
context.fillText('Polaroid Land Camera', 290,450);
//neck
context.beginPath();
context.moveTo(310,500);
context.lineTo(310,550);
context.lineTo(350,600);
context.lineTo(395,550);
context.lineTo(395,500);
context.quadraticCurveTo(370,510,310,500);
context.fillStyle = "rgb(255,204,153)";
context.fill();
context.stroke();
context.closePath();
//shirt
context.beginPath();
context.moveTo(310,550);
context.lineTo(150,570);
context.lineTo(100,600);
context.lineTo(600,600);
context.lineTo(560,570);
context.lineTo(395,550);
context.lineTo(350,600);
context.lineTo(310,550);
context.fillStyle = "rgb(204,255,255)";
context.fill();
context.stroke();
context.closePath();
///tripod
context.beginPath();
context.moveTo(340,500);
context.lineTo(340,600);
context.lineTo(360,600);
context.lineTo(360,500);
context.lineTo(340,500);
context.fillStyle = "black";
context.fill();
context.stroke();
context.closePath();
//polaroid
context.beginPath();
context.moveTo(225,460);
context.quadraticCurveTo(250,500,250,550);
context.lineTo(480,550);
context.quadraticCurveTo(490,500,460,460);
context.lineTo(225,460);
context.fillStyle = "white";
context.fill();
context.stroke();
context.closePath();
//inner polaroid
context.beginPath();
context.moveTo(240,460);
context.quadraticCurveTo(270,500,265,530);
context.lineTo(470,530);
context.quadraticCurveTo(470,500,450,460);
context.lineTo(240,460);
context.fillStyle = "grey";
context.fill();
context.stroke();
context.closePath();
//little polaroid 1
context.beginPath();
context.moveTo(550,100);
context.lineTo(600,200);
context.lineTo(710,190);
context.lineTo(660,95);
context.lineTo(550,100);
context.fillStyle = "rgb(255,255,153)";
context.fill();
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(570,110);
context.lineTo(600,170);
context.lineTo(685,165);
context.lineTo(655,105);
context.lineTo(570,110);
context.fillStyle = "rgb(224,224,224)";
context.fill();
context.stroke();
context.closePath();
////little poloroid 2////
context.beginPath();
context.moveTo(600,300);
context.lineTo(750,330);
context.lineTo(720,460);
context.lineTo(570,430);
context.lineTo(600,300);
context.fillStyle = "rgb(153,204,255)";
context.fill();
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(610,320);
context.lineTo(730,345);
context.lineTo(715,410);
context.lineTo(595,387);
context.lineTo(610,320);
context.fillStyle = "rgb(224,224,224)";
context.fill();
context.stroke();
context.closePath();
//// <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< END HERE
</script>
</body>
</html>
Thursday, September 24, 2015
Thursday, September 17, 2015
Thursday, September 10, 2015
FIRST CANVAS EVER!!!
This is my first canvas object drawing ever!!!!
//// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> START HERE
var background = context.createLinearGradient(0,0, canvas.width, canvas.height);
context.beginPath();
background.addColorStop(0,"blue");
background.addColorStop(0.25, "pink");
background.addColorStop(0.5,"yellow");
background.addColorStop(0.75, "pink");
background.addColorStop(1,"blue");
context.rect(0,0, canvas.width, canvas.height);
context.fillStyle = background;
context.fill();
context.closePath();
var house = context.createLinearGradient(0,0, canvas.width, canvas.height);
///// big square of house
context.beginPath();
context.moveTo(150,200);
context.lineTo(450,200);
context.lineTo(450,600);
context.lineTo(150,600);
context.lineTo(150,200);
context.lineWidth = 10;
context.strokeStyle = "rgb(0,0,0)"
context.lineCap = "round";
context.stroke();
house.addColorStop(0.25,"blue");
house.addColorStop(0.5,"pink");
house.addColorStop(0.75,"yellow");
context.fillStyle = house;
context.fill();
context.closePath();
///// Triangle Roof
var roof = context.createLinearGradient(0,0, canvas.width, canvas.height);
context.beginPath();
context.moveTo(150,200);
context.lineTo(300,50);
context.lineTo(450,200);
context.lineTo(150,200);
context.lineWidth = 10;
context.strokeStyle = "rgb(0,0,0)"
context.lineCap = "round";
context.stroke();
roof.addColorStop(0.25,"rgb(240,16,212)");
roof.addColorStop(0.5,"rgb(36,240,220)");
context.fillStyle = roof;
context.fill();
context.closePath();
////// Door of House
var door = context.createLinearGradient(0,0, canvas.width, canvas.height);
context.beginPath();
context.moveTo(250,450);
context.lineTo(350,450);
context.lineTo(350,600);
context.lineTo(250,600);
context.lineTo(250,450);
context.lineWidth = 5;
context.strokeStyle = "rgb(0,0,0)"
context.stroke();
door.addColorStop(0.25,"rgb(210,111,104)");
door.addColorStop(0.5,"rgb(220,230,127)");
door.addColorStop(1,"rgb(242,86,128)");
door.addColorStop(0.7,"rgb(46,235,203)");
context.fillStyle = door;
context.fill();
context.closePath();
//// first window
var happy = context.createLinearGradient(0,0, canvas.width, canvas.height);
context.beginPath();
context.moveTo(175,250);
context.lineTo(275,250);
context.lineTo(275,350);
context.lineTo(175,350);
context.lineTo(175,250);
context.lineWidth = 3;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();
happy.addColorStop(0.5,"yellow");
happy.addColorStop(0.25,"rgb(232,14,87)");
context.fillStyle = happy;
context.fill();
context.closePath();
///// window 2
var happy = context.createLinearGradient(0,0, canvas.width, canvas.height);
context.beginPath();
context.moveTo(325,250);
context.lineTo(425,250);
context.lineTo(425,350);
context.lineTo(325,350);
context.lineTo(325,250);
context.lineWidth = 3;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();
happy.addColorStop(0.3,"yellow");
happy.addColorStop(0.8,"rgb(232,14,87)");
context.fillStyle = happy;
context.fill();
context.closePath();
////attempt at a sun face//
var sunface = context.createLinearGradient(0,0, canvas.width, canvas.height);
context.beginPath();
context.arc(650,150,100,0,Math.PI,true);
context.stroke();
sunface.addColorStop(0.3,"yellow");
sunface.addColorStop(0.8,"rgb(232,14,87)");
context.fillStyle = sunface;
context.fill();
context.closePath();
////bottom half
var smile = context.createLinearGradient(0,0, canvas.width, canvas.height);
context.beginPath();
context.arc(650,150,100,0,Math.PI,false);
context.stroke();
smile.addColorStop(0.3,"yellow");
smile.addColorStop(0.8,"rgb(232,14,87)");
context.fillStyle = smile;
context.fill();
context.closePath();
/////smiley
context.beginPath();
context.arc(650,140,75,0,Math.PI,false);
context.stroke();
context.closePath();
//left eye
var eye = context.createLinearGradient(0,0, canvas.width, canvas.height);
context.beginPath();
context.arc(610,110,10,0,Math.PI,true);
context.stroke();
eye.addColorStop(0.3,"green");
eye.addColorStop(0.8,"blue");
context.fillStyle = eye;
context.fill();
context.closePath();
var eye = context.createLinearGradient(0,0, canvas.width, canvas.height);
context.beginPath();
context.arc(610,110,10,0,Math.PI,false);
context.stroke();
eye.addColorStop(0.3,"green");
eye.addColorStop(0.8,"blue");
context.fillStyle = yippee;
context.fill();
context.closePath();
///right eye
var eye = context.createLinearGradient(0,0, canvas.width, canvas.height);
context.beginPath();
context.arc(685,110,10,0,Math.PI,true);
context.stroke();
eye.addColorStop(0.3,"yellow");
eye.addColorStop(0.8,"blue");
context.fillStyle = eye;
context.fill();
context.closePath();
var yippee = context.createLinearGradient(0,0, canvas.width, canvas.height);
context.beginPath();
context.arc(685,110,10,0,Math.PI,false);
context.stroke();
yippee.addColorStop(0.3,"yellow");
yippee.addColorStop(0.8,"blue");
context.fillStyle = yippee;
context.fill();
context.closePath();
//// <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< END HERE
Monday, August 31, 2015
I'm Molly, and I'm a sophomore at The University of Tampa, and I'm majoring in criminology. My major has always been a huge part of my interests growing up, but I've always had a passion for graphic design and photography. Initially I was pretty intimidated by the syllabus and the workload, but after we went through some of the projects we will be doing throughout the semester, I became super excited! I am looking forward to learning new skills in the world of graphic art !
Subscribe to:
Posts (Atom)