Parallax Slider Design: Make Your Website Come to Life | Martin Perhiniak | Skillshare

Parallax Slider Design: Make Your Website Come to Life

Martin Perhiniak, Design Your Career

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
14 Lessons (1h 22m)
    • 1. Introduction

      1:13
    • 2. What is parallax?

      9:05
    • 3. Planning the design

      4:24
    • 4. Creating a panoramic photo

      14:52
    • 5. Finding stock photos

      5:11
    • 6. Combining images

      12:38
    • 7. Adding text

      4:21
    • 8. Splitting up the background image

      10:04
    • 9. Testing the animation in Photoshop

      1:52
    • 10. Exporting images for Web

      3:44
    • 11. Creating slider in Wordpress

      2:36
    • 12. Importing the images

      4:26
    • 13. Adding Parallax effect to images

      6:08
    • 14. Conclusion

      0:57

About This Class

Learn how to design engaging and interactive web sliders using Photoshop and WordPress! In this course Martin - Adobe Certified Instructor and freelance designer - will guide you through an easy-to-follow workflow showing you several best practices and explaining some theory too.

This course is for anyone who is into web design or planning to get into designing websites and blogs. You should join this course if you have some basic Photoshop knowledge and if you are planning to use WordPress, Joomla or other CMS for the website you are working on.

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 the users. Parallax is a great technique, which uses the same principal as in animation when the background images move by the camera slower than foreground images, creating an illusion of depth in a 2D scene and adding to the immersion.

Watch the first video in the course to see the final result or check it out here.

Transcripts

1. Introduction: Hello and welcome. My name is Martin for Heyneke. I'm an adobe certified expert and instructor, I most to a freelance designer and illustrator. In this course, I'm going to show you my workflow how I create a parallax slider using photo shop and birth press, these lighters can be very engaging. The final result, once you see it, looks almost three dimensional, thanks to the depth and the interaction to the users mouse movements. I'm going to work you through step by step from the first idea to the final working parallax slider. But apart from just simply watching the videos, I would like you to actually take part in this class. There is a cost project which I prepared for you, which you can do. And then you can upload your work on skill share so everyone can see it. And I will be also able to comment on it as the best way to really make sure you understand what you learn in this class. Always practice makes perfect. So, without any further delay, let's get started 2. What is parallax?: before we actually start creating our slider, I would like to make sure you understand what Parallax actually means and very comes from and why it became so popular in Web design were first. Mainly it was used in two D video games where the background images would move slower than the foreground images. And here's an example. I just did quickly in for the shop where we have the boat moving to the right and then the background also move slightly, but not as fast as the foreground. So that's a look at that. If I just play this little animation I did here, you can see that the boat is moving, but also the background is moving at the same time, but not with the same speed. So you already have a sense off depth in there. But what emphasizes that even more is that we have also aesthetic background with the mountain, which doesn't move at all Now, of course, depending on what you want to achieve, you can make the mountain move also slightly but much slower than the foreground. So if I want to again make sure it feels like it's further in the background it should move much slower than the elements in the foreground. Now, with parallax animations, you can have as many levels as you want, so you can have foreground mid ground and background. That's only three levels. What you can then speed that up even two more levels if you want. So in this case, for example, if you really look at it closely, we actually have four levels. We have the foreground, read the boat. Then we have the MIT ground with the town, and we have the background with the mountain. But there's also the sky with the cloud even further behind the mountain. And once again, it's not rule that you have to will follow very strictly that the further away something is , the slower it moves because I have the mountains of aesthetic level. But then the clouds behind it actually moves again and then, obviously very slowly but still moves faster than the mountains. So that means these rules are not very straight. You can use the parallax effect in many ways. Just try to remember that it's mainly to achieve death, So if we want to explain what ISS parallax animation or effect, we can say that background images move by the camera slower than the foreground images, creating an illusion off depth in a two dimensional scene and adding to the immersion. Of course. Parallax scrolling after being used in game design and also, of course, much earlier in animations, became increasingly popular in Web design in last couple of years. So let me switch to my browser and show you a couple of examples where we can see clearly the parallax scrolling being used. These pages often create the impression off action through the clever techniques that utilize the page, taps, animation and movement. So, for example, here on Urban Walks website, when I scroll down, you can see that the page completely changes its background and its content. Once again, when I scroll up, it's a switch, almost like a slide, a transition with me and slides in a presentation. So when I scroll down switches to the next one, and I can also see an indication on the right showing on which slide I'm on currently and notice when I move my master left and the right, the content slightly moves as well in the foreground. The content moves according to my mouth. So it's following my mouse by the background. We can see the Statue of Liberty is moving in the opposite direction. So the statue is moving to the right while I'm moving my mouse to the left. So it's always the opposite direction. Now that is also interesting. So not only the speed off the movement is different, but also the direction. And it again creates sense off depth so we can feel like these content here in front of us . The tax is much closer to us than whatever is in the background because of their opposite direction, and we are going to actually use this in our old example as well. So on these WordPress and Jumla plug ins that I'm going to show you, you can always use negative movement as well. So not only positive but negative movement. So whatever you use that on, well, move over is the opposite direction to the users. Maus. So we have a parallax effect, why we're moving out mouse around. But then, when we're scrolling, it also switches to the next content area in the design. Now, here's another interesting example. When I start moving my mouse, click and drag. I can move this map in the background. Is this parallax effect? Well, not really. I'm just simply dragging the map around. Okay? So don't get confused. Not every animation or interaction is using parallax, even though the website is heavily relying on parallax effects. But from this example, we can already see that there's two main areas where parallax effect can be used, either relying on the scroll on the mouse or the movement off the mouse or sometimes the combination of the two. Now let me show you another nice example here This is again a website where it mainly uses the scroll to create the parallax Effect. So once again we have similar things to slides and I scroll down. We start to see different images and they move in different speed. So that's again creates the sense off depth and also gives more control to the user. So instead of just simply clicking on buttons here, you almost control the speed of animation. Okay, so think of Parallax even though it's a website still, as a technique for creating animation and with your scroll, you are actually controlling the speed of the animation and then you can see the sense of death is achieved by the different speed off these images, but also because they are overlapping each other. So when I scroll down, you can see that this image is clearly in front of the other one. So when I zoom further down or screw a further down, we will reach the next slide. And once again here there's a really cool animation. So it turned around creating this three D animation. And then when we start scrolling down again, you see the background turns into a grayscale version so we can concentrate more on the images in the front. And then, once again, he's the same effect there. Now this page is only using the scroll off my mouth, so when I move my mouse around, it would only create any interaction. But once I move over an image, but that's not parallax again, so don't get confused. Parallax would be if these images would move slightly around whenever I move my mouse or around the page. Okay, but here they only use the scroll for creating the Parallax Effect. And there's one more example here where we actually have the effect all visible throughout the site. When I move my mouse around. So here it's not about scrolling. It's only about the movement off the mouse. So the whole content is actually heavily relying on new moving your mouse around to be able to reveal all these hidden content. So if I still like something here, I can go to that particular page. And then again, where you have obviously a very heavily animated site. But now here I switch to scrolling animation. So previously in the main page we had the movement off the mouse which controlled the Parallax Animation. Here we have the scroll, okay, and not the mouse, so one or the other, or sometimes combined. And let me show you my website as well, where I have a slider and when I move my mouse over it, you can see that the images are moving around. Just switch to another one. So the image is moving around and also the main title is moving around. So this is again using a simple parallax effect there, and this is similar to what we are going to do. So this is actually already advert press plugging the same one that we are going to use in this course. So hopefully this omits since and now you're more affair off how parallax is used in Web design and also where it comes from. So now in the next video, we can concentrate on coming up with a composition for the slider. 3. Planning the design: usually before I start looking for stock photographs, I always do a mock up in for the shop. So it's a simple sketch where I can see how everything is going to be laid out and I work, have the composition, I work out the elements, and I try to get the proportions right now. Of course, it's always difficult to find photographs, which will match exactly what I'm going to lay down in the sketch. But it doesn't have to be exactly the same thing. Even if it's just close enough to it, then it's fine. The reason for doing sketches is that this actually helps me to visualize what I want to create, and I can also plan the levels in the design. Remember in the previous video, I explained how Parallax works and that you need different levels like foreground mid ground background, to be able to show the depth and ah, create the whole animation the way it will make it engaging and interesting to look at. So that's what I'm planning here. You can see already we have hikers in the foreground with the tent that we have, Ah, mid ground, which is like the welly with a town or village and then we have the background with the mountains. Now I will also have Ah, balloon in the air, a hot air balloon, just to add an additional movement in the sky. And there will be the text in the middle. The your adventure starts here, and that will be like a pointer pointing at one part off the mountain. So that's going to be the whole composition as the idea which which I would like to put together. And this is what I'm going to look for images to be able to convey this whole composition. I actually have a photograph which I took recently in Austria when I was hiking there. So the background or actually, the the mountains and, ah, the town I already have. And I'm just going to have to look for hikers, attend the hot air balloon, and probably that's all I will need. Additionally to that one panoramic image which I'm going to create in the next video but a port from putting these elements up. I also like to make some captions or at some captions, and ah, make sure that I know what type of elements I'm going to work with, so these are going to be actually needed to be exported individually. So once I have my final composition, this is the amount of elements I'm going to need on separate layers to then be able to move them individually in the final slider that I'm going to create in WordPress. So now that I have all the elements with all the captions, I also use my selection tools. The quick selection tool in this case and I create separately years to create colors or at colors to separate the, um, the details that are going to move in different animation levels. So once again, this goes back to the parallax effect. When you need to define your levels of animation and you can see I'm defining them into four different levels. So we have the foreground, the village, the mountains and the sky. And then I'm going to also separate the balloon because that will move into independently from all of these as well. So there's actually five different levels, and that's why I'm using five different colors as well for that. So this is usually ah, good way off planning what you are doing, and it only took me around 10 minutes. It's obviously a faster version than the way I was working on it, but only around 10 minutes to do something like that. You can do this on paper as well. Of course, it doesn't have to be in for the shop. I just prefer to do their it. It's really fast, especially if you have a very came tablet. You can work this up very quickly and, ah, using this composition now. In the next video, I'm going to look for stock photographs for which again you can use many different sites. But I'm going to show you how to use the Adobe stock feature released with the Creative Cloud 2015 versions. 4. Creating a panoramic photo: in this video, we are going to merge multiple images together into a panorama. I took these photographs in Austria on a trip, and I would like to merge them together as one panoramic image, usually if you work on the sliders. It's great to work with panoramic images because they allow that wide horizontal span that you need for the whole composition. And I prefer to take these pictures in a portrait format because then once they emerge together as a vibe horizontal image, they will still have enough height. Ah, and we can always crop from that if we need to. But that allows us a little bit more space to create the composition for so I'm going to select all of these images. There's five portrait format images, and I'm going to right click and choose open in camera rule. Now, since the CC 2015 version, we actually can emerge camera rue images directly in the adobe camera raw engine. You just have to select all of them using Commander Control, a select all in the filmstrip and then click here and choose merge to Panorama. So what that means is instead off merging these images in Fort the shop. We can actually merge them directly here in Cameroon, and that allows us to do at its later on. So as you can see, it looks quite good already, and it even blends these images together. There's only a slight division here in the grass, which we can always sort out later, but I really like the way it looks. So I'm just going to click on Merge. Notice that we have an auto crop option, which automatically crops out the unnecessary empty gaps on the edges. And once I click on merge, it's going to ask me where I want to save this file on. Let's just call this panorama and I'm going to save it into the working finds folder. So once that's created, you can see it's actually another camera rule file. It's a different extension than the original Nick, an extension, the E F This Became and the N G, which is the adobe digital negative fire format. It's adobes own camera Rule five format. Now that doesn't mean that we lost all the features that we would be able to do on the individual camera roll files. We can actually do exactly the same things, even on this panoramic image. So now if I just click on done, you can see that this image is actually created, and if I double click on it, it automatically opens up in adobe camera rule as well. So there you have the image, the merged camp camera rule file, and before I take this into photo shop, I'm going to make somebody. It's year. First of all, I like to reduce the highlights because it's a little bit overexposed in the brightest details. I'm also going to reduce the exposure. As I felt like the whole overall image was a bit overexposed, By the way. You can always see that in the history. Graham. If I go back to the original, you can see most of the tonal values were on the right side, off the hissed a gram. Now I prefer to drag them. You can also drag them here on the hissed. A gram dragged them a little bit more in the middle, and then also maybe these highlights can come down a bit. And ah, apart from that, I'm going to also just drag the exposure down even further apart. from this, I would like to also at the bit of additional clarity, which increases the sharpness and just add a bit more contrast of the image. There is also another really cool feature, the vibrance, which can increase the intensity off colors. And also there's a new feature under the effects called the Haze, which I also like. It can also increase the intensity off colors and vibrance in the image. So just a slight additional feature there in the effects. Then we can go back to the basic panel on. Maybe I will add a little bit more. Vibrance is well, just to really saturate this image. And then, finally, I'm going to increase shadows as well. Just so. The darker details will also show better now if we want to see before and after we can press P on the keyboard as preview. So against which back and forth between the two state and it already looks a much better. But there's also a couple of additional things I want to sort out. When I zoom closer to the sky, you can see I have actually quite a lot off dust in the sensor, and that shows up here which can very easily be removed with the sport removal to all I need to do with this, it's simply click on these details and I can then remove them. So I'm just going to click on few off them and I'm going, Teoh Ah, finish this later on. Just wanted to show you that this is also available here. Video camera, row. But camera is not really for retouching images. So you wouldn't start creating any more complex retouching here, for example, to sort out this detail in the grass when I can see slightly where the two parts off the panorama was merged together. So these things I would rather do and for the shop now the raid The best way to open this finalized camera roll panorama into photo shop is to use simply the open image. Now, it's good to also know that if you hold down shift the open image button actually switches to open object so you can open this up as a smart object if you want to, or you can open it up as a normal image layer if you don't hold down. The shift was the difference between the two. Well, if you open it is a normal image. It won't have any connection to this original Camero editing. If you open it is a smart object. It will keep the connection to the camera, raw file or editing capabilities in case you prefer to go back and forth and make some changes at a later stage in your work. Now, in our case, we won't need that. So I'm just going to simply click on open image. So once I do that, we will get the same image here reading photo shop, and here I can decide which part I need from this image, and I can also do additional retouching on it. So one of the things I would improve is this area here. I can see that distinction in the grass, so especially around this part here. So I'm going to create a new layer just to retouch this and I'm going to use the Kohnstamm toe. So clone stamp tool is the one I'm going to use. Make sure you use sample all the years if you want to use a separately or for retouching, and then you can use control old click and drag right and laugh to increase the size of your brush controlled right click and drag. If you are using PC, then all click on the area. Very want to sample from Let's say I want to sample from somewhere here and then I can draw over the detail which I would like to replace. You can also use the healing brush if you want. With that, you can sample again and drove over any detail in the image and it will try to know only copy. But blend those details together as well. I'm going to feel up some of these drier parts off the grass as well, which I feel like I can be a little bit better. And then I just do over these details a little bit more and maybe around here as well now additional things I will do is also make this part a bit more green. At the moment. It looks very dry, so I wanted to look very nice and neutral green in the foreground. So for that I'm going to create an adjustment layer. But before doing that, I'm going to also use the quick selection tool, and with that tool I am going to create a selection off this part here. Now, you might find it difficult to select exactly the area you wanted, so you can always hold that old and removed reports from the selection. So I'm going to make sure that these buildings are not included in the selection on Lee the grass so you can go back and forth by holding down old or letting would go while you are drawing with the quick selection tool. And it is a brush so it can always be increased and decreased with the same shortcut I told you before, control old click and drag or control old right click and drag for PC users. So now that I have that selection, I can go to the adjustments panel and I'm going to use the hue saturation or D vibrance adjustment layer. Maybe in this case, I'm going to use vibrance. That might be a little bit easier to use, and I'm going to increase the vibrance now. Notice that, unfortunately, because that part of the grass is more yellow, this might not be enough. So increasing the intensity of the colors there is not enough. We actually also need to re color them, I might add a little bit extra saturation as well. They're just to really pump up these colors. So we need to add another adjustment layer here, and that is the hue saturation. I'm just going to click on that and notice that the selection that we created is saved as a mosque for the previous adjustment layer the vibrance adjustment, which means it's only going to affect those areas. If I both click on that mosque icon, it can show it on my screen as well. So whatever is white is where the effect or the adjustment is used. Whatever is black, where it's not in use, so old clicking on the mosque. I can switch back and forth between that view. But what I want to achieve is to make sure that the same mosque is used for my hue saturation adjustment layer. Now there's many ways off doing that, probably Fossas. An easiest way is to copy the mosque from vibrance to the hue saturation layer. So if I old click and drag the mosque onto the other earlier, I can say yes. I want to replace that mosque. Now they have the same mosque. Well, I prefer to do, though, is to put these two adjustment layers in a group to select both of them. Games commander shift, click on the layers and then command G control G on PC to put them or turn them into a group layer group. And then, instead of having twice the same mosque, simply drag one off these mosques on the to the layer group itself. And then you can even delete the other earlier must by right clicking on it and choose delete Layer Mosque. That way, we have one joined mosque for the two adjustment Lee years, and that's much easier rate work. So if I need to change the mosque, it will affect both off those adjustments. The years already. I'm going to double click on you situation, and I would like to change the hue slightly. Now we want to turn this into green, as we said before, so I'm just going to try to find a matching Hugh, which will look similar to the colors on the left side. I think it looks quite good, but we can also decide whether we want to use colorize or not. Sometimes color eyes can create a more, um, genuine effect if you really nailed the color that you need, So this can create a very neutral green color, but I might not look as natural as the other option when you have colorized off. I think this actually works quite well, So the yellow now looks more green. The only problem is again the transition, which is not subtle enough. So I'm just going to Once I finished editing these adjustment layer is going to go back to my mosque. So So, like the mosque on the group. Then switch to the brush toe, increased the brush size, and you can also use the same shortcut, which we use for changing the size but dragging up and down to change the harness off the brush. So I created a very soft edged brush, and with that I'm going to zoom closer and noticed that I have black and white as my two colors. If I start doing with black, I'm hiding the effects or you can see I can hide it or read Ah, switching to white by pressing X on the keyboard. Notice I can switch between the two colors. If I do with White, I can reveal those colors again. So now I'm going to instead of having just a selection for the border, I actually went back and just brushed over the details where I felt like this transition will look better. So maybe this one here in the bottom is a little bit too green now. So I removed that one there. This party is slightly steel drier than the other side on the laughed. But I am quite happy with that because it already looks better than before. So if I turn off these layers, we can see that was before. And this is after so once again, before and after. So of course, this can be taken even further if you want to. But most of these details here won't be visible in the final composition because I'm going to crop this image so cropping in photo shop can be done in two different ways. Off course. Using the crop tool is probably the most efficient way of doing it. But instead of deleting crop pixels, I prefer not to delete them so you can always choose whether to delete or not to delete in this case, I'm going to turn off the delete option because I might want to show them again later on. So for now, I'm just going to drag this corner up a bit slightly, something like that. So that's the actual area I would like to focus on. I think that balances out the whole composition a bit better. So the mountain has almost like a symmetrical two parts, the right and the left side. And then we also have a very nice detail here on the grass. So I'm going to press enter, which seemingly crops the image. But to be honest, whenever I go back to the crop tool, I will always see the additional parts that the cropped out. Or in this case, it is better to say we are hiding those parts. So now that we have these image ready, we can continue working with this. And in the next video, we are going to look for the stock photographs. We can populate this imagery, like the hotel balloon and the hikers and the tent 5. Finding stock photos: even if you have an amazing picture to start with that, you take yourself. Sometimes you need to spice it up and add a couple of additional elements. Now, in these cases, best to do is to find some stock photographs and then merge them into your composition. So I'm going to use Adobe Stock, which is a new feature. It was released together. Read the CC 2015 update to the Creative Cloud Service, and it can be found in the library's panel, which comes in or the other we applications. And at the bottom of that, you can find the stock Icahn STS sense for Adobe stock. Once you click on that, that will actually open up your browser. And in the browser you can search for any images. So let's just say, hiker, which is time that in, and I'm looking for only photographs. I'm going to take of illustrations and directors. So let's see Hiker and there's already a really nice image here. I can see that will work really well with this composition. If you remember my original sketch, I had to person standing in the front, so I'm going to take her and I would like to use her in my composition. I'm going to click on that image, and here I can find different options. I can choose safe preview to my library, or I can also choose by license and safe to my library. So if I'm not sure yet whether I want to use this image or not, I can just use a preview of it. Notice that the image resolution is really high. So it's definitely a very good quality image, and it's also going to be easy to separate from its background because it's isolated. It's already in front of a white neutral background. So if I click on safe preview to my library because I'm logged into Creative Cloud, this is going to actually save it into my library. So all I need to do is to go back to libraries and I will see it here at the bottom. You can see there's the image already, so if I want to move this into my composition, all I need to do is simply drag and drop it there, press enter or return to accept that as a new layer. I notice we have a voter mark on this image. Of course, that is because it is just a preview. But we can use this to compose it into our image so I can make it smaller or bigger, using free transform tool, which is command t or control T I can find a place for it, and I can even do masking on it. So if I want, I can get rid of divide background and see whether this really works well with my composition. I'm just going to show you that very quickly, using the quick selection tool. I will make this too little bit smaller and just draw around her something like that. Maybe here in between the legs. And then I'm going to click on the mosque icon, which is this icon here at the bottom off the layers panel. And I did the opposite. So I'm just going to invert the mosque, double click on the mosque and choose invert from the properties panel. Ah, I lost actually her arms in the process. So I'm going to use the brush tool and quickly brush over that detail. This is exactly the same thing we did in a previous video. When you use white. You are showing details when you draw it black. This rich to black with X on the keyboard. I can remove those details now, of course, here, because this is just the moke up. I'm not going to spend too much time trying. Teoh might make this perfect. I just want to really quickly see whether this one works in this composition or not. Of course, colors and additional things like that can always be adjusted later. But the best thing about this is that if I decide to work with the stock photograph, I don't even have to leave for the shop. All I need to do is to click on the library's panel, right click on the image there and choose license image. In case you don't have any credits on your creative cloud account to buy stop photographs, you can always purchase packages and different deals. It always changes, so it's better to check it out online. But once you license it, it actually automatically replaces the voter marked image with the high resolution or regional image. So that way, if you already have it in your composition, it will update, and then you can refine your mosque if you want. The best thing about using Adobe stock is that it's completely integrated into the creative cloud applications. As you can see, you preview something and then you can very easily license it without leaving photo shop. Of course, there are lots of other useful stock photography Web sites like 40 gene, for example, while you can also buy very cheap but high quality images, and you can incorporate them in your compositions in the next video, I'm going to show you how I Moscow precisely the stock photographs I'm going to use in this composition, and you will see how all the elements will come together. 6. Combining images: in this video, I'm going to show you how to extract images from their background and incorporate them in the final composition. I'm going to show you these three images starting from left to right, starting with the easiest one and then finish with the most complicated selection. So we are going to actually use selection techniques in for the shop and for each image, I'm going to use a little bit different technique starting with this 1st 1 If I double click on it here in bridge, opens it up in for the shop, I can assure you that this is a stock photograph, but actually this one came with a path. So if I go to the paths panel, I can see that there is a path created already for this, which means I can very quickly make a selection based on that path. All I need to do is to control or command click on the icon or the thumbnail off this path , and that will load the selection. And once I have that selection, I can turn it into a mosque by clicking on the mosque I can here at the bottom off the layers panel as you can see that immediately removed, divide, background. And now, if I want, I can go to window. Arrange tile old vertically to see the two images side by side, and they're using the move to like and click and drag the tent over onto the other image. I can even close this original one because I'm already done with that. Now, whether you have an image with a curve or not, this is something. Of course, you can create yourself as well. But some stock photographs actually come already with these parts that you can use for extracting the actual object on the image. So this can save a lot of time, of course, but let's see what happens if you don't have a past like that. I'm going back to bridge and I double click on this hot air balloon image, and I check the past panel on There's nothing there, so I have to do this manually. Here now, you can always use different techniques, different tools for making selections, and one of the most professional ways off making selections of object is to use the pen tool with the pencil. You can very precisely go around and object using the path mood with the pencil. And then you can define even curves off course of a Derry's curve. You can click and drag and define an area like that and then continue doing the same thing , placing down anchor points. You can continue. Ah, the selection. So this obviously is a very precise way off creating selections. But instead of using the pencil here are just going to do it quickly, using the quick selection tool. It's a much more efficient way of foster way of making a selection. You just simply night to click and drag over the object because it has avoid background. It actually very quickly finds the edge is automatically The only problematic area will be this party at the bottom, where it might select details that I don't necessarily need. Now, I would spend probably more time in creating a much more precise selection if I want to. But in this case, this is such a small detail in the four hole final composition. I'm not actually worried about the small details like this, um, rope here on the left side. So once I click on the mosque, this is going to be turned into a selection, and you can see that probably this is going to be the size in the composition. So I'm not actually worried about all those small little details there, but just to see how it's going to look like. Once again, I go to window, arrange tile, all using the move to where I can drag and drop it here. And I can close this original file. I don't need to save it because this image actually came already in with its mosque. Now that mosque is saved there, so I can always go back and make some adjustments. If I zoom closer, you can see some vital details showing up here. If I still like the mosque and I use again, maybe instead of quick selection. So I'm going to use the Magic one to simply click on these vital details. I want that one holding the shift. I can click on some of these details to remove them. Once I have selected them having the most selected, I can go to edit, feel and choose black black heights. Why I chose so if I selected those and feel them with Black that means I, uh, made them disappear or I hide them. I can also use the brush tool as ah, in previous videos, I've did Ah, by simply drawing over details I can hide them and then if I feel like I want to show against something Aiken drover it with white if I want, I can also shift, like on the most temporarily to see before and after. And if I feel like there's something missing, I can always drove over it with white to again reveal it. As I said, I'm not worried about the missing lines there because it will be really small, actually much smaller than this. So in the final composition, this balloon will be probably like third off the size off this. But before I use free transform, there's an additional feature which I would recommend for everyone to use. Once you did the mosque ing, you can right click on the layer and choose convert to smart object that turns this layer in the special layer called smart object, which means whenever I resize this, it doesn't actually lose the image quality so the original pixel dimensions are saved. So just to show you this. I'm going to duplicate this old click and drag with the move to you can very quickly duplicate. I'm going to turn this into a normal layer by right clicking on it and choose Rasta rise layer. I'm going to resize these two now, make them much smaller, something like that, and then make them bigger again. So I decided I want them bigger. You can see when I press enter that the original one I'm in the normal layer is obviously much worse. The quality is gone. It's completely useless now in this size. Why the one on the left? A smart object looks perfect because it managed to save the regional quality off the image . So I'm going to work with that layer, and I call it Belene as well. So that's done. And now I can just use free transform, which is control command. T Make it smaller when you use free transform, hold down shift while dragging one off the corner points to keep it in proportions, and you can see from this distance you can't actually see those missing details, so there's no point of spending unnecessarily too much time on making the selection too precise now that the tent also, it would be a good idea to turn it into a smart object. So right click convert to Smart Object. I call it Tent, and I can also move that into position. I will probably have it roughly here. The balloon will be if somewhere on the right side and now if I switch back to bridge, I can open up this image with the hiker. Let's open up that one in once again on this one. We can decide which tool we want to use. We can use the magic want, for example, Click on the outside and then shift. Click on the details like the reflection at the bottom. To keep adding those parts to the selection shift, click a couple of times and then shift click here between the legs as well. Andi, I think that's it. That's probably all the details we need. We can also maybe shift click in here, notice that I'm using 10 as the tolerance, and that's useful because it doesn't select details like the white hat or helmet. If you have, the tolerance to high is going to actually include anything brighter similar to the color that you click on so the helmet would be included in this election and even a bit off the ham. It is actually included in the selection, which we can fix later on. Phanom Just going to keep on shift clicking on these areas. Even these small details I can click on quickly and easily filtering them out these bits here as well. I'm paying a little bit more attention here because this will be obviously a bigger part off the image, although again not a huge version off it, but still bigger than the Belene. So it's a bit more in the front, off the whole composition. So that's why I'm being a little bit more attention on it now. In these parts, we can always use the quick selection tool as well, so we can switch quick selection tool and just drove over these bits instead of shift clicking so many times. It might be faster that way, so I could feel throughout those bits there much faster I can, switching them back to the quick selection. I can switch back again to magic one shift Click on this bit here, maybe shift click on that as well there, and I think this is enough so we can create our mosque from this selection. So let's go to the layers panel and click on the mosque icon and then the invert the mosque . You can also use a shortcut, which is Commander Control I. While the mosque was selected, it looks fine. So now again, we can go to window, arrange tile and use the move tool drag and drop it into the other composition. Now you might see sometimes these lines showing up on the edges. So what I normally do is I make a quick selection with the rectangular marquee tool so closely around the person or whatever was your selection. Then go to the select menu and choose inverse and then make sure you have the mosque selected and filleting completely with black. So go to edit, fill with black. Then all of those little lines will disappear. So now, if I zoom further back, right click on the layer before is sizing it and choose convert a smart object and we can call this one hiker and they're using free transform control or command T and then shift. Drag the image down until we have the size that mean need. So if I feel later on that, I need to improve the mosque. I can always go back and edit the mosque by double clicking on the layer, the thumbnail off the layer. And there I can access the image and its mosque as well. So in these cases, sometimes where I do is to add another layer below the original image and go to edit, feel and fill it in with, for example, 50% gray. That way I can very clearly see the edge detail, and then I can actually double click on the mosque and go to a mosque edge in the properties panel. And I can use things like Smart Radius increased the radius slightly, and it will see it's going to improve the edges so we can see before and after. So we can always improve the edges. But I'm just going to keep it as it is because, as I said, it will be very small. And if you use a background layer video in the smart object, don't forget to turn it off before you go back to your original composition. If you want to make any changes and you want to make sure they are saved, then go to file to save. And then you can close this document, which was a smart object, and you will go back and you will see your changes updating in the actual composition. So this was just a couple of examples of how to extract images that you would like to combine together into your final composition. Make sure you practice mosque ing and working with smart objects, and also make sure that every element you use and combine will be kept as a separately here because you never know when you want to move things around and ah, resize or reposition on golf course. Also, these elements will be saved separately for the vab. So once we take them to WordPress, all of these images or all of the layers will be separate images that we will export individually. 7. Adding text: Now that we have all the elements in the composition, it's time to add some text. Now I prefer to add the tax here in Fort the shop because I used tax more like graphic elements. So what I'm going to do is to use the type tool on. I use the phone called Baba's. It's very cool fun that you can find it for free online. You can download it from many different sources. I just simply click on the sky, and I was start typing your adventure. It's on all caps font. So you have only capital. That is, I used the free transform tool to make the text a little bit bigger. So your adventure. Then I use the move tool, old click and drag to duplicate this layer, and I would change. This one here starts starts here. So your adventure starts here. Best text you remember in the sketch. That's again what we had. And I'm going to probably make the starts here. Or maybe the your adventure can be slightly bigger, something like that, and I'm going to use frames using the rectangle. It'll I will just draw a shape, and I will use actually black feel so black feel knows joke is needed. I will do a frame around this text here like that. And of course, I'm going to move this rectangle behind the taxed layer below the tax clear in this case that I might make it slightly bigger. Just so it's not so close to the text. Actually, let me just extend its lightly around there as well. Okay, that looks fine. And I duplicate this frame and I'm going to make it smaller. So it fits through the starts. Here, text something like that. Let me just move these two layers further down. I can also keep these two layers together. So the rectangle copy and the text which goes together with it. But to have a little bit of contrast, I'm going to actually change the color of this rectangle. I double click on it. Here in the thumbnail, you can always double click over shape, layer and change the color. I will switch the white and I select my text layer and having the black as my foreground color. I will use a shortcut to quickly change the text to black. That's old backspace or option backspace. and that would change the color off that taxslayer. So now it looks much better. The only thing I will need also is another shape. So I switched to the polygon tool now, and I'm going to use white as the field color. And I'm going to click and drag, you see, by default, it starts to create a shape like this. But I wanted to use a triangle. So instead of five sides, I type here on the top three sides and then I can create a triangle like a whole downshift as well. That way I can keep it exactly pointing down like that and then I can move it closer and create a little like a direction arrow here somewhere in the middle off this shape. That's what I wanted. Maybe I would do it a little bit longer, so it would be easier to use it to point at that particular point on the mountains. So this is actually going to move together with the mountains. So in the animation, I'm going to keep these three layers as a one group. So I selected them using control command G group them together. I call it starts here or we can call it Title two and then this one again. These two layers is going to be another group, and I just type your adventure. So as you can see now, I can move them very easily. I can select the other group and move that also easily around. So now that I have everything ready, both the text and the images in the next video I'm going to split up the background for those levels that we wanted to create. So we will need to have the foreground, mid ground background and the sky all separated to be able to animate them independently. 8. Splitting up the background image: in this video, we're going to split up the different levels off the background. So to be able to see better, I'm going to put everything else in another group and I'm going to hide that group. That way we can work very easy, livid the background. Now I want to divide this into four different parts foreground, mid ground mountains and then the sky. So, first of all, to select the foreground, we can try to use the quick selection tool, and I'm just going to draw over the grass here. But as you will see that it won't create a perfect selection because it's going to include some details from the top parts as well. You know, I would be able to hold on old and try to improve that selection, but I think for this we can actually use the pen. Tal and I use path more with the pen tool, and I'm going to start year, and I just simply click somewhere around there and then continue that shape that we have with the grass and it doesn't have to be very accurate. I'm just going to try to follow the edge as close as possible. It's just simple clicks. There's not even Ah, curse year. We can just simply click on each of these points. Yep, full it like that. And then again, keep on following it down to the bottom until we reach the edge. And then once we reach the edge, I'm going to continue drawing the shape and then close it up. You see, I went outside to make sure everything is selected on the edges, and once that is created, we can turn this into a vector mosque. Now, before I do that, I'm going to duplicate this layer, so just simply go to duplicate layer and then turned that layer off. For now, go back to the original ear. And while having that passed selected, I'm going to hold on command or control and click on the mosque icon to turn this into a vector mosque. Now, sometimes depending what's was selected on the options bar, it might actually disappear instead off showing that particular part of the image. So all you need to do is to go to the top and make sure it's not set to subtract. But it's at the combine shapes. That way that will be the only detail you will see from that layer because it's now most out and I'm going to call it grass. That's the layer where I wanted to create. Now I turn the other layer back on and you can see now we have the most at version, which was only the grass and another version which can show everything this. I'm going to views for the village, and for this I'm going to create a selection. So first of all, I'm going to use the quick selection tool and make a quick selection off these details year . And I'm not worried about the grass details. If if it ever goes over that, that's not a big problem, because I can always deal with that later is going to select it all over this part here, make sure everything is included by the way the marching ants view of a selection sometimes might not be the best way of viewing a selection, and there is a useful shortcuts for previewing your selection and it a bit differently. Keep rescue. There's the Quick Mosque, so there you can see your selection of a bit differently and pressing que again. You can switch back to continuing, changing your selection. So I'm just going to make sure that most of these details are included. And even this mountain here, the one closer to us. I'm going to including this selection. Also this bit here we need, but not the one at the bottom. I'm just going to try to make a selection if it doesn't work, and I can always go back and make changes to it. Here on the top, I Wonder Mountain to be included, but not too much off the background. Something like this at shape will work quite nicely. So once again, if I press Q, we can see what's included in the selection. That looks fine. So now that I have this selected, I can once again duplicate the layer before I do anything else and then the one at the bottom. I'm going to select and click on the mosque icon like that, and I'm going to maybe increase the selection slightly. So using the mosque and the brush tool switching to white, I'm going to reveal a little bit extra here at the bottom where I feel like I missed a couple of details just so There's no overlapping issues. There looks fine and a little bit more here. Now. This is where the grass and that layer overlap slightly. But that's not a problem that's actually good to have a slight overlap between the two. Okay, so that looks fine to me, the selection looks good. Now, let's like the other layer, and I'm going to call this mountains in the same technique. I'm going to use the quick selection tool and make a selection off the mountains. In this case, once again, I'm not going to spend too much time here because I think you get the idea how to do this. I'm going to make sure that party selected there as well. And then I'm going to save this. I just remove a bit from here. We don't need to include all that because that's already in the village. Lier and element. Something like that. So this should be now saved as the mountains. But I need one more duplicate off this layer before I mosque it. One more duplicate and ah, this mountains. I can click on the mosque icon and now it's there again. I can use the brush tool and reveal the missing details that I removed and something like that will work so that we can see mountains, the village and then the grass. So the three different levels we can build up from grass village mountains and then the sky can be again a separately year for that. Once again, I used a quick selection tool and, ah, just simply go over the sky and include that as a separate layer. So that was probably the easiest selection. I'm just going to turn this into a mosque, and then I called this one sky. So if we build that from the top now as Skye Lier and the Mountains Village and then the grass now to be able to move these layers around, it's also useful to make them slightly overlap each other. So for that I actually go back to my crop tool and increase the size off the campus slightly. Something like that. And then I'm going to select each of these layers. So there's the grass layer and using the free transform tool, I slightly make it bigger and the move it further up something like that. So there's a little bit of overlap. The same thing goes with the village lier. I'm going to make it slightly bigger and over led them to each other onto each other. But it's also important at this stage that the order off the layers should be the opposite . So I should have grass on top, then village below it, then mountains behind that and then sky at the bottom, so that should be the order. Now I'm going to make the mountains slightly bigger as well. Something like that, and because it's going to be behind Ah, the village, it will look fine. And then I can make the sky bigger as well. Something like that. Now the sky is probably the most important one where we need to make sure that we feel up these details. And the best way to do that is to use ah combination off clone stamp tool healing brushes or even the free transform tool. It might be better to do this on a separately or so creating you layer and I used to clone stamp tool, for example, old click and then start feeling up. So as you can see, it's not that complicated to increase the area that you want to include in your selection. You might just need to use the healing brush as well, which can blend details together. So when you feel like there's some details are too dark or too bright. You can always go over a couple of times with the healing brush and that blends things together very nicely. So as you can see with healing brush and clone stamp tool, you can very quickly extend Ah, the earlier the sky lier, and that can help us to be able to move this together so the sky lier and the retouch rear can move easily behind the mountains. So now that I broke up the layers, I can turn my other images back, and we can just test this very easily and quickly. If I select the people in the foreground and I said, like the grass, I can start moving it around, and you should already feel like it's a little bit three D, because the foreground can move separately and the same thing that I can move the Belene around. And in the next video, I actually show you a technique how you can preview your whole composition in an even cooler. They using the timeline panel and creating a little animation directly within for the show 9. Testing the animation in Photoshop: this step is not necessary at all for the whole workflow, but it can be a useful way to preview how your composition will work once it's in a slider in a very press problem. So I will use the timeline panel, go to window timeline and click on Create Video Timeline. That's that button, which will give you all the layers, and you can animate them individually. So why would like to do here is to move the balloon around so like the balloon layer, open it up and then click on the little stopwatch for the transform property to look that key, frame the position of it at the moment. Then maybe, let's say, two seconds later. I wanted to move, using the move to alarm going, going to move it slightly over to the title, and then when I moved back and forth, you can see there's a slight movement already there that looks fine. If I go to the sky, which I would like to also add it just go further down and there's that layer I called Sky extended again. In the beginning, I'm going to look the position off that, and then I'm going to move to the 2nd 2nd in the timeline, and I'm going to move the clouds slightly to the right. Now, if I play this so I go to the beginning, I can press space, and that will create the animation. And I can maybe crop the whole animation down to two seconds so I can play it again and again, and you can see how it works already. So although we are not moving anything else, it already creates that similar affect that what we are going to get at the end once everything is in the plug in. So once again there's that tiny little animation there. 10. Exporting images for Web: So now that we have everything ready hearing for the shop, it's time to export all of these elements. And then we will be able to import them into the vert press plugging. So what I recommend to do at this stage is the first step to go to image and choose reveal all to make sure everything is visible. So nothing is hidden. So sometimes when you extend some layers or resize them, you might have some details missing. As you can see, I, uh, revealed everything. So we have everything visible from each of these layers. And then I am going to also make sure that the image size is not too big. So when I go to image image size, I can see that the current size off this is 2000 pixels by 700 and 30 and that's a good size with originally, this was much bigger, so I already reduced it. The reason why it I wouldn't use anything higher than that because most screen sizes wouldn't be vital than 2000 pixels or even if they are vita than that. Most of these plug ins are actually smart, and they will be able to resize the content in a way that you won't actually notice anything. So if you want to optimize your graphics for every screen, I would recommend to keep it around 2000. The width and the height, obviously is depends on whether you want a bit more panoramic slide there or what have you . So resolution here doesn't really matter, because we're not going to print this out. I'm just going to escape out of this or cancel out of that and select all those layers that I would like to export. So I selected all of these layers here, the ones that be prepared. And then there is a very useful command. Since Sisi 2015 in for the show. We have the new export options, and we have this feature called Export as so from the drop down in the layers panel accused Export as, and that will open up. And then each of these selected layers I can export as individual images and the default is going to be PNG re transparency, which is perfect. That's exactly what we need. And this is when it's useful to name your layers and layers groups because all of these images are going to be named according lips, or the fines will be named based on the names of your layers and layer groups. So you can still change the size if you want here and, of course, changed the format as well. So you have the typical vab file formats here, but I'm just going to keep it on PNG. And once I click on export, it's actually going to generate all these images. Let me assure you, Enbridge, under the Elements folder I have all off them already saved out. Now, if you have an older version so you are not using Creative Cloud than what I suggest for you to do is to go to the file menu and under scripts, you will find an option called Export Lears two files that is not available anymore in CC 2015. But in earlier versions you will be able to find that option here, and with that, you can actually do something very similar to this new feature so you can choose PNG 24 as the type, and then you can set up additional features as well. So I'm just showing you this menu which is not available anymore in this current version, but for anyone with older versions, you can use the export layers to fires Feature. 11. Creating slider in Wordpress: as I mentioned in the introduction with you, I'm going to use the revolution slider plugging in WordPress. But there are many other plug ins for WordPress or also for Jundallah that you can use and also incorporate the parallax effect. But I'm going to show you once you install a plugging, you will find that on your dashboard. So I'm on my website Osama designers WordPress Dashboard and here on the left side I can find Revolution slider. Once I click on that, I will be able to get to the options there. I have several sliders on my site, and I actually have the adventure starts here, which I created already as a test. But I'm going to click on new slider, so that's all I need to do. Click on you slider and then I can decide what type of cider I want. So, most importantly, probably I can decide what preset I want for the slider and, ah, whether I wanted to be standard or a hero seen or carousel. So there's lots of options here, and the sliders layout can also be different, like full with or auto or full screen. For this course. I don't want to go into details because this is something you can decide what suits your site the most. But what's most important is that we have a parallax option here under the slider settings , and that's where we can actually decide whether we want to use parallax effect or not. So that's what you need to definitely turn on, and then we will come back to this later. But essentially, this is where you can decide the speed and direction off each of the levels that we were used to separate the death in our slider. So now that we have the parallax option on, we should give our slider and name. I'm just going to call this ah course example and then maybe course example as, ah, alias like that. And then I Now I can save these settings, so I'm going to save it, and then we can now see that we have our slider there. I can click on it, and then we can create our first line, which is actually automatically created. You can have as many slide as you want in a slider, but we have the 1st 1 ready, and this is the editor, where we can start importing the images, and that's what I'm going to show you in the next video. 12. Importing the images: if use the revolution slider to import images Oh, you need to do is to choose add new layer image, and then it's probably wise to start with whatever is going to be in the background because you will build up everything. On top of that, you can see I already have the images here, So I'm going to select the sky inside that, and I'm going to position it roughly in the centre somewhere around there. Okay, Then I go again to the add new layer image, and then we can choose the next element, which is going to be the mountains. So I said, like that insert and then we can move it around and also positioning it roughly in the center, maybe a bit further down something like that. Once again, let's select at New Layer image on. We would choose the village. That's important that as well. We position it roughly there where it needs to be. I think we can also move the mountains slightly to the left and ah, village, also slightly to the left like that. Okay, now let's just place in once again. The other image, the front with the grass and then we can position that slightly overlapping the other details. So that was already looking quite good. But then, of course, we need to populate this a bit more. So we need more images. We need the hikers, probably starting with the tent. We can place that here on because everything was created in photo shop using the sizes. I wanted they already in the correct size as well. So everything is fine. We don't really need to resize anything. So once I select all of these, let's say maybe select that hiker first reposition him somewhere there in the middle. Then I go back, select image. The other hiker on She's in front, off the guy. So I will place her there. That's all good. And then, once again, one ah reuse image. We choose your adventure text, we move it in the middle, then put the other image in front off that or below that the starts here and that we can position that somewhere. Maybe, let's let's just move them slightly to the left. Something like that. All right. And then the starts here text can be position somewhere there. Your adventure is somewhere above it. Maybe something like that. And of course, we can also do other changes here, for example, like rotating this if you want Teoh bombs going to rotate it back to the way it was. So if I go back again and choose at image, the last one that we need is the balloon. I'm just going to answer that as well and place it somewhere there on the right side. So now that everything is in place, if I score further down, you can see we have all these layers created similarly, two for the show and these layers can be animated as well, and also they can be renamed. So like that last one was the Belene. I'm just going to call it that. And then the 1st 1 was the sky and so on and so forth. So if you messed up the order of your layers, you can always move them up and down off course. Now, I'm not going to spend time on renaming them, But you can see that this all work nicely and we can click on preview just to see how it looks. And we can even see it in different formats like this is on a desktop computer. I can I mak. Then this is the size on a laptop. Then we can see the also on a tablet and even a mobile. So because it's a responsive slider is going to always automatically resize the content to whatever device you are using now in this video, that's all I wanted to show you. And in the next video, I'm going to show you how to apply the parallax effect on each of these layers within the slider. 13. Adding Parallax effect to images: So now we got to the final step where we actually a sign the parallax levels for each of these layers in the slider. So let me just select first of all, the sky. This layer can be assigned to one off the levels by simply clicking on the advance style option. Once that's on, there's the Parallax Effect and I can choose Level one, for example. Now if I test this, I can click on preview. Now, if I move my mouse around, you can see already the sky started moving in the background. That's really cool. Now let's select something else. I'm just going to select the foreground with the grass, and I'm going to use Ah, parallax Level two for that also include the tent in there. Also these people so to and him as well it's going to be number two. So let's test this again. Preview it. Once I move my mouse around, you can see now they both moved almost the same, but the foreground moves a little bit faster than the sky as good. Now let's select the village. Okay, I'm going to select the village detail and I am going to choose Parallax three for that, and I'm going to select the mountains. Choose four for that. Then I'm going to use five for the balloon. 64 your adventure. And I think for the mountain and the starts here, I'm going to use the same level. So I'm going to use number four. So I select starts here and that Use number four because I want them to move together. Encyclical preview. We can see how it works, so that's looking really good. It already has that three D effect that I wanted to achieve, but we can always find Tune this a bit more. So, for example, I can go to the slider settings and change the speeds. Once again, let's going to preview and see how this all works. So maybe I can change the direction off the sky and also slow down the mountains slightly so the mountains should be the slowest. If you remember from the parallax animation that we talked about in the beginning off this course so because they are the furthest back and ah sky, they should move really slowly. So I'm just going to select the sky and just double check that that one is in. Ah, the parallax level one. Okay. And the mountain, I think, was level four together With the starts here, Yes. So these two should move the slowest. So if I go back to the slider settings again, changed that on the parallax against the level one is set to five, which is actually good. That's the sky, which should be the slowest. But maybe I'm going to set that to, uh minus to and then level four, I'm going to set to minus five so they will actually move in opposite direction to whatever is in the foreground. Let's save this and I'm going to preview it. So previewed slider. So now when I move things around, you see that the mountain and the sky moves in different direction. Toe whatever is in the foreground. So that's quite interesting already. Ah, the only thing I feel is that the things in the foreground move a little bit too fast. And, for example, the balloon and the your adventure also moves almost at the same pace. So I'm going to reduce the amount off that by going back to the slider itself. So I'm going to add it slides I'm going to check, which levels these our own. So I was select, for example, your adventure and check which level this one is on. So it's level six. That should be much slower. I don't want that to move too fast. And also, I don't want the village to move too fast. This level three so three and six should move slower. I will go back to the slider settings again. Jews parallax and on their three should be made. Ah, slower. That's the village. I'm going to do the five for that and then six is the title again. I'm going to use less for that, like three. Okay, let's save these settings, and I'm going to preview it once again so that the preview and I can move things around. Someone's more and you can see that's quite cool, that the balloon can come in front off the your adventure text and ah, another important thing is, of course, you should check that there's no gaps. Whenever you move things around, there shouldn't be any gaps, like I can actually move things apart. Like if I really move my mouse to the top, that should be avoided, So I'm just going to again show that to you The preview. Move it up. So when I move my mouse, maybe start my mouth at the bottom and move it, although the top, then I can split things apart. So it's always good to check these things, and the way you can avoid that is to simply reduce the speed. So that's all you actually need to do. And of course, you can always add more animation. You can fine tune each level depth, how it moves, and you can also go back to the slide itself and fine tune where each element will be. And using the same technique, you can create as many slides as you want. You can combine them together in one big slider and create a very engaging user experience . 14. Conclusion: and that's all I wanted to show you in this course. I hope you found this example interesting. And hopefully you picked up a couple of useful techniques on the way. So we use for to show up CC 2015. But if you have earlier versions than it's not a big problem, and also, if you don't have WordPress instead you use Jundallah. You can find lots of similar plug ins to the one I used in this course. The same principle will always be the same. How to create all the elements that you need for a parallax slider to make the most of what you learned. Also, don't forget to check out the course project where I give you an assignment which you can go through and then show me your final result. So thanks a lovely attention and I hope you will join me next time as well. On another course