Creating Layers For A "Multi Layer Parallax" Effect

Authored By: James LePage
Published On: July 27, 2020

Affiliate Disclosure: Some links on this website are affiliate links. We make commissions for purchases made through those links.

We only recommend items/tools that we've personally used and like.

Full Disclosure | FTC Statement

amazon elementor E book

This video and blog post is a companion to our tutorial on how to do multi layer parallax in WordPress, using Elementor.

Many were asking for guidance on how to take the original image, and separate it into the layers used when applying multi layer parallax effects to WordPress websites.

This video shows a speedup process of taking an image and separating it into the individual layers used in that parallax. First, open the image in Photoshop . Then, apply a filter effect called cut out to it.

The cut out effect in Photoshop groups specific colors within the image into visible layers. We want these visible layers because it makes it easier to separate the image, removes minute detail, it makes the file size smaller for use in a WordPress website.

This is covered in more depth in the main Elementor parallax video (and blog post).

After applying that filter effect to the image in Photoshop, use the magnetic lasso tool to select each individual layer of the image. From the main image, cut the selection, and paste it into a new layer. The key combination “Control shift V” will paste the cut selection into a new layer In Photoshop.

Do this for each of the main layers in your image, keeping in mind that the more image layers you have, the more depth the parallax effect will have in Elementor.

Once all image layers are separated, find the predominant color of each layer. using the standard lasso tool, make a selection from the bottom of the image layer to the bottom of the canvas. Then, use the paint bucket to fill the predominant color into that selection.

Doing this ensures that there will be no transparency or noticeable spaces between each of the layers in the parallax effect. Also, expanding everything to the bottom of the image makes it much easier to align.

Do this for each of the layers. You can see exactly how we do this in the video above.

Finally, select all of the layers in Photoshop (this is done by holding shift down and clicking on each individual layer), right-click, and export as PNG. You are now ready to use each of these image layers in your Elementor parallax effect.

Watch the YouTube video for a more detailed an visual explanation of how to split an image into individual layers for use in multi layer parallax effects.

Join Our Growing Mailing List Of Design Crazed Individuals

Expertly curated emails that will help you generate more income through good design.

You're in the club 💪.

Something went wrong.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
James LePage is the founder of Isotropic Design, a digital agency that builds WordPress websites. I read, write and design constantly!

Social Share

Crafting Stunning Digital Appearances & Assets Out Of New York.
Get In Touch
Syracuse, NY | Charlotte, NC | New York, NY
© 2020 Isotropic, LLC
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram