Export a Prototype to GIF on a device mockup – Tutorial



hello and welcome to sketch together my name is pablo stanley and on this session we're going to learn how to export your UI animations to give and we're going to be using principle for you our animations and also photoshop for some details on your animation and we're going to learn how to mock up on a device how to prepare for drivel and how to create a perfect loop because sometimes it's a little bit tricky to get that loop to be perfect so first thing I'm going to open principle and if you don't know how to use principle I have a crash course in principle that is available on here and you can take it so here I have one really simple prototype here in the preview window I can see that just like opens a card and then it closes just like happening on it and I want to create an animated gif from this here in the preview there's this little camera icon you press press on it you can start recording and before starting to record you can select if you want to have a touch cursor an arrow cursor of a course and hidden so let's select – courser i started recording now i'm recording all of this and then i stop it by pressing on the camera and now here i have the option to save this as a movie or as a gif and if you select give it gives you the option to by default a drivel Retina display the pro 800 by 600 size and also 200 a size of for height and also gives you a hundred percent which will respect the size of your artboard your prototype so let's try the one that says dribble Retina 800 by 600 I'm going to save this it opens the finder for you automatically and you can preview it and as you can see it added a great background for you where your prototype is in the middle so right now you can it you can put this on dribble if you wanted to but I think we can do better as you can see there's an some exporting fragments there and it's a it's great it's it's I think it's good enough but I think sometimes if you want to do something more creative you can do something different by exporting to movie so let's learn how to do that so here I'm going to go back to principle and here on the record you want to say again touch coarser point do the whole thing again it opens and then it closes and I stopped recording and instead of gift I'm going to save this as a movie so dot MOV going to save it as the same name and I have it as a movie right now it's a movie it's really smooth the quality is really good and it doesn't loop because it's a movie but if you go to Photoshop to open Photoshop and this is where the magic happens the cool thing about Photoshop not a lot of people know this but you can open movies too you can open a movie so I'm going to open this movie and just open it directly on Photoshop you just open it and then here you're going to see a new panel here a new window on the on the bottom if you haven't seen it before which is the timeline and it has your video layer here and you can go through the timeline and see your whole video and you won't need it too you can cut this video but I'm not going to where you can crop it over here sorry cut it the cool thing is then now I can put this on top of a device so I'm going to open another image I have to this one and this one this one is from Facebook this one is really just flat I can just import my movie here and boom I have it here it's on the device and run there and then I want to create a video timeline from this and I have a video timeline and now I have my movie on this mock-up this one got a little bit too big I'm going to make it a little bit smaller there you go now it's the same time and it will loop once I export it but probably you wanted to have a perspective you want it to feel more more realistic what this is pretty realistic but probably you want that perspective and then look nice so I'm going to close this by the way this is right if you wanted to but again I'm going to use this a movie in something different which is this is from AI mock-ups if you want to go to I mock-ups calm you'll be able to see their mock-ups there and now I'm going to do the same and just going to drag and drop this little guy here I'm going to create a video timeline so now the video timeline is there you can see the whole video here but I want to transform this video and I can press command T you know it's going to ask me eight you want to convert this to a smart object I'm going to say yes convert it to a smart object and now there is a smart object I can this video I can transform it and do really crazy stuff it what I want it to so something like this I can going to press command and then I can drag this point round around there I think and then I can press command and these points these corners I can drag them and transform them and give them perspective it looks pretty cool so you can get crazy on how detail you want this I just going to just good enough for for this video I think it's good enough and now I have my video playing here on the device so there you go press just press the spice the spacebar to to play and that's it and now I'm going to check the image size of this to say we want to have to be 2 pixels I'm going to need to be able to resemble save pixels to be 800 and by 600 so now it's 800 by 600 can export this to dribble to to a gift that will be great to it the size of dribble so I can go to I can press command alt shift s so command all chip s and then it will say for forgive or you can go over here and go to export and then save for web which is the legacy this is the one I use safer web and here you can go to the presets and one of the presets is going to be gif I'm going to select give 128 bitter and then it's going to take a little bit just to turn this given to put those all of those layers as a gif and right now it's a 128 colors I came instead here in the looping options is 10 instead of once I'm going to say forever that will create a loop just press play and it can preview it it's going to be a little bit slow but let's say done right now I can see here on the bottom that this gif is going to be 534 kilobytes which is pretty good I was actually expecting it to be a little bit bigger but now this is pretty good I'm going to say save and I'm going to save it here let's preview it in a minute right now I only did 128 colors that's probably why it's a so small there you go that's pretty cool right I created a loop for me 128 colors if you want to try it you can go up to 256 colors and probably will give you a little bit of a better quality so that's the magic of using Photoshop with your movies and to be able to put them on the device and something cool that you might want to use Photoshop to is like I was telling you when you want to create a perfect loop so here I'm going to go back to principle going to up going to close this little guy I'm going to open a different product like that I have this one is an animation this one as you can see it animes automatically so it's going to be really hard for me to get that perfect loop because it's there's no actions there's nothing it's just an animation that is looping by itself so I'm just going to start recording and I'm going to say cursor hidden and there you go it's animating I think it's doing a couple loops already did so I'm going to stop the animation going to save it as a movie it's perfect and now I'm going to go back to photoshop I'm going to close this I'm not going to save this close this and save it I'm going to open the movie that I just created which is the donut this guy so as you can see it doesn't create it it made the animation perfectly but it's really hard to get that perfect loop and but I can do this here on Photoshop so here I'm going to say that my loop starts let's say that starts here after this when the leg is up and it goes down there you go I think a run there is where the loop starts so I'm going to drag here the video but to drag it all the way to my mark the my timeline and around there and now it automatically cropped that video and now it's here and now from here I need to find this same point over here so it goes back to this and it's actually think it's right there right there is where the loop ends so I can crop this sari up close this loop make this movie a little bit shorter so now I'm pretty sure this is going to be a loop let me see if I can say loop playback and here on the options I can loop the playback so I'm going to just press play there you go now it's a perfect loop of my animation and I can export this to give so let's go to press going to go to file export save for web there you go now it's only one point three megabytes as you can see here and I'm going to say yes 256 pixels probably it's not I don't need so many colors I'm going to go to 128 is to probably now it's only one megabyte and I'm going to save it say principal donut and oops something that I almost forgot looping options always you want if you wanted to loop you say forever so you go save principal donut there you go let's see it on the on the finder and let's put them back kind there you go I have my animated gif it's a perfect loop now of my animation and I did this using principle and Photoshop pretty cool

27 thoughts on “Export a Prototype to GIF on a device mockup – Tutorial

  1. i have tried to make lazy loader icon but i want to make that gif with transparent background but i unable to do that? please help

  2. Thank you for your video. It inspired me a lot. However, my picture and videos are too big for Photoshop. It cannot be exported. So in the end, I still used AFTER EFFECT to export the video. I think, maybe you can publish a video of Export a Prototype to GIF on a device mockup by After Effect. It could be the best!!

  3. How come my GIF exports look terrible (noisy and colors destroyed) when I export. even at high res. Colors are also way off. I also wanted to ask about adding gestures post production. I don't want to record with the cursor because it gets jumpy when I cut the video so I am (in a very inefficient way) adding gestures in photoshop. There's no way to adjust the position of these taps gestures (that I know of). How would you do this?

  4. Nice tutorials! Well done! You don't need to play cool by the way, too many awws and yeaps feel a little fake.

  5. Loved the tutorials. thanks a lot. I used these tutorials to learn principle and improve my skills and portfolio.

  6. Mate thanks so much for creating this course. Your content is amazing and I really appreciate your efforts. I learnt a lot from this series. Keep up the awesomeness 🙂

  7. you are a fucking wizard man! thank you a lot! I tried to solve this problem more than a week! love you))

Leave a Reply

Your email address will not be published. Required fields are marked *