Monday 30 March 2015
Magazine Cover
With this project, I designed a magazine cover following the requirements; using only primary photographic images of myself, and composing it on Adobe Photoshop. I used various methods and techniques to intertwine the various different aspects of this cover, such as text and images. I stuck to a color scheme of reds and black to match the images on the screen and to make the cover appear united. I also used a variety of different typography styles to keep up the energetic and exciting appearance.
Monday 23 March 2015
Photoshop
To begin my work in Photoshop, I gathered two images; one primary image of myself, and one secondary image of somewhere I would like to visit/be/go. Using various different tools available in Adobe Photoshop, I carefully cut myself out of the original image and put it on a new background. I then carefully went around the outline of me in order to ensure none of the original background was showing in an effort to merge the two images together flawlessly. To further this, I made an effort to ensure the sun would be shining on my body the same way to make it look more realistic. I then edited the pictures accordingly using features such as 'saturation', 'levels', 'brightness', and many others. I also erased the rock jutting out over my leg to appear intertwined and as one image.
The original image:
The original background:
The merged image:
The original image:
The merged image:
Heart
As a practise for HTML, I also composed this heart to practice both shapes such as curves and lines, as well as finer details such as colors and stroke details.
The code for this image is as follows:
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
var x = 400;
var y = 200;
var controlx1 = 300;
var controly1 = -10;
var controlx2 = 50;
var controly2 = 150;
var endx = 200;
var endy = 320;
var controlx3 = 320;
var controly3 = 400;
var endx2 = 400;
var endy2 = 550;
var controlx4 = 480;
var controly4 = 400;
var endx3 = 600;
var endy3 = 320;
var controlx5 = 750;
var controly5 = 150;
var controlx6 = 500;
var controly6 = -10;
context.beginPath();
context.moveTo(x, y);
context.bezierCurveTo(controlx1, controly1, controlx2, controly2, endx, endy);
context.quadraticCurveTo(controlx3, controly3, endx2, endy2);
context.quadraticCurveTo(controlx4, controly4, endx3, endy3);
context.bezierCurveTo(controlx5, controly5, controlx6, controly6, x, y);
context.closePath();
context.lineWidth = 20;
context.fillStyle = 'rgb(255, 0, 0)';
context.fill();
context.strokeStyle = 'rgb(150, 0, 0)';
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
Friday 20 March 2015
HTML
For this assignment I had to create and image using just computer coding in HTML format. I did this using the application TextWrangler. It is a difficult concept to get your head around, but using a grid system proved helpful, and I heavily relied on trial and error.
I attempted a sun and moon image, as I didn't think the shapes involved would be overly difficult and there wasn't too much detail, however, it still proved a challenge.
I included techniques such as various shapes and line styles, as well as stroke fills and radial gradients.
The code used is as follows:
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
//Variables for Rectangle
var x = 0
var y = 0
var width = 800
var height = 600
var startX = 400;
var startY = 300;
var startRadius = 250;
var endX = 300;
var endY = 400;
var endRadius = 400;
context.beginPath();
context.rect(x, y, width, height);
var grd = context.createRadialGradient(startX, startY, startRadius, endX, endY, endRadius);
grd.addColorStop(0, 'rgb(220, 255, 220)');
grd.addColorStop(1, 'rgb(0, 0, 100)');
context.lineWidth - 10;
context.fillStyle = grd;
context.fill();
context.strokeStyle = 'rgb(150, 150, 150)';
context.stroke();
// Variables for Circle
var centerx = 400;
var centery = 300;
var radius = 300;
//For Circle
context.beginPath();
context.arc(centerx, centery, radius, 0, 2* Math.PI, false);
context.lineWidth = 6;
context.strokeStyle = 'rgb(150, 150, 150)';
context.stroke();
//Variables for Quadratic Curve
var x4 = 500;
var y4 = 15;
var controlx = 160;
var controly = 100;
var endx = 295;
var endy = 290;
//Quadratic Curve
context.beginPath();
context.moveTo(x4, y4);
context.quadraticCurveTo(controlx, controly, endx, endy);
context.stroke();
//Variables for Quadratic Curve
var x4 = 300;
var y4 = 130;
var controlx = 460;
var controly = 100;
var endx = 295;
var endy = 290;
//Quadratic Curve
context.beginPath();
context.moveTo(x4, y4);
context.quadraticCurveTo(controlx, controly, endx, endy);
context.stroke();
//Variables for Quadratic Curve
var x4 = 295;
var y4 = 290;
var controlx = 200;
var controly = 400;
var endx = 340;
var endy = 380;
//Quadratic Curve
context.beginPath();
context.moveTo(x4, y4);
context.quadraticCurveTo(controlx, controly, endx, endy);
context.stroke();
//Variables for Quadratic Curve
var x4 = 340;
var y4 = 380;
var controlx = 410;
var controly = 400;
var endx = 390;
var endy = 340;
//Quadratic Curve
context.beginPath();
context.moveTo(x4, y4);
context.quadraticCurveTo(controlx, controly, endx, endy);
context.stroke();
//Variables for Quadratic Curve
var x4 = 450;
var y4 = 220;
var controlx = 550;
var controly = 200;
var endx = 560;
var endy = 300;
//Quadratic Curve
context.beginPath();
context.moveTo(x4, y4);
context.quadraticCurveTo(controlx, controly, endx, endy);
context.stroke();
//Variables for Quadratic Curve
var x4 = 420;
var y4 = 280;
var controlx = 430;
var controly = 350;
var endx = 520;
var endy = 350;
//Quadratic Curve
context.beginPath();
context.moveTo(x4, y4);
context.quadraticCurveTo(controlx, controly, endx, endy);
context.stroke();
//Variables for Quadratic Curve
var x4 = 270;
var y4 = 170;
var controlx = 260;
var controly = 220;
var endx = 330;
var endy = 220;
//Quadratic Curve
context.beginPath();
context.moveTo(x4, y4);
context.quadraticCurveTo(controlx, controly, endx, endy);
context.stroke();
//Variables for Quadratic Curve
var x4 = 680;
var y4 = 400;
var controlx = 480;
var controly = 550;
var endx = 360;
var endy = 450;
//Quadratic Curve
context.beginPath();
context.moveTo(x4, y4);
context.quadraticCurveTo(controlx, controly, endx, endy);
context.stroke();
//Variables for Quadratic Curve
var x4 = 350;
var y4 = 420;
var controlx = 340;
var controly = 440;
var endx = 360;
var endy = 450;
//Quadratic Curve
context.beginPath();
context.moveTo(x4, y4);
context.quadraticCurveTo(controlx, controly, endx, endy);
context.stroke();
//Variables for Quadratic Curve
var x4 = 400;
var y4 = 460;
var controlx = 390;
var controly = 430;
var endx = 280;
var endy = 400;
//Quadratic Curve
context.beginPath();
context.moveTo(x4, y4);
context.quadraticCurveTo(controlx, controly, endx, endy);
context.stroke();
//Variables for Quadratic Curve
var x4 = 290;
var y4 = 400;
var controlx = 300;
var controly = 400;
var endx = 300;
var endy = 380;
//Quadratic Curve
context.beginPath();
context.moveTo(x4, y4);
context.quadraticCurveTo(controlx, controly, endx, endy);
context.stroke();
//Variables for Quadratic Curve
var x4 = 280;
var y4 = 455;
var controlx = 340;
var controly = 450;
var endx = 350;
var endy = 425;
//Quadratic Curve
context.beginPath();
context.moveTo(x4, y4);
context.quadraticCurveTo(controlx, controly, endx, endy);
context.stroke();
//Variables for Quadratic Curve
var x4 = 280;
var y4 = 445;
var controlx = 270;
var controly = 420;
var endx = 300;
var endy = 400;
//Quadratic Curve
context.beginPath();
context.moveTo(x4, y4);
context.quadraticCurveTo(controlx, controly, endx, endy);
context.stroke();
//Variables for Quadratic Curve
var x4 = 280;
var y4 = 445;
var controlx = 290;
var controly = 430;
var endx = 315;
var endy = 410;
//Quadratic Curve
context.beginPath();
context.moveTo(x4, y4);
context.quadraticCurveTo(controlx, controly, endx, endy);
context.stroke();
//Variables for Quadratic Curve
var x4 = 410;
var y4 = 380;
var controlx = 430;
var controly = 430;
var endx = 420;
var endy = 450;
//Quadratic Curve
context.beginPath();
context.moveTo(x4, y4);
context.quadraticCurveTo(controlx, controly, endx, endy);
context.stroke();
//Variables for Quadratic Curve
var x4 = 180;
var y4 = 330;
var controlx = 240;
var controly = 350;
var endx = 250;
var endy = 290;
//Quadratic Curve
context.beginPath();
context.moveTo(x4, y4);
context.quadraticCurveTo(controlx, controly, endx, endy);
context.stroke();
//Variables for Quadratic Curve
var x4 = 200;
var y4 = 325;
var controlx = 240;
var controly = 330;
var endx = 235;
var endy = 300;
//Quadratic Curve
context.beginPath();
context.moveTo(x4, y4);
context.quadraticCurveTo(controlx, controly, endx, endy);
context.stroke();
//Variables for Quadratic Curve(eyelashes)
var x4 = 205;
var y4 = 360;
var controlx = 200;
var controly = 333;
var endx = 205;
var endy = 332;
//Quadratic Curve
context.beginPath();
context.moveTo(x4, y4);
context.quadraticCurveTo(controlx, controly, endx, endy);
context.lineWidth = 2;
context.strokeStyle = 'rgb(150, 150, 150)';
context.stroke();
var x4 = 220;
var y4 = 360;
var controlx = 210;
var controly = 333;
var endx = 215;
var endy = 332;
//Quadratic Curve
context.beginPath();
context.moveTo(x4, y4);
context.quadraticCurveTo(controlx, controly, endx, endy);
context.lineWidth = 2;
context.strokeStyle = 'rgb(150, 150, 150)';
context.stroke();
var x4 = 238;
var y4 = 355;
var controlx = 220;
var controly = 333;
var endx = 228;
var endy = 332;
//Quadratic Curve
context.beginPath();
context.moveTo(x4, y4);
context.quadraticCurveTo(controlx, controly, endx, endy);
context.lineWidth = 2;
context.strokeStyle = 'rgb(150, 150, 150)';
context.stroke();
var x4 = 251;
var y4 = 347;
var controlx = 235;
var controly = 333;
var endx = 232;
var endy = 328;
//Quadratic Curve
context.beginPath();
context.moveTo(x4, y4);
context.quadraticCurveTo(controlx, controly, endx, endy);
context.lineWidth = 2;
context.strokeStyle = 'rgb(150, 150, 150)';
context.stroke();
var x4 = 258;
var y4 = 340;
var controlx = 240;
var controly = 330;
var endx = 235;
var endy = 320;
//Quadratic Curve
context.beginPath();
context.moveTo(x4, y4);
context.quadraticCurveTo(controlx, controly, endx, endy);
context.lineWidth = 2;
context.strokeStyle = 'rgb(150, 150, 150)';
context.stroke();
var x4 = 260;
var y4 = 328;
var controlx = 260;
var controly = 333;
var endx = 240;
var endy = 320;
//Quadratic Curve
context.beginPath();
context.moveTo(x4, y4);
context.quadraticCurveTo(controlx, controly, endx, endy);
context.lineWidth = 2;
context.strokeStyle = 'rgb(150, 150, 150)';
context.stroke();
var x4 = 265;
var y4 = 320;
var controlx = 260;
var controly = 325;
var endx = 240;
var endy = 315;
//Quadratic Curve
context.beginPath();
context.moveTo(x4, y4);
context.quadraticCurveTo(controlx, controly, endx, endy);
context.lineWidth = 2;
context.strokeStyle = 'rgb(150, 150, 150)';
context.stroke();
var x4 = 264;
var y4 = 310;
var controlx = 260;
var controly = 315;
var endx = 245;
var endy = 308;
//Quadratic Curve
context.beginPath();
context.moveTo(x4, y4);
context.quadraticCurveTo(controlx, controly, endx, endy);
context.lineWidth = 2;
context.strokeStyle = 'rgb(150, 150, 150)';
context.stroke();
var x4 = 264;
var y4 = 300;
var controlx = 260;
var controly = 305;
var endx = 247;
var endy = 303;
//Quadratic Curve
context.beginPath();
context.moveTo(x4, y4);
context.quadraticCurveTo(controlx, controly, endx, endy);
context.lineWidth = 2;
context.strokeStyle = 'rgb(150, 150, 150)';
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
I attempted a sun and moon image, as I didn't think the shapes involved would be overly difficult and there wasn't too much detail, however, it still proved a challenge.
I included techniques such as various shapes and line styles, as well as stroke fills and radial gradients.
The code used is as follows:
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
//Variables for Rectangle
var x = 0
var y = 0
var width = 800
var height = 600
var startX = 400;
var startY = 300;
var startRadius = 250;
var endX = 300;
var endY = 400;
var endRadius = 400;
context.beginPath();
context.rect(x, y, width, height);
var grd = context.createRadialGradient(startX, startY, startRadius, endX, endY, endRadius);
grd.addColorStop(0, 'rgb(220, 255, 220)');
grd.addColorStop(1, 'rgb(0, 0, 100)');
context.lineWidth - 10;
context.fillStyle = grd;
context.fill();
context.strokeStyle = 'rgb(150, 150, 150)';
context.stroke();
// Variables for Circle
var centerx = 400;
var centery = 300;
var radius = 300;
//For Circle
context.beginPath();
context.arc(centerx, centery, radius, 0, 2* Math.PI, false);
context.lineWidth = 6;
context.strokeStyle = 'rgb(150, 150, 150)';
context.stroke();
//Variables for Quadratic Curve
var x4 = 500;
var y4 = 15;
var controlx = 160;
var controly = 100;
var endx = 295;
var endy = 290;
//Quadratic Curve
context.beginPath();
context.moveTo(x4, y4);
context.quadraticCurveTo(controlx, controly, endx, endy);
context.stroke();
//Variables for Quadratic Curve
var x4 = 300;
var y4 = 130;
var controlx = 460;
var controly = 100;
var endx = 295;
var endy = 290;
//Quadratic Curve
context.beginPath();
context.moveTo(x4, y4);
context.quadraticCurveTo(controlx, controly, endx, endy);
context.stroke();
//Variables for Quadratic Curve
var x4 = 295;
var y4 = 290;
var controlx = 200;
var controly = 400;
var endx = 340;
var endy = 380;
//Quadratic Curve
context.beginPath();
context.moveTo(x4, y4);
context.quadraticCurveTo(controlx, controly, endx, endy);
context.stroke();
//Variables for Quadratic Curve
var x4 = 340;
var y4 = 380;
var controlx = 410;
var controly = 400;
var endx = 390;
var endy = 340;
//Quadratic Curve
context.beginPath();
context.moveTo(x4, y4);
context.quadraticCurveTo(controlx, controly, endx, endy);
context.stroke();
//Variables for Quadratic Curve
var x4 = 450;
var y4 = 220;
var controlx = 550;
var controly = 200;
var endx = 560;
var endy = 300;
//Quadratic Curve
context.beginPath();
context.moveTo(x4, y4);
context.quadraticCurveTo(controlx, controly, endx, endy);
context.stroke();
//Variables for Quadratic Curve
var x4 = 420;
var y4 = 280;
var controlx = 430;
var controly = 350;
var endx = 520;
var endy = 350;
//Quadratic Curve
context.beginPath();
context.moveTo(x4, y4);
context.quadraticCurveTo(controlx, controly, endx, endy);
context.stroke();
//Variables for Quadratic Curve
var x4 = 270;
var y4 = 170;
var controlx = 260;
var controly = 220;
var endx = 330;
var endy = 220;
//Quadratic Curve
context.beginPath();
context.moveTo(x4, y4);
context.quadraticCurveTo(controlx, controly, endx, endy);
context.stroke();
//Variables for Quadratic Curve
var x4 = 680;
var y4 = 400;
var controlx = 480;
var controly = 550;
var endx = 360;
var endy = 450;
//Quadratic Curve
context.beginPath();
context.moveTo(x4, y4);
context.quadraticCurveTo(controlx, controly, endx, endy);
context.stroke();
//Variables for Quadratic Curve
var x4 = 350;
var y4 = 420;
var controlx = 340;
var controly = 440;
var endx = 360;
var endy = 450;
//Quadratic Curve
context.beginPath();
context.moveTo(x4, y4);
context.quadraticCurveTo(controlx, controly, endx, endy);
context.stroke();
//Variables for Quadratic Curve
var x4 = 400;
var y4 = 460;
var controlx = 390;
var controly = 430;
var endx = 280;
var endy = 400;
//Quadratic Curve
context.beginPath();
context.moveTo(x4, y4);
context.quadraticCurveTo(controlx, controly, endx, endy);
context.stroke();
//Variables for Quadratic Curve
var x4 = 290;
var y4 = 400;
var controlx = 300;
var controly = 400;
var endx = 300;
var endy = 380;
//Quadratic Curve
context.beginPath();
context.moveTo(x4, y4);
context.quadraticCurveTo(controlx, controly, endx, endy);
context.stroke();
//Variables for Quadratic Curve
var x4 = 280;
var y4 = 455;
var controlx = 340;
var controly = 450;
var endx = 350;
var endy = 425;
//Quadratic Curve
context.beginPath();
context.moveTo(x4, y4);
context.quadraticCurveTo(controlx, controly, endx, endy);
context.stroke();
//Variables for Quadratic Curve
var x4 = 280;
var y4 = 445;
var controlx = 270;
var controly = 420;
var endx = 300;
var endy = 400;
//Quadratic Curve
context.beginPath();
context.moveTo(x4, y4);
context.quadraticCurveTo(controlx, controly, endx, endy);
context.stroke();
//Variables for Quadratic Curve
var x4 = 280;
var y4 = 445;
var controlx = 290;
var controly = 430;
var endx = 315;
var endy = 410;
//Quadratic Curve
context.beginPath();
context.moveTo(x4, y4);
context.quadraticCurveTo(controlx, controly, endx, endy);
context.stroke();
//Variables for Quadratic Curve
var x4 = 410;
var y4 = 380;
var controlx = 430;
var controly = 430;
var endx = 420;
var endy = 450;
//Quadratic Curve
context.beginPath();
context.moveTo(x4, y4);
context.quadraticCurveTo(controlx, controly, endx, endy);
context.stroke();
//Variables for Quadratic Curve
var x4 = 180;
var y4 = 330;
var controlx = 240;
var controly = 350;
var endx = 250;
var endy = 290;
//Quadratic Curve
context.beginPath();
context.moveTo(x4, y4);
context.quadraticCurveTo(controlx, controly, endx, endy);
context.stroke();
//Variables for Quadratic Curve
var x4 = 200;
var y4 = 325;
var controlx = 240;
var controly = 330;
var endx = 235;
var endy = 300;
//Quadratic Curve
context.beginPath();
context.moveTo(x4, y4);
context.quadraticCurveTo(controlx, controly, endx, endy);
context.stroke();
//Variables for Quadratic Curve(eyelashes)
var x4 = 205;
var y4 = 360;
var controlx = 200;
var controly = 333;
var endx = 205;
var endy = 332;
//Quadratic Curve
context.beginPath();
context.moveTo(x4, y4);
context.quadraticCurveTo(controlx, controly, endx, endy);
context.lineWidth = 2;
context.strokeStyle = 'rgb(150, 150, 150)';
context.stroke();
var x4 = 220;
var y4 = 360;
var controlx = 210;
var controly = 333;
var endx = 215;
var endy = 332;
//Quadratic Curve
context.beginPath();
context.moveTo(x4, y4);
context.quadraticCurveTo(controlx, controly, endx, endy);
context.lineWidth = 2;
context.strokeStyle = 'rgb(150, 150, 150)';
context.stroke();
var x4 = 238;
var y4 = 355;
var controlx = 220;
var controly = 333;
var endx = 228;
var endy = 332;
//Quadratic Curve
context.beginPath();
context.moveTo(x4, y4);
context.quadraticCurveTo(controlx, controly, endx, endy);
context.lineWidth = 2;
context.strokeStyle = 'rgb(150, 150, 150)';
context.stroke();
var x4 = 251;
var y4 = 347;
var controlx = 235;
var controly = 333;
var endx = 232;
var endy = 328;
//Quadratic Curve
context.beginPath();
context.moveTo(x4, y4);
context.quadraticCurveTo(controlx, controly, endx, endy);
context.lineWidth = 2;
context.strokeStyle = 'rgb(150, 150, 150)';
context.stroke();
var x4 = 258;
var y4 = 340;
var controlx = 240;
var controly = 330;
var endx = 235;
var endy = 320;
//Quadratic Curve
context.beginPath();
context.moveTo(x4, y4);
context.quadraticCurveTo(controlx, controly, endx, endy);
context.lineWidth = 2;
context.strokeStyle = 'rgb(150, 150, 150)';
context.stroke();
var x4 = 260;
var y4 = 328;
var controlx = 260;
var controly = 333;
var endx = 240;
var endy = 320;
//Quadratic Curve
context.beginPath();
context.moveTo(x4, y4);
context.quadraticCurveTo(controlx, controly, endx, endy);
context.lineWidth = 2;
context.strokeStyle = 'rgb(150, 150, 150)';
context.stroke();
var x4 = 265;
var y4 = 320;
var controlx = 260;
var controly = 325;
var endx = 240;
var endy = 315;
//Quadratic Curve
context.beginPath();
context.moveTo(x4, y4);
context.quadraticCurveTo(controlx, controly, endx, endy);
context.lineWidth = 2;
context.strokeStyle = 'rgb(150, 150, 150)';
context.stroke();
var x4 = 264;
var y4 = 310;
var controlx = 260;
var controly = 315;
var endx = 245;
var endy = 308;
//Quadratic Curve
context.beginPath();
context.moveTo(x4, y4);
context.quadraticCurveTo(controlx, controly, endx, endy);
context.lineWidth = 2;
context.strokeStyle = 'rgb(150, 150, 150)';
context.stroke();
var x4 = 264;
var y4 = 300;
var controlx = 260;
var controly = 305;
var endx = 247;
var endy = 303;
//Quadratic Curve
context.beginPath();
context.moveTo(x4, y4);
context.quadraticCurveTo(controlx, controly, endx, endy);
context.lineWidth = 2;
context.strokeStyle = 'rgb(150, 150, 150)';
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
Subscribe to:
Posts (Atom)