How to Design a Hero Image That Feels Alive and Three-Dimensional [Tutorial]

Tired of the flat design trend? In this tutorial, we’ll show you how to design a hero image that comes to life thanks to particle wave animation and creative layering.

Even though our world is growing ever more digital, that doesn’t mean that we as humans are completely detached from the real world. To bring a little more realness into our digital spaces, we’re seeing designers add texturized and tangible qualities to their interfaces.

In this tutorial, we’ll show you how to repurpose one of the slides from the Particle Wave Showcase template and design a hero image that visitors will want to reach out and touch.

Table of Contents:

How to design a hero image that feels alive with particle animation

Take a look through this Slider Revolution template and you’ll see the many ways in which you can use particle animation to create a three-dimensional landscape for your hero image:

In this tutorial, we’re going to edit the third “TOUCH” slide to create a touchable flowing effect for our ecommerce site’s sales event:

If this is your first time using Slider Revolution, get acquainted with the basics before you begin:

Step 1: Choose your hero image slide

There are five distinctly designed hero image templates within the larger Particle Wave Showcase template. While each is attractive and eye-catching in its own right, you want your hero image or hero slider to offer up a consistent tone and look to visitors.

So, starting out, you’ll need to choose just one of the slides in the template to work with. To design our totally touchable hero image, we’re going to choose slide #3.

Note: If you choose to use a different slide, that’s fine. Just keep in mind that some of the following steps might not be relevant since there are different content and settings in each of the slides.

To delete the slides you don’t need, go to “Slides” in the toolbar. Hover over them one at a time and click the trash can to remove them:

You should be left with Global Layers and your chosen slide when you’re done. There are no Global Layers to edit in this template, so we’re going to focus our attention on the remaining slide for the rest of this tutorial.

Learn more:

Step 2: Edit the slide and module background color

To change out the background of our design, we’re going to update two areas in the template. The first you’ll find under “Module Options” and “Layout” settings. Scroll down to the section for “Module Background”:

Click on the box next to BG Color to open the color selection dialogue. While you can add an image or color gradient to the background, we want the main wow factor to come from the particle wave animation, so stick to choosing a solid color:

After you’ve applied the module background color, go to “Slide Options” and “Background”. Do the same thing to the BG Color there. Save your changes before moving on.

Learn more:

Step 3: Edit the headline

The headline is created using two text layers:

Text-Outline is an outlined version of the header that appears in the areas where the particle wave moves over the headline.

Text-Solid is a solid version of the header that partially disappears as the wave moves over it. This happens because the solid layer is placed below the particle waves in the timeline, which pushes the layer behind them in the slide.

We’re going to make similar edits to both of these layers. Let’s start with Text-Outline. To edit it, select in it the timeline or canvas, then go to “Layer Options”:

We made just a few changes to the layer:

  • Changed the text and alignment under “Content”.
  • Changed the text layer size along with the font under “Style”.
  • Changed the text stroke color under “Adv Style”.

Whatever changes you make to the outline version of your header, do the same to Text-Solid. The only difference is that there is no Text Stroke effect applied. To edit the color of the solid text layer, do so under “Style” settings:

The two layers should now perfectly line up. If not, double-check that your text and size are identical for both.

Note: If Text-Solid does not appear over Text-Outline in “Preview” mode, select the Text-Solid layer. Go to “Adv Style” and change Blend Mode to normal:

Learn more:

Step 4: Add a description layer

We’re going to add a bit more context to this slide with a description layer placed beneath the headline.

To add a new text layer, go up to the toolbar, hover over “Add Layer”, and select “Text”:

Note: If you select “Quick Style Headline” or “Quick Style Content”, a new sidebar will pull out from the right of the editor with predesigned text layers to choose from. If you’d prefer to style your own description, click on “Text” and then make the modifications in “Layer Options”.

Use the same settings under “Layer Options” as you did for Text-Solid to customize your new description.

In addition, you’ll need to move the new layer into position on the slide. While you can drag-and-drop the layer in the canvas to where you want it, you can make more precise positioning adjustments under “Size & Pos” settings:

We’ve made two changed. Under “Size & Pos”, we used the horizontal and vertical alignment icons to quickly move the layer into place in the center of the page. Since it falls neatly under the header, no other changes are needed.

We then returned to “Content” to center our text.

The only other thing you’ll have to do in this step is a responsive check. Since this is a new layer, you want to make sure it doesn’t end up sitting on top of an existing text layer on a smaller device.

Go to “Preview” in the bottom-right corner of the page and then toggle between the responsive variants:

If you need to customize the positioning, use the responsive settings inside the editor to toggle between the devices and then customize the “Size & Pos” settings as needed.

Learn more:

Step 5: Edit the call-to-action button layer

Just as you want to keep the background of the slide simplified, you want to do the same with the button design. It should stick out enough so that visitors can easily find and click on it. However, you don’t want it to be so pronounced that it drowns out the particle wave animation.

So don’t worry about redesigning the button or adding a fill to it in this step. Instead, make simple changes to the Call-To-Action layer:

  • Customize what the text says under “Content”
  • Change the font, size, text color, and button outline color under “Style”
  • Update the button hover state under “Hover”

When you’re satisfied with the new design, save your changes.

Learn more:

Step 6: Customize the particle wave layers

In order to design a hero image that feels alive and like you could reach out and touch it, you have to first find the particle wave animation that works well for the brand.

To explore your options, click on Particle Wave Left and go to “Particle Wave” settings. Click open the Particle Effects Library to display the Default Presets:

Many of these presets mimic naturally occurring objects in motion — like spider webs, ocean waves, and mist. Take your time testing each one out to find a general style of animation you prefer.

Note: You don’t have to use any of the wave settings out of the box. They’re just a starting point.

For our design, we’re going to swap out the existing particle wave for the Smoke effect.

After you select your particle effect, scroll beneath the library to customize your settings:

All we’ve done here is rotate the particle wave Angle to -45° under “Scene” settings. We also applied a custom tan gradient under “Particles”.

To edit Particle Wave Right, repeat the process. However, in order to create a mirror image effect, the rotation Angle will have to be set the other way — to 45°. You can then create a custom gradient for that particle wave.

Learn more:

Step 7: Deactivate the navigation

The last thing to do is deactivate the template’s navigation. Unless you’re creating a slider, there’s no need for it here.

To do this, go to “Navigation Options”. Select “Arrows” and turn the toggle to OFF:

Do the same thing under “Bullets”. Save your changes. Then open up the preview and make sure there are no further changes needed to the design.

Move away from the flatness of digital and bring your hero image to life

Flat design is a good thing as it often leads to clean and minimal UIs. However, flat can sometimes be boring. It can also be difficult to interact with because it’s two-dimensional.

Using the Particle Wave Showcase template, some creative layering, and a three-dimensional particle animation, you can instantly liven up your home page. And the best part? Most of the hard work has already been done for you, so you can realistically have a beautiful hero image up and running in an hour or two.

How to Design a Hero Image That Feels Alive and Three-Dimensional [Tutorial]

FREE: Your Go-To Guide For Creating
Awe-Inspiring Websites

Get a complete grip on all aspects of web designing to build high-converting and creativity-oozing websites. Access our list of high-quality articles and elevate your skills.

The Author

Kezz Bracey

Learn everything you can. Teach everything you know.

Liked this Post?
Please Share it!

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Newsletter

Join over 30.000 others on the Slider Revolution email list to get access to the latest news and exclusive content.