Learn how to recreate a professional marketing email animation right inside Adobe Photoshop! In this tutorial, we analyze a promo GIF, cut out subjects using layer masks, wrap vector shapes around the subjects to create a dynamic 3D overlap effect, and animate the final composition in the Timeline window.
TIMESTAMPS
00:00 – Analyzing the Email GIF & Opening in Photoshop
01:02 – Understanding the Photoshop Timeline Window
02:18 – Setting Up Canvas, Rulers & Importing Assets
05:08 – Isolate Subjects with Select Subject & Layer Masks
06:11 – Drawing Vector Rectangles & Customizing Corners
08:15 – Creating 3D Wrapping Effects with Layer Masks
10:58 – Advanced Masking: Magnetic Lasso Tool Techniques
12:15 – Reinforcing the Effect with a Second Subject
16:20 – Matching Rectangle Shapes Across Layers
19:08 – Animating Frames & Exporting GIFs for Web
22:15 – Adding Color Overlays & Previewing in Browser
TOOLS & RESOURCES USED
✦ Adobe Photoshop (Layer Masks, Timeline, Select Subject)
✦ Sample Animated GIF
https://designertofullstack.com/wp-content/uploads/2026/09/dicks-copycat-graphic-design-animation-for-emails-1024×859.gif
✦ Free Stock Photography from Pexels – Download below
https://www.pexels.com/photo/a-boy-playing-soccer-13097389/
https://www.pexels.com/photo/baseball-player-in-gray-and-black-uniform-running-163239/
✦ Step-by-step instructions on the blog post:
_____________________________________________________________
*JOIN MY EMAIL LIST*
Love quick, helpful tutorials? You’ll love the emails too. 💌
*ABOUT ME*
Hello, world. I’m *Kelly Barkhurst* —an experienced Mac-based full-stack designer, educator, and entrepreneur passionately blending artistic vision and creativity with deep technical expertise.
With a BFA and MFA in Graphic Design and a certificate in Full-Stack Web Development, I’m uniquely positioned to work at this intersection of design and tech. My driving force is creating meaningful solutions and helping clients and students do the same.
*What’s Kelly’s superpower?* It’s using design thinking to strategically plan the BIG picture, then diving deep into the technical “weeds” to bring that vision to life—through beautiful visual design, compelling writing, or well-crafted, functional code.
*What brought you JOY today? *
👇 Share in the comments below
*SOCIALS*
https://twitter.com/@designer2fstack
https://www.facebook.com/designertofullstack
https://www.youtube.com/@UCWk0aZ-yFzCQX5bMLaISrog
#photoshoptutorial #AnimatedGIF #GraphicDesign #PhotoshopAnimation #DesignToFullStack #LayerMasks #PhotoshopTips