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!
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?
On to business. With 7 years experience in biz running a digital download shop, speaking at conferences, collaborating with dream brands, & booking 5 figure custom design clients, I share all that I've learned (and what I continue to learn!) about building a magnetic brand, effective marketing, and the science of conversion.
I promise to keep it real and relevant around here to help you make it happen... over a 4 count chicken mini meal. ;)
Get your free guide: The Fast & Free Way to Figure Out if Your Website Converts!
Sweet! I'll be in your inbox in a moment to get to know you better and give you my favorite resources & freebies!