Portfolio

This is my final project where all of my projects are shown throughout the semester. This was my favorite thing to work on because i could see the evolution of what i had trouble with and which projects that i really enjoyed.  I put a lot of time and effort into my portfolio as shown below and am extremely proud of how hard i worked through this class even though there were times that were frustrating.

Business Cards

These are my business cards. I used a lot of color in the tie dye on and i think it really pops out to the eye. The yellow one is more professional and siple and then the flower one i thought was cute and was expressive.

InDesign Tutorials

https://www.youtube.com/watch?v=RXRT3dHu6_o
https://www.youtube.com/watch?v=mVW8AF2TMnw
https://www.youtube.com/watch?v=qzE6nZofaI0

Puppet

This is my puppet i    created. I    used rope to look like i    was getting pulled away on stage. I    also used a bone picture in my leg and a doll arm for one of my arms to make it look like a doll like puppet. This actually took me a couple hours to create but it was fun making all the layers

black and white to color

i used a photo that was taken in brasil. It was a painting on the side of a building. I really enjoyed the Analogous one the best i put a lot of detail into the flowers and made sure the edges were perfect.

Links of photoshop tutorials

https://www.youtube.com/watch?v=pFyOznL9UvA

https://www.youtube.com/watch?v=2307e8iGDo0

https://www.youtube.com/watch?v=f1nbsGPtZ58

Tag brush

This is my tag brush i used the colors of pink and some blue to make a lighter purple. I think this will stand out on my other art works

self portrait

This is my self portrait, i wanted to keep with the color theme of orange and red and pinks. I had the most difficulty with the eyes looking realistic. Other than that i had fun with this project it was really interesting to be able to see how i could use AI

gradient

this is my gradient mesh. i used nail polish bottle. When i was looking at the bottle the light hit is and i wanted my photo to show the highlights of it.

Logo

I used the American sign Langauge sign for i love you. In the deaf community it means more of a friendship love while hearing people use it as a romantic love. I thought this accuretly represents me because this symbol shows more than just love it represents a culture, community, and communication.

Calligram

This calligram shows the well-known quote "reach for the stars." The hand says "reach for," and the stars writing says stars. My inspiration for this calligram came from hearing this quote from my mother. This quote is infinitely meaningful to me, considering that it reminds me of my mother and to try to be the best version of myself continuously. I have a tattoo of stars from this. My vision for this piece was executed of what people think about when they see it. The colors are vital to the piece because I wanted to depict it at night (dark) and then have the stars be the brightest yellow so they can be the first thing you look at when you see it.

Three links for Illustrator

https://www.youtube.com/watch?v=Tw2qUdfvbEQ

https://www.youtube.com/watch?v=RbbQl2sU-ag

https://www.youtube.com/watch?v=tXpnKlUMZQA

Canvas Project

This project depicts an Alien who's spaceship is now made into a car type mobile. There are flowers and hearts and a little tiny palm tree in the background. These represent the happiness of the Alien while floating around in space. There is a little gradient background to show that the Alien is moving forward and away more from that background. I took codes from any different places and was inspired by the bright colors that each code was allowed to create. It took me about 10 hours to create i spent all weekend playing with the codes and colors, and where to put certain shapes and what sizes would match everything. The hardest part was the spaceship due to trying to make it smaller in the back than in the front. I think that this piece is successful because it got inspiration from many different places and it all came together as one to create a new art piece.


<!doctype html>
<html>

<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>

<body>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> here goes the title of your project </title>

<style type="text/css">
body,td,th {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
color: #000;
}
body {
background-color: #FFF;
}
#myCanvas { border: rgb(102,0,255) medium dashed; }
</style>
</head>

<body>

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

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

//// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> START HERE
///background
    var bkgdgrd = context.createLinearGradient(0,0,0,800);
 
    bkgdgrd.addColorStop(0,"rgba(173,255,47,1)");
    bkgdgrd.addColorStop(.15, "rgba(244, 175, 216, 1)");
    bkgdgrd.addColorStop(.50,"rgba(201, 88, 19, 1)");
    bkgdgrd.addColorStop(.75,"rgba(204, 0, 255,1)");
    bkgdgrd.addColorStop(1, "rgba(255,255,255,1)");
     
// BACKGROUND
 
    context.beginPath();

         context.rect(0,0,400,400);
 
    context.closePath();
 
    context.fillStyle = bkgdgrd;
 
    context.fill();

context.beginPath();

         context.rect(0,0,600,200);
 
    context.closePath();
 
    context.fillStyle = bkgdgrd;
 
    context.fill();
//PALM TREE-right
 context.beginPath();
  context.moveTo(150,350);
  context.quadraticCurveTo(100,300,110,300);
  context.lineTo(115,300);
  context.quadraticCurveTo(100,305,112,350);
 context.closePath();
 context.strokeStyle= "rgba(245,203,111,1)";
 context.fillStyle= 'rgba(245,203,111,1)';
 context.fill();
 context.stroke();

//PALM TREE LEAVES-right
 context.beginPath();
  context.moveTo(112,300);
  context.quadraticCurveTo(90,290,80,290);
  context.quadraticCurveTo(90,270,112,300);

  context.quadraticCurveTo(110,280,95,270);
  context.quadraticCurveTo(125,270,112,300);

  context.quadraticCurveTo(120,276,140,280);
  context.quadraticCurveTo(120,295,112,300);

  context.quadraticCurveTo(140,280,150,300);
  context.quadraticCurveTo(140,300,112,300);
 context.closePath();
 context.strokeStyle='rgba(88,191,47,1)';
 context.fillStyle ='rgba(88,191,47,1)';
 context.fill();
 context.stroke();


 
 
    //background flower
    var flower = context.createLinearGradient(0,50,100,200);
    flower.addColorStop(0,"rgba(230,0,0,1)");
    flower.addColorStop(.25,"rgba(000,000,0,1)");
    flower.addColorStop(1,"rgba(000,000,000,1)");
        context.beginPath();
    context.moveTo(150,100);
    context.bezierCurveTo(-100,-200,-100,100,140,110);
    context.bezierCurveTo(-100,70,-50,300,145,115);
    context.bezierCurveTo(40,180,80,500,170,115);
    context.bezierCurveTo(300,380,330,150,170,100);
    context.bezierCurveTo(330,-50,150,-100,150,100);
    context.closePath();
    context.fillStyle=flower;
    context.fill();
    context.strokeStyle="rgba(0,0,0,1)";
    context.stroke();
    //Background flower 2
    var flower2 = context.createLinearGradient(650,500,700,700);
    flower2.addColorStop(0,"rgba(0,255,255,1)");
    flower2.addColorStop(.25,"rgba(0,255,255,1)");
    flower2.addColorStop(1,"rgba(201,88,19,1)");
 
 
    context.beginPath();
    context.moveTo(550,500);
    context.bezierCurveTo(300,200,300,500,540,510);
    context.bezierCurveTo(300,470,350,700,545,515);
    context.bezierCurveTo(440,580,430,900,560,530);
    context.bezierCurveTo(640,800,690,550,570,515);
    context.bezierCurveTo(810,575,770,400,565,500);
    context.bezierCurveTo(730,350,550,200,550,500);
    context.closePath();
    context.fillStyle=flower2;
    context.fill();
    context.strokeStyle="rgba(0,0,0,1)";
    context.stroke();
    //flower 2.5
        var flower3 = context.createLinearGradient(650,100,500,100);
    flower3.addColorStop(0,"rgba(138,43,226,1)");
    flower3.addColorStop(.25,"rgba(255,130,0,1)");
    flower3.addColorStop(1,"rgba(201,88,0,1)");
 
 
    context.beginPath();
    context.moveTo(550,100);
    context.bezierCurveTo(300,-200,300,100,540,110);
    context.bezierCurveTo(300,70,350,300,545,115);
    context.bezierCurveTo(440,180,430,500,560,130);
    context.bezierCurveTo(640,400,690,150,570,115);
    context.bezierCurveTo(810,175,770,0,565,100);
    context.bezierCurveTo(730,-150,550,-200,550,100);
    context.closePath();
    context.fillStyle=flower3;
    context.fill();
    context.strokeStyle="rgba(0,0,0,1)";
    context.stroke();
 //background flower 4

    context.beginPath();
    context.moveTo(687,435);
    context.bezierCurveTo(615,390,640,440,680,445);
    context.bezierCurveTo(610,440,635,475,685,452);
    context.bezierCurveTo(645,505,690,490,695,453);
    context.bezierCurveTo(700,510,740,500,700,450);
    context.bezierCurveTo(750,455,750,425, 700, 440);
    context.bezierCurveTo(700,390,685,390,687,435);
    context.closePath();
    context.fillStyle="rgba(204,0, 204,1)";
    context.fill();
    context.lineWidth=1
    context.strokeStyle="rgba(0,0,0,1)";
    context.stroke();
 
    context.beginPath();
      context.arc(690, 445, 6, 0, 2 * Math.PI, false);
      context.fillStyle = "rgba(255, 153, 0,1)";
      context.fill();
      context.lineWidth = 1;
      context.strokeStyle = "rgba(0,0, 0,1)"
      context.stroke();

    //background flower 5
        context.beginPath();
    context.moveTo(687,135);
    context.bezierCurveTo(240,255,255,140,680,145);
    context.bezierCurveTo(610,140,635,175,685,152);
    context.bezierCurveTo(645,205,690,190,695,153);
    context.bezierCurveTo(700,210,740,200,700,150);
    context.bezierCurveTo(750,155,750,125, 700, 140);
    context.bezierCurveTo(700,90,685,90,687,135);
    context.closePath();
    context.fillStyle="rgba(255, 153, 115,1)";
    context.fill();
    context.lineWidth=1
    context.strokeStyle="rgba(0,0,0,1)";
    context.stroke();
 
    context.beginPath();
      context.arc(690, 145, 6, 0, 2 * Math.PI, false);
      context.fillStyle = "rgba(0, 153, 0,1)";
      context.fill();
      context.lineWidth = 1;
      context.strokeStyle = "rgba(0,0, 0,1)"
      context.stroke();
     /// background flower 3
        context.beginPath();
    context.moveTo(87,495);
    context.bezierCurveTo(15,450,40,500,80,505);
    context.bezierCurveTo(10,500,35,535,85,512);
    context.bezierCurveTo(45,565,90,550,95,513);
    context.bezierCurveTo(100,570,140,560,100,510);
    context.bezierCurveTo(150,515,150,485, 100, 500);
    context.bezierCurveTo(100,450,85,450,87,495);
    context.closePath();
    context.fillStyle="rgba(255, 0, 0,1)";
    context.fill();
    context.lineWidth=1
    context.strokeStyle="rgba(0,0,0,1)";
    context.stroke();
 
    context.beginPath();
      context.arc(90, 505, 6, 0, 2 * Math.PI, false);
      context.fillStyle = "rgba(255, 153, 0,1)";
      context.fill();
      context.lineWidth = 1;
      context.strokeStyle = "rgba(0,0, 0,1)"
      context.stroke();
 
//Heart

//Bezier Curve Variables



var Ax = 200;
var Ay = 100;
var Bx = 200;
var By = 200;
var control1x = 50;
var control1y = -50;
var control2x = 75;
var control2y = 100;
var control3x = 330;
var control3y = 100;
var control4x = 330;
var control4y = -80;

        context.beginPath();
        context.moveTo(Ax, Ay);
        context.bezierCurveTo(control1x, control1y, control2x, control2y, Bx, By);
        context.bezierCurveTo(control3x, control3y, control4x, control4y, Ax, Ay);
        context.lineWidth = 30;
        // line color
        context.strokeStyle = 'rgb(75, 0, 130)';
        context.lineCap = 'round';
        context.stroke();
        context.fillStyle   = 'rgb(173, 216, 230)';
        context.fill();






//saucer of ship
  context.beginPath();

      var x = canvas.width / 2;
      var y = canvas.height / 1.2;
      var radius = 330;
      var startAngle = 1.1 * Math.PI;
      var endAngle = 1.9 * Math.PI;
      var counterClockwise = false;


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

context.bezierCurveTo( 175, 410, 05, 275, 85, 200 );

 context.strokeStyle = 'grey';
 context.lineCap = 'round'
    context.stroke();

context.fillStyle = 'rgb(192, 199, 204)'
context.fill();

context.closePath();

//glass of the ship
    var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var x = canvas.width / 2;
      var y = canvas.height / 2;
      var radius = 200;
      var startAngle = 1 * Math.PI;
      var endAngle = 2 * Math.PI;
      var counterClockwise = false;

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

      // line color
      context.strokeStyle = 'lightblue';
      context.stroke();
context.moveTo(199, 300);
context.bezierCurveTo(190, 285, 350, 455, 600, 300);
context.strokeStyle = 'rgb(132, 202, 245)';
context.lineCap = 'round'
context.stroke();

context.fillStyle = 'rgb(212, 238, 255)'
context.fill();




//spaceship light 6

 var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 1.3;
      var centerY = canvas.height / 1.58;
      var radius = 24;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'yellow';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = 'grey';
      context.stroke();

//left int
 context.beginPath();
      context.moveTo(345, 130);
      context.lineTo(388, 180);
    context.strokeStyle = 'rgb(0, 207, 134)';
      context.stroke();

//right int

  context.beginPath();
      context.moveTo(420, 165);
      context.lineTo(445, 135);
    context.strokeStyle = 'rgb(0, 207, 134)';
      context.stroke();

//left alien int ball
 var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 2.3;
      var centerY = canvas.height / 4.5;
      var radius = 10;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'rgb(36, 255, 178)';
      context.fill();
      context.lineWidth = 2;
      context.strokeStyle = 'rgb(0, 207, 134)';
      context.stroke();

//right alien int ball
 var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 1.8;
      var centerY = canvas.height / 4.5;
      var radius = 10;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'rgb(36, 255, 178)';
      context.fill();
      context.lineWidth = 2;
      context.strokeStyle = 'rgb(0, 207, 134)';
      context.stroke();

//alien body
 var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 2;
      var centerY = canvas.height / 2.1;
      var radius = 65;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'rgb(36, 255, 178)';
      context.fill();
      context.lineWidth = 2;
      context.strokeStyle = 'rgb(0, 207, 134)';
      context.stroke();


//alien head
 var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 2;
      var centerY = canvas.height / 2.9;
      var radius = 45;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'rgb(255, 255, 0)';
      context.fill();
      context.lineWidth = 2;
      context.strokeStyle = 'rgb(0, 207, 134)';
      context.stroke();

//mouth
  context.beginPath();
      context.arc(400, 215, 20, 0, Math.PI, false);
      context.closePath();
      context.lineWidth = 3;
      context.fillStyle = 'rgb(26, 196, 176)';
      context.fill();
      context.strokeStyle = 'rgb(0, 207, 134)';
      context.stroke();

//nose
  context.beginPath();
      context.rect(398, 202, 3, 3);
      context.fillStyle = 'rgb(0, 207, 134)';
      context.fill();
      context.lineWidth = 7;
      context.strokeStyle = 'rgb(0, 207, 134)';
      context.stroke();

//left eye
 context.beginPath();
      context.arc(385, 190, 10, 0, Math.PI, true);
      context.closePath();
      context.lineWidth = 6;
      context.fillStyle = 'white';
      context.fill();
      context.strokeStyle = 'rgb(0, 207, 134)';
      context.stroke();
//right eye
 context.beginPath();
      context.arc(413, 190, 10, 0, Math.PI, true);
      context.closePath();
      context.lineWidth = 6;
      context.fillStyle = 'white';
      context.fill();
      context.strokeStyle = 'rgb(0, 207, 134)';
      context.stroke();

//right pupil
    var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 1.94;
      var centerY = canvas.height / 3.24;
      var radius = 1;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'black';
      context.fill();
      context.lineWidth = 3;
      context.strokeStyle = 'black';
      context.stroke();

//left pupil
 var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 2.08;
      var centerY = canvas.height / 3.24;
      var radius = 1;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'black';
      context.fill();
      context.lineWidth = 3;
      context.strokeStyle = 'black';
      context.stroke();




//// <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< END HERE

</script>
</body>
</html>

i used both of these images as inspiration of the alien, and the flowers from the Scooby Doo photo. 

http://givetaraana.blogspot.com/2017/09/if-wasnt-for-those-meddling-kids.html

http://meganelizabethdarling.blogspot.com/2015/09/henry-alien-in-outer-space.html