Learning Design in Adobe® Photoshop®

Lesson 6/8 - Extracting Assets for Web in Adobe® Photoshop®


Learning Design in Adobe® Photoshop®


Lesson Info

Extracting Assets for Web in Adobe® Photoshop®

All in all I'd say this is looking pretty good this could easily be a poster in this case it's a website doesn't matter I'm dealing with elements both vector raster and text and color as well I've added a little bit of color all based on that photo in this case for this website but it could be a poster anything, any time you need to get assets out of photo shop like how do you do that a lot of times for web it's like this it's like ok, well I need to get let's take you know I need to get this asset out ofthe I'm gonna convert this to smart object out of photo shop how do I do that? I'm like, ok jump in and maybe I was just like there's a zillion ways to do it but you'll maybe you'll crop it, you'll jump in and you're like crop this and then you can mash a bunch of keys together with the s ky and that gives you say for webb, I don't even know which ones they are I just I just do all of them right? And, uh that's gonna give you that one image that's all for one image right there, right? ...

And then I got even get like undue but it's kind of a nightmare as you get into a layout that gets really complex how do you extract all those assets out of this particular safe I'll write it gets complex well, honestly all you really need to do guys and this is what I want to show you file extract assets so you could do safer web but I want to extract assets out of photo shop I wanted to pull out all of the various photos select extract assets so here it is it's basically based on my current selection it's saying hey I'm going to go and make this opinion file for you oh great there it is thank you write I could rename this I can call this mari violin whatever right but in general what did I just do there but in general there is that particular photo extract assets there's that layer this is another it's actually giving me that layer as well I know why it's doing that okay so anyways here's that layer to I can change that from ping to j peg to give whatever I want to do but this is what I want I want to have this sort of control you know let's make this a ping with transparency right let's take for instance these other photos like this photo guys where did this photo come from? Well, quite frankly helps us jump over here it comes from this file name it knows since that layer was called the dot j peg it automatically put it in here but check this out. I want this play logo to be output let's click add and we can add that play logo there it is it's going to get out of paying file, you know let's, make it spg done right? So, you know, for a really complex designs, this is great, and even as you get into mobile and different resolutions and all this stuff, you have to kick out multiple resolutions on the file say, for instance, this particular image we'll check this out, I could say, you know what make one that's twice the size will make one that's three times the size make one that's half the size, so I've covered my bases and this is largely for, like web and mobile design you're dealing with yeah, the same assets, but they need to be smaller a different resolution that's how you do it, it's going to kick out right here? Five image is done and done right? I could do that right now and I should have just hit extract. But let me go to even a more complex image if you don't mind so one that I'm working on because this is part of this website jump in here just as an example um, another version of this website, right? So here's an earlier or another version and quite frankly on if we take a look in here, what do we have? We have these various folders and I can start to take a look at all of these various icons and each one of these icons is already named dot ping but if I wanted an entire folder to be output at is an image because that whole area I want that output is an image I can select an output that as well so I'm gonna go to extract assets just to show you more complex file what I've done all of that busy work so all I did is I started just select and clicked ad for all of these different images in fact, I should just be able to say j peg here and I don't know if it as oh yeah does bam adsit and that's how this has set up guys I can add say those all those different versions okay? And then I'm just going to click extract it's going to you know, change the layer names it's going to ask you where do you want to put it? I'm going to put it in this folder right? And now let's keep in mind those files are not there but it's going to make a play assets folder I'm going click extract it goes through and it makes all of those various files at all those different sizes right so when it comes to web design, this is huge, right? It's kicking out all of these assets right now, okay, just made them it just made them. You guys believe me, you should believe me. I'm being honest here just really kicked him out, right? Check this out. And even as we start to take a look at the site, you know, they're all being used on the website as well, they actually were not there a second ago, but now they are. And this is what we've done with this. You can see, you know, the images that I've just output again. They were not there a second ago, but now they're actually part of the website, right? And this is another case where I've literally used photo shop, and I've I've exported out those different images right? For this design. I wanted this to be interactive because I thought it would be fun, tow still make us playful and fun. And as we go in and say, click this turns a new video just because we can so that's kind of cool, huh? Because you have that sort of control. Most of this could easily be done in a photo shop the interactivity thank you is ah is another deal.

Class Description

Adobe® Photoshop® is a powerful graphic design tool. You can use it to layout websites, make posters, and produce design elements. Learn all about the features tailored for graphic design and how to use them in Learning Design in Adobe® Photoshop®.

Paul Trani will cover setting up files, creating graphics, adding fonts, and managing all your layers and assets so making updates is easy. Paul will demonstrate pro tips that will help you make great designs and feel like an expert.

Software Used: Adobe Photoshop CC 2014.2.2


Andrew Pardue

As an intermediate Photoshop user, this course was very helpful in learning several ways to not only improve my design work but also save a lot of time in the process.