Have you tried Flywheel? Learn moreJoin the best designers and creative agencies in the world. Learn more

×
How to make animated screenshots of design work for your portfolio

How to make animated screenshots of design work for your portfolio

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

I’m sure you’ve seen the cool, simple animated screenshots that show how aps or websites work. This gives 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. A simpler, more file-size conscious choice may be what you’re looking for, however, such as an animated GIF.

Screenshot setup for GIFs

Whether you say “GIF” or “JIF,” it’s important to remember that GIFs can be more than just funny cats and movie clips with a clever tagline. Project GIFs should be designed to 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 it presents? How about showing how scroll works? Showing functionality helps the user clearly see how the app or website functions.layout by flywheel animated screenshots photoshop work on laptop

Tools for making GIFs

There’s no better way to demonstrate this than with a sample app. The example 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 steps in this tutorial; these tips assume the website or application design is already done.

Adobe Photoshop

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

Showing scroll functionality

The design was done in Adobe XD but then exported for 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.”
layout by flywheel animated screenshots tour example

Part one

Step one – 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.
layout by flywheel animated screenshots timeline option

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.
layout by flywheel animated screenshots correct layers options

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.

Step two – individual location details

The ability to organize with layers is a huge advantage and will help you keep everything straight. 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.
layout by flywheel animated screenshots add new frame

Step three – 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.
layout by flywheel animated screenshots new frame

Step four – 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.
layout by flywheel animated screenshots choose duration

Step five – 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.

Step six – optional tween control

Things are ordered correctly, but they seem a little jumpy. 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 current and previous frame, there can be more frames automatically inserted.
layout by flywheel animated screenshots set tween options

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).
layout by flywheel animated screenshots select frame duration

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.
layout by flywheel animated screenshots loop animation options

Step six – saving the 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 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!
layout by flywheel animated screenshots working ap gif file

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 ended up being 26 frames (so there are 26 layers).
layout by flywheel animated screenshots flatten frames

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.

 

Step one – adjust the canvas size

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.

Step two – 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.
layout by flywheel animated screenshots select all layers

Step three – 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.

Step four – 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.
layout by flywheel animated screenshots transform skew

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.
layout by flywheel animated screenshots skew screenshots 1
layout by flywheel animated screenshots skew screenshots

Step five – image adjustments and saving

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.

Animated gif on phone

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!)layout by flywheel animated screenshots how to use giphy

If you choose “Slideshow,” this is a good option for creating an animation. 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!layout by flywheel animated screenshots how to use giphy preview content on mobile phone

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.layout by flywheel animated screenshots how to use recordit record settings

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.”layout by flywheel animated screenshots how to use recordit content preview

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 are a great way to show user flow and how your design projects work. Video also has it’s place, but GIFs can be created very quickly and are easy to add to your online portfolio.

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

1 Comment

Join the discussion

Share this article:
Get more great content in your inbox

More articles

Get content like this sent directly to your inbox!

Install WordPress locally free