How To Create Website Scrolling Effect Using Adobe Photoshop GIF Animation Portfolio

Scrolling Effect Website Portfolio in Desktop or Any Screen Size Using Adobe Photoshop

If you are looking at "How To Create a Scrolling Effect Website Animation In Photoshop" then this article is for you as we are going to teach you how you can actually create an amazing animation built-in GIF using Adobe Photoshop, this guide is so simple and would totally increase your client impression and get a big close deal project.

Displaying a long screenshot of your portfolio website is a really annoying side taking too much space is not good in terms of user experience, so with this amazing solution you can get rid of the problem with this solution. All you have to do is do a perfect full website screenshot, get a mockup of any screen sizes and you are good to go.

Note: We have provided a detailed video tutorial about this just incase you don't want to read the article, just scroll down and you will see the complete guide from scratch to finished.

💡 Table of Contents

Things Needed Before We Start Making Website Scrolling Effect in Photoshop

What you need is a tool that will help you create the animation, and a mockup of your screen size, and we can start it once this is all ready.

  • Mockup Style of PC, MAC, iPad Tablet, Mobile, or Desktop with Empty screen.
  • Download the Screenshot Extension just search the Google Extension to get a full screenshot of a website you want to create an animation scrolling effect. (you can watch the video guide), the extension is called "Awesome Screenshot".
  • Adobe Photoshop, any version as long as it's not far from the latest version of Adobe Photoshop then you are good to go.

You Might Also Like

Step By Step Guide On Creating Website Scrolling Effect for Portfolio

Before you start make sure all of the required files are intact inside the same folder so you won't get any issues finding them and it is for you to get the files, once you are ready then follow the steps below.

Step 1: Open Adobe Photoshop

Once Photoshop is Open, just click File > Open or you can also do the keyboard short CTRL + O to open and locate the graphics you want to work on, so in this case open the Mockup Desktop graphics and the full website screenshot.

Open Adobe Photoshop Both Screenshot and Desktop PNG Mockup

Step 2: Drag or Duplicate the Website's Full Screenshot

Now, if you see both files are open in your Photoshop window, just drag the screenshot of the full website you want to work on to the Mockup Device screen sizes that say you working on Desktop/Mac/Mobile/iPad.

You can also duplicate the layer at the right corner where the screenshot layer is just right click the layer and click duplicate and the small new window will appear, below the settings Destination there is a dropdown option just click the arrow down to select destination and choose the option where your mockup is located then hit okay.

Duplicate Layer and select to Adobe PC Mockup PNG - Scrolling Effect Kazukiyan

Once you have done that you can now preview the duplicated file in the Mockup section tab of Photoshop.

Step 3: Fit the Screenshot to a Desktop or Any Screensize you're using in our case we are using a Mac Screen size mockup

In the left corner make sure you click the Move Tool then at the right corner click the layer of screenshot then press CTRL + T then resize it to fit in that screen, once you are satisfied with the placement just click the CHECK ICON at the top to commit the changes.

Fit the screenshot to desktop pc mockup - Scrolling Effect Kazukiyan

Step 4: Use the Rectangular Marque Tool

In the left corner again just click the rectangular marquee tool and then make a square inside that mockup while the layer is selected at the right corner, create a square that fits the screen then at the right corner where the layer is selected below there is a square icon with circle in the center click that to "Add a mask layer" that way the long screenshot will cut out and will now fit to the screen.

Retangular MArque Tool And Add Mask Layer - Scrolling Effect Kazukiyan

Step 5: Select Motion WorkSpace

In the Photoshop window at the top corner there is a menu that says "Window", just click that then go to "Window > Workspace > Motion", by default it is selected as classic so we want to move it into motion as we are going to create it in GIF format.

Select Motion Workspace Scrolling Effect Kazukiyan

Now, you will see a small window at the bottom, which is name TIMELINE, and at the center, there is a dropdown menu you can see a default option probably "Create Video Timeline", just click the arrow down icon and select the "Create Frame Animation" then click that option to display the frames.

Select Create frame animation - Scrolling Effect Kazukiyan

Step 6: Duplicate The Frames

Take note that you need to follow the steps above correctly before you can do this guide here so that you won't get into any trouble when dragging the long screenshots, so while the layer is selected on the right side, and the frames below are also selected now do this thing below.

  • There is a menu icon below the frame animation at the top right corner click that and then choose Copy Frame
  • After that just click again the menu icon then choose Paste Frame, after you do that you will see a tiny window make sure that you only check or enable the "Paste After Selection", (Note: If you see the option that says "Link Added Layers" enabled, then ensure that is unchecked since we don't want to commit the changes to all frames we need it separately) also you will see a duplicate frame next to your original frame.
Paste Frames to Duplicate - Scrolling Effect Kazukiyan

Step 7: Start Animating Frames

This guide here is crucial so we suggested you follow the video we created so you can get the correct animations, take note that when you click the tween animations, I suggest that if your screenshot is long adjust the number to 40 or 45, and if this is only shorts then adjust it to 25, also I highly recommend you to put 2 seconds for each frame to make the scroll animation effect smooth.

How To Make Scrolling Effect Website for Portfolio Complete Video Tutorial

Want help? we also offer services just contact us for our amazing scrolling effect animation services, that way you can focus on your business, or if you have additional questions regarding this article please leave a comment.

Most Common Questions About This Project

We have included a most frequent ask question for all beginner or someone who doesn't know how to make this scrolling website effect.

Can I get the Desktop Mockup PNG Graphics?

Yes, if you want you can contact us or leave a comment below, that way we can provide you the PNG, or you can also get it in CANVA or you can google it then edit it using Adobe Photoshop.

What Version of Adobe Photoshop Should I Use?

You can use any version of photoshop but in my case I am using the latest version as we have subscription on that one, if you need help about this we can help you with just small amount of services.

Can I use Other Tools Rather Than Using Photoshop?

Yes you can, there are other ways to do this scrolling effect via CANVA, we will do a seperate video and tutorial article about this.

Post a Comment

Previous Post Next Post