FMX 210 Course

This course has taught me a lot about using different Adobe softwares and how to produce animation and visual designs. On the first day, I was worried about how I would complete projects and the difficulty of the class. Later on, I realized that I am able to finish projects and learn new softwares in a short amount of time. After the last day, I came to the conclusion that I have to think about how to step my projects up to the next level. One thing that resonated with me was how Professor Santiago said that our portfolios must stand out from the rest. It was helpful when he showed us examples of each project so we knew what was expected. Sometimes Professor Santiago would show a demonstration and it was going a little too fast for some people.

Portfolio

This is my portfolio that showcases my projects that I have made in this class. I struggled a little with framing and sizing each project but in the end, I figured it out. I made the color scheme based on my Autoscopy project.

Animation

                 This is a frame by frame animation that I made. I drew on top of a 400 frame video to create this 40 second animation. It took around two weeks to complete. The dance is an Indian classical dance called Bharatanatyam. I made the background music with Garageband loops and my own voice.  My voice is the low beat in the background.

Autoscopy

Trapped

        

I have the autoscopy that I made from the original image under it. I made the autoscopy dark and added bars to symbol anxiety.  I also added chains and handcuffs to show how you can be trapped with anxiety. 

                                       

This is the autoscopy at 0%. 

    

This is the autoscopy at 25%. 

   

This is the autoscopy at 50%. 

    

This is the autoscopy at 75%. 

    

This is the autoscopy at 100%. 

Somewhere

Lady Gaga

I was inspired by the Kirby Jenner photos to create an image where I'm next to Lady Gaga. I looked through her instagram till I found this picture of her, then I decided to lay down in the picture to allow more Focus on Lady Gaga. This was also to add comedic value to the image. Lady Gaga actually took this picture in Tampa after her concert.  

Colorize

This is using the Analogous color palate and next to it is the black and white image. It took a long time to add the small details on the eyebrows and hair but it turned out great at the end.

This is using natural colors that I got from the original image before I turned it into Black and White. It looks a little like a cartoon version of me. 

This is using a complementary color palate and the black and white image. The hair and backdrop are similar colors but different shades.

This is using a triad color palate and painting over the original image. There were two similar colors in the palate that I used for the face and background. 

This is where I got to use any color and customize my image. I added a lot of piercings, some of them that I am considering getting. I added the face tattoos because one of my friends said that I would look good with face tattoos and I wanted to see how I would look with them on photoshop. 

Poster Project

                   This is my poster project, I had some difficulty with finding an image that works but in                          the end, it came out great. The colors in this poster are of the transgender pride flag. 

Mesh Tool Project

This project was a difficult project that I struggled with. I especially struggled with adding the details but it came out well in the end. 

Logos

YouTuber 

This is my logo representing a Youtuber. For this logo, I wanted to do something that is similar to the youtube logo but is not an exact replica. I added the play button, then decided on adding a camera inside.

Chill

This is my logo representing chill. I thought of chilling on the beach in sunglasses. Then I thought about, what if a dog was wearing the sunglasses.

Comedy

This is my logo representing comedy. I thought of the characters I play on YouTube and decided on making it a poop emoji with a wig. 

Analyzing Good Logos

Good Logos

FedEx

This is a great logo because it is very simple and memorable. Especially the hidden arrow in the logo. Once you see it, you can never unsee it. It can work in a smaller or bigger size, with or without color. It is timeless and can be used over and over again. The font and colors are appropriate to the company.

Pepsi

This is a great logo because of its hidden meaning. The meaning is that if you drink too much Pepsi, you start to look the the logo. This is what makes it memorable. It is versatile and can be made in different colors or on a bigger scale. Once you see the hidden man, then you will always think about it. This logo is also not too complex, which makes it easier to be familiar with.

NBC

This logo is great because of the contrast of the bright colors and the black text. If the text was bright, it would be too distracting for someone viewing the logo. It also has a hidden symbol which is that the bright colors are peacock feathers. This makes it pretty memorable and simple. This logo has been timeless and has only had color and texture changes over the years.

Analyzing Bad Logos

Bad Logos:

Locum 

This logo is not memorable because of the crazy background. This logo has a placement fail and the heart should be replaced. This is not appropriate for a realtor company because of the font and color used. It seems like it would be more appropriate for a logo of a drink, if the heart is replaced. 

CatWear

This logo is not simple because the cat with the letter C is too confusing and the way the cat is placed. It is hard to see the A, the cat makes. This would not be versatile because if it was made smaller, it would be even harder to understand. 

London Olympics 

This logo has way too much going on for it to be simple and memorable. We cannot figure out what is going on. We only know its the olympics from the olympic flag. It would not work as a smaller logo so it would not be versatile. 

Selfie Calligram

For this project, I had to read the speech as well as look up the name of the school.  I decided to add the names to my hair so they are easy to read as well as the name of the school. Then I decided to add the speech with can be read in some parts but in others it cannot. I added G L, representing Gun Laws for my eyes. I added a little of a comedic relief with my nose and the size of it.

This is the same calligram image but this is without the gradient. 

Sun on illustrator

Face on Illustrator

Poochie Canvas Project

For this project, when we got assigned it, I thought about my dog. I made this project with my dog in mind and even used similar colors. I did change some things along the way but the concept was mostly about my dog.




Code:

///Background
var myGradient = context.createLinearGradient(0,0,800,0);
myGradient.addColorStop(0,    "rgba(0,127,70,1)"    );
   myGradient.addColorStop(0.5,  "rgba(151,255,208,1)"  ); //

myGradient.addColorStop(1,    "rgba(176,255,219,1)"     );

//// Rectangle

context.beginPath();


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



context.closePath();

context.fillStyle = myGradient;
context.fill();

context.beginPath();

//Body
var grdbody = context.createRadialGradient(600,300,400,650,10,400);
grdbody.addColorStop(0,"rgba(255,212,151,1)");
grdbody.addColorStop(0.5,"rgba(255,222,176,1)");
grdbody.addColorStop(1, "rgba(199,124,17,1)");

context.moveTo(210,380);
context.bezierCurveTo(330,900,500,900,600,375);
context.bezierCurveTo(550,180,230,190,210,375);





context.closePath();
context.fillStyle = grdbody;
context.fill();


/// Head
context.beginPath();

var head = context.createRadialGradient(600,300,400,650,100,40);

head.addColorStop(0,"rgba(199,124,17,1)");
head.addColorStop(0.5,"rgba(255,222,176,1)");
head.addColorStop(1,"rgba(255,212,151,1)");
context.moveTo(330,375);
context.bezierCurveTo(100,100,40,20,500,37);
context.bezierCurveTo(730,80,600,200,500,375);




context.closePath();

context.fillStyle = head;
context.fill();

//Mouth
context.beginPath();


context.moveTo(350,350);
context.quadraticCurveTo(200,500,400,451);
context.quadraticCurveTo(650,500,500,351);

context.closePath();

context.fillStyle = head;
context.fill();

//Ear 1
context.beginPath();

var ear1 = context.createRadialGradient(600,200,400,600,200,300);

ear1.addColorStop(0,"rgba(199,124,17,1)");
ear1.addColorStop(0.5,"rgba(255,222,176,1)");
ear1.addColorStop(1,"rgba(127,106,76,1)");

context.moveTo(170,90); //A
context.quadraticCurveTo(10,400,100,401); //Cp1 B
context.quadraticCurveTo(310,390,200,115); //Cp2, A


context.closePath();

context.fillStyle = ear1;
context.fill();


// Ear 2
context.beginPath();

var ear2 = context.createRadialGradient(600,20,400,600,20,30);

ear2.addColorStop(0,"rgba(199,124,17,1)");
ear2.addColorStop(0.5,"rgba(255,222,176,1)");
ear2.addColorStop(1,"rgba(255,212,151,1)");


context.moveTo(610,90); //A
context.quadraticCurveTo(850,400,690,401); //Cp1 B
context.quadraticCurveTo(510,380,610,115); //Cp2, A


context.closePath();

context.fillStyle = ear2;
context.fill();

// eye 1
context.beginPath();



context.arc(500,150,40,0,Math.PI*2,false);


 context.closePath();

 context.fillStyle = "rgba(255,255,255,1)";
 context.fill();

// Pupil 1
context.beginPath();


context.arc(500,150,20,0,Math.PI*2,false);


   context.closePath();
context.fillStyle="rgba(0,0,0,0.3)";
context.fill();

// Eye 2
context.beginPath();

context.arc(300,150,40,0,Math.PI*2,false);


 context.closePath();

 context.fillStyle = "rgba(255,255,255,1)";
 context.fill();

// Pupil 2
context.beginPath();


context.arc(300,150,20,0,Math.PI*2,false);


   context.closePath();
context.fillStyle="rgba(0,0,0,0.3)";
context.fill();

/// Nose

context.beginPath();

context.moveTo(390,400);
context.quadraticCurveTo(420,510,450,400);

context.closePath();
context.fillStyle = "rgba(0,0,0,1)";
context.fill();

//whiskers

context.beginPath();

  context.moveTo(556,350);
context.lineTo(500,400);

context.closePath();

context.lineWidth = 1;
context.stroke();

context.beginPath();

  context.moveTo(610,350);
context.lineTo(500,410);

context.closePath();

context.lineWidth = 1;
context.stroke();

context.beginPath();

  context.moveTo(670,350);
context.lineTo(500,420);

context.closePath();

context.lineWidth = 1;
context.stroke();


context.beginPath();

  context.moveTo(720,350);
context.lineTo(500,430);

context.closePath();

context.lineWidth = 1;
context.stroke();

// Whiskers 2


context.beginPath();

  context.moveTo(276,350);
context.lineTo(350,400);

context.closePath();

context.lineWidth = 1;
context.stroke();


context.beginPath();

  context.moveTo(200,350);
context.lineTo(350,410);

context.closePath();

context.lineWidth = 1;
context.stroke();

 context.beginPath();

  context.moveTo(160,350);
context.lineTo(350,420);

context.closePath();

context.lineWidth = 1;
context.stroke();

 context.beginPath();

  context.moveTo(110,350);
context.lineTo(350,430);

context.closePath();

context.lineWidth = 1;
context.stroke();

/// tail

context.beginPath();

var tail = context.createRadialGradient(400,300,400,650,100,600);

tail.addColorStop(0,"rgba(199,124,17,1)");
tail.addColorStop(0.5,"rgba(255,222,176,1)");
tail.addColorStop(1,"rgba(255,212,151,1)");

context.moveTo(100,900);
context.quadraticCurveTo(23,220,105,500);
context.quadraticCurveTo(195,250,200,900);



context.closePath();
context.fillStyle = tail;
context.fill();

//Spot on tail

context.beginPath();


context.arc(130,600,46,0,Math.PI*2,false);


   context.closePath();
context.fillStyle="rgba(0,0,0,0.5)";
context.fill();

Radial Gradient with Circles

Gradient Project - Triangles

Canvas Project - Buildings