Tuesday, February 19, 2013
Monday, February 18, 2013
.:Logo Analysis:.
I think this particular is successful because of its simplicity. The aspect that makes it stand out I think is the line right underneath the company name, it adds a sense of formality and experience. I think the hint of color in the hairpiece and bouquet as well as the shading in the dress makes it more successful. I believe its targeted towards females old and young who are ready to tie the knot in a to die for dress.
I love the pink in this logo ( it is my favorite color)! The pink color is an obvious indicator that the logo is targeted towards females planning on getting married. I also think that the main logo in the center is simple, memorable, and elegant style. Its something you can definitely see stitched to their dresses and that can be shrunk to the smallest size and still be recognized.
Even though I love this company and their amazing dresses (and is on my potential bridal stores), their logo does not do them any justice. I just think that it is a little too simple and plain, the only thing that really catches my eye is the heart. Yes I mean simple is more sophisticated but this one just does not stand out. I think its more tailored to a more older crowd that like simplicity.
This one is my favorite bridal logo. I love the detail in the dress, it adds a sophistication and elegance to the entire logo. The dress on a hanger is also interesting and makes me want to go buy a gown right now! The colors compliment each other very well and give it a vintage meets contemporary feel. Definitely a success and targeted towards every woman who wants a once in a lifetime dress.
This logo is one of my favorite ones even though it has nothing to do with the others analyzed, it totally works in that the two dogs and the crown make it interesting and unforgettable. Every female with a sense of fashion recognizes this logo from a mile away. It even looks better on the products and in gold. It definitely appeals to the female population worldwide. I just love the whole look of it - vintage but contemporary.
.:Company Ideas:.
1. *Empress Bridals- Affordable bridal store that provides customers with unique, off the wall dresses. Very different from the standard traditional white dress weddings.
2. C&M'S Bakery - Bakery that sells sweet tasting products that contain international ingredients imported from France, Switzerland and the UK.
3. Jackie's - Restaurant that serves the appetite of soul food cravers!
4. Lacquer Me Up! - A nail art studio that provides creative, new ideas for nail art.
5. Business & Decorum - An etiquette school that teaches potential business affiliated persons to successfully achieve their dreams with absolute business etiquette.
.:Project One:.
For the assignment, I decided to go for something abstract since I enjoyed abstract art, and most of my art pieces are more focused on the abstract aspect of art. I think what contributed to the success of this piece were all the distinct colors I used to give it some pop, but the dark colors also help the more lighter colors to give them a pop.
I struggled with the HML5 codes and constructing shapes and objects, so if I had a longer chance to do this again, it would be different and I would have chosen to do a more complex piece. I do think that the piece would have been a bit more stronger if I had added more shapes and lines coming from every direction. While doing the lines, I thought of adding a spider to make it seem as if the piece was a spiders web however I found it hard to construct the spiders body and legs so I just left it out.
Before I started this assignment I looked for some sources of inspiration and came up with a few;
HTML5 Code:
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ??????????
//retangle variables
var x = 0;
var y = 0;
var width = 800;
var height = 600;
//rectangle gradiant
var startx = 0;
var starty = 300;
var endx = 800;
var endy = 300;
//circle variables(black)
var centerx = 600;
var centery = 200;
var radius = 90;
//circle variables(yellow)
var centerx2 = 600;
var centery2 = 100;
var radius2 = 90;
//circle variables (white)
var centerx3 = 750;
var centery3 = 100;
var radius3 = 10;
//circle variable (pink)
var centerX4 = 100;
var centerY4 = 400;
var radius4 = 90;
//circle variable (black-left)
var centerX5 = 200;
var centerY5 = 500;
var radius5 = 70;
//inner yellow left
var centerX6 = 100;
var centerY6 = 400;
var radius6 = 60;
//inner green circle left
var centerX7 = 100;
var centerY7 = 400;
var radius7 = 30;
//inner top right white circle (yellow)
var centerX8 = 750;
var centerY8 = 100;
var radius8 = 5;
//light purple left
var centerX9 = 600;
var centerY9 = 200;
var radius9 = 70;
//quadratic Curve
var controlx = 400;
var controly = 600;
var endx = 800;
var endy = 300;
// starting point coordinates(beizer)
var startX = 0;
var startY = canvas.height/2;
// control point 1 coordinates
var cpointX1 = canvas.width / 4;
var cpointY1 = canvas.height / 2 + 200;
// control point 2 coordinates
var cpointX2 = canvas.width * 3/4;
var cpointY2 = canvas.height / 2 - 200;
// ending point coordinates
var endX = canvas.width;
var endY = canvas.height/2;
// starting point coordinates
var startX2 = 0;
var startY2 = canvas.height/4;
// control point 1 coordinates ( magnet )
var cpointX12 = canvas.width / 6;
var cpointY12 = canvas.height / 4 + 400;
// control point 2 coordinates ( magnet )
var cpointX22 = canvas.width * 4/6;
var cpointY22 = canvas.height / 4 - 400;
// ending point coordinates
var endX2 = canvas.width;
var endY2 = canvas.height/4;
//quadratic curve green
var controlX3 = 0;
var controlY3 = 300;
var endX3 = 400;
var endY3 = 600;
//bezier curve - white
var startX2 = 0;
var startY2 = canvas.height/800;
var cpointX2 = canvas.width / 400;
var cpointY2 = canvas.height / 2 + 200;
var cpointX2 = canvas.width * 1/4;
var cpointY2 = canvas.height / 2 - 200;
var endX = canvas.width;
var endY = canvas.height/800;
//bezier curve - dark green
var startX3 = 0;
var startY3 = canvas.height/500;
var cpointX3 = canvas.width / 400;
var cpointY3 = canvas.height / 2 + 600;
var cpointX3 = canvas.width * 2/4;
var cpointY3 = canvas.height / 2 - 600;
var endX33 = canvas.width;
var endY33 = canvas.height/500;
//circle in triangle
var centerX10 = 720;
var centerY10 = 450;
var Radius10 = 60;
//rectangle inside circle
var rectX = 680;
var rectY = 420;
var rectwidth = 80;
var rectheight = 70;
//circle inside rectangle
var centerX11 = 680;
var centerY11 = 420;
var Radius11 = 10;
context.beginPath();
context.rect(x, y, width, height);
context.strokeStyle = 'rgb(0 , 150, 150)'
var grd = context.createLinearGradient(startx, starty, endx, endy);
grd.addColorStop(0, 'rgb(0, 0, 0)');
grd.addColorStop(1, 'rgb(255, 51, 102)');
context.fillStyle = grd;
context.fill();
context.stroke();
//circles(black)
context.beginPath();
context.arc(600, 200, 100, 90, 2* Math.PI, false);
context.fillStyle = 'rgb(0, 0, 0)';
context.fill();
context.strokeStyle = 'rgb(0, 0, 0)';
context.stroke();
//circle ( right yellow)
context.globalAlpha = 0.5;
context.beginPath();
context.arc(600, 100, 90, 0 , 2 * Math.PI, false);
context.fillStyle = 'rgb(204, 204, 0)';
context.fill();
context.strokeStyle = 'rgb(204, 204, 0)';
context.restore();
context.stroke();
//circle(white)
context.globalAlpha = 1;
context.beginPath();
context.arc(750, 100, 10, 0 , 2 * Math.PI, false);
context.fillStyle = 'rgb(255, 255, 255)';
context.fill();
context.strokeStyle = 'rgb(255, 255, 255)';
context.stroke();
//cirlce (inner white-yellow)
context.beginPath();
context.arc(750, 100, 5, 0 , 2 * Math.PI, false);
context.fillStyle = 'rgb(255, 204, 51)';
context.fill();
context.strokeStyle = 'rgb(255, 204, 51)';
context.stroke();
//circle(pink)
context.beginPath();
context.arc(100, 400, 90, 0 , 2 * Math.PI, false);
context.fillStyle = 'rgb(255, 0, 102)';
context.fill();
context.strokeStyle = 'rgb(255, 0, 102)';
context.stroke();
//circle (yellow)
context.beginPath();
context.arc(100, 400, 60, 0, 2 * Math.PI, false);
context.fillStyle = 'rgb(255, 255, 0)';
context.fill();
context.strokeStyle = 'rgb(255, 255, 0)';
context.stroke();
//circle(light green)
context.globalAlpha = 0.5;
context.beginPath();
context.arc(100, 400, 30, 0, 2 * Math.PI, false);
context.fillStyle = 'rgb(153, 255, 51)';
context.fill();
context.strokeStyle = 'rgb(153, 255, 51)';
context.stroke();
//circle (black- left)
context.globalAlpha = 0.5;
context.beginPath();
context.arc (200, 500, 70, 0, 2 * Math.PI, false);
context.fillStyle = 'rgb(0, 0, 0)';
context.fill();
context.strokeStyle = 'rgb(0, 0, 0)';
context.stroke();
//circle (left top white)
context.beginPath();
context.arc(100, 100, 5, 0, 2 * Math.PI, false);
context.fillStyle = 'rgb(255, 255, 255)';
context.fill();
context.strokeStyle = 'rgb( 255, 255, 255)';
context.stroke();
//cirlce underneath black(light purple)
context.beginPath();
context.arc(600, 200, 70, 0, 2 * Math.PI, false);
context.fillStyle = 'rgb(255, 153, 255)';
context.fill();
context.strokeStyle = 'rgb(255, 153, 255)';
context.stroke();
//quadratic curve
context.beginPath();
context.moveTo(0, 300);
context.quadraticCurveTo(400, 600, 800, 300);
context.lineTo(0, 800);
context.quadraticCurveTo(0, 400, 800, 200);
context.closePath();
context.lineWidth = 2;
context.strokeStyle = 'rgb(255, 255, 0)';
context.stroke();
context.beginPath();
context.moveTo(0,600);
context.quadraticCurveTo(400, 100, 800, 400);
context.lineTo(0, 200);
context.lineTo(650, 600);
context.lineTo(0, 350);
context.lineTo(500, 600);
context.lineTo(0, 300);
context.lineWidth = 2;
context.strokeStyle = 'rgb(255, 51, 204)';
context.stroke();
//bezier curve red
context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, endX, endY);
context.lineWidth = 2;
context.strokeStyle = 'rgb(255, 0, 0)';
context.stroke();
//quadratic curve green
context.beginPath();
context.moveTo(0, 600);
context.quadraticCurveTo(0, 300, 400, 600);
context.quadraticCurveTo(300, 400, 800, 50);
context.quadraticCurveTo(400, 300, 100, 100);
context.lineTo(400, 600);
context.lineTo(0, 300 );
context.lineTo(800, 100);
context.strokeStyle = 'rgb(0, 255, 0)';
context.stroke();
context.beginPath();
context.moveTo(800, 600);
context.lineTo(0,0);
context.lineTo(800, 550);
context.lineWidth = 2;
context.strokeStyle = 'rgb(255, 51, 0)';
context.stroke();
context.beginPath();
context.moveTo(800, 600);
context.lineTo(0, 200);
context.lineTo(450, 0);
context.lineTo(800, 200);
context.lineTo(500, 350);
context.lineTo(0, 600);
context.lineWidth = 3;
context.lineCap = 'round'
context.strokeStyle = 'rgb(51, 0, 204)';
context.stroke();
context.beginPath();
context.moveTo(0, 0);
context.quadraticCurveTo(400, 200, 0, 600);
context.quadraticCurveTo(400, 300, 800, 100);
context.quadraticCurveTo(500, 300, 700, 600);
context.quadraticCurveTo(400, 400, 0, 600);
context.strokeStyle = 'rgb(0, 204, 255)';
context.stroke();
context.beginPath();
context.moveTo(0, 0);
context.quadraticCurveTo(400, 200, 800, 100);
context.lineTo(600, 600);
context.lineTo(150, 0);
context.lineTo(10, 600);
context.lineTo(290, 0);
context.strokeStyle = 'rgb(255, 153, 51)';
context.stroke();
//bezier curve-white
context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpointX2, cpointY2, cpointX2, cpointY2, endX2, endY2);
context.lineWidth = 2;
context.strokeStyle = 'rgb(255, 255, 255)';
context.stroke();
//bezie curve- dark green
context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpointX3, cpointY3, cpointX3, cpointY3, endX3, endY3);
context.lineWidth = 2;
context.strokeStyle = 'rgb(0, 51, 0,)';
context.stroke();
context.beginPath();
context.moveTo(800, 550)
context.quadraticCurveTo(500, 350, 800, 250);
context.quadraticCurveTo(700, 350, 800, 500);
context.lineWidth = 1;
context.strokeStyle = 'rgb(204, 255, 102 )';
context.stroke();
context.beginPath();
context.globalAlpha = 1;
context.moveTo(800,300);
context.lineTo(550, 450);
context.lineTo(800, 600);
context.lineWidth = 3;
context.fillStyle = 'rgb(0, 0, 0)';
context.fill();
context.strokeStyle = 'rgb(0, 0, 0)';
context.stroke();
//circle inside triangle
context.beginPath();
context.globalAlpha = 1;
context.arc(720, 450, 60, 0, 2 * Math.PI, false);
context.fillStyle = 'rgb(255, 51, 153)';
context.fill();
context.strokeStyle = 'rgb(255, 51, 153)';
context.stroke();
//rectangle inside circle
context.beginPath();
context.globalAlpha = 0.5;
context.rect(679, 420, 82, 70);
context.lineJoin = 'round'
context.fillStyle = 'rgb(255, 255 ,0)';
context.fill();
context.stroke
//circle inside rectangle
context.beginPath();
context.arc(720, 455, 20, 0, 2 * Math.PI, false);
context.fillStyle = 'rgb(0, 204, 255)';
context.fill();
context.strokeStyle = 'rgb(0, 204, 255)';
context.stroke();
context.font = '80pt Calibri';
context.fillStyle = 'rgb(204, 0, 102)';
context.textAlign = 'start';
context.textBaseline = 'left';
context.strokeText ('MEL' , 100, 100);
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
.:In Class Heart:.
In Class Heart:
Code:
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ??????????
//Bezier Curve Variables
var x = 400;
var y = 100;
var controlX1 = 150;
var controlY1 = 30;
var controlX2 = 125;
var controlY2 = 175;
var endX = 300;
var endY = 350;
//Quadratic Curve Variables
var controlX3 = 400;
var controlY3 = 440;
var endX3 = 400;
var endY3 = 500;
//Quadratic Curve Variables
var controlX4 = 400;
var controlY4 = 400;
var endX4 = 500;
var endY4 = 300;
//Bezier Curve Variables
var controlX5 = 700;
var controlY5 = 150;
var controlX6 = 550;
var controlY6 = 30;
var endX5 = x;
var endY5 = y;
//Rectangle Variables
var rectX = 0;
var rectY = 0;
context.beginPath();
context.rect(rectX, rectY, canvas.width, canvas.height);
context.fillStyle = 'rgb(0, 204, 255)';
context.fill();
context.stroke();
context.beginPath();
context.moveTo(x, y);
context.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX, endY);
context.quadraticCurveTo(controlX3, controlY3, endX3, endY3);
context.quadraticCurveTo(controlX4, controlY4, endX4, endY4);
context.bezierCurveTo(controlX5, controlY5, controlX6, controlY6, endX5, endY5);
context.closePath();
context.fillStyle = 'rgb(255, 51, 153)';
context.fill();
context.lineWidth = 5;
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
Subscribe to:
Posts (Atom)