Final Portfolio

This is my final portfolio consisting of the 11 projects that I did throughout this semester. I had fun designing the layout and adding my own creativity to this, especially with the front and back cover!

Mesh Tool

This project was one of the most challenging for me. I needed to create more paths with the mesh tool so more gradients could be added to the mug. That would have given the mug more depth to make it look as real as the original photo.

Poster

Making this poster was my favorite project. I took a photo of myself and put a black and white filter that is most famous on the photo of Marilyn Monroe. Then I added another layer of jail bars to make it looked as if I was trapped needing to be freed.

Business Cards

Making these logos and cards for Sydney was fun! I got to be creative with sketches to try and please my client. I feel the most successful ones are the shape of Australia, the volleyball net between S and T and the smiley face made out of the S and T because they are all pretty simple but display the message clearly.

Calligram

This calligram was one of my hardest projects. I needed to play with the text more to create more texture and depth within the object.

Logo Sketches

Gradient and Brushes

Playing with the different types of brushes in illustrator was very fun. All of the different ones create texture to make designs much more visually appealing.

Animation Movie

This animated movie took a long time to do. Drawing on each slide separately was very tedious but the ending product was very cool to watch. I tried to show what my summers are like in Block Island, R.I.

Morph

The morphx was funny to make! I got to see the actual transformation of myself as a child to now. Wearing the same type of clothes in my current picture as the one from when I was younger helped to make the transformation much more successful.

Art Project

    

I took the famous painting 'Scream' and put myself into it! I had a lot of fun mimicking the painting and used different effects and textures to blend my face into the photo as closely as possible.

Somewhere

For the Somewhere project, I took a photo of myself at a different music festival and photoshopped myself into a photo at Coachella.

Autoscopy GIFS

Autoscopy

Photoshop

CANVAS PROJECT

//background grd  

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

      // add linear gradient
var grd = context.createLinearGradient(200, 50, canvas.width, canvas.height);
      // black
      grd.addColorStop(0, 'black');   
      grd.addColorStop(1, 'black');
      context.fillStyle = grd;
      context.fill();


      

//string 1
 context.beginPath();
      context.moveTo(200, 530);
      context.quadraticCurveTo(100, 100, 350, 100);
      context.lineWidth = 15;

      // line color
      context.strokeStyle = '#754C00';
      context.stroke();

//string 2
   context.strokeStyle = 'rgba(255,228,196,1)';
      context.stroke();
     var centerX = canvas.width / 3.3;
      var centerY = canvas.height / 1.32;
      var radius = 13.5;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'rgba(255,228,196,1)';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = 'rgba(255,228,196,1)';
      context.stroke();
      


//string 3
  context.beginPath();
      context.moveTo(350, 200);
      context.quadraticCurveTo(360, 355, 375, 525);
      context.lineWidth = 15;

      // line color
      context.strokeStyle = 'rgba(255,228,196,1)';
      context.stroke();

//string 3 bead
 context.strokeStyle = 'rgba(255,228,196,1)';
      context.stroke();
     var centerX = canvas.width / 1.65;
      var centerY = canvas.height / 1.35;
      var radius = 13.5;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'rgba(255,228,196,1)';
      context.fill();
      context.lineWidth = 10;
      context.strokeStyle = 'rgba(255,228,196,1)';
      context.stroke();
    



//string 4 
 context.beginPath();
      context.moveTo(250, 100);
      context.bezierCurveTo(210, 600, 355, 560, 300, 450);
      context.lineWidth = 11;

      // line color
      context.strokeStyle = 'rgba(255,228,196,1)';
      context.lineCap = 'round'
      context.stroke();
      
//string 5
 context.beginPath();
      context.moveTo(230, 300);
      context.bezierCurveTo(210, 600, 355, 400, 250, 100);
      context.lineWidth = 11;

      // line color
      context.strokeStyle = 'rgba(255,228,196,1)';
      context.lineCap = 'round'
      context.stroke();
   
/// string 6
    context.beginPath();
      context.moveTo(350, 100);
      context.bezierCurveTo(210, 600, 355, 560, 300, 450);
      context.lineWidth = 11;

      // line color
      context.strokeStyle = 'rgba(255,228,196,1)';
      context.lineCap = 'round'
      context.stroke();
   
/// string 7 
    context.beginPath();
      context.moveTo(200, 100);
      context.bezierCurveTo(180, 600, 300, 560, 230, 450);
      context.lineWidth = 11;

      // line color
      context.strokeStyle = 'rgba(255,228,196,1)';
      context.lineCap = 'round'
      context.stroke();
   
   /// string 8  
    context.beginPath();
      context.moveTo(350, 100);
      context.bezierCurveTo(210, 600, 355, 560, 300, 450);
      context.lineWidth = 11;

      // line color
      context.strokeStyle = 'rgba(255,228,196,1)';
      context.lineCap = 'round'
      context.stroke();
   
// frame

   var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 2.15;
      var centerY = canvas.height / 4;
      var radius = 120;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'rgba(255,228,196,1)';
      context.fill();
      context.lineWidth = 10;
      context.strokeStyle = 'rgba(255,204,255,1)';
      context.stroke();

/// center
 var rdg = context.createRadialGradient(400,300,20,400,300,300);
 rdg.addColorStop(0, "black");
 rdg.addColorStop(0.3, "cyan");
 rdg.addColorStop(1, "white");
 
context.beginPath();
context.arc(280, 150, 60, 0*Math.PI, 2*Math.PI, false);
context.fillStyle = rdg;
context.fill();
context.stroke();
context.closePath();



// TRIANGLE 1
 context.beginPath();

context.moveTo(280,140); // START POINT
 context.lineTo(250,35);
 context.lineTo(310,35);
context.lineTo(280,140); // end point
 
 context.lineWidth = 10;
 context.lineCap = 'round';
 context.lineJoin = 'round';
 
context.strokeStyle = 'rgba(255,204,229,1)';
context.stroke();
 
context.closePath();

// TRIANGLE 2
 context.beginPath();
context.moveTo(280,160);
context.lineTo(310,260);
context.lineTo(250,260);
context.lineTo(280,160);


context.strokeStyle = 'rgba(255,204,229,1)';
context.stroke();

context.closePath();

// crossover
context.beginPath(); 
context.moveTo(180,100); //STARTING POINT
context.lineTo(280,150);
context.lineTo(380,100);
context.lineTo(380,200);
context.lineTo(280,150);
context.lineTo(180,200); 
context.lineTo(180,100);
//ENDING POINT

context.lineWidth = 10; 
context.lineCap = 'round';
context.lineJoin = 'round';

//RGBA = RED GREEN BLUE ALPHA
//THE VALUES FOR RGB go from 0 to 255
//the value for A goes from 0 to 1

context.strokeStyle = 'rgba(255,204,229,1)';
context.stroke();

context.stroke(); 

context.shadowColor = "rgba(0,255,0,0.5)";
context.shadowBlur = 90;

context.closePath(); 

////// smaller rectangle


context.beginPath(); 

context.rect(190,80,180,150);
context.strokeStyle = 'rgba(135,206,235,.7)';
context.lineWidth = 5; // 5 pixels
context.stroke();
context.closePath();