isotropic-2022
Share
Blog
Search
Menu

Creating Layers For A "Multi Layer Parallax" Effect

By James LePage
 on July 27, 2020
Last modified on January 6th, 2022

Creating Layers For A "Multi Layer Parallax" Effect

By James LePage
 on July 27, 2020
Last modified on January 6th, 2022

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.

Subscribe & Share
If you liked this content, subscribe for our monthly roundup of WordPress news, website inspiration, exclusive deals and interesting articles.
Unsubscribe at any time. We do not spam and will never sell or share your email.
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
Article By
James LePage
Contributors/Editors
notloggedin
James LePage is the founder of Isotropic, a WordPress education company and digital agency. He is also the founder of CodeWP.ai, a venture backed startup bringing AI to WordPress creators.
We're looking for new authors. Explore Isotropic Jobs.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram