Artsy Stuff

So, although this blog is intended as a place to upload my homework for my Beginning Digital Arts class, I thoroughly enjoy posting on here, as it has given me a place to share my ideas and creativity.  So what I've decided is that I am going to upload more than just my work for ART210 on here.  I'm going to post whatever I want, and will most likely continue to post on here after this class is over, because, as I said, this is something I enjoy.  This post is just going to be a bunch of my work from mixed media.  Some things I've done for other classes, some things I've done just because.  I hope you all like this because I plan on continuing to upload all kinds of stuff on here.

iPhoneography

Marker on Imagination Board
Concept: Creating ambiguous space

Marker and Pencil on Imagination Board
Concept: Choose a plant (I chose some leaves) and draw it five times
Order (Left to Right): Detailed pencil drawing, Negative, Reverse negative, Outline, Combination

Pencil and Powdered Graphite on Imagination Board
Concept: Create an 11"x16" still life and draw to scale

Pencil on Drawing Paper
Concept: Create a realistic representation of a part of the Bailey Art Studio at The University of Tampa scaled correctly to fit the paper

Pencil on Drawing Paper
Concept: Create a still life adjusting proportions to fit paper

Cannon Photography

Cannon Photography

Cannon Photography

Cannon Photography

Cannon Photography

Cannon Photography

Cannon Photography

Cannon Photography

iPhoneography

Animation Trial Run

So we're learning how to animate in Photoshop, and it's a very time consuming process.  This is what my trial run looks like...

As I wrote, THIS IS HARD!!! Wish me luck making a 45 second video...

MorphX

For this project, I had to use the MorphX program to morph my younger self into my current self.  Honestly, for me, the hardest part of this project was downloading the MorphX program onto my computer, because it took forever!!! But in the end, I think it turned out pretty good, so here's my video:

 

This is the original photo of me as a toddler:

 

And here's me now, Photoshopped into the same background.  Less blonde, but not much different:

 

And this is what the process on the MorphX program looked like to make the video:

Photoshop Tutorials

Just some Photoshop tutorials that I found interesting and helpful

Photoshop Tutorial: Five Easy Photo Retouching Tips and Tricks

Retouch, Airbrush, and Smooth Skin Professionally in Photoshop

Photoshop Tutorial: How to Make Your Photos Look Hipster

History of Film Compositing--From Mattes to Green Screen

This video explains the history of the concept of the green screen, which is quite interesting.  It's very interesting to see how the idea started out, and how far it has come today.  I found it interesting that an actual 'green' screen wasn't used until recently.  This is an interesting video about the history of movie making.

Side note: I find the guy talking in the video to be quite boring, but that's just my opinion.

https://vimeo.com/70304814

Art Project

I'm updating this post because I finally figured out how to fix that line running down the center of my nose in the first try on this project that was bugging me.  What I ended up having to do was use a combination of the brush and clone stamp tools in Photoshop, and play around with the opacity.  This one still has some issues, but I am a little happier with the result of this one:

This was a tough one.  For this project, we had to mix our face into the face of a famous or well-known picture.  I chose to combine my picture with a famous National Geographic magazine cover.  I had a hard time matching my skin tone with the skin tone of the woman photographed, but eventually I figured it out.  Not my strongest piece, but not bad.  Here's how it turned out:

Here's the original magazine cover:

http://press.nationalgeographic.com/2013/09/16/national-geographic-magazine-celebrates-power-of-photography/

And here's the picture of me that I used:

Somewhere...Again

So this is the same picture as my previous "Somewhere" picture, as you can see, but this one is cleaned up a bit more, and looks more realistic because of this.  As you can see, in this copy the original couple that is behind us is unseen.  In the previous upload, you could see their legs and parts of their feet behind ours.  To fix this, I used the clone stamp tool to select a portion of the ground in the original picture, then created a new layer and brushed over the portions of the legs that were visible.  I then used the burn and dodge tools to lighten and darken the area I just created in order to make it blend more.  Finally, in the layer that is me and Zach, I added a slight blur and adjusted the brightness and contrast in order to give it a more realistic look.

Somewhere

For our "Somewhere" picture, we had to place ourselves somewhere that we had never been before.  For mine, instead of choosing a place around the world, I chose a place in history.  I have never been in the exact moment that this famous kiss between two strangers was captured on camera.  With the help of my boyfriend and photoshop, I now have a picture as if I were there, and as if those two strangers were me and my boyfriend.

To create this picture, I first found the image of the famous kiss online via Google:

http://www.complex.com/style/NaN/Invalid%20date/famous-kissing-photographs/v-j-day-in-times-square-by-alfred-eisenstaedt

Next, I recruited Zach and took this picture:

The key here was taking the picture with a neutral background so it would be easier to crop us out, which was the next step in this process.  In photoshop, I hid all other layers on the file and used the magic wand tool to select the entire background of the above picture, so all that was left was me and Zach.  Here's what that looked like when I was done:

Just a little side note here, the neutral background is a MUST, especially if you're cropping around strands of hair, like I had to do with mine.  If you don't have a neutral background, it becomes very easy to crop out strands of hair or to make it look unnatural and stiff.

Anyways, the next step was to make the original picture of the kiss visible again and position me and Zach so that we were over the nurse and sailor.  The goal here was to make it look as though this picture was taken of us, and not the strangers:

Looking good!  But obviously this picture can't be real!  I mean, me and Zach are in color and everything else is black and white!  I can totally fix that though:

There we go!  Looks great!  After this, I went on to adjust some of the settings within the different layers to make it look more realistic, as if we were actually there, and the end result is the picture at the top of this post!  Personally, I think this picture turned out pretty good!  I hope you all like it! 

Autoscopy GIF (Graphic Interchange Format)

Another thing that I had to do to my autoscopy was to save the file for the web in a GIF format.  Again, I had to create five GIF formats for my autoscopy, but with this one, instead of just lowering the quality (or in this case, the dithering) the instructions were to simply mess around with the settings and see what the results were.  Again, under each picture will be listed the settings and alterations applied to the file.

Colors: 2
Dither: 47%
Palet: Selective
23.81 KiloBytes

Colors: 8
Dither: 72%
Palet: Perceptual
58.81 KiloBytes

Colors: Auto
Dither: 86%
Palet: Greyscale
The first color listed in the Color Table is transparent
205.3 KiloBytes

Colors: 4
Dither: 63%
Palet: Mac OS
48.11 KiloBytes

Colors: 16
Dither: 55%
Palet: Windows
The ninth color listed in the Color Table is transparent
87.89 KiloBytes

Autoscopy JPG

After creating my autoscpoy, I had to save it for the web in a JPG format five times, reducing the quality each time I saved.  Shown below are the JPGs, along with their quality and how changing the quality affected the KiloBytes of the file.

100% quality
450.1 KiloBytes

75% quality
158.7 KiloBytes

50% quality
64.01 KiloBytes

25% quality
33.15 KiloBytes

0% quality
14.14 KiloBytes

Autoscopy

For our autoscopy project, we had to create an image representing a part of ourselves that we feel most connected to.  For me, I chose to focus on my art.  I have always loved drawing, taking pictures, crafting, and basically any other form of art that you can think of.  Every little kid draws and colors pictures, it just so happens that I never stopped.

Art has a funny way of making me happy and stressing me out at the same time, which is what I am trying to show in this image.  To create this project, I took two pictures of myself and placed them side by side.  In the picture on the left I am pulling on my hair and making a face of confusion and frustration.  In the picture on the right I am screaming.  I thought these two images perfectly portray how I feel when I have been working on a piece for a long time and want nothing more than to be done with it.  I also decided to add a bit of noise to these images, because, again, frustration. 

The rest of this picture is composed of drawings that I have done.  The background is a picture of The University of Tampa's Bailey Art Studio that I spent at least 40 hours of my life drawing, and the three sunflowers are another drawing that I had to do for my beginning drawing class.

Finally, I added my signature to the picture, because while art frustrates me and drives me crazy 99% of the time, at the end of the day, that last 1% is pure happiness; happiness from being done with whatever I've been working on, and happiness with the results.  

So, there you have it.  That's me: A struggling artist who loves and hates what she does at the same time.

BWColor

For this assignment, I started with a picture of me that was between 800 and 1000 pixels on the larger side (in this case, the height).  This picture was 720 x 960 pixels.  A little background info: This picture was taken on my last day of work at Campbell's Dairyland.  There is a tradition there that on an employee's last day, they get smacked with whipped cream in the face at the end of their shift.  Knowing that I was aware of this, I ended up getting it not even an hour into my eight hour shift, because everyone wanted to catch me off guard...and it worked.  I had the pleasure of working all day covered in whipped cream, sprinkles, and ice cream.  It actually ended up getting in my left eye, and I was crying the rest of my shift simply because there was whipped cream in my eye that just wouldn't go away.  They truly caught me off guard, and, best of all (that was totally sarcastic), they did it in front of a ton of customers.  Let's just say it was a long shift after that...

As seen here, I first converted the picture into black and white, simply because that's what I had to do for the assignment, so nothing too exciting happened during this step.

And then the fun happened.  It was so incredibly cool to see myself transform into something else as I completed this assignment.  The whipped cream gave me some trouble, just because it's in a weird "shape", but I think it ultimately turned out pretty good.  Overall, this was a fun assignment and I think the end result is pretty great.  I call this a success.

Canvas Homework

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> ART 210 - CANVAS PROJECT </title>

<style type="text/css">


body,td,th {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
color: rgba(0,0,0,1);
}


body {
background-color: rgba(255,255,255,1);
}


#myCanvas { border: rgba(102,0,255,1) medium dashed; }


</style>


</head>

<body>

<canvas id="myCanvas" width="800" height="600"></canvas>

<script>


var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

//// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> YOUR CODE STARTS HERE

//BACKGROUND
context.beginPath();
context.rect(0,0,800,600);
context.fillStyle = 'rgba(255,153,77,0.45)';
context.fill();
context.closePath();

//DESK
var grd = context.createLinearGradient(0,220,600,800);
grd.addColorStop(0,'rgba(168,108,0,1)');
grd.addColorStop(0.3,'rgba(153,98,0,1)');
grd.addColorStop(0.5,'rgba(153,79,0,1)');
grd.addColorStop(0.7,'rgba(130,66,0,1)');
grd.addColorStop(1,'rgba(108,45,0,1)');

context.beginPath();
context.moveTo(0,600);
context.lineTo(0,440);
context.lineTo(800,220);
context.lineTo(800,600);
context.lineTo(0,600);
context.fillStyle = grd;
context.fill();
context.strokeStyle = 'rgba(155,98,0,1)';
context.lineWidth = 3;
context.stroke();
context.closePath();

//PAPER 1
context.beginPath();
context.rect(540,320,260,280);
context.fillStyle = 'white';
context.fill();
context.strokeStyle = 'black';
context.lineWidth = 1;
context.stroke();
context.closePath();

//CIRCLE 1
context.beginPath();
context.arc(620,420,40,0*Math.PI,2*Math.PI,true);
context.fillStyle = 'rgba(176,74,157,0.25)';
context.fill();
context.closePath();

//CIRCLE 2
context.beginPath();
context.arc(700,480,80,0*Math.PI,2*Math.PI,true);
context.fillStyle = 'rgba(111,164,130,0.25)';
context.fill();
context.closePath();

//CIRCLE 3
context.beginPath();
context.arc(700,480,60,0*Math.PI,2*Math.PI,true);
context.fillStyle = 'rgba(255,200,130,0.5)';
context.fill();
context.closePath();

//CIRCLE 4
context.beginPath();
context.arc(700,480,40,0*Math.PI,2*Math.PI,true);
context.fillStyle = 'rgba(227,151,204,0.75)';
context.fill();
context.closePath();

//CIRCLE 5
context.beginPath();
context.arc(620,520,80,0*Math.PI,2*Math.PI,true);
context.fillStyle = 'rgba(38,179,255,0.25)';
context.fill();
context.closePath();

//CIRCLE 6
context.beginPath();
context.arc(800,540,40,0*Math.PI,2*Math.PI,true);
context.fillStyle = 'rgba(213,179,255,0.5)';
context.fill();
context.closePath();

//CIRCLE 7
context.beginPath();
context.arc(800,320,200,0*Math.PI,1*Math.PI,false);
context.fillStyle = 'rgba(47,210,81,0.5)';
context.fill();
context.closePath();

//PAPER 2
context.beginPath();
context.moveTo(360,600);
context.lineTo(300,540);
context.lineTo(480,360);
context.lineTo(720,600);
context.lineTo(360,600);
context.fillStyle = 'white';
context.fill();
context.strokeStyle = 'black';
context.lineWidth = 1
context.stroke();
context.closePath();

//BEZIER 1
context.beginPath();
context.moveTo(360,560);
context.bezierCurveTo(420,300,560,800,620,540)
context.strokeStyle = 'rgba(255,187,81,1)';
context.lineWidth = 3;
context.stroke();
context.closePath();

//BEZIER 2
context.beginPath();
context.moveTo(500,420);
context.bezierCurveTo(320,600,500,380,480,600)
context.strokeStyle = 'rgba(130,9,81,1)';
context.lineWidth = 3;
context.stroke();
context.closePath();

//BEZEIR 3
context.beginPath();
context.moveTo(400,580);
context.bezierCurveTo(1000,580,300,460,520,440)
context.strokeStyle = 'rgba(0,255,187,1)';
context.lineWidth = 3;
context.stroke();
context.closePath();

//PENCIL 1
context.beginPath();
context.moveTo(210,480);
context.lineTo(220,460);
context.lineTo(230,480);
context.lineTo(210,480);
context.fillStyle = 'rgba(255,191,142,1)';
context.fill();
context.closePath();

//PENCIL TIP 1
context.beginPath();
context.moveTo(215,470);
context.lineTo(220,460);
context.lineTo(225,470);
context.lineTo(215,470);
context.fillStyle = 'rgba(255,187,81,1)';
context.fill();
context.closePath();

//PENCIL BODY 1
context.beginPath();
context.rect(210,480,20,120);
context.fillStyle = 'rgba(255,187,81,1)';
context.fill();
context.closePath();

//PENCIL 2
context.beginPath();
context.moveTo(190,480);
context.lineTo(200,460);
context.lineTo(210,480);
context.lineTo(190,480);
context.fillStyle = 'rgba(255,191,142,1)';
context.fill();
context.closePath();

//PENCIL TIP 2
context.beginPath();
context.moveTo(195,470);
context.lineTo(200,460);
context.lineTo(205,470);
context.lineTo(195,470);
context.fillStyle = 'rgba(130,9,81,1)';
context.fill();
context.closePath();

//PENCIL BODY 2
context.beginPath();
context.rect(190,480,20,120);
context.fillStyle = 'rgba(130,9,81,1)';
context.fill();
context.closePath();

//PENCIL 3
context.beginPath();
context.moveTo(170,480);
context.lineTo(180,460);
context.lineTo(190,480);
context.lineTo(170,480);
context.fillStyle = 'rgba(255,191,142,1)';
context.fill();
context.closePath();

//PENCIL TIP 3
context.beginPath();
context.moveTo(175,470);
context.lineTo(180,460);
context.lineTo(185,470);
context.lineTo(175,470);
context.fillStyle = 'rgba(0,255,187,1)';
context.fill();
context.closePath();

//PENCIL BODY 3
context.beginPath();
context.rect(170,480,20,120);
context.fillStyle = 'rgba(0,255,187,1)';
context.fill();
context.closePath();

//RECTANGLE 1
context.beginPath();
context.rect(0,0,300,250);
context.fillStyle = 'rgba(110,110,176,0.5)';
context.fill();
context.strokeStyle = 'black';
context.lineWidth = 1;
context.stroke();
context.closePath();

//RECTANGLE 2
context.beginPath();
context.rect(0,0,275,225);
context.fillStyle = 'rgba(110,110,219,0.5)';
context.fill();
context.closePath();

//RECTANGLE 3
context.beginPath();
context.rect(0,0,250,200);
context.fillStyle = 'rgba(110,110,255,0.5)';
context.fill();
context.closePath();

//RECTANGLE 4
context.beginPath();
context.rect(0,0,225,175);
context.fillStyle = 'rgba(110,159,255,0.5)';
context.fill();
context.closePath();

//RECTANGLE 5
context.beginPath();
context.rect(0,0,200,150);
context.fillStyle = 'rgba(110,193,255,0.5)';
context.fill();
context.closePath();

//RECTANGLE 6
context.beginPath();
context.rect(0,0,175,125);
context.fillStyle = 'rgba(110,232,255,0.5)';
context.fill();
context.closePath();

//RECTANGLE 7
context.beginPath();
context.rect(0,0,150,100);
context.fillStyle = 'rgba(110,255,255,0.5)';
context.fill();
context.closePath();

//RECTANGLE 8
context.beginPath();
context.rect(0,0,125,75);
context.fillStyle = 'rgba(153,255,255,0.5)';
context.fill();
context.closePath();

//RECTANGLE 9
context.beginPath();
context.rect(0,0,100,50);
context.fillStyle = 'rgba(204,255,255,0.5)';
context.fill();
context.closePath();


//// <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< YOUR CODE ENDS HERE


// CHANGE THE CREDITS

context.beginPath();
context.font = 'bold 20px Arial';
context.fillStyle = "rgba(0,0,0,0.75)";
context.fillText('BREANNE BROWN', 20, 550);
context.closePath();

</script>


</body>
</html>