Portfolio

Portfolio 

By: Brooke Rivera 

Business Cards

Business Cards 

By: Brooke Rivera 

Estimated Time: 2.5 hours 

I create 3 business cards that fit my identity using Indesign. I used a color schemes that represent nature in all three cards as well as including images of flowers because I love flowers and nature. My logo is in the back of all three cards place in the center big too get people's attention. I decided to keep my business cards simple and clean for people's attention would not get drawn away by too much. My favorite one is the center one cause of the colors I chose. I also like the font I chose for that one. In all three card I tried to pick font that looked good together mostly sticking with cursive fonts and serifs. I am very happy with how my card came out. I love them a lot.

Redone Business Cards

I redid my business cards because I wanted them to be more personalized for me. Therefore, I took out the flowers, which made me look like a florist, and I added my own artworks. I am definitely more happy with the outcome of these cards- I like them a lot more.

Cinemagraph

Cinemagraph

By Brooke Rivera

 

Est time: 5 hours 

This project was a little difficult for me to figure out. I challenged myself by choosing something that swings back and forth. I first took a 15 second video on my iPhone then imported it into photoshop. From there I duplicated the video layer and trimmed it to where it would loop without a huge jump. Then, I created a layer mask on the first video layer and masked out the swinging loop for that was the only thing moving. I had a hard time with the background staying in place because the loop is over mover water which made it a lot harder. 

I did like this project a lot tho because it did challenge me and I learned something in photoshop I did not know how to do beforehand. I am pretty satisfied with how it came out. I exported my file as a gif so that it would loop forever. 

MEME

MEMES

By: Brooke Rivera

Est time: 1 hour 

I used photoshop to create these two memes of myself. First I imported the image into photoshop. Then, I used Impact font to write what I wanted the captions to be. Finally, I went to layers then layer style and selected stroke. I made the stoke go on the outside of the front and set the stroke fill to black and 3. 

Day Dreaming / Placing Myself in a Space

Day Dreaming 

By: Brooke Rivera

Estimated Time: 1 hour 

In this piece I used a picture I took of myself. The first thing I did was make a selection of the top of my head and opened it up. The second thing I did to this pictures was using liquify to drop around the pixels of the photo to make it look like my head is dripping and to make it look like things are pouring out of my head. In addition, I also liquified the background of the photo to make it look trippy. Then, I layered two photos I took of lights and made the opacity low on them for you could see through them, then I created a layer mask on them to erase some of the details I did not want to show in the photo. Finally, I added a "daydreaming" word on the top to add to the aesthetic, I did this by create another layer mask and messing with the opacity. I am very happy with the way the image came out. 

Part 2

Placing Myself in a Space

By: Brooke Rivera 

Estimated time: 30 Mins

For the image I wanted to place myself in a space I have never been to before, so I chose space. I used an image of myself from a little bit ago. I created a layer mask on it and took away the background only leaving myself in a sitting position. The background in the photo is only the dark sky with the stars in it. The moon is a separate photo. I also created a layer mask on that as well and took away the ground. I also incorporated another image of the planets. I layered in on top on the background and turned down the opacity and created a layer mask on it. Finally, I created a drop shadows on myself to make it look for realistic. I also used the burn tool to make the moon darker on the side where I am sitting on it. I am also very happy with the way this image turned out. 

BW to COLOR

By: Brooke Rivera

Estimated time: 10 hours 

          I chose a photo of myself and put it into photoshop changing it to black and white. From there I used Adobe Color and chose a color scheme. Using only compound, complementary, analogous, monochromatic, shades, and triad color schemes I recolored the photos. In most of my photos I chose to use a low opacity and a doted brush to add creativity to my redesigned images. I used mask layers on most of my photos for the background and the different brushes to do my hair. I played around with the opacity a lot on my face and skin to get the definition of my face details coming through. My photos have a pop art vibe as well as my own style incorporated into them. At the end I put my logo on the images by using a custom brush preset. 

Brush Preset Logo Design 

By: Brooke Rivera 

Using photoshop I made my own brush out of my logo in photoshop. 

Poster 

By: Brooke Rivera

Estimated time : 2 hours 

       For this assignment, using illustrator, I chose saving the planet as my theme. I wanted to create a poster that grabs people's attention as soon as they look at it. I also chose to do short lines of text to make it simple and easy to read within seconds. I chose to put myself in the poster because everyday people, like myself, are the ones destroying the planet. Everything we do affects life as we know it. If we make small changes to our everyday life style it will affect the planet for the better. Every small change helps. 

       For this poster I used image trace to manipulate my photo and the photo of the earth. I ungrouped the image trace that played around with the color scheme and opacity. Then, I rearranged the placement of each trace to make it look as if the photos are distorted and deteriorating, like what we are doing to our planet. In my eyes are small globes to symbolize what we need to focus on and look to. I also manipulated the text font to the same theme as my photos to counterbalance my poster.  

Lady Bug Mesh Art

Lady Bug

By: Brooke Rivera 

Estimated Time: 2 Hours 

        I decided to create a lady bug in Adobe Illustrator because lady bug's are my favorite bug. I started out by using the pen tool to outline the lady bugs wings. After I used the mesh tool to create a mesh inside the lady bug and used the eye dropper tool to get the correct colors. The mesh tool makes the the lady bug look more realistic and 3D. 

      After creating the lady bug I designed the background. I used a solid green in the background and created a leaf for the bug to rest on. Then, I created a drop shadow on the leaf of the lady bug to make it look a bit more realistic. 

     I am very satisfied with how my bug came out. Finally, the last thing I did was put my name under the leaf to sign my work. 

Inspiration 

Logos for Myself

MY LOGOS

Estimated time: 2 hours 

I chose to use my name and initials for my logos because what better describes you than your own name. I am not hiding behind my name as an artist, but rather expressing myself through my name. I love my name because it is who I am. In addition, I also love flowers and cursive because it brings life to things, and as a person I am very in touch with the flow of nature. So, that is why I chose this font and designed flowers. My favorite is the first logo. 

My logos also stay in tact and legible when I shrink them. 

CHOSEN LOGO

I decided on this logo because it is less formal than my first choice, and it is also simple and fun. It is my initials and a flower connecting at the end of the A. 

Colored Logos

I chose these colors because they are my favorite. The first one is just solid maroon because it is my absolute favorite color and everything I where is that color. The second one is green because it is my second favorite color, and when thinking of green you think of nature. I love nature because I am from the Garden State- NJ. The third is more of a fun logo. I chose to do the flower in yellow because it is purples complementary color and contrasts well. 

Tampa Text

Downtown Tampa By Brooke Rivera 

"The City" - Constantine P. Cavafy

Time this took: 6 hours 

Inspiration:

I took this picture myself. While thinking about what I wanted to do for my Digital Media project I editing my photos from this shoot the other night. I decided to do an outline of Tampa's skyline because I love the city. I chose "The City" because it's a beautiful poem that I discovered a few months ago. 

The City
You said, "I will go to another land, I will go to another sea.Another city will be found, a better one than this.Every effort of mine is a condemnation of fate;and my heart is -- like a corpse -- buried.How long will my mind remain in this wasteland.Wherever I turn my eyes, wherever I may lookI see black ruins of my life here,where I spent so many years destroying and wasting."

You will find no new lands, you will find no other seas.The city will follow you. You will roam the samestreets. And you will age in the same neighborhoods;and you will grow gray in these same houses.Always you will arrive in this city. Do not hope for any other --There is no ship for you, there is no road.As you have destroyed your life herein this little corner, you have ruinded it in the entire world. 

Canvas HTML Art

Digital Media - Canvas HTML Art

By: Brooke Rivera

The first step was creating what I wanted her to look like. I know I wanted to create a character, but  I wasn't sure what I wanted her to look like. My drawing came out differently on Canvas than it did on the graph paper- the hair was originally not in pigtails. I created her head and neck first on DreamWeaver, then I moved on the the nose and mouth, then her eyes and glasses, and finally her hair. The hair was the most difficult part. The very last thing I did was the fun background. I felt like it was boring just with her, so I created a colorful fun background to make her stand out. 

Took: 6 Hrs 

Code:

<!DOCTYPE HTML>

<html>

<head>

<script>

window.onload = function() {

var canvas = document.getElementById("myCanvas");

var context = canvas.getContext("2d");

////////////////////////////////////// 

// Background 

for (var i=0; i<canvas.height; i+=10) {

context.beginPath(); 

var startX = 50;

var startY = 50;

var endX = canvas.width/2;

var endY = canvas.height/2;

 context.rect(0,0, canvas.width, canvas.height);

 var circ1X = 50;

 var circ1Y = 10;

 var circ1Radius = 100;

// outer circle

 var circ2X = 20;

 var circ2Y = 30;

 var circ2Radius = i; 

 var grd = context.createRadialGradient(circ1X, circ1Y, circ1Radius, circ2X, circ2Y, circ2Radius);

grd.addColorStop(0, "rgb(201,246,210)");

 var N = 0.9;

grd.addColorStop(N, "rgb(252,255,159)");

 // outer color

grd.addColorStop(1, "rgb(234,137,235)");

 context.fillStyle = grd;

 context.fill();

context.stroke();

}

// Curve 2

for (var i=0; i<canvas.height; i+=10) {

var startX = 500;      

var startY = i;

var endX = 700;     

var endY = i/5;

var cpoint1X = canvas.width/2;

var cpoint1Y = canvas.height/2;  

var cpoint2X = i;

var cpoint2Y = 150;

context.beginPath();

context.moveTo(startX, startY);  

context.bezierCurveTo(cpoint1X, cpoint1Y , cpoint2X, cpoint2Y, endX, endY);

context.lineWidth = 5;

context.strokeStyle = "rgb("+i/2+",150,243)";

context.stroke();

}

// Curve 3

for (var i=0; i<canvas.height; i+=5) {

var startX = 800;      

var startY = 0;

var endX = i;     

var endY = 600;

var cpoint1X = canvas.width/i;

var cpoint1Y = canvas.height/i;   

var cpoint2X = i;

var cpoint2Y = 150;

context.beginPath();

context.moveTo(startX, startY);  

context.bezierCurveTo(cpoint1X, cpoint1Y , cpoint2X, cpoint2Y, endX, endY);

context.lineWidth = 5;

context.strokeStyle = "rgb("+i/2+","+i/3+",201)";

context.stroke();

}

// Curve 1

for (var i=0; i<canvas.height; i+=10) {

var startX = 600;      

var startY = 400;

var endX = i/8;     

var endY = i/5;

var cpoint1X = canvas.width/2;

var cpoint1Y = canvas.height/2;   

var cpoint2X = i;

var cpoint2Y = 150;

context.beginPath();

context.moveTo(startX, startY);  

context.bezierCurveTo(cpoint1X, cpoint1Y , cpoint2X, cpoint2Y, endX, endY);

context.lineWidth = 1;

context.strokeStyle = "rgb("+i/2+",232,112)";

context.stroke();

}

// Curve 5

for (var i=0; i<canvas.height; i+=5) {

var startX = 600;     

var startY = 500;

var endX = 800;    

var endY = i/2;

var cpoint1X = i/8;

var cpoint1Y = i/.5;   

var cpoint2X = canvas.width*.1/10;

var cpoint2Y = canvas.height*9/10;

//  Bezier curve

context.beginPath();

context.moveTo(startX, startY);  

context.bezierCurveTo(cpoint1X, cpoint1Y , cpoint2X, cpoint2Y, endX, endY);

context.lineWidth = 2;

context.strokeStyle = "rgb("+i/2+","+i+",234)";

context.stroke();

}

// Curve 3

for (var i=0; i<canvas.height; i+=5) {

var startX = 800;     

var startY = 500;

var endX = i;   

var endY = 600;

var cpoint1X = canvas.width/i;

var cpoint1Y = canvas.height/i;   

var cpoint2X = i;

var cpoint2Y = 150;

context.beginPath();

context.moveTo(startX, startY);  

context.bezierCurveTo(cpoint1X, cpoint1Y , cpoint2X, cpoint2Y, endX, endY);

context.lineWidth = 5;

context.strokeStyle = "rgb("+i/2+","+i/3+",116)";

context.stroke();

}

//Curve1

for (var i=0; i<canvas.height; i+=5) {

var startX = 600;      

var startY = 200;

var endX = i/8;     

var endY = i/5;

var cpoint1X = canvas.width/2;

var cpoint1Y = canvas.height/2;   

var cpoint2X = i;

var cpoint2Y = 150;

context.beginPath();

context.moveTo(startX, startY); 

context.bezierCurveTo(cpoint1X, cpoint1Y , cpoint2X, cpoint2Y, endX, endY);

context.lineWidth = 5;

context.strokeStyle = "rgb("+i/2+",150,243)";

context.stroke();

}

//  Curve 2

for (var i=0; i<canvas.height; i+=10) {

var startX = 600;

var startY = 650;

var endX = i/8;     

var endY = i/5;

var cpoint1X = canvas.width/2;

var cpoint1Y = canvas.height/2;  

var cpoint2X = i;

var cpoint2Y = 150;

context.beginPath();

context.moveTo(startX, startY); 

context.bezierCurveTo(cpoint1X, cpoint1Y , cpoint2X, cpoint2Y, endX, endY);

context.lineWidth = 5;

context.strokeStyle = "rgb("+i/2+","+i/3+",240)";

context.stroke();

}

// Curve 2

for (var i=0; i<canvas.height; i+=5) {

var startX = 0;     

var startY = 600;

var endX = 0;    

var endY = i;

var cpoint1X = canvas.width/1/10;

var cpoint1Y = canvas.height/2;  

var cpoint2X = i*2;

var cpoint2Y = 150;

context.beginPath();

context.moveTo(startX, startY);  

context.bezierCurveTo(cpoint1X, cpoint1Y , cpoint2X, cpoint2Y, endX, endY);

context.lineWidth = 2;

context.strokeStyle = "rgb(251, 228, 255)///("+i/2+",150,243)";

context.stroke();

}

// Curve 4

for (var i=0; i<canvas.height; i+=5) {

var startX = 800;      

var startY = i/4;

var endX = 900;     

var endY = 400;

var cpoint1X = 200;

var cpoint1Y = i/.5;   

var cpoint2X = canvas.width*1/10;

var cpoint2Y = canvas.height*9/10;

//Bezier curve

context.beginPath();

context.moveTo(startX, startY);  

context.bezierCurveTo(cpoint1X, cpoint1Y , cpoint2X, cpoint2Y, endX, endY);

context.lineWidth = 1.5;

context.strokeStyle = "rgb(106, 229, 223)";

context.stroke();

}

// Curve 4

for (var i=0; i<canvas.height; i+=5) {

var startX = 800;     

var startY = 300;

var endX = 900;     

var endY = 400;

var cpoint1X = 200;

var cpoint1Y = i/.5;   

var cpoint2X = canvas.width*.1/10;

var cpoint2Y = canvas.height*9/10;

//Bezier curve

context.beginPath();

context.moveTo(startX, startY);  

context.bezierCurveTo(cpoint1X, cpoint1Y , cpoint2X, cpoint2Y, endX, endY);

context.lineWidth = 2;

context.strokeStyle = "rgb(192, 227, 251)";

context.stroke();

}

// Curve5

for (var i=0; i<canvas.height; i+=5) {

var startX = 800;      

var startY = 500;

var endX = 900;     

var endY = 400;

var cpoint1X = 200;

var cpoint1Y = i/.5;   

var cpoint2X = canvas.width*6/10;

var cpoint2Y = canvas.height*9/10;

context.beginPath();

context.moveTo(startX, startY);  

context.bezierCurveTo(cpoint1X, cpoint1Y , cpoint2X, cpoint2Y, endX, endY);

context.lineWidth = 2;

context.strokeStyle = "rgb(192, 250, 251)";

context.stroke();

}

//NECK

   

    context.beginPath();

    //context.moveTo(350, 350);

    context.lineTo(250, 600);

    context.quadraticCurveTo(360, 550, 250, 300);

    context.lineTo(550, 300);

    context.quadraticCurveTo(350, 570, 700, 700);

   

    var neck = context.createLinearGradient(0,0,300,600);

   

   

    neck.addColorStop(0., "rgb(247, 235, 175)");

   

    neck.addColorStop(1, "rgb(244, 236, 194)");

    context.closePath();

    context.strokeStyle = 'black';

    context.stroke();

    context.fillStyle = neck;

    context.fill();

   

   

 ///HEAD 

 context.beginPath();

 context.moveTo(400, 500); //starting point

   

    context.bezierCurveTo(750,300,500,-200,300,0);

    context.bezierCurveTo(385,-100,-10,200,400,500);

   

context.closePath();

    context.fillStyle = head;

   

var head = context.createRadialGradient(200, 200, 350, 300, 500, 350);

    head.addColorStop(0, "tan");

    head.addColorStop(1, "tan");

   

context.strokeStyle = "black";

    context.stroke();

    context.fill();

   

   

//SMILE

   

    context.beginPath();

    context.moveTo(350, 440);

    context.quadraticCurveTo(400, 460, 440, 440);

    context.lineTo(350, 440);

    context.stroke();

    context.fillStyle = "rgb(253, 244, 254)";

    context.fill();

   

//left eye

context.beginPath();

      context.moveTo(335, 215);

      context.lineTo(335, 250);

      context.lineWidth = 76;

      context.strokeStyle = "rgba(93,38,6,.70)";

      context.lineCap = 'round';

      context.stroke();

      

context.closePath();

// left eye inner

context.beginPath();

      context.moveTo(335, 215);

      context.lineTo(335, 250);

      context.lineWidth = 68;

      context.strokeStyle = "rgba(187,154,116,.12)";

      context.lineCap = 'round';

      context.stroke();

      

context.closePath();

//right eye middle 

context.beginPath();

      context.moveTo(445, 240);

      context.lineTo(445, 250);

      context.lineWidth = 66;

      context.strokeStyle = "rgba(255,255,255,.32)";

      context.lineCap = 'round';

      context.stroke();

      

context.closePath();

//right eye inner

context.beginPath();

      context.moveTo(445, 215);

      context.lineTo(445, 250);

      context.lineWidth = 68;

      context.strokeStyle = "rgba(187,154,116,.12)";

      context.lineCap = 'round';

      context.stroke();

      

context.closePath();

// right eye

context.beginPath();

      context.moveTo(445, 215);

      context.lineTo(445, 250);

      context.lineWidth = 76;

      context.strokeStyle = "rgba(93,38,6,.70)";

      context.lineCap = 'round';

      context.stroke();

      

context.closePath();

   

//left eye middle

context.beginPath();

      context.moveTo(335, 240);

      context.lineTo(335, 250);

      context.lineWidth = 66;

      context.strokeStyle = "rgba(255,255,255,.32)";

      context.lineCap = 'round';

      context.stroke();

      

context.closePath();

// left eye glare

context.beginPath();

      context.moveTo(335, 240);

      context.lineTo(335, 252);

      context.lineWidth = 45;

      context.strokeStyle = "rgba(255,255,255,.66)";

      context.lineCap = 'round';

      context.stroke();

      

context.closePath();

//right eye glare

context.beginPath();

      context.moveTo(445, 240);

      context.lineTo(445, 252);

      context.lineWidth = 45;

      context.strokeStyle = "rgba(255,255,255,.66)";

      context.lineCap = 'round';

      context.stroke();

      

context.closePath();

// right eye middle

context.beginPath();

      context.moveTo(445, 240);

      context.lineTo(445, 252);

      context.lineWidth = 66;

      context.strokeStyle = "rgba(255,255,255,.32)";

      context.lineCap = 'round';

      context.stroke();

//left eye pupil 

context.beginPath();

      context.moveTo(335, 242);

      context.lineTo(335, 246);

      context.lineWidth = 12;

      context.strokeStyle = "rgb(97,52,1)";

      context.lineCap = 'round';

      context.stroke();

      

context.closePath();

//right eye pupil

context.beginPath();

      context.moveTo(445, 242);

      context.lineTo(445, 246);

      context.lineWidth = 12;

      context.strokeStyle = "rgb(97,52,1)";

      context.lineCap = 'round';

      context.stroke();

      

context.closePath();

//left glasees 

var x=280;

var y=190;

var width = 100

var height= 100;

context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 11;

//context.fillStyle = 'rgb(0,255,0)';

context.strokeStyle = 'rgb(51,29,0)';

context.lineCap = 'round';

context.stroke();

context.closePath();

//right glasses 

var x=400;

var y=190;

var width = 95

var height= 100;

context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 11;

//context.fillStyle = 'rgb(0,255,0)';

context.strokeStyle = 'rgb(51,29,4)';

context.lineCap = 'round';

context.stroke();

context.closePath();

//center of glasses

context.beginPath();

      context.moveTo(390, 255);

      context.lineTo(390, 250);

      context.lineWidth = 13;

      context.strokeStyle = "rgb(51,29,4)";

      context.lineCap = 'round';

      context.stroke();

      

context.closePath();

//left hair

var Ax = 300;

var Ay = -60;

var Bx = 400;

var By = 580;

var control1x = 360;

var control1y = 40;

var control2x = -50;

var control2y = 10;

var control3x = 70;

var control3y = 650;

var control4x = 390;

var control4y = 70;

        context.beginPath();

        context.moveTo(Ax, Ay);

        context.bezierCurveTo(control1x, control1y, control2x, control2y, Bx, By);

        context.bezierCurveTo(control3x, control3y, control4x, control4y, Ax, Ay);

        context.lineWidth = 6;

        // line color

        context.strokeStyle = 'rgb(0, 0, 0)';

        context.lineCap = 'round';

        context.stroke();

        context.fillStyle   = 'rgb(47, 21, 3)';

        context.fill();

//right hair

var Ax = 440;

var Ay = 5;

var Bx = 550;

var By = 590;

var control1x = 460;

var control1y = 40;

var control2x = 695;

var control2y = 400;

var control3x = 250;

var control3y = 610;

var control4x = 920;

var control4y = -50;

        context.beginPath();

        context.moveTo(Ax, Ay);

        context.bezierCurveTo(control1x, control1y, control2x, control2y, Bx, By);

        context.bezierCurveTo(control3x, control3y, control4x, control4y, Ax, Ay);

        context.lineWidth = 6;

        // line color

        context.strokeStyle = 'rgb(0, 0, 0)';

        context.lineCap = 'round';

        context.stroke();

        context.fillStyle   = 'rgb(47, 21, 3)';

        context.fill();  

// bangs 

var Ax = 500;

var Ay = 0;

var Bx = 261;

var By = 15;

var control1x = 300;

var control1y = 40;

var control2x = 420;

var control2y = -350;

var control3x = 670;

var control3y = 450;

var control4x = 590;

var control4y = 70;

        context.beginPath();

        context.moveTo(Ax, Ay);

        context.bezierCurveTo(control1x, control1y, control2x, control2y, Bx, By);

        context.bezierCurveTo(control3x, control3y, control4x, control4y, Ax, Ay);

        context.lineWidth = 5;

        // line color

        context.strokeStyle = 'rgb(0, 0, 0)';

        context.lineCap = 'round';

        context.stroke();

        context.fillStyle   = 'rgb(47, 21, 3)';

        context.fill();

 //NOSE

   

  context.beginPath();

      context.moveTo(400, 370);

      context.lineTo(400, 373);

      context.lineWidth = 3;

      context.strokeStyle = "rgb(0,0,0)";

      context.lineCap = 'round';

      context.stroke();

      

context.closePath();

////////////////////////////////////// ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ

};

</script>

</head>

<body>

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

</body>

</html>