Creating Gifs of UX/UI Projects | Matt Ward | Skillshare

Creating Gifs of UX/UI Projects

Matt Ward, Product Designer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
6 Lessons (13m)
    • 1. Introduction

      0:55
    • 2. Methods Overview

      0:26
    • 3. Record Your Video

      1:39
    • 4. Convert to Gif

      4:07
    • 5. Add Device Mockup - Optional

      6:00
    • 6. Wrap Up

      0:15

About This Class

In this class I'll be sharing the process that I use to create gifs for presenting apps or websites in presentations and portfolios.

I use these techniques in the portfolios I’ve created and in almost every single client presentation I’ve ever given, because it condenses information and it’s visually engaging.  It also gives you a very easy way to convey more complicated interactions.

82467c2a

I'll be using workflows that use either Gifski or Photoshop. You don't have to use adobe XD to record your gif, but I have included the file if you'd like to try it out. If you'd just like to follow along, please grab the video file attached below.

File links are here:

XD File

Video File

Gifski: https://gif.ski/

Rotato (optional): https://www.rotato.xyz/

Transcripts

1. Introduction: Hey guys, today would be going over the process of how to create some. You are gifts for presentations and portfolios. It looks something like this. And there's a couple different options in places you could use something like this. I like to use them in portfolios and presentations a ton. There's pretty much not a single client presentation that I haven't put a Giffin, and part of the reason that is is because it helps convey a lot of information. Releases Inkley. I can put one Giffen that's gonna replace like an entire flow. So it's just a way to make things more visually engaging one, but to condense information. And it's something that I've kind of gotten better over the years, and that's one of the reasons I wanted to share. This is some kind of weird tips and tricks to share with you guys, too, really kind of step your game up on how you're presenting your work and how you're displaying these things in your portfolio. So I hope this is helpful and let's get started 2. Methods Overview: so I'll be going over to methods of having do. It's the first is with a program called Gifts Key. You get a free download of that. I'll put a link for in the description. You can also do it with a more traditional method, and that'll be the second part. And that's with photo shop. So whatever you're more comfortable with, and I'll kind of discuss the pros and cons of using each. I use gifts key in my workflow almost on a daily basis now. But I still go back to photo shop, so there's present cons and I'll go over as we get through this, but let's get started. 3. Record Your Video: Okay, so the first step to making a gift is actually to record the video first. So what you can dio is blood This ex defile have included for everyone. You don't have to do this step. I did just include the video as well. If you want to skip by, maybe you don't have a db X t, but it kind of works the same for any process. So we're gonna preview this prototype here and I'll click on this main screen. I think I notice we have a record button up here at the top That's going to record everything that happens on our pretty type screen in this process works with any kind of screen capture program. If you're on the windows and you don't have this button or ask you to use like the game recording tool, it works just the same with any screen record and even and like it. If it's an an envisioned prototype or anything, you could turn any video into a gift. So don't worry if you don't have this exact set up, but you can click the record button here and then click through the things you want to see on your screen and then click done and so we can save up right And you notice that was actually around five seconds. And I wouldn't encourage anyone to do anything longer than I'd say 10 seconds. That's because gifts are generally speaking, going to be pretty big file types if there that long so we can close out of this and we can bring over this video and preview how it looks so you can double click in No, track this over. So here's our video, and that's just going through the bottom knave to give everyone an idea which on each screen we can close this. 4. Convert to Gif: and this is where we can open this program called Risky, and you can get a free download for it. I'll put a put a link in the class description for everyone to grab this, that what you can do is just drag and drop this video over, and you see it kept the original size, which is fine. That's not very big Onda frames per second and quality. Theirs will be the things that have the biggest impact on our file size. So what we can dio is actually drag this down to about. You can usually get away with 12 and I dragged the quality down a little bit. And I've also found that the estimated sizes are generally way bigger than they actually end up being. So we can hit, convert, and we'll let that run. So a general rule of thumb I have is, I don't put up any gifts that are bigger than 10 megabytes, usually pushing it when the final sizes that much is gonna take this a long time to load so 3.8 that's a pretty good one. So actually, what we'll do has just saved that to the desktop as well se quiz. I'll drive consumer. That would be open with Google. Crown is he looks so here we go. Now we have a good gift of, like, our bottom navigation in this and we could actually stop right here because we've created a gif of are you I But another method you can use to do this is actually directly and photoshopped. So if we bring fighter shop over here what you can dio and this is if you don't want to download gifts key, I'm a huge fan of it. But there is. You do get a little more control and Photoshopped, I can show you why. So you can actually just take this screen recording that we did and drag and drop it over here and it will open up the kind of movie timeline editing options and finish out. And so it's the same video. And if you look down here on this timeline, forget three. You see all the movements. What you can do from here is actually go to file export and then save for Web legacy. And it's taken a second because if you notice here, we have a pretty high frame rate one of the good things about gifts. Key is it gave us the option to reduce the frame rate. And so, if you look, you have a time of options here compared to get ski, big ones you want to notice is the size. So you want to make sure sizes pretty reasonable and this isn't too big, so this will be fine for us. And the other thing that defines how big decides is going to be a lot his colors and you can kind of think of colors as quality of the gift as well. So if we cut the colors honest in half, you're gonna lose a lot of the quality. But all the other settings look fine, and you can get into more of those as you get more familiar with the process. And we actually wanted to leave for Everest That's already checked. That's what we could do, is say from here. And then we'll also see that on the desktop. And this will take a second to say you as well. Okay, let's minimize this window and we'll pull over this apus well. So what we can Dio is also get info for this and see how much bigger it is. So if you noticed we're at 6.8 megabytes and then the one we didn't give ski is actually a 3.9, and the reason this one smaller is because we could change the frame rate and give ski. But we couldn't change the frame rate in photo shop. So that is one of the benefits of using gifts key. But there are a little more control. You get over the export options in front of shop, but for anything that's not too advanced, a definitely encourage everyone to use GIFs key. 5. Add Device Mockup - Optional: and one of the things I like to do. There's a completely optional step here is actually like to put, um, the screens I make in phone mock ups as well. And then, to do that, I use a program called Potato. It's down here also included Lee for that. But what you could do with this program is kind of drag and drop that same movie file and then you get the device as a background and then the video to play within that device. So this is pretty good for a something that's gonna be higher fidelity than if we go over. It looks it's on the iPhone X like we want, We're gonna animation manual and we know the videos six seconds long. So we changed the duration there to six seconds and linear, we want this to be a linear video. So add current view and just double check that the background is transparent here. Here we go. We should be good now Shadows. So go back to this and then what we can do here is hit this button and what that's gonna dio is record it. And then once it's recorded, we can turn it into a gift, so you can either export it as a movie file or go directly to give. And if you have gifts, gifts key already set up, you can go directly to a gift there. So if we pull that over, you'll notice it opens up the gifts key panel. And again, we can drop the's frame rates down to about 12 and then we'll drop the quality here a little more. You notice we're getting crazy file size here. And that's because potatoes sent over a 1920 but 10 80 frame, even though the original screen and video was much smaller. So it will have to do is convert this and it'll take a second to convert, and we can fast forward through this. No need to wait, - so we'll save this one to the desktop as well. Home in Oz, this window. And if we pull this over again, we can preview it. So that's the same gift from earlier. But with our phone mock up background from raw potato. And if you'll notice like we have this huge black correct rectangle as well, that's filling up that entire 1920 about 10 80 space and that's not something we actually want with this gift. There's no need drill this black space. So what we can Dio is Open up photo shop again. We'll close this 1st 1 don't save and we'll drag this gift over. And then what we can actually do is just crop it and then with this crop out a lot of that edge and then we use the same expert setting. So file export, safer Web legacy and all these settings were still fine. So if I save and then saving in on the desktop in the most this window and then we'll drag this ever again. So if we have in this with Google Chrome, you notice we have are cropped background and then our phone with their gift playing on it . And depending on where you're putting this on, if you're putting it on a dark background for presentation, black works fine and rotate. Oh, again, you do get the freedom to select what the background color would be, but just now, the background color here should match whatever you're planning to put it on. And then we'll also double check this file size because cropping it in photo shop actually does help produce the file size. There were six, My four there and the original Waas six. I have no idea what it's bigger, but it is so that wraps it up. And this is the process that I actually used to create gifts for presentations. It's pretty quick again. I definitely recommend gifts key. It's completely free. It's a wonderful program, and if you guys have time to check it out, Um, potato is great and I love it as well. And you can also get into more complicated animations and do things like this, which aren't always good for gifts. But it is. It is kind of noteworthy that you can get things like this to play, which is super cool. But I'll probably doing more in depth tutorial on how to create highlight reels with this method. But for now, that wrapped it up. But thanks for watching guys 6. Wrap Up: so that wraps it up for this class. Please let me know what you guys thought of the class to leave comments, try at the cost exercise and let me know what you guys think. These aerial things I used in my day to day work process and I hope they could be helpful for you guys. Thank you.