How to create a cool motion blur for UI design presentations

This tutorial is about how to add motion blur to your UI design compositions so as to make swift movement look realistic and polished for your mobile app or website design. If you have not read the article on how to make animated GIFs you might want to take a look at this tutorial. This article will touch on the process I use briefly but its main focus is to explain how to apply motion blur to your application presentation.


Our presentation is of a skin diagnostic tool we developed to enhance the online experience to be similar to an in-store consultative experience. The tool has a landing page then presents the user with options that relate to them. For example their skin tone, color, skin concern etc. At the end the wizard returns a recommended skin regime.

We will use the same technique we used in the tutorial for creating animated GIFs. We will use Adobe After Effects to create two compositions. One composition cycles through the skin tool’s screens whilst the second composition positions the first composition on a tablet view. Once we are done we render the file into .mov or if you have the setting, directly into a GIF.

Our first composition is where the motion blur effect will be applied. My layout includes firstly placing all the screens, in the order I want to show them. Each one is spaced out in approximately one to two second intervals.

 

Screen Shot 2015-02-01 at 5.48.10 PM

 

In order to apply the motion blur we need to duplicate each screen in our composition. This is so that we can apply the blurring effect on one layer whilst keeping the other layer normal. The layer with the effect is then shortened and timed to occur just before the next screen comes into view.

Screen Shot 2015-02-01 at 5.48.37 PM

 

To apply a motion blur, select the shortened layer and click in the motion blur selection box to activate motion blur. Once done selecting the motion blur boxes, enable the composition’s motion blur setting and you are good to go. Finally preview the composition to make sure it works.

Screen Shot 2015-02-01 at 5.48.23 PM

Screen Shot 2015-02-01 at 5.48.51 PM

 

Screen Shot 2015-02-01 at 5.49.03 PM

To make it a angled presentation, create a second composition with the angled device as the background. Drag in the first composition and apply a corner pin effect to get the composition skew/distorted. Finally render into a video file and create your GIF.

If you do not know how to create a GIF from the video file please refer to my tutorial on the topic. Enjoy.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s