Animation Tutorial ala Gif / Video in Adobe XD 2021

hi everyone in this video we will create animation ally give embed video using only adobe xd and photoshop in description under this video you will find adobe xd file with this project and empty file with assets to recreate this tutorial step by step so let's begin in adobe xd file you will find this information about assets for this project this is google font games info and resident evil trailer on youtube you can download this video from youtube or use any other video you like now let's prepare our assets for this project i have these two wallpapers with holding alt and duplicate this image and now i want to isolate this character from background you have two options you can send this image in photoshop or just using pen tool in adobe xd for isolating this element at this moment i'm just make simple shape with pen two and then we just create mask for this shape fill this shape this color now copy and paste my background shape on the top select these two layers and make mask with shape in this case we will have this character isolated from this background now i won't remove this character from background and press right button edit in photoshop and we switch to photoshop then i'm select spot healing brush tool and simple isolate simple remove i'll remove this character from background sometimes you can use clone stamp and when you will satisfied with result just press ctrl s and it will be saved in adobe xd now we have our character isolated from this background in adobe xd same technique i'm use for my second wallpaper this is background and isolated character when you create mask with shape in the bxd you can easily edit this double click and we have all these dots and we can edit this mask when you're good with the result click outside mask and we can use it in our project now let's create assets for resident evil game when you download your trader it will be simple mp4 file i'm going to photoshop and just drag and drop this file in photoshop and we have this timeline now i need to find part of this trailer that i use in project maybe like here then drag from the left and find my end of this part and like here and crop for my last frame okay at this moment we have this part of trailer let's save this video okay now i want to use this first frame for my project but i need image for this i'm duplicate this layer ctrl j right click merge group and we have image for our first frame now i can export this right click export s like jpg export and let's rename it resident background enter and now i can isolate this character from this background let's create new document place this image to new document then i'm select pen tool check that you have path and just using this pen tool creating path for isolate this character then when you lock this path right click make selection okay and press ctrl j for new layer i hide this background and you know this character have no hat but for photoshop it's not a problem using pen 2 and create a rare for future hat again right click make selection okay then i select clone stamp tool and add our head then we can add some shadows and select brush tool and add more shadows okay then right click in the selected and we have character with head oh we have this hand for this i can choose this two polygonal lasso tool and click make selection and press delete right click deselect it and we have our insulated character place i think it will be fit but let's check must yeah it's fit for our frame now let's go to our document and right click on this layer export s png export s png press export and let's rename it resident character save okay we're done with this assets let's save this video document and now we can add these assets to our project now i'm add these assets to the project and let's make it fit with previous games resize and our character need to perfect fit with this background we can make opacity lower and let's precise maybe like this okay now we prepared all these passes for each of game let's make characters bigger than background for more 3d effect and let's add this assets to the project i'm already prepared template we have logo with font on the left side we have month slider simple menu release date and titles and platforms for each of this game and more info like a button for next transitions i'm holding add and move these assets to the project move under all other layers and just resize and place it in right position maybe like this let's switch this graphic this will be more on center assassin create on the top like this now i want to add background for each of this game i i need to copy this background holding ctrl shift click click click left button mouse then ctrl c ctrl v move behind all layers and make it bigger now we can add layer object blur for each of these layers and make it maximum then we can play with sizes that we like change opacity for each of these layers like this and let's add border radius again and select my backgrounds and set for the radius 50. okay now we can animate this page let's resize our board okay now we are ready for animate for easily animating i'm group this game ctrl j grab this game and in this moment i need to tell you one important thing about animating in adobe xd in adobe xd when you move your layer outside your artboard they go to this paste board on this gray background but in animate we don't need it and now you need to remember that you must wired up your artboards with auto animate transition before you move your layers let me show what i mean let's go to prototype tab now have these two artboards when we move this group outside our boards they go on passport but now let's add our auto animate transition go this auto animate easy [Music] in out and duration to point five now when we move this layers your layers won't fly out onto the baseboard and they still on this artboard we can move these groups like this and they still will be on this artboard now let's duplicate this artboard add transition and we easily can animate through page i'm select all these layers move up select this animation these layers again move up now when we are going on now first armored press control enter for desktop preview and when we click we will have this simple animation now let's make this animation more interesting in this project i will use 3d transform and parallax effect let's start from 3d transform with holding ctrl shift i select my backgrounds and go into the right panel click on 3d transform and set x rotation maybe 55 and y rotation minus 30 cool now let's do the same with our characters hold ctrl shift and maybe a little bit maybe four on excitation and minus 10 on y rotation okay now let's create parallax effect this will be my first screen first artboard and this will be my second artwork on my first artboard i'm setting these layers and move groups and layers down for more deep effect and on second screen and select this layers and move up in this case we will have parallax effect for these two games and background let's see how it looks nice same i will do for these two artboards and move these layers down background too and in these layers this residential layers move up now let's see how it looks cool oh we have this problem let's move this character and we can even write my size if we have some problems like this we can go to 3d transform and click on this center icon move down and then we can easily resize let's check yep it's working final touch let's see how it looks with all three games now we can make our adobe xd file mark cleaner we have viewport high 810 and let's set high for our board the same 810 and we have these three simple screens okay let's check our artboards if you have some problems like this our layer behind this background we can go to 3d transform and move these layers holding the center icon click and move up and down let's move this character this background now we can remove this text let's move this title same problem we have on this assassin's creed game just move this layer behind and text close to us now let's see how it looks final check yeah it's working cool now we're going to make our gif video animation for this resident evil game i'm duplicate this artboard and let's go to prototype tab from this button wired up to next cardboard set auto animate easy note and duration to second on my previous screen i have this button this is simple group with text and ellipse i duplicate this ellipse move down and set same fill with same color that my portal then i'm copy and paste this button to my next screen and on this screen select these two ellipses resize and move text to the center and rotate on preview screen this created ellipse set opacity to zero now let's see how it looks when we press on this button we will see this animation now we need to reset this 3d transform and select background and character and set 0 on x and white rotation now we need perfect fit our character with background we can make opacity smaller yep now it's perfectly fit then move to the left date up and this title to the left now when we click on this button we will see this animation and from this screen we can go to our video in adobe xd file i have prepared this animation start artboard with some interface elements with their opacity now we need to copy and paste this background and character and feed to this armored now select this background set corner radius to zero going into auto i'll go into prototype tab wired up trigger time delay 0 auto animate is in out and duration to second let's see what we have oops press button and if we have this problem it means that some of these layers had same names in layers for example i have this background and background with blur the same names and in this case you need to rename this background with blur to another name and just add blur copy this name and we need rename this layer on our previous screens too this and on this screen let's check now work work and when we click on this button we will have this nice animation okay let's add transition from this screen to this we step out animate is in out second okay now on our last screen we can add our other interface elements now let's add this date copy and paste move it to the left release date rotate place like right here names title for this game move to the to this position and for playstation 5 information set opacity 100 and let's resize this title maybe this is state smaller okay let's add logo is this menu we can add and move oh no we can move up on this screen let's add our month copy and paste on this screen move to the left and set opposite to zero now let's add this cover on previous screen go into 3d transform rotate move to the right the opacity to zero this button copy and paste rotate move to the right set plastic to zero trailer and purchase button copy and paste on preview screen try and remove to the left and in 3d transform rotate like here set the path to zero purchase rotate move to the right set past it to zero now let's check how it looks here we have this transition back and when we click on this button we have all these transitions nice for video animation go back to photoshop and delete this players from trailer i have this part and i need export frames from this video going to file export render video and in this part we have photoshop image sequence select folder and press render now i have all these frames in my case it will be 25 frames and now we need to create 25 arbors for each of this frame okay i'm just duplicating this cardboard and delete all layers now we can make it into ways we can now copy this arbor press ctrl d and make this 25 artboards but when we go to prototype we must you know for each of these artworks add transitions but but we can have make it in other way and just copy this artboard then i'm wired up with trigger time delay 0 transition and animation dissolve easing none and duration press 0 now i can copy these upwards and in this case i need to connect or wired up only these two artboards now we have four robots again duplicate the servos and connect only these two armors i have eight you know i'm create will be 24 yep yeah 24 i'm copying four artboards and wired up these two now i can copy all these artboards and connect only these two armors okay now let's add frames to these artboards now just drag 24 frames and drop in adobe xd let's split and i need my frames same size as my cardboard and copy hi from artboard select my frames and paste hi to these frames then i'm using distribute horizontally select all these frames and play distribute horizontally same for second portion distribute horizontally and place it in our boards selling these frames and again place in these arbors cool now we need add this interface in each of this artboard it's super simple let's copy this groups and layers ctrl c then i'm select this artboards and press ctrl v select these artworks ctrl v and we have this interface in each of these cardboards now i want to add fading in black from my luster board to my first robot for this i'm going to my last report create rectangle i'm going to 3d and make it closer make color dark with all my last orbit it will be with the opacity then i copy and paste on previous screen with the opacity copy and paste on my first artboard with zero opacity too now i need to add in prototype tab transition from blaster mode to for store board it's time zero delay and duration one second between this are boards and make duration one second two [Music] and now if we do everything right when we connect this to our boards with trigger time delay 0 transition type transition animation dissolve using none duration 0 we will have our animation let's check two three go back press button and we have this animation fade in and go to our first artboard that's all i hope you like it don't be shy like subscribe and follow me on instagram behinds and rebel accounts have a nice day and see you next time [Music] [Music] you

Channel: Igor Vensko

Views: 34,355

Keywords: adobe xd, adobe xd tutorial, Adobe XD Animation tutorial, how to animate in adobe xd, autoanimate in adobe xd, adobe xd website design, autoanimate like a pro, adobe xd parallax animation, adobe xd 2021 tutorial, parallax adobe xd, adobe xd web design animation, auto animate adobe xd, How to Add/Insert Video in Adobe XD, add video in adobe xd, add gif in adobe xd, igorvensko, adobe xd parallax scrolling, adobe xd 2021, vensko, adobe xd web design, learn adobe xd

Id: b0_m8zGfNQU

Length: 36min 38sec (2198 seconds)

Published: Fri May 21 2021