Calligramme

Logo Sketches

These are logo sketches to my new photography company called Heather Merritt Photography.

This is my favorite #1

#2

#3

#4

#5

#6

Logo Critique (:

1971

2011

Starbucks Corporation is a coffeehouse chain based in the United States. Named after a character in the novel Moby Dick, it is the largest coffeehouse company in the world. The current company logo, modeled after a 15th century Norse woodcut, is a mixoparthenos, or "twin-tailed” mermaid, or siren as she's known in Greek mythology. According to the Starbucks blog, she was chosen as the logo because Starbucks was looking for a nautical theme to capture the spirit of Seattle. At this time in 1971, Seattle was known for sailing and seaports instead of grunge rock, rain and hipsters. I feel that the logo doesn’t reach the audience in the same way as it did in 1971. It used to be recognized as a “twin-tailed” mermaid, but now since Starbucks has continuing to modify their design it is slowly beginning to look like the statue of liberty or some other person than the mermaid originally chosen for the logo. I feel that the original colors of brown were a good choice, since the color of most teas and coffees are brown, but the modification to green has really thrown the feel for coffee and tea away. I feel that the original style for this logo was a good choice, even though it was an interesting thought to put a “twin-tailed” mermaid, they definitely achieved the goal of having a nautical theme. I feel that the logo has made them successful due to the constant changing and the more modest and modern the logo has become, considering the color changes also. 

Vans is a trendy shoes brand in the USA that was established by Paul Van Doren in March 1966. The company’s humble origins can be traced to its small shoe factory in Anaheim, California. In the last 4 decades, Vans has witnessed an extraordinary growth and launched several ranges of popular footwear. Van also offers clothing and accessories that are very popular among the youth with special emphasis on the skateboarder/surfer/snowboarder market segment. The other products include shoes for BMX riders, snowboarders, skateboarders and other types of boots. The Vans logo is the representative of the company’s strong customer base. The company’s logo is instantly recognizable and reflects the reliability and trustworthiness of its products. The “V” of the Vans logo gives a prominent look to the whole design. The right end of the “V” extends further, sheltering the other letters of the logo. The Vans logo stands for the brand’s stylishness and charm thanks to the use of black color. The Vans logo font is very simple and generic to an extent. The logo is successful in reaching the audience it aspires to bring in and more. I feel Vans is overall successful due to the fact that they promote their brand name and their items through different sporting events to help sell products.

It was in 1908 that the Converse Rubber Corporation opened for business. At first the company only made galoshes and other work related rubber shoes on a seasonal basis. But eventually the company decided it was more efficient to keep their work force employed year round, and began making athletic shoes. With the popularity of basketball, the Converse Corporation saw the need to develop a shoe that people could wear while playing basketball. Converse company later designed the A6 Flying Boot worn by the U.S. Army Air Corps. During the war all soldiers worn Chuck Taylor All Star shoes, and even after it these shoes remain the usual government-issue athletic shoes for military training. I feel that the logo reached many teens and young adults with the results they saw with how well they were used as basketball shoes. I feel the colors were contributed by the military, the red, white and blue. The style of the logo makes the star stand out and make it very recognizable. I feel that they are successful because Hollywood helped Converse shoes, when actors and other celebrities started to wear them it launched Converse shoes into a whole new profile, they were starting to become an American icon. 

REI was created in the 1930s when Pacific Northwest mountaineer Lloyd Anderson began his search for an ice axe. Lloyd wanted a reliable tool at a reasonable price but had no success in finding one locally. He eventually found a high-quality model in an Austrian alpine gear catalog for a mere $3.50, shipping included. Word about his find quickly spread among Seattle's climbing community, which led Lloyd and his wife, Mary, to convene with 21 fellow climbers to establish an outdoor gear co-op in 1938. Since the beginning, REI has been committed to helping people enjoy the great outdoors to the fullest-from weekend family camping trips to Mt. Everest expeditions—by offering innovative, high-quality outdoor gear and apparel. One of the largest product brands in the outdoor industry, REI Gear and Apparel is REI's own high-quality line of gear and clothing designed and sold by people with an expertise and a passion for outdoor recreation. he product line, developed with REI members in mind, combines quality, performance, style and functionality. I feel the logo reaches the targeted audience due to the outdoor theme, trees and mountains. The style of the REI logo is very simple but very together in what they sell and the look they are going for. I feel that the color choices could have been better. There could have been more earth toned colors, rather than just a white background with a black graphic. This makes them successful because it brings in the right audience. 

North Face is a performance apparel, equipment and footwear company that started over 40 years ago. Although most of their products are geared towards mountaineers, climbers and hikers, the company was, ironically, started on a beach. In 1966 two young men with a passion for hiking were living in San Francisco’s North Beach neighborhood; they decided to turn their hobby into a living by starting a small, mountaineering retail business. Today, they are known around the world as a leader in endurance products among outdoor performance enthusiasts.The name North Face was chosen because the north face of a mountain is the coldest and most treacherous side and the goal was to create gear that would assist climbers in successfully traversing these conditions. I feel that this logo successfully reaches the audience that they envisioned. I feel that the colors on the North Face logo are simple and not too bright, which makes it easier to put on equipment and not have colors clashing. I feel that the style of the logo is represented good. The logo they chose for the The North Face company is an interpretation of Yosemite National Park’s Half Dome, a rock formation rising 8,800 feet above sea level. In 1865 Half Dome was declared to be completely inaccessible to anyone and this was believed to be true until 1875 when George Anderson was the first person to successfully reach the summit. I feel this company is successful because many people use their products for expeditions and hiking trips and in everyday life.

Logo Ideas

1. Heather Merritt Photography - A photography company that takes pictures for different events and special occasions.
2. Musta-Go - A portable Mustache you can take anywhere.
3. Patriot Events- A company that help organize events such as parties, weddings, and Bat Mitzvahs.
4. Dog-on-it - A mobile dog groomer.
5. T's-R-US - A screen printing company.

ASCII: Project 1

This is the photo that inspired my final picture.

This is my sketch.

 

This is the beginning outline.

 

Adding the Head Dress. 

Add Color.

Adjust the color.
Add some Gradient for shine.

This is the final product. 

 Artist Statement: I feel I did really good given the fact that this HTML 5 code is very new to me. I felt like doing a Spartan helmet because I thought it would challenge me to actually see what I know. This definitely was time consuming, but also was fun to see the final outcome!

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

////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ



context.beginPath();
context.rect(300, 5, 450, 550);
context.lineWidth = 10;
context.fillStyle = 'black';
context.fill();
context.strokeStyle = 'rgb(240, 0, 40)';
context.stroke();


var controlx10 = 545;
var controly10 = 200;
var controlx11 = 625;
var controly11 = 315;
var X10 = 425;
var Y10 = 270;
var X11 = 600;
var Y11 = 400;
var controlx12 = 560;
var controly12 = 460;
var X12 = 600;
var Y12 = 525;
var controlx41 = 545;
var controly41 = 400;
var controlx31 = 560;
var controly31 = 500;
var endx31 = 510;
var endy31 = 410;

//helmet
context.beginPath();
context.moveTo(X10,Y10);
context.bezierCurveTo(controlx10, controly10, controlx11, controly11, X11, Y11);
context.quadraticCurveTo(controlx12, controly12, X12, Y12);
context.bezierCurveTo(controlx31, controly31, controlx41, controly41, endx31, endy31);
var grd = context.createRadialGradient(630, 270, 50, 630, 270, 105);
grd.addColorStop(1, 'grey');
grd.addColorStop(0, 'rgb(255, 255, 255)');
context.fillStyle = grd;
context.fill();
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x = 533;
var y = 300;
var width = 50;
var height = 50;
var imageObj = new Image();
imageObj.onload = function() {
context.drawImage(imageObj, x, y, width, height);
};
imageObj.src = 'https://secureq.scoutwareforms.net/images/q/ut/q/schoolLogo.gif';
context.strokeStyle = 'black';
context.lineWidth = 1;
context.stroke();
 
var controlX3 = 400;
var controlY3 = 425;
var X1 = 355;
var Y1 = 410;
var X2 = 420;
var Y2 = 280;
var controlx1 = 405;
var controly1 = 330;
var X3 = 525 ;
var Y3 = 324;
var controlx2 = 450;
var controly2 = 310;
var X4 = 510;
var Y4 = 410;
var controlx3 = 545;
var controly3 = 400;
var controlx4 = 560;
var controly4 = 500;
var endx3 = 600;
var endy3 = 525;
var X5 = 625;
var Y5 = 550;
var controlx5 = 530;
var controly5 = 510;
var controlx6 = 530;
var controly6 = 405;
var endx4 = 490;
var endy4 = 450;
var controlx7 = 470;
var controly7 = 490;
var controlx8 =402;
var controly8 = 505;
var endx5 = 390;
var endy5 = 500;
var X6 = 410;
var Y6 = 400;
var X7 = 470 ;
var Y7 = 375;
var X8 = 470;
var Y8 = 360;
var controlx9 = 390;
var controly9 = 375;
var X9 = 399;
var Y9 = 390;

context.beginPath();
context.moveTo(X4, Y4);
context.bezierCurveTo(controlx3, controly3, controlx4, controly4, endx3, endy3);
context.lineTo(X5, Y5);
context.bezierCurveTo(controlx5, controly5, controlx6, controly6, endx4, endy4);
context.bezierCurveTo(controlx7, controly7, controlx8, controly8, endx5, endy5);
context.lineTo(X6, Y6);
context.lineTo(X7, Y7);
context.fillStyle = 'grey'
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();

var controlx13 = 401;
var controly13 = 375;
var X13 = 400;
var Y13 = 375;
var X20 = 478;
var Y20 = 345;
var X21 = 475;
var Y21 = 380;
var controlx = 370;
var controly = 350;
var x1 = 355;
var y1 = 460;
var x2 = 410;
var y2 = 255;
var x3 = 510;
var y3 = 410;
var controlX = 450;
var controlY = 300;
var endX = 530;
var endY = 325;
var controlX1 = 460;
var controlY1 = 425;
var controlX2 = 450;
var controlY2 = 480;
var endX2 = 400;
var endY2 = 490;
var x4 = 420;
var y4 = 410;
var x5 = 475;
var y5 = 380;
var x6 = 478;
var y6 = 345;
var x7 = 400;
var y7 = 375;
var x8 = 355;
var y8 = 460;

context.beginPath();
context.moveTo(x1,y1);
context.quadraticCurveTo(controlx, controly, x2, y2);
context.quadraticCurveTo(controlX, controlY, endX, endY);
context.lineTo(x3, y3);
context.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX2, endY2);
context.lineTo(x4, y4);
context.lineTo(x5, y5);
context.lineTo(x6, y6);
context.lineTo(x7, y7);
context.quadraticCurveTo(controlX3, controlY3, x8, y8);
context.fillStyle = 'grey'
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();

context.beginPath();
context.moveTo(X7, Y7);
context.lineTo(X8, Y8);
context.lineTo(X9, Y9);
context.quadraticCurveTo(controlx13, controly13, X13, Y13);
context.lineTo(X20, Y20);
context.lineTo(X21, Y21);
context.fillStyle = 'grey'
context.fill();
context.strokeStyle = 'black';
context.lineWidth = 1;
context.stroke();

context.beginPath();
context.moveTo(X1,Y1);
context.quadraticCurveTo(controlx1, controly1, X2, Y2);
context.quadraticCurveTo(controlx2, controly2, X3, Y3);
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();

//head dress
var X22 = 450;
var Y22 = 260;
var X23 = 425;
var Y23 = 200;
var X24 = 450;
var Y24 = 190;
var X25 = 465;
var Y25 = 235;
var X26 = 480;
var Y26 = 235;
var X27 = 480;
var Y27 = 190;
var controlx22 = 490;
var controly22 = 190;
var X32 = 510;
var Y32 = 185;
var X28 = 510;
var Y28 = 235;
var controlx23 = 525;
var controly23 = 230;
var X33 = 540;
var Y33 = 240;
var X29 = 545;
var Y29 = 190;
var controlx24 = 555;
var controly24 = 200;
var X34 = 570;
var Y34 = 200;
var X30 = 555;
var Y30 = 250;
var controlx25 = 570;
var controly25 = 253;
var X35 = 575;
var Y35 = 260;
var controlx26 = 580;
var controly26 = 250;
var X36 = 615;
var Y36 = 250;
var controlx27 = 630;
var controly27 = 275;
var X37 = 625;
var Y37 = 275;
var controlx28 = 575;
var controly28 = 270;
var X38 = 570;
var Y38 = 280;
var controlx29 = 530;
var controly29 = 245;
var X39 = X22;
var Y39 = Y22;


context.beginPath();
context.moveTo(X22, Y22);
context.lineTo(X23, Y23);
context.lineTo(X24, Y24);
context.lineTo(X25, Y25);
context.lineTo(X26, Y26);
context.lineTo(X27, Y27);
context.quadraticCurveTo(controlx22, controly22, X32, Y32);
context.lineTo(X28, Y28);
context.quadraticCurveTo(controlx23, controly23, X33, Y33);
context.lineTo(X29, Y29);
context.quadraticCurveTo(controlx24, controly24, X34, Y34);
context.lineTo(X30, Y30);
context.quadraticCurveTo(controlx25, controly25, X35, Y35);
context.quadraticCurveTo(controlx26, controly26, X36, Y36);
context.quadraticCurveTo(controlx27, controly27, X37, Y37);
context.quadraticCurveTo(controlx28, controly28, X38, Y38);
context.quadraticCurveTo(controlx29, controly29, X39, Y39);
context.fillStyle = 'grey';
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();

var controlx30 = 515;
var controly30 = 140;
var controlx31 = 650;
var controly31 = 205;
var X41 =625 ;
var Y41 = 350;
var controlx33 = 590;
var controly33 = 475;
var X40 = 650;
var Y40 = 575;
var controlx56 = 610;
var controly56 = 530;
var controlx57 = 700;
var controly57 = 380;
var X42 = 700;
var Y42 = 325;
var controlx58 = 675;
var controly58 = 350;
var X43 = 705;
var Y43 = 300;
var controlx59 = 725;
var controly59 = 280;
var X44 = 700;
var Y44 = 250;
var controlx60 = 675;
var controly60 = 250;
var X45 = 700;
var Y45 = 225;
var controlx61 = 715;
var controly61 = 200;
var X46 = 690;
var Y46 = 150;
var controlx62 = 675;
var controly62 = 175;
var X47 = 659;
var Y47 = 120;
var controlx63 = 660;
var controly63 = 100;
var X48 = 650;
var Y48 = 100;
var controlx64 = 635;
var controly64 = 125;
var X49 = 600;
var Y49 = 150;
var X50 = 640;
var Y50 = 100;

context.beginPath();
context.moveTo(375, 225);
context.bezierCurveTo(controlx30, controly30, controlx31, controly31, X41, Y41);
context.quadraticCurveTo(controlx33, controly33, X40, Y40);
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();

var controlx65 = 610;
var controly65 =90 ;
var X51 = 550;
var Y51 = 100;
var controlx66 = 520;
var controly66 = 170;
var X52 = 545;
var Y52 = 100;
var controlx67 = 370;
var controly67 = 190;
var controlx68 = 545;
var controly68 = 100;
var X53 = 550;
var Y53 = 150;
var controlx69 = 500;
var controly69 = 120;
var X54 = 400;
var Y54 = 100;

context.beginPath();
context.moveTo (X40, Y40);
context.bezierCurveTo(controlx56, controly56, controlx57, controly57, X42, Y42);
context.quadraticCurveTo(controlx58, controly58, X43, Y43);
context.quadraticCurveTo(controlx59, controly59, X44, Y44);
context.quadraticCurveTo(controlx60, controly60, X45, Y45);
context.quadraticCurveTo(controlx61, controly61, X46, Y46);
context.quadraticCurveTo(controlx62, controly62, X47, Y47);
context.quadraticCurveTo(controlx63, controly63, X48, Y48);
context.quadraticCurveTo(controlx64, controly64, X49, Y49);
context.lineTo(X50, Y50);
context.quadraticCurveTo(controlx65, controly65, X51, Y51);
context.quadraticCurveTo(controlx68, controly68, X53, Y53);
context.quadraticCurveTo(controlx66, controly66, X52, Y52);
context.quadraticCurveTo(controlx69, controly69, X54, Y54);
context.quadraticCurveTo(controlx67, controly67, 375, 225);
context.bezierCurveTo(controlx30, controly30, controlx31, controly31, X41, Y41);
context.quadraticCurveTo(controlx33, controly33, X40, Y40);
context.fillStyle = 'rgb(240, 0, 40)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
 
var X55 = 628;
var Y55 = 300;
var controlx70 = 545;
var controly70 = 140;
var X56 = 375;
var Y56 = 240;
var controlx71 = 590;
var controly71 = 115;

context.beginPath();
context.moveTo(375, 220);
context.lineTo(X56, Y56);
context.quadraticCurveTo(controlx70, controly70, X55, Y55);
context.quadraticCurveTo(controlx71, controly71, 375, 220);
context.fillStyle = 'grey'
context.fill();
context.strokeStyle = 'black';
context.lineWidth = 1;
context.stroke();
context.closePath();



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

 
};

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

 

Heart

In Class we learned how to draw a heart using Bezier Curves and Quadratic Curves. This has helped me understand the basics of drawing curvy lines. This will greatly help me for my project later on.



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

////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
context.beginPath();
context.rect(150, 25, 500, 500);
var grd = context.createLinearGradient(400, 400, 100, 100);
grd.addColorStop(0, 'blue');
grd.addColorStop(1, 'green');
context.fillStyle = grd;
context.fill();
context.stroke();


context.beginPath();
context.moveTo(390, 175);
context.bezierCurveTo(285, 25, 125, 175, 300, 340);
context.quadraticCurveTo(350, 390, 390, 470);
context.quadraticCurveTo(430, 390, 480, 340);
context.bezierCurveTo(655, 175, 525, 25, 390, 175);
context.fillStyle = 'red';
context.fill();
context.stroke();



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

};

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