Tuesday, April 14, 2015
Photoshop Tutorials
Here are some links that I found helpful learning Photoshop...
Five Easy Photo Retouching Tips and Tricks
Adobe Photoshop CS6 Tutorial for Beginners (Part 1)
PhotoShop Tutorial Basic Tools
Logo Project
I was inspired to make my logo the way it is because of where I live. I made the palm tree at the end because I absolutely love living in Florida and I am grateful I am able to at ten school here. I put the surfboard in the background because I enjoy going to the beach and surfing is something I would like to learn how to do in the future. I also love the color blue and I thought this shade would complement the logo as a whole. 
Wednesday, March 4, 2015
Yin-Yang Illustration Assignment #2
I was inspired to do a Yin-Yang sign for this project from my newest tattoo. I love the shape of the object and the balance of the black and the white. I chose a quote that has to do with balance to show that the object, is in fact about balance. I also like the gradient background of different tones of black and white.
Self Portrait
This project was definitely interesting, but difficult. I found it most challenging to get the portrait to actually look like me. Everything was very tedious and important in the overall picture. My favorite part of my final portrait above is the background. The original picture has a tie dye background, which I believe I was able to make come to life using Illustrator.
Thursday, February 12, 2015
Project #1
This project was definitely a learning experience which I found to be difficult. Although it was interesting learning coding, it was very time consuming. I used many rectangle codes, which allowed me to make squares on my project which made up most of it. By understanding the code a little better throughout the project, it became easier to navigate and place object at the right x and y coordinates.I believe this project was successful but definitely could have had more detail to it. I thought it was interesting how I was able to make a sunset reflect off of the windows in the piece. Here is the code to this project:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body>
</body>
</html>
<strong>
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
var x=200;
var y=50;
var width = 300
var height= 500;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 2;
//context.fillStyle = 'rgb(0,255,0)';
context.strokeStyle = 'rgb(0,0,100)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
// starting color
grd.addColorStop(0, "rgb(173,216,230)");
//intermediate color
grd.addColorStop(0.5, "rgb(173,216,230)");
// ending color
grd.addColorStop(1, "rgb(241,179,33)");
context.fillStyle = grd;
context.fill();
context.fill();
context.stroke();
//context.rect(x, y, width, height); // top left corner x and y coordinates, width and height
// for a square width = height , the width and the height have the same value
var centerX = canvas.width / 2.1;
var centerY = canvas.height / 6;
var radius = 45;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
//context.fillStyle = "red";
var grd=context.createRadialGradient(centerX, centerY, 10, centerX, centerY, 50);
grd.addColorStop(0, "rgb(255, 216, 1)");
grd.addColorStop(1, "rgb(255, 216, 1)");
context.fillStyle = grd; // add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
// starting color
grd.addColorStop(0, "rgb(250,237,61)");
//intermediate color
grd.addColorStop(0.5, "rgb(255,158,54)");
// ending color
grd.addColorStop(1, "rgb(255,132,0)");
context.fillStyle = grd;
context.fill();
context.lineWidth = 3;
// x and y coordinates of the tracing circle
var circlecenterX = canvas.width / 2; // x coordinate
var circlecenterY = canvas.height / 2; // y coordinate
// radius of the tracing circle
var radius = 300;
// Math.PI is HALF the circle, 2*Math.PI is the full circle
// use a number between 0 and 2 to declare the starting and ending angle
var startAngle = 1.1 * Math.PI;
var endAngle = 1.9 * Math.PI;
// draw the arc clockwise or counterclockwise
var counterClockwise = false; // if set to true it draws the complimentary arc
// draw the arc
//context.arc(circlecenterX, circlecenterY, radius, startAngle, endAngle, counterClockwise);
var x=300;
var y=328;
var width = 100
var height= 220;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 2;
//context.fillStyle = 'rgb(0,255,0)';
context.strokeStyle = 'rgb(140,85,85)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
// starting color
grd.addColorStop(0, "rgb(140,85,85)");
//intermediate color
grd.addColorStop(0.5, "rgb(140,85,85)");
// ending color
grd.addColorStop(1, "rgb(140,85,85)");
context.fillStyle = grd;
context.fill();
context.fill();
context.stroke();
var x=337;
var y=500;
var width = 30
var height= 50;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 2;
//context.fillStyle = 'rgb(0,255,0)';
context.strokeStyle = 'rgb(99,63,63)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
// starting color
grd.addColorStop(0, "rgb(99,63,63)");
//intermediate color
grd.addColorStop(0.5, "rgb(99,63,63)");
// ending color
grd.addColorStop(1, "rgb(99,63,63)");
context.fillStyle = grd;
context.fill();
context.fill();
context.stroke();
//context.rect(x, y, width, height); // top left corner x and y coordinates, width and height
// for a square width = height , the width and the height have the same value
//context.rect(x, y, width, height); // top left corner x and y coordinates, width and height
// for a square width = height , the width and the height have the same value
var centerX = canvas.width / 1.67;
var centerY = canvas.height / 1.52;
var radius = 1;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
//context.fillStyle = "red";
var grd=context.createRadialGradient(centerX, centerY, 10, centerX, centerY, 50);
grd.addColorStop(0, "rgb(0,0,0)");
grd.addColorStop(1, "rgb(255,0,0)");
context.fillStyle = grd;
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();
var x=310;
var y=350;
var width = 25
var height= 25;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = .5;
//context.fillStyle = 'rgb(0,255,0)';
context.strokeStyle = 'rgb(202,140,140)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
// starting color
grd.addColorStop(0, "rgb(202,140,140)");
//intermediate color
grd.addColorStop(0.5, "rgb(202,140,140)");
// ending color
grd.addColorStop(1, "rgb(1202,140,140)");
context.fillStyle = grd;
context.fill();
context.fill();
context.stroke();
//context.rect(x, y, width, height); // top left corner x and y coordinates, width and height
// for a square width = height , the width and the height have the same value
var x=360;
var y=350;
var width = 25
var height= 25;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = .5;
//context.fillStyle = 'rgb(0,255,0)';
context.strokeStyle = 'rgb(202,140,140)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
// starting color
grd.addColorStop(0, "rgb(202,140,140)");
//intermediate color
grd.addColorStop(0.5, "rgb(202,140,140)");
// ending color
grd.addColorStop(1, "rgb(1202,140,140)");
context.fillStyle = grd;
context.fill();
context.fill();
context.stroke();
//context.rect(x, y, width, height); // top left corner x and y coordinates, width and height
// for a square width = height , the width and the height have the same value
var x=310;
var y=400;
var width = 25
var height= 25;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = .5;
//context.fillStyle = 'rgb(0,255,0)';
context.strokeStyle = 'rgb(202,140,140)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
// starting color
grd.addColorStop(0, "rgb(202,140,140)");
//intermediate color
grd.addColorStop(0.5, "rgb(202,140,140)");
// ending color
grd.addColorStop(1, "rgb(1202,140,140)");
context.fillStyle = grd;
context.fill();
context.fill();
context.stroke();
//context.rect(x, y, width, height); // top left corner x and y coordinates, width and height
// for a square width = height , the width and the height have the same value
var x=310;
var y=450;
var width = 25
var height= 25;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = .5;
//context.fillStyle = 'rgb(0,255,0)';
context.strokeStyle = 'rgb(202,140,140)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
// starting color
grd.addColorStop(0, "rgb(202,140,140)");
//intermediate color
grd.addColorStop(0.5, "rgb(202,140,140)");
// ending color
grd.addColorStop(1, "rgb(1202,140,140)");
context.fillStyle = grd;
context.fill();
context.fill();
context.stroke();
//context.rect(x, y, width, height); // top left corner x and y coordinates, width and height
// for a square width = height , the width and the height have the same value
var x=360;
var y=400;
var width = 25
var height= 25;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = .5;
//context.fillStyle = 'rgb(0,255,0)';
context.strokeStyle = 'rgb(202,140,140)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
// starting color
grd.addColorStop(0, "rgb(202,140,140)");
//intermediate color
grd.addColorStop(0.5, "rgb(202,140,140)");
// ending color
grd.addColorStop(1, "rgb(1202,140,140)");
context.fillStyle = grd;
context.fill();
context.fill();
context.stroke();
//context.rect(x, y, width, height); // top left corner x and y coordinates, width and height
// for a square width = height , the width and the height have the same value
var x=360;
var y=450;
var width = 25
var height= 25;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = .5;
//context.fillStyle = 'rgb(0,255,0)';
context.strokeStyle = 'rgb(202,140,140)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
// starting color
grd.addColorStop(0, "rgb(202,140,140)");
//intermediate color
grd.addColorStop(0.5, "rgb(202,140,140)");
// ending color
grd.addColorStop(1, "rgb(1202,140,140)");
context.fillStyle = grd;
context.fill();
context.fill();
context.stroke();
//context.rect(x, y, width, height); // top left corner x and y coordinates, width and height
// for a square width = height , the width and the height have the same value
var x=200;
var y=494;
var width = 99
var height= 55;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 2;
//context.fillStyle = 'rgb(0,255,0)';
context.strokeStyle = 'rgb(95,58,58)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
// starting color
grd.addColorStop(0, "rgb(95,58,58)");
//intermediate color
grd.addColorStop(0.5, "rgb(95,58,58)");
// ending color
grd.addColorStop(1, "rgb(95,58,58)");
context.fillStyle = grd;
context.fill();
context.fill();
context.stroke();
var x=235;
var y=510;
var width = 30
var height= 40;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 2;
//context.fillStyle = 'rgb(0,255,0)';
context.strokeStyle = 'rgb(206,154,154)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
// starting color
grd.addColorStop(0, "rgb(206,154,154)");
//intermediate color
grd.addColorStop(0.5, "rgb(206,154,154)");
// ending color
grd.addColorStop(1, "rgb(206,154,154)");
context.fillStyle = grd;
context.fill();
context.fill();
context.stroke();
var centerX = canvas.width / 2.5;
var centerY = canvas.height / 1.5;
var radius = 1.5;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
//context.fillStyle = "red";
var grd=context.createRadialGradient(centerX, centerY, 10, centerX, centerY, .5);
grd.addColorStop(0, "rgb(0,0,0)");
grd.addColorStop(1, "rgb(0,0,0)");
context.fillStyle = grd;
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();
var centerX = canvas.width /2.33;
var centerY = canvas.height / 1.5;
var radius = 1.5;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
//context.fillStyle = "red";
var grd=context.createRadialGradient(centerX, centerY, 10, centerX, centerY, .5);
grd.addColorStop(0, "rgb(0,0,0)");
grd.addColorStop(1, "rgb(0,0,0)");
context.fillStyle = grd;
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();
//line
var x1 = 249;
var y1 = 550;
var x2 = 249;
var y2 = 510;
context.beginPath();
context.moveTo(x1,y1);
context.lineTo(x2,y2);
//Thickness
context.lineWidth = 1;
//Colors
context.strokeStyle = 'rgba(0,0,0,)';
//Rounding
context.lineCap = 'round';
context.stroke();
// begin custom shape
context.beginPath();
context.moveTo(350, 170);
context.bezierCurveTo(425, 150, 265, 250, 400, 185);
context.bezierCurveTo(475, 190, 450, 190, 450, 185);
context.bezierCurveTo(560, 175, 380, 160, 470, 160);
context.bezierCurveTo(550, 102.5, 375, 110, 385, 150);
// complete custom shape
context.fillStyle = "rgb(241, 245,255)";
context.fill();
context.closePath();
context.lineWidth = 5;
context.beginPath();
context.moveTo(250, 400);
context.lineTo(300, 493);
context.lineTo(200, 493);
context.lineTo(250, 400);
context.lineWidth = 2;
context.fillStyle = "rgb(132,98,59)";
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
// starting color
grd.addColorStop(0, "rgb(174,132,85)");
//intermediate color
grd.addColorStop(0.5, "rgb(229,186,137)");
// ending color
grd.addColorStop(1, "rgb(174,132,85)");
context.fillStyle = grd;
context.fill();
context.fill();
context.closePath();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="600" height="800"></canvas>
</body>
</html></strong>
Subscribe to:
Posts (Atom)