Wednesday, April 29, 2015
Tuesday, April 7, 2015
Monday, April 6, 2015
Custom Graphic
For my custom graphic I decided to create a graffiti portrait. For the background I imported an image of a brick wall. I then imported a picture of twiggy, changed it to black and white, increased the contrast, and then used the quick selection tool to select all of the black areas. I copied and pasted that onto the brick wall background. I then used the brush tool to create designs that looked like spray paint, and lowered the opacity so the brick wall is still somewhat visible behind the designs. The brush pattern I created is the paint spatters I scattered around my graphic. I had fun and enjoyed doing this project.
Tuesday, March 31, 2015
Self Insertion
For this self insertion project I chose to insert myself into the concert Coachella. What I felt I had to focus on most was the color of myself compared to the image I was inserting myself in. The Coachella image has a green and faded filter on it so I tried my best to match the color from the image of myself that color, and I think it blends well. I had fun with this project and even though this was my first attempt working with photoshop I am looking forward to working more with this program.
Tuesday, March 24, 2015
Project 2 ASCII
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
///sky////
context.beginPath();
context.rect(100, 10, 600, 400);
context.fillStyle = '#A9E2F3';
context.fill();
context.lineWidth = 1;
// create radial gradient
var grd = context.createRadialGradient(300, 250, 100, 238, 300, 300);
// light blue
grd.addColorStop(0, '#FBF6D9');
// dark blue
grd.addColorStop(1, '#FFA62F');
context.fillStyle = grd;
context.fill()
context.strokeStyle = 'black';
context.stroke();
/////island////
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(500, 250);
context.quadraticCurveTo(500, 220, 550, 250);
context.fillStyle = '#347235';
context.fill();
context.lineWidth = 2;
// line color
context.strokeStyle = '#347235';
context.stroke();
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(540, 250);
context.quadraticCurveTo(550, 220, 580, 250);
context.fillStyle = '#347235';
context.fill();
context.lineWidth = 2;
// line color
context.strokeStyle = '#347235';
context.stroke();
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(580, 250);
context.quadraticCurveTo(580, 220, 610, 250);
context.fillStyle = '#347235';
context.fill();
context.lineWidth = 2;
// line color
context.strokeStyle = '#347235';
context.stroke();
//////sun/////
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2.7;
var centerY = canvas.height / 2.5;
var radius = 70;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = '#FFCD2B';
context.fill();
context.lineWidth = 0;
context.strokeStyle = '#FFCD2B';
context.stroke();
////sand/////
context.beginPath();
context.rect(100, 250, 600, 200);
context.fillStyle = '#F1ECCF';
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
///cloud///
context.beginPath();
context.moveTo(170, 80);
context.bezierCurveTo(90, 100, 130, 150, 230, 150);
context.bezierCurveTo(150, 180, 320, 150, 340, 150);
context.bezierCurveTo(420, 150, 420, 120, 390, 100);
context.bezierCurveTo(430, 40, 370, 30, 340, 50);
context.bezierCurveTo(320, 5, 250, 20, 250, 50);
context.bezierCurveTo(200, 5, 150, 20, 170, 80);
// complete custom shape
context.closePath();
context.fillStyle = '#FFE5B4';
context.fill();
context.lineWidth = 0;
context.strokeStyle = '#FFE5B4';
context.stroke();
///bird////
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x = canvas.width / 1.5;
var y = canvas.height / 4;
var radius = 10;
var startAngle = 1.1 * Math.PI;
var endAngle = 1.9 * Math.PI;
var counterClockwise = false;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 1;
// line color
context.strokeStyle = 'black';
context.stroke();
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x = canvas.width / 1.55;
var y = canvas.height / 4;
var radius = 10;
var startAngle = 1.1 * Math.PI;
var endAngle = 1.9 * Math.PI;
var counterClockwise = false;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 1;
// line color
context.strokeStyle = 'black';
context.stroke();
///bird2/////
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x = canvas.width / 1.4;
var y = canvas.height / 5.5;
var radius = 17;
var startAngle = 1.1 * Math.PI;
var endAngle = 1.9 * Math.PI;
var counterClockwise = false;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 1;
// line color
context.strokeStyle = 'black';
context.stroke();
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x = canvas.width / 1.48;
var y = canvas.height / 5.5;
var radius = 17;
var startAngle = 1.1 * Math.PI;
var endAngle = 1.9 * Math.PI;
var counterClockwise = false;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 1;
// line color
context.strokeStyle = 'black';
context.stroke();
//water///
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(100, 250);
// line 1
context.quadraticCurveTo(310, 470, 700, 250);
context.lineWidth = 2;
context.strokeStyle = '#C2DFFF';
context.stroke();
context.closePath();
context.lineWidth = 5;
// add linear gradient
var grd = context.createLinearGradient(150, 50, canvas.width, canvas.height);
// light blue
grd.addColorStop(0, '#C2DFFF');
// dark blue
grd.addColorStop(1, '#357EC7');
context.fillStyle = grd;
context.fill();
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.rect(0, 0, canvas.width, canvas.height);
////sunset reflection///
// round line cap (middle line)
context.beginPath();
context.moveTo(240, canvas.height / 2.3);
context.lineTo(canvas.width - 443, canvas.height / 2.3);
context.lineWidth = 10;
context.strokeStyle = '#CCE9F5';
context.lineCap = 'round';
context.stroke();
// round line cap (middle line)
context.beginPath();
context.moveTo(260, canvas.height / 2.2);
context.lineTo(canvas.width - 460, canvas.height / 2.2);
context.lineWidth = 7;
context.strokeStyle = '#CCE9F5';
context.lineCap = 'round';
context.stroke();
// round line cap (middle line)
context.beginPath();
context.moveTo(280, canvas.height / 2.1);
context.lineTo(canvas.width - 475, canvas.height / 2.1);
context.lineWidth = 5;
context.strokeStyle = '#CCE9F5';
context.lineCap = 'round';
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
Sunday, March 1, 2015
Vector illustration
For my vector illustration, I chose to do a black and white self portrait because I wanted to attempt to use the gradient mesh tool and i thought that it would be a little easier for me to work with black and white instead of color. I have never worked with this tool before and i found it difficult to use at first, but i am happy with the effect it applied. I draw a lot of portraits so for this project i wanted to focus on the detail of my face and attempt to make it more realistic rather than cartoon like. I had a lot of fun doing this project and i am happy with the final result.
Subscribe to:
Posts (Atom)