Final Booklet

For our final we had to make a booklet of all our past projects. It also included the poster we made. Here is what mine ended up looking like.

I decided to use the ocean as a background because I felt like I had multiple projects dealing with the ocean, as well as water in general. 

Poster Design

For this project we were asked to choose one of the four topics provided and then create an unique poster for the cause. The topic I chose was "Don't kill the world, use a _______." I did totally change the second phrase for my idea to work. I felt like the most challenging part of this project was finding the images that I wanted to use with my idea. It seemed like no pre-existing image matched the idea that was in my head. However, I kept searching and compromised on a few images including: two Photoshop images and three vector/ Illustrator images. The final product is shown below.

My idea behind the poster was that we, as a community, could come together to save the Earth's fresh water supply. By sharing a shower more water is saved on a daily basis. I went with a minimalistic approach because I felt it better suit the purpose. I am not a fan of posters that have too much going on, I find them distracting. I used Indesign to ultimately put this poster together with surprising ease. All in all, even thought the product is different than I imagined, I still consider it a success. It is humorous with a touch of seriousness that keeps it in a perfect balance. 

Photoshop Project

For this project we were asked to use a stock photo and a minimum of five other images to create our own unique image in photoshop. The stock photo we were to use is shown below.

The picture did not really match what I had been planning on creating for the project, so I decided to cut out the hands and part of the frames. The other pictures I chose were from Shutterstock and Google. 

We were not allowed to use the eraser tool for this exercise which made me nervous at first because it is so easy to use. However, it destroys the images that are used. In order to keep the original image pristine we used the masking tool. Thankfully, this tool is also very simple to use. With parts and pieces of these images I was able to create this original image. 

I created this image to show the unrealistic and drastic ideas of beauty and how ordinary woman feel pressured to conform to these ideas. I wanted to show the drastic methods of conforming with regards to brainwashing. I feel that the world is brainwashing women to feel that everyone needs to be a size 2 have full lips and perfect cheek bones. However, it is truly our differences that are beautiful. 

Logo Tag Brush

I was very grateful for being able to create this one in class with instruction. I think I would have had a difficult time figuring out the easiest way to go about creating the brush. The task ended up being fairly simple and gave me greater confidence to begin creating my own brushes in Photoshop. The final product ended up looking like this.

I wish that the white circle around my logo was a bit smaller, but that can always be fixed in the future. I like the idea of having a brush that is my logo so I can easily stamp my signature onto my photographs. I feel like this will add to the uniqueness of my brand. 

Intro to Photoshop

I have been working with Photoshop for sometime now, but I am always finding new techniques and ways of doing things that are further simplified and make life easier. For all those who were like me and wanted to learn how to get that model thin look in your photos here is the perfect video. This video shows some of the features of the liquify tool. Used in the correct amounts the liquify tool can be very handy in post processing.

Another great tutorial video I found goes through a lot of the features on the tool bar. I find this video helpful as an overall "what can I do in photoshop" tutorial. I really like the image being used to show how to tools work, which made watching the video a little more interesting. The link is posted below (I could not find it in the upload link)

https://www.youtube.com/watch?v=6TvgOR5Tb38

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