How to create a scrolling GIF in Photoshop
This is a 4-step guide to creating a GIF with scrolling effect in Photoshop. Such a GIF would be useful to present a website or webdesign for example.
Before you start, you’ll want to search for a background image on a free website. A simple photo of a computer or phone screen. Once you have got that, you can start.
1) Open your background image. On a new layer create a square where you want to place your website. (See mine in red)
2) Open the image of your actual webdesign and turn it into a clipping mask for the square (Ctrl+Alt+G). Now the webdesign image will only be visible within the boundaries of the square. Position your website correctly and save as a jpg. Move your website image up so that the next section is visible and save another jpg. Repeat this step until you have all necessary frames saved as jpgs.
3) Open all your created jpg files in one new document and show the timeline at the bottom of the page. Window > Timeline. Press Create Frame Animation.
4) Now mark all your images in the layer panel, go to the timeline menu and Make Frames From Layers. You will now see your images in the timeline and can decide for each image how long it should be visible. Set the time limit to a loop. The last step is to save this as a GIF (Save for Web).
And that’s already it! 🙂
I hope this little tutorial was useful and will be able to help someone out. If you’ve tried it out, leave a like and let me know how you’ve been getting on. See you next time!