Green House Yogi: September 2014

Wednesday, September 24, 2014

Green House Yogi Logo

Created logo for Green House Yogi, a fictional yoga studio. Designed on Illustrator CC 2014.

Bear Mountain Logo

Created Bear Mountain Co. fictional business that cooks all natural and organic granola bars, also offers vegan and gluten free option. Designed logo on Illustrator CC 2014.

Tuesday, September 23, 2014

Using Illustrator I created a Caligramme, an elephant solely using text. The sentences were facts and were related to elephants but still represented the image of an actual animal. In the elephant it's self there is a quote about the interaction of elephants and humans.

Wednesday, September 17, 2014

Adobe Illustrator CC 2014

My first attempt at using Illustrator to create one of my fictional business logo sketches. This is specifically for a traveling, outdoor, equipment company. Used the pen tool and color fill.

Monday, September 15, 2014

Logo Sketches

These are 5 thumbnail sketches for my fictional businesses and companies. Not sure which sketch I will proceed to create on Adobe Illustrator for my second project.

Fictional Company Ideas

I am thinking of creating 5 different fictional companies, and creating various logos for them.

1. A company that designs and sells active sport wear. For a variety of activities from hiking, swimming, and yoga.

2. An organic foods company, that creates granola bars and other healthy snack options.

3. A business that sells outdoor sport equipment, such as backpacking, camping, and kayaking gear.

4. A yoga studio

5. An Elephant Sanctuary in Thailand

Sunday, September 14, 2014

Logos & Their Efficiency

A lot of thought goes into Brand logos, from the choice of color to font, and sometimes smaller images. I have picked 5 random logos to critique.

Starting with Jif, the peanut butter company. The simplicity of the logo allows it to appeal to all ages of consumers, for the most general audience possible. The basic color choices makes it slightly playful while still maintaining professionalism. The plain text allows the audience to remember the company.

Apple is one of the most famous brands these days. With it's monopoly over the technical world, Apple has done an amazing job with it's logo. It's extremely straight forward by actually depicting an apple. The logo is so simple, it is the most recognizable logo to the country. In addition the color choice of a futuristic white/grey, gives the company a sense of technologically savvy.

Michael Kors is a famous fashion design, known to most young ladies. This company's logo is a classic. Using the abbreviation of the name, the logo uses M & K simultaneously within a circle. The black and white color palette allows this logo to match the various products it's being branded on to, such as purses, shoes, and watches.

Subaru is a well know Japanese car company, that distributes thousands of car every year to the United States. The company's logo, is not very flashy yet not too classic. The choice of blue and silver colors gives it a more relaxed, and mechanical feel. This logo is directed towards the older middle class audience, maybe even some with families, because this logo is not flashy shiny, it goes hand and hand with the costs of this company's products, which is favorable by the middle class.

The last brand logo discussed will be Crayola, which is a crayon and other art supply company. This logo is most definitely generated towards younger kids, the multiple color choice is playful and fun. The color choice also is a good representation of the product being sold because the crayons and pencils come in a variety of colors like the rainbow. Not to mention to the text font is also a little goofy help drives kids towards the company's products.

Creating Landscapes Using HTML5 Codes

Using HTML5 Codes, created a 'landscape' with 14 different shapes. Using a variation of Bezier Curves, Quadratic Curves, and Circles. Also included different colors and color gradients through out the composition. Below is the HTML 5 code it's self taken directly from Text Wrangler.

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

////////////////////////////////////// start below this line
var x = 100;
var y = 100;
var width = 400;
var height = 400;
var x1 = 0;
var y1 = 0;

var startX = 400;
var startY = 0;
var endX = 400;
var endY = 400;

// background
context.beginPath();
context.rect(x1, y1, canvas.width, canvas.height);
context.fillStyle = 'rgb(245,245,220)';
var grd = context.createLinearGradient(startX, startY, endX, endY);
grd.addColorStop(.5, 'rgb(173,216,230)');
grd.addColorStop(.3, 'rgb(135,206,250)');
context.fillStyle = grd;
context.fill();

// cloud1
var startx = 100;
var starty = 60;
var controlx1 = 55;
var controly1 = 130;
var controlx2 = 100;
var controly2 = 140;
var endx = 200;
var endy = 130;
var controlx3 = 220;
var controly3 = 160;
var controlx4 = 290;
var controly4 = 160;
var endx1 = 310;
var endy1 = 130;
var controlx5 = 390;
var controly5 = 130;
var controlx6 = 390;
var controly6 = 100;
var endx2 = 350;
var endy2 = 100;
var controlx7 = 350;
var controly7 = 20;
var controlx8 = 300;
var controly8 = 10;
var endx3 = 200;
var endy3 = 40;
var controlx9 = 150;
var controly9 = 5;
var controlx10 = 60;
var controly10 = 10;
var endx4 = 100;
var endy4 = 60;

context.beginPath();
context.moveTo(startx, starty);
context.bezierCurveTo(controlx1, controly1, controlx2, controly2, endx, endy);
//context.moveTo(endx, endy); <-- Nope, only pick up pen once.
context.bezierCurveTo(controlx3, controly3, controlx4, controly4, endx1, endy1);
context.bezierCurveTo(controlx5, controly5, controlx6, controly6, endx2, endy2);
context.bezierCurveTo(controlx7, controly7, controlx8, controly8, endx3, endy3);
context.bezierCurveTo(controlx9, controly9, controlx10, controly10, endx4, endy4);
context.fillStyle = 'rgb(240,255,255)';
context.fill();
context.strokeStyle = 'rgb(240, 255, 255)';
context.stroke();

context.stroke();

//cloud2
var startx1 = 550;
var starty1 = 40;
var controlx11 = 400;
var controly11 = 30;
var controlx12 = 400;
var controly12 = 80;
var endx5 = 500;
var endy5 = 80;
var controlx13 = 440;
var controly13 = 100;
var controlx14 = 430;
var controly14 = 140;
var endx6 = 550;
var endy6 = 120;

var controlx15 = 510;
var controly15 = 150;
var controlx16 = 600;
var controly16 = 170;
var endx7 = 610;
var endy7 = 100;

var controlx17 = 650;
var controly17 = 90;
var controlx18 = 700;
var controly18 = -20;
var endx8 = 550;
var endy8 = 40;

context.beginPath();
context.moveTo(startx1, starty1);
context.bezierCurveTo(controlx11, controly11, controlx12, controly12, endx5, endy5);
//context.moveTo(endx, endy); <-- Nope, only pick up pen once.
context.bezierCurveTo(controlx13, controly13, controlx14, controly14, endx6, endy6);
context.bezierCurveTo(controlx15, controly15, controlx16, controly16, endx7, endy7);
context.bezierCurveTo(controlx17, controly17, controlx18, controly18, endx8, endy8);

context.fillStyle = 'rgb(240,255,255)';
context.fill();
context.stroke();

//Grass 1

context.beginPath();
context.moveTo(10, 600);
context.quadraticCurveTo(10, 550, 20, 550);
context.lineWidth = 10;

context.strokeStyle = 'rgb(34, 139, 34)';
context.stroke();

//Grass 2

context.beginPath();
context.moveTo(30, 600);
context.quadraticCurveTo(30, 530, 80, 520);
context.lineWidth = 10;

context.strokeStyle = 'rgb(34, 139, 34)';
context.stroke();

// Grass 3

context.beginPath();
context.moveTo(50, 600);
context.quadraticCurveTo(50, 563, 90, 545);
context.lineWidth = 10;

context.strokeStyle = 'rgb(34, 139, 34)';
context.stroke();

// Grass 4

context.beginPath();
context.moveTo(500, 600);
context.quadraticCurveTo(490, 570, 510, 550);
context.lineWidth = 10;

context.strokeStyle = 'rgb(34, 139, 34)';
context.stroke();

// Grass 5

context.beginPath();
context.moveTo(520, 600);
context.quadraticCurveTo(510, 570, 535, 540);
context.lineWidth = 10;

context.strokeStyle = 'rgb(34, 139, 34)';
context.stroke();

// Grass 6

context.beginPath();
context.moveTo(550, 600);
context.quadraticCurveTo(520, 570, 590, 520);
context.lineWidth = 10;

context.strokeStyle = 'rgb(34, 139, 34)';
context.stroke();

//Sun

context.beginPath();
context.arc( 800, 0, 130, 0, 2 * Math.PI, false);
context.fillStyle = 'rgb(255, 215, 0)';
context.fill();
context.lineWidth = 5;

// Leaf

var startx3 = 178;
var starty3 = 400;
var controlx29 = 270;
var controly29 = 250;
var controlx30 = 400;
var controly30 = 350;
var endx14 = 275;
var endy14 = 377;

context.beginPath();
context.moveTo(startx3, starty3);
context.bezierCurveTo(controlx29, controly29, controlx30, controly30, endx14, endy14);

context.lineWidth = 5;
context.fillStyle = 'rgb(34, 139, 34)';
context.fill();
context.strokeStyle = 'rgb(34, 139, 34)';
context.stroke();

var grd = context.createLinearGradient(178, 400, 275, 377);
grd.addColorStop(.9, 'rgb(34, 139, 34)');
grd.addColorStop(.4, 'rgb(0,100,0)');
context.fillStyle = grd;
context.fill();

//Stem

context.beginPath();
context.moveTo(320, 600);
context.quadraticCurveTo(180, 375, 400, 320);
context.lineWidth = 10;

context.strokeStyle = 'rgb(34, 139, 34)';
context.stroke();

// Flower Petals

var startx2 = 400;
var starty2 = 320;
var controlx19 = 440;
var controly19 = 170;
var controlx20 = 470;
var controly20 = 210;
var endx9 = 410;
var endy9 = 330;
var controlx21 = 460;
var controly21 = 318;
var controlx22 = 610;
var controly22 = 320;
var endx10 = 430;
var endy10 = 350;

var controlx23 = 490;
var controly23 = 340;
var controlx24 = 610;
var controly24 = 530;
var endx11 = 410;
var endy11 = 340;

var controlx25 = 425;
var controly25 = 410;
var controlx26 = 370;
var controly26 = 510;
var endx12 = 383;
var endy12 = 330;

var controlx27 = 320;
var controly27 = 300;
var controlx28 = 270;
var controly28 = 240;
var endx13 = 400;
var endy13 = 320;

context.beginPath();
context.moveTo(startx2, starty2);
context.bezierCurveTo(controlx19, controly19, controlx20, controly20, endx9, endy9);
//context.moveTo(endx, endy); <-- Nope, only pick up pen once.
context.bezierCurveTo(controlx21, controly21, controlx22, controly22, endx10, endy10);
context.bezierCurveTo(controlx23, controly23, controlx24, controly24, endx11, endy11);
context.bezierCurveTo(controlx25, controly25, controlx26, controly26, endx12, endy12);
context.bezierCurveTo(controlx27, controly27, controlx28, controly28, endx13, endy13);

context.lineWidth = 5;
context.fillStyle = 'rgb(255,20,147)';
context.fill();
context.strokeStyle = 'rgb(255,20,147)';
context.stroke();

var grd = context.createLinearGradient(370, 290, 545, 320);
grd.addColorStop(.9, 'rgb(255,20,147)');
grd.addColorStop(.5, 'rgb(100,0,0)');
context.fillStyle = grd;
context.fill();

//Flower Center

context.beginPath();
context.arc( 401, 335, 19, 0, 2 * Math.PI, false);
context.fillStyle = 'rgb(255, 140, 0)';
context.fill();
context.lineWidth = 5;

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

};

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

Green House Yogi