How to Create Scrolling Website Graphics in Photoshop

If you read my blog post last week, you know that I shared a super quick tutorial on how to create launch graphics for your website. Today, I’m taking it one step further and showing you how to create scrolling website graphics. Let’s get started!


Here’s my step-by-step process:


First, you’re going to need a stock image and a full page screenshot of your website. I like to use the “GoFullPage” Chrome extension to take a screenshot of a full web page. This is what it looks like.


scrolling graphics


Next, you’re going to use the rectangle tool to draw a rectangle over the screen of your laptop/desktop.


How to Create Scrolling Graphics


Once you’re done, you’re going to drag your screenshot on top of your desktop/laptop image and resize it to fit the rectangle.


photoshop tips


Then, you’re going to position your mouse between the two layers and hold down the option key on your keyboard (alt on Windows) until you see a little arrow and click on it. That’s going to lock your screenshot to your shape.


create scrolling website graphics


Next, go to Window Timeline.


how to make scrolling pictures


In your Timeline frame, click on “Create Frame Animation”.


scrolling graphics


Then, you’re going to duplicate your frame by clicking the “+” sign.


photoshop scrolling images


Next, you’re going to click on your screenshot and scroll all the way to the bottom of your screenshot (that’s where your new frame will stop).


how to make graphics in photoshop


After this, you’ll want to select both frames and click on the Tweens Animation Frames icon.


animation frames photoshop


Then, choose “Frames to Add” and type 50.


animated photos in photoshop


Next, you’re going to select all of the layers except for the first and last one, and choose a frame delay of 0.1 sec.


website launch scrolling graphics


Then, you’re going to make the first and last frame 0.7 sec.


how to create scrolling website graphics


That’s how you create your scrolling website graphics. Easy, right?! To see your scrolling graphic in action, simply select the first frame and hit “play”. To save your graphic, click on File Export Render Video.


scrolling website animation




join the facebook group

Hop inside my Facebook group for photographers where I share exclusive educational resources first — get access to free, value-packed content to help you become a more confident and efficient photographer!

Join ATP Education on Facebook

Read the post

MY Step-by-step system

My HoneyBook Workflow

featured posts


how to write captions that convert

Instagram Captions Template


manage client

Wedding Questionnaires


improve your posing with this #1 tip

Easy Bride & Groom Poses in Minutes

Wedding party portraits got you stressing before the reception starts?

Take the FREE
Bridal Party Posing Course

save your seat