Are you having a tough time selling animations and responsive features in your web designs? On this Adobe XD tutorial I’ll guide you thru quick and simple steps to create an animated photo gallery.
This trick is good for showing clients how their users will navigate their website once it’s live.
Create an animated photo gallery Adobe XD prototype using with premium template designs like this one.
Animations and interactions are often the last step of the design process. This could occur after you’ve created wireframes, defined a design system, and already applied styles and elements to your design.
The more hi-fidelity (realistic/detailed) your designs look, the better it is going to be to sell your ideas to clients. Keep reading this Adobe XD prototype tutorial to step up your presentations with clients.
Adobe XD Web Templates on Envato Elements
In case you’re a full time designer working on a few projects without delay, having unlimited creative resources may very well be a game changer. With a single low monthly subscription on Envato Elements you’ll be able to download all of the templates and artistic resources you’ll need for each design project.
Find web templates, Adobe XD wireframe kits, web icons and more on Element’s huge resource library.
Working with premium templates will certainly prevent time and encourage you with skilled design references. But as they are saying, Rome wasn’t inbuilt a day, so working in your design skills and learning recent Adobe XD tricks will provide help to step up your game.
Full Course: Responsive Design in Adobe XD
Sustain the nice work and learn some recent tricks with this Responsive Design Adobe XD tutorial. On this video course you’ll learn tips on how to work with XD’s functionalities to create an incredible Adobe XD prototype with responsive features. Find this and lots of other Adobe XD tutorials and guides on our Envato Tuts+ Youtube Channel.
How you can Animate a Photo Gallery in an Adobe XD Prototype
For this Adobe XD prototype tutorial we’ll create a gallery animation that you simply click to navigate. I’ll show you tips on how to design an internet gallery with this sort of Adobe XD animation. Let’s start.
1. Create a Click Gallery Animation
Buttons is perhaps probably the most intuitive method to guide your user to navigate through a gallery.
Call me old fashioned, but at the tip of the day you wish your entire potential users of all ages to make use of the animations of your website design. So let’s get right into it!
Step 1: Go to Your Gallery Area
For this a part of the Adobe XD tutorial I’ll be working on a 1920 x 1080 web format canvas. Select the world in your design where you wish your gallery to be. Let’s say that is going to be a “joyful dogs” photo gallery inside a house’s website.
Start by making a rectangle and place it at the middle of your Artboard. Mine is 1152×648 pixels (corresponding to an 16:9 aspect ratio) and has rounded edges. It will work as a mask for our images.
My image rectangle is 1152×648 pixels, corresponding to an 16:9 aspect ratio, really helpful for web images and video.
Step 2: Select Your Images
These needs to be coherent to the theme of your website. On this case I’ll be working with three joyful dog photos from Envato Elements.
Pick from three to 5 different images to feature in your gallery.
Find a great deal of photos and design resources on your projects on Envato Elements.
Step 3: Insert Your Images and Mask Into Shape
Select the primary image of your gallery and place it over the rectangle in your Artboard. In your left side bar menu, you’ll find at the underside three icons, select the one in the center to see your Layers.
Select each your rectangle and image layers, right click to display the menu and choose Mask with Shape. This could adjust your image to the format of your rectangle.
Then double click the resulting layer and rename it as “Image 1”.
Step 4: Duplicate Layer and Repeat
Once we have now the primary image masked, the following step is to duplicate that layer and name it “Image 2”. Then select your second image and place it on top of your rectangle.
Press Command + X in your keyboard, then open your “Image 2” layer and Command + V your image inside that layer. It is going to robotically adopt the form of your rectangle.
Repeat this same process so as to add your third image into the gallery format.
Step 5: Space Out Images
Give some space between each image. Spread them out to your right and keep the identical space between each image. I’m setting my images to be separated by 50 px.
Step 6: Add Text and Buttons
To make your animated gallery obvious to the user, you’ll be able to add some text to point the variety of images featured. Below my image gallery I wrote “Image 1/3”.
So as to add a few buttons with arrows I suggest you put in an Adobe XD plugin.
Go to the bar menu in your left, and choose the underside icon. Then click on Discover Plugins and seek for “icons”. I’ve been working with Icons 4 Design for some time, but you’ll be able to check out the several alternatives offered by XD.
Then select the icon you’d prefer to include in your design. Rotate it and scale it to go in proportion with the text and pictures. Rename each layer with “Left” and “Right” accordingly.
Step 7: Create a Latest State for Each Image
We’re almost there. Let’s select all of our three images, bottom text and arrows. On the Layers panel right click on all chosen layers and click on on Make Component. This will probably be our Default State.
Go to the menu in your right side and next to Default State click on the plus sign and choose Latest State. Rename this state as “Image 2”.
With the “Image 2” state chosen, let’s adjust what will probably be displayed here. Change text to “Image 2/3”, bring the left arrow to 100% opacity and position your second image in the middle of the Artboard.
To create a 3rd state for “Image 3”, return to Default State and repeat this last steps and place your third image in the middle of the Artboard.
Step 8: Let’s Animate our Prototype!
Now we have now three different image states. Go to the highest menu and click on on Prototype. Be sure that you’re on the Default State. Then on the left side Layers menu select the “Right” arrow layer.
Go to the proper side menu and click on on the highest plus icon to Add an Interaction. Then, on Destination select “Image 2” and on Type select Auto-Animate.
The more interactions alternatives you include on your users to navigate, the higher. On this case, we’ll add the identical interaction values to Image 2, so the gallery can be animated whenever you tap on the image.
Select the “Image 2” layer, add an interaction and replicate the identical values because the “Right” arrow.
Finally, repeat the identical steps on each state, starting with Image 2 after which Image 3. Remember to also add interactions to the “Left” arrow in addition to the previous image within the gallery so the user can go forwards and backwards between images.
Click on the play icon on the highest right side of your screen to see the Desktop preview of your animation.
There you go! Now you recognize tips on how to create an Adobe XD animation for photo galleries.
Need to Learn More?
Practice makes perfect, and the more information you’ve got the higher your designs and Adobe XD animations will look. We’ve got articles on Figma vs Adobe XD, tutorials on tips on how to make Adobe XD wireframes, and lots of templates on your next Adobe XD prototype.
You’re All Set!
I hope you enjoyed this quick Adobe XD tutorial and use these recent tricks in your next design project. Find all of the inspiration and artistic resources you would like on Envato Elements.