webdew-logo-new_v2-1
   
webdew-logo-new_v2-1
Close
  • Services
  • Work
  • Resources
    • Knowledge
    • Ebooks
    • Tools
      • Website Audit
      • Website Grader
      • HubSpot ROI
  • Blog
  • About
Let's talk

  • fb-icon-01
  • tw-icon-01
  • insta-icon-01 (1)
  • linkedin-icon-01
  • youtube-icon-01
website-green-icon
Websites
  • Website Designing
  • Website Development
  • Website Migration
  • HubSpot Website
  • WordPress Website
  • Growth-Driven Design
video-blue-icon
Videos
  • 3D Videos
  • 2D Animation
  • Whiteboard Animation
  • Video Ads
  • Explainer Videos
  • Testimonial Videos
  • Onboarding Videos
  • Tutorial Videos
  • Social Media Videos
  • Product Demo Videos
marketing-yellow-icon
Marketing
  • Inbound Marketing
  • Inbound Consulting
  • Marketing Automation
  • Search Engine Optimization
  • Brand Domains
hubspot-red-icon
HubSpot
  • HubSpot Apps
  • HubSpot Themes
  • HubSpot Migration
  • HubSpot Onboarding
  • HubSpot Management
  • HubSpot Development
  • HubSpot Audit
  • Free HubSpot Demo
  • HubSpot Diamond Partner
webdew-logo-new_v2-1
  • Services
  • Work
  • Resources
    • Knowledge
    • Ebooks
    • Tools
      • Website Audit
      • Website Grader
      • HubSpot ROI
  • Blog
  • About
Let's talk

How to create HUD animation in after effects for a futuristic UI

How to create HUD animation in after effects for a futuristic UI-vbh
Tag: Videos
Author: Deepak
Deepak
Quick Links

Subscribe to Our Blog

Never Miss Any Update From Us !

Lately, UI interfaces have been going through a bit of rejuvenation, with various trends coming up. And one of my favorite trends in the Motion Graphics world is HUD-style animation. Regardless of whether you're recreating your favorite Marvel character's helmet interface or creating your own sci-fi masterpiece, adding HUDs to your assignment will undoubtedly yield appealing results.

After Effects is an incredible tool when it comes to creating fun character animations, kinetic typography, and HUD figures. The easy-to-use shape editor and layer-based structure make After Effects the ideal candidate for creating Superhero style graphics. 

Want to learn how to create Futuristic UI with After Effects? Keep reading to find out how you can create your own HUD animations.

What is HUD Animation?

Head-up display, otherwise known as HUD animation, is how information is visually relayed to the player as part of a game's user interface. HUD animations play a significant part in making the UI look more complex and futuristic.

A HUD display is indeed an innovative system for displaying information. The technology displays the info straight into the user's field of vision and considers key parameters like the user's viewing direction and head position.  

Getting Started with HUD Animation

In this easy step-by-step guide, you will find out how to implement some basic HUD elements. Excited to create your very first HUD animation? Let’s get going!

Shape Layers

Shape layers comprise vector graphics objects called shapes. A shape further consists of a path, a stroke, and a fill, by default. Layers that are not based on the footage are called synthetic layers. Besides the shape layer, text layers are also synthetic layers made of vector graphics objects. Therefore, most of the rules and guidelines that apply to text layers apply to shape layers also.

Shape layers offer multiple controls, with a set of transform options for an individual object and a whole set for the layer itself. Let's see how we can animate particular objects within a shape layer. 

  • Launch After effects.
  • Navigate to the topmost toolbar to find the Layer option and click on it.
  • Navigate to New > Add Shape Layer. You will now have a new Shape Layer appear in your layer panel. 
  • Click on the Pen tool in the top toolbar.
  • Click anywhere to create any shape.
  • If you draw a shape right in the Composition panel, After Effects directly adds a new shape layer to the composition.
  • You can now use stroke and fill settings to a shape, adjust its path, and apply animations. 
take-shape-layer-and-delete-stroke

  • Click on Stroke to open the Stroke Options dialog box.
  • Click on the Stroke Color box to pick a color.
stroke-color-change
  • In the Stroke panel, you can also change the Stroke width by increasing or decreasing the stroke weight. 
change-stroke-width

Duplicate the Shape Layer

  • Select the layer you want to duplicate.
  • Click on the Edit menu, and a dropdown menu will appear.
  • Now, click on Duplicate, and you'll notice a new layer right above the layer you chose to duplicate.
duplicate-shape-layer

Trim Paths

The Trim Paths tool allows you to make accurate adjustments to shape layer paths in After Effects. Trim Paths is a rather practical feature that lets you animate the start, end, and offset of a path. We can also use the Trim Paths tool for projects related to Infographics, Shape Bursts, Text Box, Text Stokes, etc.

The ultimate guide to animation video quality testing

Now, let’s see what the Trim Paths do to the shape created by the Shape layer.

  • Navigate to the Shape Layer options. 
  • Click on the add button.
  • Click on trim paths.
  • Add a trim path.
add-trim-path
  • To adjust the trim path, you can toggle open Trim Paths to view the Start and End options. You can play around with adjusting the numbers for each and see what happens once you merge them.

adjust-trim-paths

Wiggle Effect

  • To add a wiggle effect on the trim path layer, click on the Add button on the Contents layer and choose Wiggle Paths from the drop-down menu. 
  • Open the new Wiggle Paths 1 option and play around with the parameters until you find something you like.
adjust-wiggle-effect

Repeater Effect

  • Now, if you want to add a repeater effect on your shape, navigate to the contents section and click on the arrow alongside the Add label and create a repeater.
  • The repeater has its own parameters like copies and offset. By default, it creates three copies, as you can see in the image.
  • You can adjust these parameters and set the copies to any number you want.
add-repeater-effect-on-shape-layer
  • If you want to play your animation on loop, drag the work area, which is right below the current-time indicator, to the size of the animation and enter the spacebar.
adjust-shape-layer-size

Rotation Effect

  • Now, if you want to add a rotation effect on your shape, navigate to the contents section and click on the arrow alongside the Add label.
  • Click on the transform effects, and you will find your rotation property.
  • You can also select your layer and hit 'R' on your keyboard to bring up the rotation property automatically.
apply-rotation-effect
  • Go to the rotation property, and find the stopwatch icon to the right of the word "rotation." 
  • You can adjust the rotation values using the rotation tool in the composition window or select the numbers in the timeline window and enter the updated values.
  • You can also hold down the mouse button on the number in the timeline window and drag towards the left or right to set the duration of the rotation.
  • Duplicate the shape layer and adjust the size as per your requirements.
create-shape-as-you-want

Shape Layer Opacity

  • Navigate to the transform effects, and you will find your opacity property.
  • Move the playhead in the time ruler where you want your animation to begin.
  • Click on the stopwatch next to Opacity.
  • Now, move the playhead on the time ruler where you want your animation to end. 
  • Update the value of the Opacity property. Here, I have set the opacity to 30%. (Note: 100%= opaque, 0%= transparent)
shape-layer-opacity

Glow Effect

  • Look for the Glow effect in the Effects & Presets panel.
  • Select the Glow effect and apply it to your composition.
add-glow-effects
  • Most of the Glow effect properties are pretty much self-explanatory. So, I recommend you play around with them to find out what they do.
glow-effect-properties

Final Result

Watch this video to see how the final composition looks like.

Wrapping Up

Hopefully, you're now feeling excited to go out and create some impressive HUD graphics. 

These HUD effects are shockingly easy to nail, and they're a sure-shot way to enhance the quality of your motion graphics animation video projects instantly. 

So what are you waiting for? Create some superpowered, sci-fi HUDs!

Editor: Richa Sharma

New call-to-action

Related Blogs

Create impressive text animation using text animators in after effects-vbh
Videos

Create impressive text animation using text animators in After Effects

How to add layers in After Effects: A beginner's guide-vbh
Videos

How to add layers in After Effects: A beginner's guide

How to change color of image in Illustrator like a Pro?-vbh
Videos

How to change color of image in Illustrator like a Pro?

review-star

Based on 1000+ Reviews on

footer-dot-logo-img
  • Hubspot_Logo-icon
  • clutch_Logo-icon
  • upwork_Logo-icon
  • designrush_Logo-icon
  • goodfirms_Logo-icon
  • g2_Logo-icon
WE ARE GLOBAL
  • US-flag
  • CA-flag
  • IN-flag
  • GB-flag

Copyright © 2019 - 2021 Webdew, Inc. All Rights Reserved

Copyright © 2019 - 2021 Webdew Labs Inc. All Rights Reserved

Copyright © 2016 - 2021 Webdew Private Limited. All Rights Reserved

Copyright © 2019 - 2021 Webdew, Inc. All Rights Reserved

WE ARE SOCIAL
  • fb-icon-01
  • tw-icon-01
  • insta-icon-01 (1)
  • linkedin-icon-01
  • youtube-icon-01
Terms of Services
Privacy Policy