Animated .gifs in Photoshop

    ●  Animated gifs are easy and fun in Photoshop.


Learn About:

Magnetic Lasso ToolThreshold Adjustment Animation

  •   This tutorial is part of Portrait Project.

Other People's Work:

Here are examples of work inspired by this tutorial.


Welcome to My Portfolio:

Here you will find the work I've created during the course of my Sophomre year. The programs I used to create these works of art are Adobe Illustrator, Photoshop and Flash.
I hope you enjoy my work!

Step #1: Open an Image in PhotoShop ~

Find a picture of your face and open it in PhotoShop.


Step #2: Crop Tool ~

Get the Crop Tool or hit the keyboard shortcut letter (c) …

crop tool

… and crop your Photo. You only need your head and shoulders remaining in the image.

Step #3: Image Size ~

Then go to: Image > Image Size

image size ps

… and set the resolution to 72 pixels per inch.


Also, lower the size to approximately 300 or 400 pixels high.

image size

Step #4: Lasso Around your Face ~

Use the Magnetic Lasso Tool.

magnetic Lasso tool

Begin to trace around your head and shoulders.

Step #5: Create a New Layer ~

Go to: Select > Inverse

… and delete the background

Step #6: Make a New Layer & Fill with Color ~

Create a New Layer BELOW the old layer by holding Cmd(⌘)cmd key and clicking on create new layer.

Click on the Colors pallette and select any bright colors you like.

Fill the new layer with color using the Paint Bucket or hit Alt (⌥)+Backspace

Step #7: Blending Options ~

Click on Layer 1 again …

Scroll through the Blending Modes and find one you like …







Try Multiply, Screen or Overlay or whatever you like best …


If you see other blending modes you like as you're scrolling down, don't be afraid to experiment.


Blending Modes are awesome!

Hint: You can scroll through the different Blending Modes by hitting Alt (⌥)+Shift+Plus:

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Step #8: Duplicate the Layer and change the colors ~

Click on the bottom layer and hit: Cmd(⌘)cmd key + to duplicate it approximately 4 or 5 times.

Change each layer so they are different colors.

Step #9: Animation ~

Go to: Window > Timeline and the Timeline window appears and click "Create Frame Animation" (if necessary) …

… click on the Frame 1 of the animation selected …

… turn off the visibility of all your layers EXCEPT the last one by clicking on the eye of each layer.





Again, leave the bottom and top layers ON.

Step #10: Add New Frames ~

Click the little icon at the bottom to add a new frame.

duplicate selected frames

With the Duplicate Frame selected …

duplicate frame

… turn the visibility ON in the next layer up.

layer vis

Step #11: Blending Modes AGAIN ~

Scroll through the blending modes on your face layer AGAIN - find a good blending mode.

Step #12: Keep Going ~

Create a new frame for each layer layer - every time adjusting the Blending Mode of your face.

Step #13: Play ~

Play your animation by clicking on the Play button.

To speed up or slow down your animation, select all the frames by holding shift-key and clicking on the first and last frames.

Then click the seconds at the bottom of any of the frames.

frame delay

To set the number of times your animation plays, click here:

select looping options

… and set it to whatever you need.


Step #14: Save for Web …

Go to: File > Save for Web … and shrink you work down to approximately 300 pixels …

… make sure you're saving your work as a .gif …


… and save the file as YOUR NAME! so we know whose it is.

Step #15: Go to Weebly ~

Go to: and open the portfolio page…

… attach your work!

Step #16: Publish ~

Hit the Publish button …

… and then click on your web address.

Step #17: Select the Link ~

Navigate to the exact page in your browser where your files and reflections are posted …

… copy the URL address of your page …


… and paste the address into your reply so when the link is clicked it goes directly to the page that contains your evidence.