Branding

How to Make a Scrolling Website Graphic in Photoshop

, ,

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!

 

How to Make a Scrolling Website Graphic in Photoshop, Photoshop Tips, Graphic Design, Social Media Graphics, SC Stockshop, stock images, how to overlay an image on stock photos

 

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

 

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?

 

Helpful Tips

 

  1. 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!
  2. 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!
  3. 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!
  4. 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!

share this post on

comments

6

leave a comment

Leave a Reply

Your email address will not be published. Required fields are marked *

  1. AnnaKate

    February 23rd, 2019 at 9:21 am

    Aww, so sweet of you to share the shout out! I hope this helps a ton of people!

  2. Megan Martin

    February 23rd, 2019 at 3:12 pm

    You are the best!!! Thank you so much for helping us all! XOXO

  3. Sherry Scott

    February 23rd, 2019 at 9:21 am

    This is the sweetest story! I am hopeful that other industries will start stepping up and understanding that giving back is true leadership. Thanks for sharing this!!

  4. Megan Martin

    February 23rd, 2019 at 3:11 pm

    It was such a sweet thing for AnnaKate to do! I am so grateful!

  5. SC

    February 23rd, 2019 at 11:56 am

    Cool tutorial! Instead of inching the image with arrows, you can hold shift (I believe) and click and drag it up. It will move it up and down but not left and right

  6. Megan Martin

    February 23rd, 2019 at 3:11 pm

    That’s a great tip! Thank you!

turn your website into a conversion machine!

Enter the Conversion Lab!

Get a tailored step-by-step plan based on your unique business to help you tweak (or create!) your website to convert.

Like high school chem class... Actually it is nothing like that. Chem class was a total bore. This is FUN and will give you results you can actually use beyond graduation!

take the quiz!