Today I am SO excited to share a tutorial I’ve been asked for a ton of times: How to make a scrolling website graphic in Photoshop! These little animated graphics are great for showing off your latest website launch, a new offering, a social media platform you want to promote, and more. The sky is really the limit!
Every time I launch a new client’s site, I love to surprise them with a social media ready graphic to share. I’ll grab one of our lifestyle stock images from the SC Stockshop shelves to overlay a screenshot of their pretty new home page. When it was time to launch the brand new Creative at Heart Conference website last year, I knew I wanted to give them some pretty little launch graphics to make the day even more fun!
For a while, I’ve been seeing graphics pop up that would catch my eye. Because instead of your typical screenshot overlay, the screen was actually scrolling to show an entire webpage from top to bottom. Say what?!? Wizardry I tell you.
In true me style, I spent many a late night hours trying to figure out how it could be achieved. I literally Googled my eyeballs out and came up with nothing. Nada. Zip. I tried every keyword combination under the sun to try and find an article that would show me how.
As the Creative launch was approaching, I knew I wanted to figure it out as a new fun surprise graphic. So I turned to my trusty friends on Instagram and simply asked for help. I put out an Insta story the week of the launch asking if any of my followers might know what in the world I was talking about and be willing to share an article online I could read to figure it out.
And what do you know, my Insta friends are solid gold. One in particular. AnnaKate Auten of Rhema Design Co, a brand design studio, DM’d me with of the sweetest offer: She would video record a tutorial for me! I was so taken back by her kind gesture to stop her day and show me the step by step breakdown of how to make a scrolling website graphic in Photoshop. There was no catch. No ask. It was a simple act of kindness. And it blew me away.
Her tutorial video was so easy to understand and follow and I was able to make Kat the cutest scrolling screen share graphic to celebrate her big day!
I had plenty of other friends in my DM begging me to share the how-to in case I found out, so I asked AnnaKate if she’d be up for being featured on the blog and she said yes! She even re-recorded the tutorial for our friends who may not be as comfortable in Photoshop to really break it down for everyone. She’s a gem, y’all. And I’m so thrilled she is here today to teach you how you can do it, too!
How to make a scrolling website graphic in Photoshop
About AnnaKate: AnnaKate is the Brand Strategist + Designer behind Rhema Design Co. Her goal and passion is to create beautiful brands of enduring value for small businesses, creatives, and entrepreneurs. She geeks out over anything Mid-Century Modern, loves historical fiction, and is an aspiring plant mama (how many is too many?). You can often find her browsing the shelves at her local library, somewhere in the woods, or laying in bed watching MASH, because #balance, right?
- You can easily grab a screen grab of an entire web page at once. I use a Chrome Extension called Full Page Screen Capture to take one picture of an entire page!
- All of the SC Stockshop images are perfectly priced at $19 each. You can do the same concept for a phone, iPad, laptop, or desktop stock image to show off your website!
- We used the Creative graphic for Instagram Stories and the Instagram Feed. The scrolling graphic you see on this blog is a GIF file format. To use a scrolling website graphic on Instagram, you’ll need to save it as a .mp4 video file to work!
- Sometimes when you save as a GIF, it can turn out to be a massive file. Not great for plugging into a blog post (aka it can slow your website down!). You can optimize your GIF when saving for web, but if that reduces the quality too much for your liking, you can also upload it to a site like GIPHY and then embed in your blog post. That’s what I did here!