Parallax Slider Design

Name: Parallax Slider Design
Rating: 4.4 (13 reviews)

Make Your Website Come to Life

Created byMartin Perhiniak

Last updated 5/2016

English

English [Auto],

What you'll learn

Create engaging web sliders
Combine photos into interesting compositions
Apply parallax effects using WordPress or Joomla
Learn how to make parallax sliders engaging

Course content

3 sections • 14 lectures • 1h 21m total length

Introduction0:57
Learn to design a parallax slider in Photoshop, guided step by step from concept to a final interactive, nearly three-dimensional slider that responds to the user's mouse.
What is Parallax?9:05
Discover the parallax effect, where foreground and background move at different speeds to create depth, with scroll or mouse interactions.

Planning the Design4:24
Plan a parallax design by sketching a Photoshop mockup to map a multi-layer composition. Include foreground, mid ground, background, and a movable balloon, exporting each layer for a WordPress slider.
Creating a Panoramic Photo14:52
Merge five images into a panorama in camera roll, then fine-tune exposure, highlights, vibrance, and greens with adjustment layers and retouching in Photoshop.
Finding Stock Photos5:11
Learn to enhance your compositions by finding and licensing stock photographs in Adobe Stock, then merge them into Photoshop using the Library panel, masking, and quick selection tools.
Combining Images12:38
Learn to extract images from their backgrounds using Photoshop selection techniques, mask them as smart objects, and assemble them into a final composition with clean edges.
Adding Text4:21
Add text using the type tool in Photoshop with the Babba font, adjust size and color, and group elements to prepare foreground, mid-ground, and background layers for parallax animation.
Splitting Up the Background10:04
Split the background into four layers—grass, village, mountains, and sky—using pen and quick selection tools, vector masks, and careful layer overlaps to enable parallax-like movement in a Photoshop workflow.
Testing the Animation in Photoshop1:52
Preview a parallax slider in Photoshop by using the timeline, setting keyframes for the balloon and sky, and testing motion with a two-second animation.
Exporting Images for Web3:44
Export elements from Photoshop after revealing all layers, keep the image width around 2000 pixels for web plugins, and export as individual PNGs with transparency for the parallax slider.

Creating Slider in WordPress2:36
Learn to create a WordPress parallax slider using Revolution Slider and other plugins, choose the slider type, enable parallax, adjust depth levels and speeds, and edit slides in the editor.
Importing the Images4:26
Import and layer images in the revolution slider, position backgrounds like sky, mountains, village, and hiker, and preview across desktop, laptop, tablet, and mobile to build a responsive parallax scene.
Adding Parallax Effect to Images6:08
Assign parallax levels to image layers, preview with mouse movement, and fine-tune speed and direction to create a 3D effect while avoiding gaps for an engaging multi-slide slider.
Conclusion0:46
Explore the techniques for building a parallax slider, using Photoshop or Joomla plugins, and apply the same principles to create all the necessary elements.

Requirements

Basic Photoshop skills
Basic understanding of WordPress or Joomla
Necessary to purchase slider plug-in with parallax feature for WordPress or Joomla site to finish course

Description

This course will teach you how to create contemporary and engaging web sliders using a combination of both Photoshop and WordPress.

This course is perfect for anyone interested in pursuing a career in Web Design, wants to build their own site, blog or even someone with a keen interested in the web. In recent years there has been a trend towards using the parallax effect online and if you want to know how you can create this effect this course is the perfect way to learn.

Sliders are probably one of the most important elements in web design so it is crucial to make them engaging and interactive. Almost every blog needs a good slider that crowns the site and welcomes users.

Parallax is a great technique, which uses the same principle as in animation where the background images move across the camera slower than the foreground images. This creates an illusion of depth in a 2D scene making the image more immersive.

A closer look at what you will learn:

Firstly get some insight into exactly what the term Parallax means and see some examples of it being used.
Then it’s time to jump in and start designing the Slider in Photoshop. Learn to plan out the design and create a Panoramic photograph.
As well as how to source stock photos , combine images, add text and more!
Once you have the design it’s time to move into working in WordPress, learn to create the slider your users will see live on the site. How to import images and finally how to add the Parallax Effect.

This course includes:

14 Videos
2 Hours learning content

Martin is an Adobe Certified Instructor who has years of experience teaching in both and online in classroom environments. The method he teaches in this course is one he has developed from creating parallax sliders in his own freelance design projects and through teaching Photoshop for over 10 years.

Who will find it useful:

Anyone who wants to pursue a career in Web Design.
Those who would like to learn more about sliders and creating this effect for their own projects.
People who are interested in the relationship between Photoshop and web builders.
Anyone who works in Wordpress.

Experience in both Photoshop and Wordpress will be very useful for this course, however you do not need any previous experience in creating a Parallax effect. The course will provide a step by step guide to the process.

Ready to get started so you can start creating your own contemporary slider designs?

Who this course is for:

Who wants to improve their WordPress or Joomla sites
Who wants to learn useful Photoshop techniques
Who wants to see a complete web design workflow from start to finish

Parallax Slider Design

What you'll learn

Explore related topics

Course content

Introduction2 lectures • 10min

Designing the Slider in Photoshop8 lectures • 57min

Making the Slider Work in WordPress4 lectures • 14min

Requirements

Description

Who this course is for: