After your latest web design project is done, it’s time to show it off and add it to your portfolio. Your website visitors (and prospective clients!) will want to see your awesome work in action. Great imagery is key, and in the digital space, there will be times when you want to illustrate project functionality. Showing it off with animated screenshots may be the perfect solution.

I’m sure you’ve seen the cool, simple animated screenshots that show us how apps or websites work. GIFs of screen captures give the user a better idea of how certain tasks are performed while also showing what features are available. Video is certainly an option and definitely has an important place on the web. In-depth product videos or case studies definitely benefit from a video format. However, a simpler, more file-size conscious choice such as an animated screenshot GIF may be just what you’re looking for.

Why animated screenshots are important for your portfolio

Whether you pronounce it “GIF” or “JIF,” it’s important to remember that GIFs can be more than just funny cats and movie clips with a clever tagline. Animated GIFs of your projects should be eye-catching and carefully planned to show design functionality. Animating interface elements is both a functional and aesthetic purpose, so a GIF file shows this. How about demonstrating the menu and the options your work presents? How about showing how scroll works? Showing functionality helps the user clearly see how the app or website can help them.

Tools for making GIFs

There’s no better way to demonstrate your hard work than with one of the following tools for creating GIFs. The examples below will demonstrate how it looks when a user taps on an option, views more details, and then scrolls to see more content.

Note: There won’t be any visual design instructions in this tutorial; these tips assume the website or application design for your portfolio project is already done.

How to create animated GIF screenshots in Adobe Photoshop

In my opinion, Adobe Photoshop and Adobe After Effects are the best tools for the job. Both allow for a lot of control over the final product. I personally like Photoshop for making GIF screen captures (and most designers are very familiar with it), so that’s how the following example will be built. Let’s get started!

Showing scroll functionality

This design was done in Adobe XD but then exported to Photoshop with appropriately-named layers. The example has a layer called “MinTour Locations List” for the list page, “Sculpture Garden Listing” for the details page, and the part that is out of the initial scroll view is called “Sculpture Garden Listing Overflow.”

Part one

1. Timeline setup and location list

The Timeline feature is what we’ll use to create the different screens for the final product. Make sure the Timeline Panel is open by going to Window > Timeline.

Here is the listing page; the user starts here, taps on a location, and will arrive at the details page, where they can scroll to see more details.

You’ll see there is already a first keyframe established. Make sure the correct layers are showing so the correct view is shown in the keyframe.

Optional: If you’d like to show where the user taps, sometimes this is shown with a dot. To do this, add an extra frame with the dot area.

2. Individual location details

The ability to organize with layers is a huge advantage and will help you keep everything straight while you create your screen capture GIF. Go to the options in the Timeline panel and choose “New Frame.” The same thing here– make sure the correct layers are hidden/shown. For this one, I needed the individual listing to be shown, so the locations list layer is hidden.

3. Individual location details scroll content

The individual listing page for the Sculpture Garden has more content, so the scroll area should be shown to the user. This was on a separate layer, so I created a new frame to show this overflow content.

4. Choose durations

This may take some experimentation, but choosing the duration for each frame is important. You want the user to have enough time to see each frame, but also they should not have to wait too long before seeing the next one.

I put in values for each frame, totaling five seconds for the entire animation.

5. Preview

It’s good to take a look at what is going on so far. There is a play button in the bottom row of the Timeline panel. Try things out and see if there is anything that can be improved.

(Optional) tween control

Things are ordered correctly, but they seem a little jumpy. Screenshot animations can be adjusted to make things appear a little smoother. From the Timeline options, there is a “Tween” option. To automatically make a smooth animation between the current and previous frame, there can be more frames automatically inserted.

From the listing to the list overflow, Tween was added to make it look like more of a scrolling action. Those new frames were set to have a very short duration of .05sec (scrolling in an app happens relatively fast).

If you want this to keep looping in Photoshop, make sure that “Forever” is selected. If there is a set number of loops, that value can be entered.

6. Saving the screen capture GIF (screen flow only)

If you’re looking to include this as just an animated screen flow, saving will be the last step. At this time, the screenshot animation is created, it just has to be saved in the correct GIF format. You may be used to saving a static image, but saving a sequence of images is different. Go to File > Save for Web to save this GIF file.

Here you’ll see all the settings you’ll need for your GIF. Remember, you are limited to the number of colors, so we’ll get things looking their best before exporting. 256 is most likely the best option since websites and applications tend to have large range of color, but if your design allows for it, you can simplify (which keeps the file size down).

There are also some “Animation” settings in the lower-right corner; you can choose Looping if you want this to loop indefinitely. You can also loop a set number of times if you wish. Save it to the desired location, and it’s ready to go!

Part two: Layered screens featured on a device

If you’ve decided to continue, some additional steps are needed to layer it so it looks more realistic on the phone. From the Timeline panel choose “Flatten Frames Into Layers.” Each frame will be converted into a flat layer, which ends up being 26 frames (so there are 26 layers).

Once that is saved, the phone image will need to be added to the file. To accommodate this, some resizing of the image size will have to be done.

1. Adjust the canvas size for your animated screenshot

The background image is 1300 X 920, so the canvas size needs to be adjusted to fit that exactly. Go to Image > Canvas Size and put in the correct dimensions.

2. Get layers ready to be placed on the phone screen

Next, make a new layer for the background image so the animation can be layered on top. Here’s where “Select All” frame layers will come in handy.

3. Double check frames

This is a good time to make sure that the frames are still how you planned. If you play the animation from the Timeline panel, you will see the sequence animated.

4. Skew the screens

It’s important that all the screen layers are selected so they can all be skewed at once to stay uniform. Edit > Transform > Skew is where this is done.

It will take a bit of experimenting, but adjust the corners so they line up with the bounds of the screen, giving it the illusion that the screen is illuminated with the animation.

5. Image adjustments and saving your GIF screen capture

Now is the time to do any adjustments. Color, contrast, or any other final touches should be done before saving. Saving the animation is the same as what was done in Part one, step 6.

In this example, the background was desaturated and contrast was increased to make the animation really stand out. Now it appears to be on a real device!

Giphy

If Photoshop isn’t your preferred tool, there is a free and easy tool called Giphy. (In addition to professional use, you can make a lot of funny GIFs, too!)

If you choose “Slideshow,” this is a good option for creating an animation screenshot. To use this, you will have to have individual files of the screens saved. You will then drag and drop still images and the process will start.

Once the files upload, select “Create Slideshow.” When it’s done putting the images together, you can download the file. It’s as simple as that!

Recordit

This app is pretty simple; it records the action that takes place on your computer screen and uploads the recording to the Recordit.io website and creates a shareable link, with the option to download the GIF.

When Recordit has been installed on your computer, an icon appears in the taskbar. When selected, you can drag to and select the area of your screen you want to record. This was perfect when I went to preview mode in Adobe XD and was able to use a prototype for demonstration.

After you select the area that will be included, a record button appears. When you press “Record,” Recordit then records everything that happens on your screen, within the boundaries that you created. When you are done recording, simply choose “Stop.”

It will take a few seconds, but after the recording is stopped, there will be a pop-up with a link that takes you to the recording, which is hosted on the Recordit.io site.

Animated GIFs of screen captures are a great way to show user flow and how your design projects work. Video also has its place, but GIFs can be created very quickly and are easy to add to your online portfolio.

Free worksheet: Target audience and client persona

Looking for an actionable guide to help you keep your content relatable and engaging? This three-page interactive PDF will help you find your audience, audit your content, and create a game plan for growing your business.

Download

---

If you liked this article, you might also enjoy these:

• How to create SVG animations with CSS
• How to create a WordPress video gallery
• How to use skip links to make your WordPress site more accessible