TKeeler Class Blog (Spring 2016): March 2016

Wednesday, March 30, 2016

Magazine project

I decided to make my magazine cover look more like a tabloid magazine. Doing it in this format made it easier for me to create something that was visually appealing. I didn't have to consistently insert images to see if they worked with the big picture that was working as the background.

The five color boxes are meant to simply make it more colorful and not boring to look at.

If you can't read the word next to NEWS, its manga in hiragana, one of the Japanese writing systems. The first symbol represents the "ma-" sound. The second the "n-" sound. The last the "ga-" sound.

As for the picture with myself, I took a picture of me at a Bucs game and clipped it out of its original picture before placing it in front of a skyscraper. What skyscraper, I don't know. I just Googled it. I feel like it gives me a look as someone who is really important. Makes me look powerful.

Wednesday, March 23, 2016

Photoshop Assignment

For my assignment, I decided to place my self in one of my favorite video games: Fallout: New Vegas. I'm a huge fan of the overall series and have always thought about how life would be like in the wasteland.

In the picture, I am standing alongside the main character of New Vegas, known simply as the Courier, as we battle a type of robot called Securitrons. While the Courier is prepared with a hunting rifle and combat armor, I am not up to his standard, fighting metal enemies with my fists and with no armor. I took the picture of myself doing tae kwon do a couple of years ago.

I used a diffuse tool to bring myself up to the lighting standard within the picture. Surprisingly, darkening myself made me fit better into the picture. It still feels out of place a little. I was hoping to lighten myself with warm colors to get the desert feel of the rest of the picture.

Wednesday, March 16, 2016

HTML Project

I know it doesn't look good. I had a lot of trouble with this, even more than the vector. While creating shapes wasn't really a problem, I had a problem with the grid and curves. For some reason, the grid on my printed page didn't match up with the site. I had to do a lot of trial and error. The curves were also confusing, as I was constantly guessing where the curve was supposed to go.

Anyway, this is suppose to be a Jigglypuff. I added the hat, because I was having trouble with her ears and with her fluff on top. The background is just a gathering of random colors.

<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

context.beginPath();
context.rect (0, 0, 800, 600);
var grd = context.createLinearGradient(0, 300, 800, 300)
grd.addColorStop(0, 'rgb(0, 0, 0)');
grd.addColorStop(.1, 'rgb(200, 120, 30)');
grd.addColorStop(.3, 'rgb(200, 100, 200)');
grd.addColorStop(.5, 'rgb(210, 210, 210)');
grd.addColorStop(.7, 'rgb(190, 180, 170)');
grd.addColorStop(.9, 'rgb(100, 0, 0)');
grd.addColorStop(1, 'rgb(255, 255, 255)');
context.fillStyle = grd;
context.fill();
context.stroke();

context.beginPath();
context.arc (400, 250, 130, 0, 2*Math.PI, false);
context.fillStyle= 'rgb(250, 208, 222)';
context.fill();
context.lineWidth= 2;
context.stroke();

context.beginPath();
context.moveTo (530, 255)
context.quadraticCurveTo (625, 245, 521, 300);
context.fillStyle= 'rgb(255, 208, 222)';
context.fill();
context.lineWidth= 2;
context.stroke();

context.beginPath();
context.moveTo (350, 270);
context.quadraticCurveTo (400, 330, 325, 300)
context.stroke();

context.beginPath();
context.moveTo (383, 383);
context.bezierCurveTo (387, 387, 390, 390, 380, 400);
context.bezierCurveTo (250, 400, 360, 360, 383, 383);
context.fillStyle= 'rgb(255, 208, 222)';
context.fill();
context.lineWidth= 2;
context.stroke();

context.beginPath();
context.moveTo (435, 377)
context.bezierCurveTo (380, 382, 390, 390, 400, 400);
context.bezierCurveTo (405, 405, 410, 410, 455, 395);
context.quadraticCurveTo (480, 375, 420, 377);
context.fillStyle= 'rgb(255, 208, 222)';
context.fill();
context.lineWidth= 2;
context.stroke();

context.beginPath();
context.arc (360, 220, 40, 0, 2*Math.PI, false);
context.fillStyle= 'white';
context.fill();

context.beginPath();
context.arc (360, 210, 30, 0, 2*Math.PI, false);
context.fillStyle= 'teal';
context.fill();

context.beginPath();
context.arc (360, 200, 10, 0, 2*Math.PI, false);
context.fillStyle= 'white';
context.fill();

context.beginPath();
context.arc (450, 220, 40, 0, 2*Math.PI, false);
context.fillStyle= 'white';
context.fill();

context.beginPath();
context.arc (450, 210, 30, 0, 2*Math.PI, false);
context.fillStyle= 'teal'
context.fill();

context.beginPath();
context.arc (450, 200, 10, 0, 2*Math.PI, false);
context.fillStyle= 'white'
context.fill();

context.beginPath();
context.moveTo (375, 300);
context.quadraticCurveTo (410, 370, 440, 300);
context.stroke();

context.beginPath();
context.moveTo (270, 150);
context.lineTo (530, 150);
context.lineWidth= 15;
context.lineCap= 'butt';
context.strokeStyle= 'tan';
context.stroke();

context.beginPath();
context.rect (300, 70, 200, 70);
context.fillStyle= 'tan';
context.fill();
context.stroke();

};

</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>

Wednesday, March 2, 2016

Stick Figure

It's a stick figure, so there really isn't much to say. It was really easy to make. There was a lot of trial and error though, mostly because I made it without a grid.

Blog Archive