FREELessons: 19Length: 2.2 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.5 Asset Generation

Hi everyone. In this lesson we're going to look at asset generation, particularly, that's going to help out your developers now that you have your prototype ready to go. This stage is more common after you've gone back and forth through your clients and made some revisions. But you can also do this earlier on, if you know that there's assets that you aren't going to change, such as logos and backgrounds and things like that. So what does this look like? First of all, when we go back to InVision, we can see here that we have an Assets folder. It's already generated some fonts based on our PSD and then we also have our PSD in here and that's what's generating the three screens that we've created already in our project and we've hotlinked them together. So assets is a separate area over here that stores everything that we're using to create these screens. But you can also create a very handy folder that's going to allow your developers to take assets as they start to work on creating these prototypes and converting them into real live sites. So what does that look like? Well, aside from just creating a folder and uploading images, that's one way you could do it, so you could just come right here and create a folder and you could call it logo, for example. Or you could call it images. Or you can call anything else that you need to. So that's one way that you can do it right within the application. This is gonna work if you don't have syncing installed, for example, or you don't have Dropbox. You can do it right here. You can also upload a file on the fly. It's gonna store all of these assets for you. The other option is to use the syncing folder and the tools that you have available here to add to your assets right within the sync folder. So just like you were going to add a folder online, you could do it here as well and call it Images or something else of that nature. It doesn't really matter. So that's up to you on what you wanna do there. But there is one other step that makes this extra sweet and it's the way that I prefer to generate assets. And it's straight within Photoshop that we're going to do this. So let's go back to Photoshop, our original prototype that we have ready to go. It's still all formatted for InVision syncing but we're gonna do one more thing. We're gonna generate our assets straight out of PhotoShop. Now if you are familiar with PhotoShop and you've used the Generate > Image Assets for other website mockups, this is very similar. The only difference is we're really targeting this to happen with InVision. The cool thing is, is you're going to create these assets whether you use them in InVision or not, so this step is no different than using the Generate tool in Photoshop. The only thing is, is that when you name it the way that we're about to name it, it's gonna target that sync folder and then it's going to upload those images for us. So you need to think about what exactly an asset is and what's gonna be beneficial for a developer, or somebody else, to use this through InVision. So what I'm talking about specifically is a background image, your logo, this icon, and these three icons. Those are going to be very specific assets that we may need to generate. You may also need to generate other items such as this image and then the form background. But once you see this step and how easy it is, you can apply it to pretty much any asset you can think of. But we're just gonna keep it to these simple assets for now, because we may actually change the form later on in revisions. So you need to accommodate for your situation. So let's go down here, we're gonna start with the background here so I'm going to open this up. One thing with the background is, is we have two layers here. So we need to merge these together to create one asset. So we're going to select both, and then we're going to hit command or Ctrl+E. It's going to collapse that black layer on top of our background layer. And what we need to do now is name it background-image.png, all right? So all of your file extensions need to be PNG for this to work. So we go ahead and hit Enter. We're gonna do this for every single asset that we want to incorporate and sync across. So we're gonna come up here to our icon and do the same thing. Our clapboard.png, email.png and then phone.png. All right, so all of those now have a .png. Extension at the end. The only other item we have up here is our main logo needs to be a PNG as well. Now one of the perks of doing this is that you are creating assets that are on the fly here right within your Photoshop document. And if you're asking yourself, well why don't I just send my developer these three icons, and this logo in the background? We already had the JPG, we already had the EPS file for the logo, and we already had the EPS files for the green icon. So why don't we just email that over? Well, you can definitely do that. But one of the awesome features about using this method where you're doing it right in Photoshop is that not only are you saving a web friendly version in a PNG file, you're saving the icons and the background image exactly to scale of what your mockup is. So they can literally just code this landing page and drop in this photo of the logo or the icons, and they're scaled exactly to fit. That is why you want to do that because they are scaled and it's gonna make your developer love you and make things so much easier down the road. Because they're not gonna have to scale it. They're not gonna have to guess. You're giving them an asset that's scaled to match your mockup. That's why it's important. The final step is just to go File > Save. So that we can save the fact that we did this to our PNG files. And then you're gonna start noticing some changes and depending on how much you've done, what your internet connection looks like. Mine's not the fastest so it is gonna take a second before we even see anything. And you're gonna think it's not working in this case, but you can see that it's successfully updating our asset here. And that things are going to start happening within our assets folder, if you just give it a second. You can also monitor what's happening online as well. So if you just let it sit, it's going to upload all of those assets and we'll be back when they're ready to go. All right, so just about a minute or so later, we have a new folder that appeared in our assets and it's called images. And so if we click on this, you can see all of the assets that we created are now right in this folder. They're all PNG files, ping files, and they're all ready to drop into our item here and then you're getting updated here as well. So this is what's happening online in our browser. Let's go ahead and take a look at our Assets folder. You can see as well we have a new images folder here and that our assets are loading right in for us. And again, what's awesome about this is that everything is scaled to the size of our application. And that's exactly what we want. The cool thing is, is this is in a folder now, so if we were doing this ourselves or we wanted access to these assets, it's easy to access these scaled to the size that we need. So that is the beauty of asset generation right out of PhotoShop into InVision and beyond. So that is gonna get you the mockup that you need to make things so much easier for you. Coming up, we are gonna look at the sharing and feedback portion of InVision that makes it so stellar to share your work with other people in your organization or other clients and people who need to give you feedback. We're gonna look at that in the next lesson.

Back to the top