Create captivating retro computer screen animations

Create captivating retro computer screen animations

Table of Contents

1. Introduction
2. Creating the Text Animation
   • Adding Text
   • Animating the Text
   • Explaining the Typewriter Effect Expression
3. Adding Background Effects
   • Adding a Grid Background
   • Adding Venetian Blinds Effect
   • Adding Glow Effect
   • Adding Fill Color
   • Adding Mask and Feathering
4. Creating a Low-Resolution Pixel Look
   • Duplicating and Modifying Grid Layer
   • Using Layer as Luma Inverted Matte
   • Adding Gaussian Blur
   • Adding Mosaic Effect
   • Adding Fill Color and Glow
5. Adding Flickering Effect
   • Adjusting Opacity with Wiggle Expression
   • Adding Adjustment Layer for Position
   • Adding Wiggle Expression for Position
   • Adding Mask and Feathering for Light Effect
   • Animating Mask Path
   • Adding Posterize Time
6. Version 2: Coding-inspired Animation
   • Duplicating the Composition
   • Adjusting Position with Expression for Height Change
   • Workaround for Underscore Height Change
7. Conclusion

Creating Retro Computer Screen Title Animations in After Effects

In this After Effects tutorial, I'll show you how to create two retro computer screen title animations. We'll animate the title based on expressions and add a vintage computer screen look using standard effects.

Introduction

Hello, I'm Manuel, and welcome to this tutorial on creating retro computer screen title animations in After Effects. In this tutorial, we will dive into the process of animating text using expressions and adding background effects to achieve a unique retro computer screen look. So, let's get started!

1. Creating the Text Animation

To begin, we'll create a new composition and add some lines of text using the Type Tool. I recommend using a monospace font, such as Source Code Pro Regular, as it is commonly used for coding. We'll align the text to the right and position it in the center.

Next, we'll animate the text using an expression. First, we'll add a slider control named "speed" in the Expression Controls of the Effects panel. This slider control will control the speed of the typewriter effect.

Then, we'll open the Text property and click on the stopwatch icon next to "Source" while holding the Option key to add an expression. We'll copy and paste the typewriter effect expression into the expression field.

The typewriter effect expression works by revealing the text one letter at a time based on the speed value set in the slider control. It also includes a blinking cursor effect that appears when the typing is finished.

Pros:

• Creates a retro computer screen look
• Animates text with a typewriter effect
• Includes a blinking cursor effect

Cons:

• Requires knowledge of expressions in After Effects

2. Adding Background Effects

To enhance the retro computer screen look, we'll add background effects to our composition.

First, we'll add a new solid layer and name it "Grid." We'll change its color to white and apply the Venetian Blinds effect with a transition completion of 95% and a width of 6. We'll duplicate the effect and change the direction to 90 degrees to create overlapping lines.

Next, we'll add a glow effect to make the lines shine. We'll duplicate the glow effect to increase its brightness. Then, we'll add a fill effect and choose a bright green color to give the composition a vibrant look.

To add depth to the background, we'll create another solid layer with a slightly darker color. We'll move it below the grid layer and add a mask with a feather value of 200 to create a fading effect towards the borders.

Pros:

• Creates a visually appealing background
• Adds depth and dimension to the composition

Cons:

• Requires multiple effect adjustments for desired look

3. Creating a Low-Resolution Pixel Look

To further enhance the retro computer screen aesthetic, we'll create a low-resolution pixel look for the text.

First, we'll duplicate the grid layer and move it above the text layer. We'll delete all the effects except for Venetian Blinds 2 with the 90-degree direction. This layer will serve as a matte for cutting lines into the text layers.

Next, we'll apply a Gaussian Blur effect to the text layer and adjust the blurriness to soften the borders. Then, we'll add the Mosaic effect to create a pixelated look. We'll set the block size to match the line's width, resulting in a perfect fit to the grid background.

To make the text stand out, we'll add a fill effect and choose a green color. We'll add a glow effect to make it shine even brighter.

Pros:

• Creates a vintage, low-resolution pixel look
• Adds visual interest to the text

Cons:

• Requires multiple effect adjustments for desired look

4. Adding Flickering Effect

To add a subtle flickering effect to the text, we'll adjust the opacity using a wiggle expression.

We'll open the Opacity property of the text layer, click on the stopwatch icon while holding the Option key, and add a simple wiggle expression "wiggle(12, 50)". This expression will make the opacity change 12 times per second with an amplitude of 50.

Additionally, we'll add an adjustment layer named "Position" and link all layers except the bottom black one to it. We'll then add a wiggle expression to the position property of the adjustment layer to create a slight shaking effect.

Finally, we'll add another white solid layer named "Light" and use a mask with a feather value of 250. We'll adjust the opacity to three percent to create a subtle light effect. The mask will be animated to create a fading effect from the beginning to below the screen and back up again.

Pros:

• Adds a realistic flickering effect
• Enhances the retro computer screen look

Cons:

• Requires knowledge of expressions in After Effects
• Requires adjustment for desired flickering effect

5. Version 2: Coding-inspired Animation

In version two of our retro computer screen title animations, we'll create a coding-inspired animation with moving lines that ascend.

First, we'll duplicate the composition and select the text layer. As the height of the text block changes when new lines are added, we'll need to adjust the position based on the height using an expression. This expression ensures that the bottom line stays at the same position while the text animates.

Pros:

• Creates a coding-inspired animation
• Adds visual interest to the text

Cons:

• Requires adjustment for desired animation effect

Conclusion

In this tutorial, we learned how to create retro computer screen title animations in After Effects. We explored the process of animating text using expressions and adding background effects to achieve a vintage look. We also covered a coding-inspired animation variation. Experiment with these techniques and let your creativity shine!