Intro To Illustrator

When first being introduced to Illustrator learning the software seemed like such a daunting task. The first major emphasis was on the pen tool. The way it was presented made the tool seem super easy to use; boy, was I wrong. I had so much trouble with the pen tool in my first few attempts of using it. The way the curves were made was beyond me. I kept getting tangled messes of path line and thought I was hopeless. I did check out some tutorials that helped better explain how to use the tool. One of these tutorials that I became fond of was made by Adobe. I have added the link below.

http://tv.adobe.com/watch/learn-illustrator-cs6/essentials-of-the-pen-and-pencil-tools/

Another tool I had a problem grasping was the gradient mesh. I wanted to be able to create a somewhat three dimensional effect and all I was creating was splotches of random color. I was able to find this tutorial that helped me out greatly.

Logo Design

When we were initially asked to come up with a logo I had no idea where to even begin. How do I know what is appropriate, should it just be my initials, what represents me? All these questions were running through my head. Eventually I just sat down and started doodling. I used my initials to create different shapes and tried to even make images out of them. I didn't really like any of the options I came up with when doing this. I ended up just drawing a circle and figuring out different ways to in cooperate my initials inside. This is what I came up with.

I was happy with the design to the right, it just needed to be smoothed out. I scanned it onto my computer and began working with it in illustrator. In my final design I decided to go with a red palate because I feel one of my most striking features is my red hair. In this way I in cooperated something that set me apart from the crowd within my logo. 

All in all I am pretty happy with the final design. I do wish I had been able to create a mesh gradient throughout the circle to give it a stone-like feel. 

Seahorse Calligram

For those of you who don't know what a calligram is like me when I first heard the terminology, it is basically an image created out or letters, symbols, or words. My initial reaction was this would be a great opportunity to create an image that could potentially be made into a post card. For this reason, I chose to make a seahorse because it is a popular marine animal. I happened to have a picture of a seahorse that was found in the mouth of a grouper at the marina I work at.

I used this photo to create the outline of the seahorse, as well as, create the color pallet for my image. I created the outline first and decided to do so with facts about seahorses. I made the outline the same color throughout to give the seahorse a set perimeter. I filled in the seahorse with jokes and poems I found about them on the internet. To add dimension to the image I selected letter by letter, changing the color to the appropriate one in regards to the picture of the seahorse for that particular area. I feel like it was this choice that really brought the final image together.

I feel that if a bright blue background was added to my image it would make for a nice postcard. 

Welcome to Digital Design

My name is Valerie and I am from Panama City, Florida. I am junior studying studio art with a concentration in photography. I chose to take this class hoping that I could find a way to incorporate digital design into my photography. From the first class I feel that the subject matter will not really help me in the way I imagined. Although, I feel like it could be a good skill to have in order to make me a more well rounded individual. I liked the "50 Things Every Creative Should Know" site. I felt like most of the information was valuable to artists as a whole. Many of the points could even be applied to the lives of the general public.

Illustrator Self Portrait

To start this project I picked out a photo of myself I wanted to recreate and uploaded it in Illustrator.

 This is the photo i used. I had a very difficult time at first using the pen tool in order to create outlines. It seemed like no matter how hard I tried the path kept getting looped together and caused my great trouble. After practicing with the pen tool some, I was able to get a better hang out it and the project became much easier. I am very pleased with how the final product turned out. It took long hours, lots of frustration, and hard work to make this happen. However, this was my first time ever using Illustrator and I am happy to say I was not turned off of the software by this project. At the beginning I was very skeptical, but by the end I feel much more confident in using the software.  This is the final product. 

 

I did still have some issues with the gradient mesh which was used to create the face, but overall I think it turned out great. 

Project 1

I chose to make a geometric fox for project one. However, it was coming up with the idea that was easy. I started with the background and created a gradient starting with yellow (the sun) and ending in dark green (the forest). The hard part came when deciding what points to put into the code to draw the shapes in the correct place. I found the arches to be the hardest to place. It was a large amount of guessing on my part on which numbers to put in for the position of the arches. I made the head of the fox stick out more by making it a solid fill of red, while I made the body to be 25% transparent. All in all I am proud of what I was able to create using code.


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

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

//rectangle background

var x=0;
var y=0;
var width = 600
var height= 800;

context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 5;
//context.fillStyle = 'rgb(0,255,0)';
context.strokeStyle = 'lime';
// add linear gradient
        var grd = context.createLinearGradient(x, y, x+width, y+height);
        // starting color
        grd.addColorStop(0, "rgb(255,204,55)");
        //intermediate color
        grd.addColorStop(0.5, "rgb(153,255,51)");
        // ending color
        grd.addColorStop(1, "rgb(0,51,0)");
        context.fillStyle = grd;
        context.fill();
context.fill();


context.stroke();

//Body
// Set the style properties.
context.fillStyle   = "rgba(255,0,0,0.75)";
context.strokeStyle = "rgb(255,0,0)";
context.lineWidth   = 3;

       
context.beginPath();
// Start from the top-left point.
context.moveTo(300, 175); // give the (x,y) coordinates
context.lineTo(475, 650);
context.lineTo(100, 650);
context.lineTo(300, 175);

// Done! Now fill the shape, and draw the stroke.
// Note: your shape will not be visible until you call any of the two methods.
context.fill();
context.stroke();
context.closePath();



//head
// Set the style properties.
context.fillStyle   = "rgb(255,0,0)";
context.strokeStyle = "rgb(255,0,0)";
context.lineWidth   = 3;
context.fillStyle = "rgb(255,0,0)";
context.beginPath();
// Start from the top-left point.
context.moveTo(150, 175); // give the (x,y) coordinates
context.lineTo(450, 175);
context.lineTo(300, 425);
context.lineTo(150, 175);

// Done! Now fill the shape, and draw the stroke.
// Note: your shape will not be visible until you call any of the two methods.
context.fill();
context.stroke();
context.closePath();
context.fill();

//left ear
// Set the style properties.
context.fillStyle   = "rgb(255,0,0)";
context.strokeStyle = "rgb(255,0,0)";
context.lineWidth   = 3;

       
context.beginPath();
// Start from the top-left point.
context.moveTo(150, 50); // give the (x,y) coordinates
context.lineTo(250, 175);
context.lineTo(150, 175);
context.lineTo(150, 50);

// Done! Now fill the shape, and draw the stroke.
// Note: your shape will not be visible until you call any of the two methods.
context.fill();
context.stroke();
context.closePath();

//inner
//Simple V line in pink
context.fillStyle= 'white';
var x= 160;
var y = 150;
var x1 = 160;
var y1 = 80;
var x2 = 215;
var y2 = 160;
//comment
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1); // move to starting coordinates
context.lineTo(x2, y2); // draw line to following point
context.lineCap = 'butt';
context.lineWidth = 2;// declare the width in pixels of the line
context.strokeStyle = 'white'; // or "#FF0000" // declare the line color in rgb or hexadecimal values

context.stroke();

var x=160;
var y=150;
var x1=215;
var y1=160;
//comment
context.beginPath();
context.moveTo (x,y);
context.lineTo (x1,y1);
context.lineCap= "butt";
context.lineWidth= 2;
context.strokeStyle= 'white';

context.stroke();
context.fill();
//Line Caps
//context.lineCap = "butt"; // "round" or "square"

//Line Joins
//context.lineJoin = "miter"; // "round" or "bevel"



//right ear
// Set the style properties.
context.fillStyle   = "rgb(255,0,0)";
context.strokeStyle = "rgb(255,0,0)";
context.lineWidth   = 3;

       
context.beginPath();
// Start from the top-left point.
context.moveTo(350, 175); // give the (x,y) coordinates
context.lineTo(450, 50);
context.lineTo(450, 175);
context.lineTo(350, 175);

// Done! Now fill the shape, and draw the stroke.
// Note: your shape will not be visible until you call any of the two methods.
context.fill();
context.stroke();
context.closePath();


//inner
//Simple V line in pink

var x= 375;
var y = 160;
var x1 = 430;
var y1 = 90;
var x2 = 435;
var y2 = 150;
//comment
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1); // move to starting coordinates
context.lineTo(x2, y2); // draw line to following point
context.lineCap = 'butt';
context.lineWidth = 2;// declare the width in pixels of the line
context.strokeStyle = 'white'; // or "#FF0000" // declare the line color in rgb or hexadecimal values

context.stroke();

var x=375;
var y=160;
var x1=435;
var y1=150;
//comment
context.beginPath();
context.moveTo (x,y);
context.lineTo (x1,y1);
context.lineCap= "butt";
context.lineWidth= 2;
context.strokeStyle= 'white';

context.stroke();
context.fill();
//left eye

//Arc
      var x = canvas.width / 2.5;
      var y = canvas.height / 3;
      var radius = 25;
      var startAngle = 1.1 * Math.PI;
      var endAngle = 1.9 * Math.PI;
      var counterClockwise = false;

      context.beginPath();
      context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
      context.lineWidth = 5;

      // line color
      context.strokeStyle = 'black';
      context.stroke();
     
     
      //right eye
     
      //Arc
      var x = canvas.width / 1.75;
      var y = canvas.height / 3;
      var radius = 25;
      var startAngle = 1.1 * Math.PI;
      var endAngle = 1.9 * Math.PI;
      var counterClockwise = false;

      context.beginPath();
      context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
      context.lineWidth = 5;

      // line color
      context.strokeStyle = 'black';
      context.stroke();
     
     
      //nose
     
// Set the style properties.
context.fillStyle   = 'black';
context.strokeStyle = 'black';
context.lineWidth   = 3;

       
context.beginPath();
// Start from the top-left point.
context.moveTo(275, 390); // give the (x,y) coordinates
context.lineTo(325, 390);
context.lineTo(300, 425);
context.lineTo(275, 390);

// Done! Now fill the shape, and draw the stroke.
// Note: your shape will not be visible until you call any of the two methods.
context.fill();
context.stroke();
context.closePath();


//right leg

var x= 325;
var y = 525;
var x1 = 325;
var y1 = 650;
//comment
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1); // move to starting coordinates
context.lineCap = 'round';
context.lineWidth = 3;// declare the width in pixels of the line
context.strokeStyle = 'red'; // or "#FF0000" // declare the line color in rgb or hexadecimal values

context.stroke();


var x= 400;
var y = 525;
var x1 = 400;
var y1 = 650;
//comment
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1); // move to starting coordinates // draw line to following point
context.lineCap = 'round';
context.lineWidth = 3;// declare the width in pixels of the line
context.strokeStyle = 'red'; // or "#FF0000" // declare the line color in rgb or hexadecimal values

context.stroke();
 
 
  //right paw
  var x=330;
var y=625;
var width =75
var height= 50;

context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 3;
context.fillStyle = 'white';
context.strokeStyle = 'white';
context.fill();


context.stroke();

var x= 350;
var y = 640;
var x1 = 350;
var y1 = 675;
//comment
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1); // move to starting coordinates
context.lineCap = 'round';
context.lineWidth = 3;// declare the width in pixels of the line
context.strokeStyle = 'black'; // or "#FF0000" // declare the line color in rgb or hexadecimal values

context.stroke();

var x= 375;
var y = 640;
var x1 = 375;
var y1 = 675;
//comment
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1); // move to starting coordinates
context.lineCap = 'round';
context.lineWidth = 3;// declare the width in pixels of the line
context.strokeStyle = 'black'; // or "#FF0000" // declare the line color in rgb or hexadecimal values

context.stroke();


//left leg
var x= 175;
var y = 525;
var x1 = 260;
var y1 = 450;
//comment
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1); // move to starting coordinates
context.lineCap = 'round';
context.lineWidth = 3;// declare the width in pixels of the line
context.strokeStyle = 'red'; // or "#FF0000" // declare the line color in rgb or hexadecimal values

context.stroke();


var x= 250;
var y = 530;
var x1 = 280;
var y1 = 500;
//comment
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1); // move to starting coordinates // draw line to following point
context.lineCap = 'round';
context.lineWidth = 3;// declare the width in pixels of the line
context.strokeStyle = 'red'; // or "#FF0000" // declare the line color in rgb or hexadecimal values

context.stroke();


//left paw
   var x=250;
var y=450;
var width =75
var height= 50;

context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 3;
context.fillStyle = 'white';
context.strokeStyle = 'white';
context.fill();


context.stroke();

var x= 275;
var y = 475;
var x1 = 275;
var y1 = 500;
//comment
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1); // move to starting coordinates
context.lineCap = 'round';
context.lineWidth = 3;// declare the width in pixels of the line
context.strokeStyle = 'black'; // or "#FF0000" // declare the line color in rgb or hexadecimal values

context.stroke();

var x= 300;
var y = 475;
var x1 = 300;
var y1 = 500;
//comment
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1); // move to starting coordinates
context.lineCap = 'round';
context.lineWidth = 3;// declare the width in pixels of the line
context.strokeStyle = 'black'; // or "#FF0000" // declare the line color in rgb or hexadecimal values

context.stroke();


//tail
   context.fillStyle= "rgba(255,0,0,.75)";
   
      var x = canvas.width / 1.5;
      var y = canvas.height / 1.65;
      var radius = 175;
      var startAngle = .38 * Math.PI;
      var endAngle = 1.54 * Math.PI;
      var counterClockwise = true;

      context.beginPath();
      context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
      context.lineWidth = 3;

      // line color
      context.strokeStyle = 'red';
      context.stroke();
      context.fill();
     
   
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ

};

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

Digital Rectangle

Creating this rectangle was fairly easy using the coding shell. It was just a little bit of changing numbers and colors

<!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=350;
var width = 100
var height= 400;

context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 5;
//context.fillStyle = 'black';
context.strokeStyle = 'black';
// add linear gradient
        var grd = context.createLinearGradient(x, y, x+width, y+height);
        // starting color
        grd.addColorStop(0, 'purple');
        //intermediate color
        grd.addColorStop(0.5, 'blue');
        // ending color
        grd.addColorStop(1, 'black');
        context.fillStyle = grd;
        context.fill();
context.fill();


context.stroke();

//context.rect(x, y, width, height); // top left corner x and y coordinates, width and height

// for a square width = height , the width and the height have the same value