My Final Portfolio

Portfolio Outline InDesign

Here's my outline for my final project using InDesign. For each project it will have it's own page along with related smaller assignments using the same software or adobe application. Including a cover and back page.

Snowman Animation

Using photoshop cc 2014 I create this snowman animation. 

Lyrical Collage Graphics

Made a fictional fantasy image including quotes from two of my favorite writers. 

Custom Graphics

Using Adobe Photoshop created an image using custom graphics created myself. 

Fictional Magazine Cover

Fictional Travel Magazine using my original photos and Photoshop CC 2014. 

Extreme Hiking

Using Adobe Photoshop CC 2014 put an image and meshed it into another photo, for a realistic image.

Cartoon Beagle

Cartoon Beagle Puppy Depiction of a Real Photograph

Exquisite Corpse

Used Illustrator to create a character that was drawn in class.

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.

Image Represented by Text

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.

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.

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

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>

Heart Using HTML5 and Textwrangler

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

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

var x2 = 200;
var y2 = 300;
var controlx1 = 300;
var controly1 = 100;
var controlx2 = 450;
var controly2 = 500;
var endx2 = 600;
var endy2 = 300;





// Quadratic Curve
var x = 200;
var y = 200;
var controlx = 100;
var controly = 20;
var endx = 200;
var endy = 100;

var x1 = 200;
var y1 = 200;
var controlx1 = 300;
var controly1 = 20;
var endx1 = 200;
var endy1 = 300;

context.beginPath();
context.moveTo(x, y);
context.quadraticCurveTo(controlx, controly, endx, endy);
context.quadraticCurveTo(controlx1, controly1, x, y);
context.lineWidth = 10
context.fillStyle = 'rgb(255, 0, 0)';
context.fill();
context.strokeStyle = 'rgb(255, 0, 0)';
context.stroke();


/*
context.beginPath();
context.moveTo(x1, y1);

context.lineWidth = 10
context.fillStyle = 'rgb(255, 0, 0)';
context.fill();
context.strokeStyle = 'rgb(255, 0, 0)';
context.stroke();
*/







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

};

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

Hi, My name is Erica Kavanagh. I am an Ad & Pr major at the University of Tampa. I love the outdoors, whether it's kayaking, hiking, paddle boarding, yoga, etc. I'd like to believe I live a very healthy life, by clean eating and staying active. This past summer I went to cross country in Europe, I visited 4 countries in about a month, England, France, Italy, and Greece. I hope that I may learn my my beginning digital art class, is to take my creative art work and some how further expand my ideas digitally, and maybe create a portfolio for myself one day.