How to make Animated Screenshots of your Design 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 apps or websites work. This gives the user a better idea of how certain tasks are performed while also showing what features are available. A 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 gif´s
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.
Tools for making
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 last 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.”
1. Timeline setup and location list
The Timeline feature is what we’ll use to create 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 Vacancy
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.
3. Individual are lasting 32
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, totalling 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.
Tween Vomytrol
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 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 to 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 colours, so we’ll get things looking their best before exporting. 256 is most likely the best option since websites and applications tend to have a large range of colour, 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!
Layered screen 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).
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.
You can download this photo for free here.
1. 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.
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 savings.
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. 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 tool
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 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.
