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.
IsoGroup- Web Dev/Design, WordPress and More