Exporting your web images

Now in this video we’re going to look at how to get your images out of photoshop so that you can hand them over to your developer to start building a website.

Now what they’re going to want is some web ready images, ok, not just the big photoshop file. If your developer does use photoshop potentially you could just hand over this PSD and leave them to it, but often it’s the designers role to get the images out ready for web. There are pretty much two formats we’re going to work with. There’s going to be a JPG's and a PNG. Now essentially JPG's are great for photographs and PNGs are really great for any kind of linear icons, logos, texts, those types of things. Its reasonably easy to know which one to use because it comes down to file size versus quality. If it looks great and its small then you should be using that format. OK. So you check both of them – JPG's versus PNG – see which is the smallest, see which looks the best, and then use that.

We’re using a new feature in Photoshop CC2015. If you’re using an early version you’re going to have to use something called the slice tool. But because we’re using the newer version we’re going to use this fancy awesome way called the export as.

So to do it, lets look at doing this image first OK? So, selected in my layers there’s this image sitting on top of the box. It doesn’t really matter which one you export, ok, whether it’s the box or the image, it’ll work for both of them. So what we’re going to do is right click it and we’re going to go down to this one called export as. When we get into it, when we know it’s a PNG we can use quick export but at the moment I know, because its an image, its going to be a JPG. So we’re going to go to ‘export as’. Ok, it tells me the size and its tells me that as a PNG its going to be set as PNG this ones going to be set at 76kb and that’s pretty big. So you’ve got a relative scale- once you start getting close to a hundred – that’s far too big for an image this size. So when you’re at a hundred kilobytes you’re way above what it should be.

So what we can do is switch it to JPEG and then you’ve got this quality slider. Very rarely does it go out on 100%. You want to drag it down until you’ve got this kind of balance of its very small in terms of file sizes but there’s almost no noticeable degrading of the image. So what you do is drag it right down to something silly, ok, so we’re down to 15% and its hard to know - is it good - is it bad - so what I like to do is click up here and click back down and decide how low can you go. Now in this case it can get quite low because the image itself is quite noisy and its black and white. We can get away with quite a lot of low quality but you can see the size becoming quite low so when its up a hundred it’s at a reasonably good 38kb but I can get a lot lower. Now my rules - I can hang around there between 60 and 30 depending on the image. This one can go quite low because it is quite noisy so at 30% of its original quality it we’re at 12kb and that’s a nice fine size for me. I’m going to hit export. The last thing you need to do is when you are exporting this – I’m going to hit this little option here so I can see – I’m going to put it on my desktop. I’m going to put it in a special folder called web-ready-images that I’ve made. The only thing you need to know is that when you are naming your images you need to know that there’s no spaces and you need to make sure that you don’t use any of the crazy characters that are along the top of your keyboard, so just keep it to numbers and letters and make sure there are no spaces and then hit export and that’s my JPEG out.

Now we can move around. Let’s say its my portfolio here I’m going to, doesn’t really matter which of these two boxes I select, but I can right click it and say ‘export as’ and hopefully it’ll remember what I last did so 30% so you can see in this case 30% is not great for me so if I drag it up to a hundred it might be hard to see on the video that you’re watching unless you’re in HD but at 30% its not great so different images will allow you to go higher and lower depending on the quality of them and what stuff’s in them.

So I told you, I kind of go up to a high of about 60 - in this case I might go just a little bit higher because the trade off is can -you see down here – we’re at 5kb - something which is quite small, so I’m going to hit export. Great. And that’s going to be portfolio one. Its taken the name off the layer so when you’re naming the layers and you want to save time later on use hyphens instead of spaces. I like to use lower case. Doesn’t really matter when it comes to web design but I like to keep things consistent. Hit export. Great. That’s that one and you can move through and export this one.

Now, what you can do is, you can export lots at the same time so I’ll collect portfolio 2, 3 and 4. Right click, go to ‘export as’ and what will happen it will tile it on this left hand side here so you will have this one selected 30% fine, small, this one here this one ends up at 7kb. Can you see the difference? They’re the same size but there’s a lot of different content going along in this image, a lot more different colours and colour variations so this ones a lot higher and you might be able to go a little bit lower in terms of the quality. It will depend on your image so we can work through them. Ok. This one looks great. This one looks fine. That one looks fine at 40. Maybe not . 60. We’re going to click ‘export’. The only problem with this though is that naming them is going to dump them all in this folder without putting our little hyphens in so we can do that later.

Once we’ve exported them I’m going to go and find it on my desktop under web-ready-images. There is portfolio 1, 2 and 3 and I’m just going to go do my….. You’ll save yourself a load of time later on by using lower case if you want to and make sure there’s hyphens instead of spaces or you can use underscores, it doesn’t really matter. Now the next format we’re going to look at is PNG so the PNG format gets used when one of two things happen - that there is really flat graphics like these icons - nice things like icons and fonts and logos. Anything that has a static flat design to it comes up really good as a PNG. PNGS have a really good way of keeping nice crisp edges at really small file sizes. The other benefit of a PNG is that it uses transparency, whereas a JPEG doesn’t. So I want these icons here to be see through so that I can change the background colour like this and its still see through. So I go through, change the background colour and there’s holes in the middle of here to show it through. If I use the JPEG it doesn’t allow me to do it. It has to have a solid background. Can’t be changed. It’s the same here for these graphics here. Even though they’re an image and I said JPEG are great for images, in this case I’m going to have to take the hit on file size and be a little bit larger because I want transparent background. I’ll show you why. This is a really good example to show you. I’m going to find team-one and right click hit and there is quick export as PNG. Now when you’re new and you’re not too sure of whether it should be a PNG or not, you can use the ‘export as’ which is the slightly longer way. So we’ve got the JPEG format and you can see in JPEG that the quality, if I change it to something like 70, the quality is like 10kb nice and small but its got this white background. The JPEG will not allow transparency, okay? Its not in its makeup. So we’re going to have to do a PNG and we’ve got two kinds.

There is PNG 8 which is fine and this file size is quite small but the actual colour pallet it can use is actually quite small. Its only 256 colours. So if you want to use a full colour PNG you have to use this one up here which is a PNG 24 even though they don’t write it there. So PNG 8 versus PNG4 you’ll see the file size is substantially different, okay? This one here up to PNG24 this is really big ok but this is the trade-off of having transparency. JPEG's are really small but graphics, they have to have transparent backgrounds and have to use full colour. Have to use this PNG here.

So I’m going to use full colour PNG, going to hit export and team-one. Click ok. So I should now work through and do the same for the other two heads and the rest of the images here. Let’s look at doing it for this icon along the top and it will be the exact same process of exporting this image along the bottom here. I’ve got my icon and I know that this needs to be PNG. Why? Because it needs transparent background which default makes it a PNG and it is a nice flat graphic which means it’s going to be nice and small. Right click and I can use my quick export as PNG because I know its going to be a PNG because its flat graphics, it needs transparency, it’s definitely a PNG, so I’m going to hit export as PNG and I’m going to go straight to here and I’m going to put it on desktop under my web-ready-graphics and I’m going to put it in there.

Now I’ll just work through the different icons and say export as PNG . Lets just have a quick look at the PNG size. So you can see this one here is 90kb - really big -because its PNG trying to do what JPEGs do, but you can see PNGs with transparency doing what it does well , see it’s down to 2kb. Nice and small. These are the kind of graphics you’re going to need to hand over to your web developer for your website build.

Now I love to share so I’ve made a few of these videos free. Of course, though, I’d love for you to go on and do my full course of over 50 videos. There’s a discount code in the description. Please like and subscribe and Haere Ra good youtube people. Now I’m saluting and waving but you can’t see that can you?