How to Transport Your Visitors to Another Time or Place with Layered Images [Tutorial]

Want to create a memorable home page experience for visitors or shoppers? In this tutorial, we’ll show you how to work with layered images to create an awesome effect.

You can convey a lot about an experience, place, product, or person with a single image. Now imagine what you could do with layered images.

In this tutorial, we’re going to demonstrate how to create more vivid and memorable graphics for your website using this layered technique. The Space & Sci-Fi Presentation Slider template will serve as our starting point.

Table of Contents:

How to use layered images to create more vivid and memorable graphics

There’s a lot you can do with this layered slider design:

In the template example, we see how layered images create an otherworldly atmosphere. You could go for the opposite effect and place realistic customer imagery against pictures of your actual establishment.

In this tutorial, we’re going to go for an effect somewhere between these two options. For our online bookstore, we’re going to take photos of people reading and pair them with the stories they’ve chosen to immerse themselves in:

If you need guidance on how to use Slider Revolution for the first time, refer to these guides before you start the tutorial:

Step 1: Remove extra items in the global layers

Go to “Slides” in the top toolbar and open up Global Layers. Here is where you’ll find the static layers that sit on top of the module as the slides change behind them.

We don’t need Row-14 which contains the header elements. We also don’t need Copy-Row-14 which has the social media links and slide counter.

The easiest way to delete these layers is to hold down the Ctrl or command key, then select Row-14 and Copy-Row-14. Hit Backspace or delete and this will instantly remove the rows and all the elements within them.

You can leave the arrow and circle elements as they serve as the navigation arrows for this slider.

Learn more:

Step 2: Adjust the progress bar

In addition to the left and right arrows is a progress bar along the bottom of the slider. This is a visual indicator that lets visitors know how much time remains before the next slide moves into place.

Exit the Global Layers by going back to “Slides” and opening up the first slide. Then go to “Navigation Options” and “Progress Bar”.

If you’d like to make adjustments to the progress bar, do so from this panel. You can edit the color of it by clicking the color block next to Progress Bar.

If you want to make it even more prominent, you can also change the thickness of the bar by increasing the Strength pixels.

Learn more:

Step 3: Edit the background images

Next, go to “Slide Options” and “Background”. Click on the Media Library button to upload a new background image.

Do this for each slide.

Note: If you want to turn off or modify the zoom effect, use the Ken Burns settings.

Learn more:

Step 4: Change the slide transition effect

Under “Slide Options”, go to “Animation”. There are two slide transition effects that you can modify here.

First, take a look at the “Transition Presets”. You’ll find dozens of customizable transition effects. Hold your cursor over each to see a preview of what they look like.

Right now, each slide is set to rotate using the Stretch Horizontal effect. To change this, simply select a different one.

Then go down to the “Advanced” section and click on “Filters”. There is a Post Process setting applied called Glitch & Noise. This is what gives the slider a staticky look.

You can turn off the post process effect altogether by selecting None or you can choose another one if it fits the theme of your layered image slider well.

Make sure to apply the same slide transition and post process effects to every slide in this module.

Learn more:

Step 5: Update the person imagery

In each slide you’ll find a layer called Image. This is the main subject that sits in the foreground of the design.

The image is more than just a person though. If you open the Media Library, you’ll see that the four Image layers in the slide contain the subject as well as the ground they’re standing on. The background behind them is transparent.

You don’t have to use this same composition or layout for your new Image. If you take a look at the images we’ve created, they’re all different.

What you choose to do depends on the theme of your website and this slider. You can use a single subject or you can piece together different layers with a subject and then place it on a surface (like the boys sitting on the ground).

The trick to making this work for you is this:

Create a canvas for your image that is 1800px by 550px. You don’t have to fill the full width or even height of this space. However, it will help you place your subject exactly where you want them to appear at the bottom of your slide without having to do much editing in Slider Revolution.

Note: Remember to export your graphics with a transparent background so the white behind and around them goes away.

When you’ve done that, return to your slides, select the Image layer in each, and upload a new image to “Layer Options” and “Content”.

You shouldn’t need to modify the size of the image. However, if you need to change how it’s positioned, go to “Size & Pos” and adjust its horizontal (X) or vertical (Y) position there.

If you modify the size or position of this Image layer, use the responsive editor in the toolbar to check that your changes didn’t negatively impact the design on smaller screens.

If changes are needed, make them in each device’s view. Edits made there will only affect the design for the specific device.

Learn more:

Step 6: Edit the text and button

The last thing to edit is the text. There are four layers in each slide:

  • Headline
  • Subheadline
  • Paragraph
  • Cta Button

We don’t need a subheadline for our slider, so we’re going to delete that layer from each slide. To do the same, select Subheadline from the timeline editor at the bottom and click the Backspace or delete key.

Note: Don’t worry if the Headline and Paragraph are overlapping or too close for comfort. You can easily adjust the spacing as you modify each of the layers.

To edit the text in the Headline, Paragraph, and Cta Button layers, select them one at a time in the timeline editor or canvas. Then go to “Layer Options”.

Use “Content” to modify what the text says.

Use “Style” to edit the font, color, spacing, weight, and more.

To change the red shadow/highlight color behind the font of the Headline, go to “Adv Style”.

Pro tip: If you want to add more space between the Headline and Paragraph layer, use the Padding settings at the bottom to increase the buffer between them.

If you’d like to make modifications to the button’s appearance, you can edit the fill color of the button under “Style” and “Background”. You can also change how the button looks when someone hovers over it under the “Hover” settings.

The last thing to modify is the button link. Since each slide pertains to a different genre in our bookstore, we want the button to point to the corresponding category page in the shop.

To program a custom link, open “Actions” and select Simple Link from the options on the right. Then enter the details to set your link.

Close the pop-up to save your changes.

Go through each of the slides and make the same stylistic changes to the text and button as you did in your first slide. Save your changes when you’re done.

Learn more:

Get creative with layering in your image slider

If you have a number of products, experiences, or promotions to call out on your home page, an image slider is a handy way to show them off while conserving how much space they take up on your site. To ensure that website visitors or shoppers take notice of all your slider content, give layered images a try. With the Space & Sci-Fi Presentation Slider, it won’t take long to come up with a memorable and vivid home page experience of your own.

How to Transport Your Visitors to Another Time or Place with Layered Images [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.

For further information or clarification on any topic discussed in this blog's posts, feel free to leave a comment on the post or contact me at [email protected].

Liked this Post?
Please Share it!

Leave a Reply

Your email address will not be published. Required fields are marked *