Caligramme Image

 

PEACE SIGN

Sketches for Spik'D Running Company

 





1. The first logo is in the design of a foot with a spike coming out of the middle of it. I would make the spike 3D like and black. The foot would have no fill and the company name would be colored.

2. This logo is just a running shoe spike that would have a black outline and the Spik'D font would be on the inside of the circular part of the spike. The flame- like lines coming off the spike represent speed and would be a warm color.

3. The third design is one of my favorites. The lines are simple yet timeless and the outer lines represent track lines. The arrow gives off the emotion of moving forward, fastly. The quality of that line would be thick. The logo would be black with the exception of the tiny arrow coming off the end of the thick line, which is almost spike like. I was thinking of making it red or purple.

4. This design would have a thick flag-like pole with a spike, that could look like a flag, coming from the top. It would have a more masculine feel/texture. The 'D from the name Spik'D would be the only letter in the flag, the rest would be written around the image.

5. The last logo would have a good usability and could be considered timeless. I have two black lines crossing towards the back, representing a track. The lines would start out thick and then thin out in the back, giving the feeling of motion. Perfect for a track company. The lines in the middle would be thin and representing the track line lanes. I would use either a neon or warm color for the brand name.

Project 2: Logo Brainstorming

For this part of the project I started brainstorming early and was able to think of ideas throughout the days. I wanted to create companies/products that were of interest to me- something I would actually purchase/use. Four of the five ideas are products and the last idea is for a fast food company.

1. LipLocks: this company will sell lip gloss but lip gloss that is embedded into lockets that are wearable. The line would included various flavors of lip gloss, from simple flavors such as vanilla, to more extreme flavors like banana cream. The lockets are to be small but big enough to be filled with gloss that people can use their fingers to apply. Lockets can be attached to chains of necklaces and dangling from bracelets. One logo idea would be of a lime green heart locket or a locket designed like lips.

2. Pictoscraps Inc: a scrap booking company that sells everything you'd ever need to create a beautiful scrapbook. Anything you could think of - from simple tape dots to graphic paper and scrap booking trimmers. It would be sold at major scrap booking stores.

3. SportsED: with the tag line "sports equipment for the sports minded" this company would be an affordable one that sells sports equipment. It's product line would be sold in sporting goods stores all over, such as Modell's and Sports Authority. The logo will have a good visibility.

4. Spik'D Running Company: this company will sell all types of running shoes but will be known for their high performance, extreme lightweight spikes (running sneakers with spikes at the bottom used for track and field track events). The logo will be unique, representing running, and placed on all their products. They will produce a various amount of running apparel but mainly focus on their shoes. Every month they will announce and produce a new line of spikes that will be highly advertised. It will be a popular, well known brand among the elite runners.

5. Burger TO Beyond: originally I came up with the company to be called burgers and beyond but looked on google to find there were a dozen of those throughout the country already. Burger To Beyond would be a fast food restaurant known for their thick, juicy burgers and their restaurants to be set up like outer space. The food prices will be in the affordable range- not expensive but nothing on "dollar" menus. Their logo will be solar space like and retro looking in font.

Five Logos

1. When this brand first came out I honestly thought the logo was stupid. But soon enough I feel in love with the brand. This logo is effective because it is so different yet simple. It's just two half circle lines put together but can fit perfectly on any equipment, apparel, or accessory of the brand. The targeted audience is athletic people. The logo does successfully reach this type of audience with its tough,almost masculine like features. This logo is always depicted in black, which makes it easy to place on different colored products.

2. This logo is very popular because it correlates with not just one, but two brands. The one above is Roxy and when you take off one half of the logo it is the quicksilver logo. Therefore, it is very memorable. The logo almost resembles a heart, which is appealing to many girls and women. The design is unique and original. The color of the logo varies from time to time to different colors.

3. The Hollister bird can be seen everywhere. Even though this logo usually always contains the brands name under it, it is still widely recognized as Hollister if you just see the bird on its own. The bird is a universal symbol but for this brand, which is beachy, is an appropriate icon. The target audience is young teens- to mid twenties and accomplishes that with its beach bird. It also has a high usability due to the fact that the bird can be shrunk or enlarged easily due to its simplicity.

4. The Target logo seems to be everywhere these days. The commercials are able to incorporate this logo through everyday objects featured in their commercials. They used to have the Target dog as their icon but changed to this one because it has more usability, in my opinion. They even sell their own products in their stores with this logo planted on them. The circles are memorable and is a timelessness symbol. The red color pops and grabs the attention of Target's wide audience.

5. The MTV logo has been around for what seems like decades. Therefore it is very memorable and the durability is high. Even though this television station doesn't really play music anymore, the icon is still the same(except it usually doesn't have the words "music TV" under it. The simple big M and TV have a good visibility even though not many products are made from within this company. This logo also ranges from color to color, without a set one. The black color above, however is simple and efficient in reaching the young and young adult age range.

ASCII Project

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

////////////////////////////////////// start below this line ??????????
//Beach Sand
context.beginPath();
context.rect(0, 0, canvas.width, canvas.height);
context.fillStyle = 'tan' ;
context.fill();
context.lineWidth = 3;
context.strokeStyle = 'tan';
context.stroke();
//sandcastle
context.beginPath();
context.moveTo(200, 500);//1
context.lineTo(210, 500);//2
context.lineTo(210, 490);//3
context.lineTo(250, 490);//4
context.lineTo(250, 500);//5
context.lineTo(290, 500);//6
context.lineTo(290, 490);//7
context.lineTo(330, 490);
context.lineTo(330,500);
context.lineTo(340,500);
context.lineTo(340, 550);
context.lineTo(200,550);
context.lineTo(200,500);
context.strokeStyle = "white";
context.stroke();
//sandcastle1flag
context.beginPath();
context.moveTo(270, 500);
context.lineTo(270,460);
context.strokeStyle = "rgb(100, 180, 100)";
context.stroke();
context.beginPath();
context.moveTo(270,460);
context.lineTo(300,470);
context.lineTo(270, 480);
context.stroke();
//sandcastle2
context.beginPath();
context.moveTo(100,500);
context.lineTo(130,500);
context.lineTo(130,520);
context.lineTo(140,520);
context.lineTo(140,500);
context.lineTo(170, 500);
context.lineTo(170,550);
context.lineTo(100,550);
context.lineTo(100,500);
context.strokeStyle = "white"
context.stroke();
//sandcastle2flag
context.beginPath();
context.moveTo(135, 520);
context.lineTo(135, 480);
context.strokeStyle = "rgb(100, 250, 100)";
context.stroke();
context.beginPath();
context.moveTo(135, 480);
context.lineTo(145,490);
context.lineTo(135,500);
context.stroke();

//Water
context.beginPath();
context.rect(0, 0, canvas.width, canvas.height/1.5);
context.fillStyle = 'rgb(0,50,250)';
context.fill();
context.lineWidth = 2;
context.strokeStyle = 'rgb(0,50,250)';
context.stroke();
//Boat
context.beginPath();
context.arc(100, 300, 60, 0, Math.PI, false);
context.closePath();
context.strokeStyle = 'yellow';
context.fillStyle = 'rgb(100, 150, 100)';
context.fill();
context.stroke();
//straightline
context.beginPath();
context.moveTo(100, 100);
context.lineTo(100, 300);
context.strokeStyle = "black";
context.stroke();
//flag
context.beginPath();
context.moveTo(100, 240);
context.quadraticCurveTo(190, 250, 100, 290);
context.strokeStyle = "yellow"
context.fillStyle = 'rgb(100, 200, 100)';
context.fill();
context.stroke();
//Umbrella-not showing up
context.beginPath();
context.moveTo(550, 400);
context.quadraticCurveTo(690, 240, 800, 400);
context.quadraticCurveTo(760, 450, 720, 400);
context.quadraticCurveTo(690, 450, 650, 400);
context.quadraticCurveTo(620, 450, 590, 400);
context.quadraticCurveTo(566, 450, 550, 400);
var grd = context.createLinearGradient(550, 400, 800, 400);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
context.fillStyle = grd;
context.fill();         
context.strokeStyle = "rgb(255, 0, 0)";
context.stroke();
//umbrella pole
context.beginPath();
context.moveTo(680, 423);
context.lineTo(600, 590);
context.lineWidth = 8;
context.stroke();

//Sky
context.beginPath();
context.rect(0, 0, canvas.width, canvas.height/2.5);
context.fillStyle = 'rgb(135,206,250)';
context.fill();
context.lineWidth = 4;
context.strokeStyle = 'rgb(0,0,0)';
//Cloud1
context.beginPath();
context.moveTo(100, 50);
context.bezierCurveTo(150, 0, 200, 80, 140, 100);
context.bezierCurveTo(140, 100, 100, 160, 80, 100);
context.bezierCurveTo(50, 100, 30, 20, 100, 50);
context.lineWidth = 1;
context.strokeStyle = "white";
var grd = context.createLinearGradient(340, 2, 380, 300);
grd.addColorStop(0, "white");
grd.addColorStop(1, "grey");
context.fillStyle = grd;
context.fill();
context.stroke();
//Cloud2
context.beginPath();
context.moveTo(170, 80);
context.bezierCurveTo(130, 100, 125, 140, 230, 130);
context.bezierCurveTo(250, 180, 400, 240, 345, 145);
context.bezierCurveTo(420, 150, 420, 120, 390, 100);
context.bezierCurveTo(310, 10, 240, 40, 250, 60);
context.bezierCurveTo(200, 5, 150, 30, 170, 80);
context.closePath();
var grd = context.createRadialGradient(200, 90, 20, 260, 80, 150);
grd.addColorStop(0, "white");
grd.addColorStop(1, "grey");
context.fillStyle = grd;
context.fill();
context.stroke();
//Sun
context.beginPath();
context.arc(700, 100, 80, 0, 2 * Math.PI, false);
context.fillStyle = "yellow";
context.fill();
context.lineWidth = 2;
context.strokeStyle = "white";
context.stroke();
//Kite
context.beginPath();
context.moveTo(550, 90);
context.lineTo(600, 120);
context.moveTo(600, 120);
context.lineTo(550, 200);
context.moveTo(550, 200);
context.lineTo(500, 120);
context.moveTo(500, 120);
context.lineTo(550, 90);
context.lineCap = 'butt';
context.lineWidth = 5;
context.fillStyle = "green";
context.fill();
context.strokeStyle = "pink";
context.stroke();
context.beginPath();
context.moveTo(550, 200);
context.quadraticCurveTo(600, 220, 550, 250);
context.bezierCurveTo(550, 250, 510, 295, 550, 300);
context.lineWidth = 2;
context.strokeStyle = "white";
context.stroke();
//birds
context.beginPath();
context.moveTo(400, 30);
context.quadraticCurveTo(450, 0, 450, 30);
context.quadraticCurveTo(490, 0, 500, 30);
context.strokeStyle = "black"
context.lineWidth = 3;
context.stroke();
context.beginPath();
context.moveTo(420, 80);
context.quadraticCurveTo(450, 55, 480, 80);
context.quadraticCurveTo(490, 20, 530, 50);
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ

};

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


I decided to create a beach scene with HTML5 code because I love to spend time at the beach, enjoying the sand and water. I started my layout with the three backround colors to create the sand, ocean and sky. I then divided up the sections and worked on one area at a time. The clouds in the sky gave me the most trouble because it was the first object I decided to create. Once I got the hang of it, I became alittle better at remembering the bezier codes. I included birds, the sun and a kite in the sky also. The birds are created with quadratic curves and the sun with an arc code.  The boat in the water was composed of a semicircle and the flag used with a quadratic curve. On the sand, I decided to put a linear gradient of red and white in the umbrella and sand castles along the sand edge with little flags at the top. As a reference to the sand castles I used this image:

 

My piece was successful because I used a cartoony sort of vibe that represents what you would normally see while sitting on the beach. The graphic took me some time but I am happy with the finished results, especially for my first time creating an image with codes.

I've been working on my project for a while now. It's pretty much taking over my life! It was a bit of a struggle in the beginning because I was still learning. However, I am getting a little faster and better at the codes(I think). I'm basing my image off of something like this:

I need some help with making my umbrellas though!

Class Assignment

My Heart !

 

<!DOCTYPE HTML>

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

////////////////////////////////////// start below this line ??????????

//heart
context.beginPath();
context.moveTo(300,200);
context.quadraticCurveTo(560, 70, 300, 410);
context.quadraticCurveTo(50, 70, 300, 200);
//color
context.fillStyle = 'rgb(100,50,200)';
context.fill();
//linecolor
context.strokeStyle = 'pink';
//linecap
context.lineCap = 'round';
//width
context.lineWidth = 10;
context.stroke();

 

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

};

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

last class's review of HTML5 was very helpful even though i wasn't able to log onto my computer! i did take good notes of the steps though. anxious to find out about the project tomorrow and what it entails.