Mohand SADMI's profile

Resident Evil 3 - UI Menu Animation with Adobe XD

Resident Evil 3 - UI Menu Animation with Adobe XD (Experimental work)



Adobe XD added on the last update a long-awaited function, that of adding a video to its project, I wanted to push further with the placement of 2 videos in playback at the same time, one in the foreground and the another to the second, but Adobe XD doesn't allow that yet, and it was brought up by several designers and they put it to a vote to ask Adobe to include this feature. So I was inspired by a work done by the Youtuber ''Dansky'', then I tried to go further to see what the latest version of Adobe XD has to offer.


What I wanted to do is try to reproduce an animated UI menu for the game Resident Evil 3 but with a touch of customization, I will really appreciate the feedback on your methods to use several videos on a single screen at the same time if there are other tricks.





ASSETS







In Adobe XD I created several boards for each event in the animation, each linked to the other via actions to be taken. The walkthrough and prototyping is shown below







The method I used is quite simple, it consists of superimposing several layers (between png with transparency to the video). Unfortunately Adobe XD does not allow once again to place an opacity mask on a video. so we are still waiting for these new improvements in the next updates.







As you can see, Adobe XD is not very well optimized for video but I prefer it to other prototyping software. The easy solution would be to go through After Effects but many of us are waiting for the next updates... to be continued.




Resident Evil 3 - UI Menu Animation with Adobe XD
Published:

Owner

Resident Evil 3 - UI Menu Animation with Adobe XD

Published: