Hi there, this video is all about how to export our CSS, our images. Everything we need to build a website from our mock-up. Even if you don't plan on doing Web Design in Photoshop, hang around because there's some pretty cool export settings that you might use for say print or social media exports. It's worth watching. Hang about, let's get started. 

I've cheated, I took our example from the last video, and did a whole bunch of extra work. So you can skip to here, and go to 'File', 'Open', and in your Exercise Files there is a file called Web Design Example, open that one up. If it's asking for missing fonts just click 'Cancel'. Don't worry about updating them for the moment. So basically this is just Photoshop documents, nothing special, these text boxes, these images, have done some cropping to some of them. It's added some green filters to this. I've ignored doing the tablet just because I'm lazy, but let's say I've got a Desktop view, a Mobile view, and a Tablet view, and the client said, they've signed it off, they say, "Yes, I like the designs", "Can you go and start making this?" Now if you are just the designer, you're just working in Photoshop, and then that's it, you don't want to touch the HTML and CSS. You want to hand this off to somebody else. There are things you can do to make their life easy. If you're like me, and you like doing the extra stuff, so you're like doing the front end Web Design, you can also pull information out of here to make your life easier in something like Dreamweaver. 

Let's say it's this font here. If I send it to my Web Developer friend now, he says, "What font is it, what size is it?" And I have to create this kind of big long list of what it should be. Otherwise I send him JPGs, and he guesses, that's no fun. So information that I can give him to make sure that it's going to be perfect, I make sure I click on the right layer, so it's selected. I can go up the top here to 'Layer', and there's this option, 'Copy CSS'. CSS is the styling of the font. Nothing really happens, right? Let's copy it. Then what I can do is I can paste into an email or into a doc like this, I can just paste in the CSS. And it's going to tell him lots of information, probably more than he needs. But he's going to need the font size, what font family I'm using, what color I'm using, the line height, whether it's centered, all sorts of super useful information. 

If you're a developer you might do yourself a favor, and maybe, can you see it's used-- it's created the class based out of the names. So you might give it different names that are just letting it be layer 1, or let's make this, you can call this maybe H1. There's bits in here they don't need, but if you're not sure send them everything, and they'll be able to pick out the bits they need, they probably don't need any of that. Now if Malcolm comes back to me and says, "Hey, I've picked this font and it's nothing like this." I can say, "Hey, what happened? I sent you the perfect details." So it's not just for text, it's useful for boxes. So this big rectangle that I've done up here for my navigation, I can have it selected here, I can go to 'Layer', 'Copy CSS'. Same thing, in a text document or an email, I can paste it in. So there's my Nav bar, there's the color. The opacity for it as well, I'm probably not worried about position, but definitely the height, so it's going to match my mock-up perfectly. 

So you can just work your way around, building up a list of titles, sub-headings, body copy, just to ensure that your website gets matched perfectly. So that's giving out the text, let's look at the images. So let's say this image in the background here, this fellow, the way to make this easier is to name the layer. So I'm going to drag it out here. When you name the layer, this is what the JPG is going to be called. So that's why I've put hyphens in here, because it's best to have images for websites that don't have spaces, they have hyphens or underscores. And I'm making sure that I'm using SEO friendly words. In this case, it's not particular Search Engine friendly, but you get the idea. 

Let's say now I want to send them this background graphic. All you need to do is right click it, and there's an option in here that says-- you can see, it says 'Quick Export as PNG'. For some reason the default is a PNG, and it's not something that I use very often. So what you can do is, you can go to your 'Preferences' and change this 'Quick Export to JPG' On a Mac, it's 'Photoshop CC', 'Preferences', go to 'General'. On a PC it's under 'Edit', right down the bottom you'll find 'Preferences'. Down here, under 'Export', I'm going to switch this to 'JPG'. So JPG, my favorites. Depending on whatever your quality favorite is, I'm going to go to 16. Click 'OK', and it means now, this graphic here, I can right click and just go 'Quick Export'. Tell it where I want it to go, I'm going to go on my desktop. This is going to be images for website. 

You can see, it defaulted to JPG, it used the name of that layer, and hopefully, now on my desktop, here's my images for website, there's my JPG. Back into Photoshop. Now if you have a person who used to use slices, just so you know, slices don't get used anymore, you can use them, but this is an easier way of doing it. Same with this image here, just a little practice. Let's go here, I've given it a good name. I can right click it, go to 'Quick Export as JPG', hit 'Save', you can see how much quicker this is now. Let's have a look, and there it is there. Another cool thing you can do is, let's say I invert this, right click it, 'Quick Export as JPG'. 'Save', 'Replace'. You can see, you can get a nice little flow of getting these images out, ready for your site. 

Let's look at one last little trick you can do when you're exporting stuff for websites. It's called Adobe Generate. So first of all I'm going to 'File', 'Save As', because I want to show you a little trick. So I'm going to stick it on my desktop, this is going to be called 'Dan's Tricks', just because I couldn't think of a better name. We're going to turn on this thing called 'File', 'Generate', 'Image Assets'. So we're using it for website design, we could use this for say social media export. What it's useful for is, over here I've got this thing called Image Books. If I give it the extension jpg, for a JPG, and click 'Return', what ends up happening is, Photoshop-- on my desktop, 'Dan's Trick Assets', so there's the PSD that I made. It's automatically generated this hyphen assets, '-assets' folder. In here, can you see, I've got this one called Image Books. 

So anything you add an extension to will actually automatically create. Let's have a look at this one here. So at the end here, .jpg, without doing anything else, there it is there. Cool, huh? It's kind of like a live dynamic thing. Let's go into here, remember we inverted this? I'm going to invert it back, don't have to do anything else, but you can see, Image Books is updated. So it's kind of a nice live thing. Let's say these icons here, these icons are transparent, right? There's holes in them. So this one here, I'd rather be a .png, because we know PNGs allow for transparency. So just give it a .png, check it out, there's a PNG, ready to go. 

So for that to work you need to have saved your file. Make sure you've turned Generate on. So got the little tick on, nothing really happens, right, until you start naming things with PNGs, JPGs. And Photoshop goes and exports them. Putting the color effects off, hit 'Save', jump back out here, I should have a black version. If you want to stop updating you can turn off Generate, or just copy and paste them out of that folder that it's been made. That folder that it's made called Assets, just put that somewhere else. 

So that's the skinny version of using Photoshop for Web Design. We used lots of Artboards, the guides are super helpful for getting everything to line up. When we're exporting as well, we can export the CSS, which is perfect for things like boxes and type. Anything that's generated normally with code on a website. The things that aren't code, like images, JPGs and PNGs, we can either right click them, and go 'Export As', or we can get fancy and use Adobe Generate. 

All right, that's going to be it for Web Design. I will see you in the next video.