Animated .gifs in Photoshop
● Animated gifs are easy and fun in Photoshop.
✓ Magnetic Lasso Tool✓ Threshold 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) …
✗ … 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 …
✗ … and set the resolution to 72 pixels per inch.
✗ Also, lower the size to approximately 300 or 400 pixels high.
Step #4: Lasso Around your Face ~
✗ Use the 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(⌘) and clicking on .
✗ 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:
Step #8: Duplicate the Layer and change the colors ~
✗ Click on the bottom layer and hit: Cmd(⌘) + 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 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.
✗ With the Duplicate Frame selected …
✗ … turn the visibility ON in the next layer up.
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 and clicking on the first and last frames.
✗ Then click the seconds at the bottom of any of the frames.
✗ To set the number of times your animation plays, click here:
✗ … 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: http://www.weebly.com/ 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.