Victoria Mancini's Art210 Blog

Wednesday, December 16, 2015

Portfolio

I found InDesign very easy to use for the final portfolio. I enjoyed formatting all the images and creating a theme for the whole thing. The theme i stuck with were boxes all the same 5 colors and different variations of those boxes and rectangles. I only used two types of fonts, one for the titles and another for the descriptions. I think the final project came out very good and had no trouble at all getting it printed out at Staples.

Wednesday, December 9, 2015

HTML

I had a very hard time with this project, as I chose to create a character not realizing the depth and length of time required it would take to create it. My attempt consists of about 15 different shapes and was very tedious to figure out where each shape needed to be. Again, I found that creating a character made the process all the more harder due to the fact that everything had to be, for the most part, precisely placed and this is something I found very difficult and time consuming. I ended up not being able to finish the entire character, because it got to a point of frustration and desperation that I needed to stop, but I thought that for what I was able to complete I had done a good job.

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

////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 190;

context.beginPath();
context.arc(centerX, centerY, radius, 2, 4 * Math.PI, false);
context.fillStyle = 'black';
context.fill();
context.lineWidth = 4;
context.stroke();

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 1.4;
var centerY = canvas.height / 5.8;
var radius = 120;

context.beginPath();
context.arc(centerX, centerY, radius, 2, 4 * Math.PI, false);
context.fillStyle = 'black';
context.fill();
context.lineWidth = 4;
context.stroke();

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 3.7;
var centerY = canvas.height / 5.8;
var radius = 120;

context.beginPath();
context.arc(centerX, centerY, radius, 2, 4 * Math.PI, false);
context.fillStyle = 'black';
context.fill();
context.lineWidth = 4;
context.stroke();

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x = canvas.width / 2.34;
var y = canvas.height / 2.8;
var radius = 59;
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 = 2;

// line color
context.strokeStyle = 'tan';
context.stroke();

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x = canvas.width / 1.8;
var y = canvas.height / 2.8;
var radius = 60;
var startAngle = 1.1 * Math.PI;
var endAngle = 1.9 * Math.PI;
var counterClockwise = false;
context.fillStyle = 'tan';
context.fill();

context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 2;

// line color
context.strokeStyle = 'tan';
context.stroke();

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x = canvas.width / 2.8;
var y = canvas.height / 1.65;
var radius = 75;
var startAngle = .4 * Math.PI;
var endAngle = 2 * Math.PI;
var counterClockwise = false;
context.fillStyle = 'tan';
context.fill();

context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 10;

// line color
context.strokeStyle = 'tan';
context.stroke();

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x = canvas.width / 1.54;
var y = canvas.height / 1.65;
var radius = 75;
var startAngle = .5 * Math.PI;
var endAngle = 1 * Math.PI;
var counterClockwise = true;
context.fillStyle = 'tan';
context.fill();

context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 10;

// line color
context.strokeStyle = 'tan';
context.stroke();

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x = canvas.width / 1.6721;
var y = canvas.height / 2.4;
var radius = 200;
var startAngle = .9 * Math.PI;
var endAngle = 1.1 * Math.PI;
var counterClockwise = false;
context.fillStyle = 'tan';
context.fill();

context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 2;

// line color
context.strokeStyle = 'tan';
context.stroke();

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

context.beginPath();
context.arc(400, 400, 160, 0, Math.PI, false);
context.closePath();
context.lineWidth = 5;
context.fillStyle = 'tan';
context.fill();
context.stroke();

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x = canvas.width / 2.2;
var y = canvas.height / 2.4;
var radius = 150;
var startAngle = .5 * Math.PI;
var endAngle = 3.8 * Math.PI;
var counterClockwise = true;

context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 2;

// line color
context.strokeStyle = 'tan';
context.stroke();

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 110;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'tan';
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'tan';
context.stroke();

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2.2;
var centerY = canvas.height / 2.4;
var radius = 85;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'tan';
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'tan';
context.stroke();

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 1.9;
var centerY = canvas.height / 2.4;
var radius = 90;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'tan';
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'tan';
context.stroke();

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 1.8;
var centerY = canvas.height / 2.9;
var radius = 20;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'tan';
context.fill();
context.lineWidth = 7;
context.strokeStyle = 'tan';
context.stroke();

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = 10;
var centerY = 0;
var radius = 40;

// save state
context.save();

// translate context
context.translate(canvas.width / 2.1, canvas.height / 1.7);

// scale context horizontally
context.scale(1.8, 1);

// draw circle which will be stretched into an oval
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

// restore to original state
context.restore();

// apply styling
context.fillStyle = 'black';
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'black';
context.stroke();

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x = canvas.width / 2;
var y = canvas.height / 1.55;
var radius = 100;
var startAngle = 1.2 * Math.PI;
var endAngle = 1.8 * Math.PI;
var counterClockwise = false;

context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 3;

// line color
context.strokeStyle = 'black';
context.stroke();

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2.4;
var centerY = canvas.height / 2.4;
var radius = 20;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'black';
context.fill();
context.lineWidth = 5;

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 1.8;
var centerY = canvas.height / 2.4;
var radius = 20;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'black';
context.fill();
context.lineWidth = 5;

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

context.beginPath();
context.arc(400, 475, 90, 0, Math.PI, false);
context.closePath();
context.lineWidth = 5;
context.fillStyle = 'red';
context.fill();
context.strokeStyle();
context.stroke();

////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ

};

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

Magazine

For the magazine, I chose to make a tabloid magazine and used photos of well known celebrities and ridiculous headlines. I wanted to use different shaped pictures so not to make it too blocky. I also used a picture of myself from one of my vacations. I tried to use a variety of fonts too for each different aspect of it, using different fonts for the name of the magazine and the cover stories. I had a little trouble making space and avoiding clutter but I think I managed to space it out well.

Lyrical Collage

For the lyrical collage, I chose the song "We Didn't Start the Fire" by Billy Joel. In the song he sings a list of historical events, so I chose to include actual headlines from these events soaring behind the earth. I distorted the headlines to make it seem as though they are soaring in and out and across the image at fast speeds, because the pace in which he sings the song is very quick. I left some of the black background behind the fire to make it seem like it was charring behind and burning the newspapers whizzing by. I put the earth in it too because the song is about the earth's history and how time keeps turning.

Tuesday, November 3, 2015

Logo Critque

Audi is a very expensive, high end car brand so the target audience of this logo is wealthy people. The logo is simple and sleek and the rings look like expensive metals, defining the brand and what kind of car Audis are. I think the logo is successful because it looks fancy in it's simplicity and looks sleek and shiny like it should be on an expensive car.

Dunkin' Donuts is a company who's target audience is on the go, working class people. You can tell by the simplicity and friendly nature the logo appears to give off, as opposed to Starbuck's label, which looks fancy and more elaborate. The logo for Dunkin' is successful because it gets the message across quickly and seems to cater towards a crowd more inclined to buy coffee someplace they can get it fast and cheap. The colors make the logo more inviting and like a place you would want to stop at if you needed a quick fix of coffee.

Nike's brand is focused on selling sports gear and equipment as well as clothes and it's logo is very recognizable. The Nike swoosh is famous for it's simplicity and people commonly associate the swoosh with a checkmark that one would use to signify a completed task or victory in athletics or sports. The swoosh however, is intact a feather that is supposed to be from the Goddess of victory, Nike,'s wings. this also makes the logo effective because its a symbol of victory. The logo is simple and easily recognizable and therefore is successful.

Pepsi's logo is simple and it looks like the globe, inviting people everywhere to drink it and giving off the impression of the fact that it is a universal drink and one that brings people together. The colors also make the logo look like an American flag, prompting buyers in the united states to feel like it's America's soda and that it's a symbol of patriotism to be drinking Pepsi. Their logo is simple yet effective and it's colors help to catch people's eye.

Target's logo is very good because the colors draw your eye in immediately and the logo is easily identifiable because it literally is a target. The red is eye catching and draws you into the bullseye. The logo is also effective because their target audience is typical American families who are in need of home and grocery products, and the logo serves as a bullseye to signify to people that this store is your target and the place you need to be shopping at. The logo is simple and therefore successful because when you look at it, you understand that it's a target, which is the name of the company.

Monday, November 2, 2015

Self Insertion

For this project, I had to darken myself and change the lighting to match the picture. Also the photo I chose to integrate myself into wasn't the best quality, so I tried to make the image of myself grainer as well to lower the quality. I left the light source around my head though because the lights shining through the car from the rest of traffic also illuminate some of the character's heads as well.

Wednesday, October 7, 2015

Vector Drawing

I found the vector illustration to be my favorite project this semester. I had a lot of fun with it and liked the challenge of trying to make myself as realistic as possible. The only part that I found truly difficult was creating the details in my hat, with all the wicker and weaving the parts of the hat together. I also found it a little difficult to make all the wrinkles in my shirt and catch all the different kinds of light in it but I think it turned out really well.