Photoshop CC 2015 Web Design Tutorial | Learn How To Optimize Images for Web Photoshop – 45/48

hey youtubers my refer is Dan and following the adjournment of this video you will know how to export your Photoshop personas ready for your website this particular video is a free extract from my route called how to make money building professional website mock-ups exercising Photoshop if you really want to start making money as a network decorator there is a discount code for my full trend in the description sales for java now let’s say no to the slice tool and yes to export ants now they really should have given that a jug refer exportation as there’s a exceedingly six years now in this video we’re going to look at how to get your portraits out of photo shops that you can side them over to your makes start building the website now what they’re going to want is some web moderately likeness okay not just the large-hearted Photoshop file if your make does employment Photoshop the potentially you could just hand over this PSD and leave them to it but often it’s the designer’s character to get the likeness out certainly for web there are pretty much two formats we’re going to work with there’s going to be a JPEG and a PNG now basically JPEGs are great for photographs and PNG’s are really great for any kind of linear icons symbols text those types of things it’s reasonably easy to know which one to use because it comes down to file size versus quality if it looks great and it’s small then you should be using that format ok so you check both of them jpg versus PNG examine which is the smallest appreciate what inspections the best and then squander that we’re working a new aspect and Photoshop CC 2015 if you’re using an early version you’re going to have to use something called the slice tool okay bad because we’re use the newer version we’re going to use this fancy astonishing direction called the export ads so to do it let’s look at doing this image first okay so slicker than my strata there’s there’s idol sitting on top of the box it doesn’t really matter which one you export okay whether it’s the box or the epitome it’ll work for both of them so what we’re going to do is right sound it and we’re going to go down to this one that says export Aires when we get until when we know it’s a PNG we can use a acceleration play but at the moment I know because it’s an persona it’s going to be a JPEG so I’m gonna come export airs okay so it tells me the width and it tells me that as a PNG this one’s going to be set at 76 kilobytes and that’s pretty big so you’ve got a relative proportion formerly you say getting close to 100 that’s far too big for an image this immensity okay so when you’re at 100 kilobytes your space kind of above what it should be so what we can do is switch it to jpeg and then you’ve got this quality eventually very really does it go out at a hundred percent you want to drag it down until you’ve got this kind of balance of it’s very small in terms of file sizes but there’s almost no see debase of the epitome so what you do is you drag it right down to something silly okay so we’re down at fifteen percent and it’s hard to know is it good as a bad okay what I like to get it on precisely sounds up here then sounds back up and decide how low-grade can you go now in this case it can get quite low because the image itself is quite noisy and it’s black and white we can get away with quite a lot of low quality but “youre seeing” the size becoming quite low so when it’s up at 100 it’s at a reasonably good 30 8 kilobytes but I can get a lot lower now my rules I kind of hang around in there between 30 and 60 depending on the portrait this one can go quite low because it is quite noisy so at thirty percent of its original character we’re at 12 kilobytes and that’s a nice penalty size for me I’m going to export the last thing you need to do is when you are exporting this song let this little option here so I can see I’m going to introduce it on my desktop I’m going to settled it in a special folder announced network somewhat likeness that I’ve made and the other thing you need to know that when you are naming your likeness okay simplicity you need to make sure there’s no openings and you need to make sure you don’t use any of the crazy people that are along the top of your keyboard so to keep it two quantities and characters and make sure there are no rooms okay and affected export and that’s my jpg out now we can move around let’s say it’s my portfolio here i’m going to doesn’t really matter which of these two cartons i select but i can right click it and say x 4′ s and hopefully it’ll remember what I previous okay so thirty percent you can see in this case thetable since not great for me okay if i drag up 200 it might be hard to see on the video that you’re watching unless you’re an HD okay but it is at thirty percent it’s not great so different images will allow you go higher and lower depending on the quality of them in what materials in them okay so I told you I kind of go up to about a high of 60 okay in this case I might go just a little bit higher because the trade-off is can you see down here bru at five kilobytes to something that’s quite small something export great and that’s going to portfolio1 it’s taken the honour off the stratum okay so when you are naming your mantles and you want to save some time later on is to use hyphens instead of spaces I like to use lowercase doesn’t really matter when it comes to web design but i like to keep consistent principal exports huge so that’s that one and you can move through export this one now what you can do is you can export much at the same time so I’m going to sound portfolio two three and four claim clink go to export as and what will happen is it’ll tile it on this left-hand side now so you have this one adopted ok so time percent’s fine small-time this one here this one aims up at seven kilobytes can see the difference that the same size but there’s a lot of different content croaking along in this image okay a lot more different dyes and dye alterations so this one’s a lot higher and you might be able to go a little bit lower in terms of equality okay it’ll depend on your idol so weakly way through them okay this one looks great this one looks fine then we’ll justify at 40 perhaps no 60 we’re going to sound exportation no problem with this though is that naming them it’s going to dump them all in this folder without putting our little hyphens and so we can do that later so as exported them I’m going to go and acquisition it on my desktop and we’re really epitomes there is portfolio one two and three and I’m just gonna go do my you sell yourself load of meter later on by using lower case if you just wanted to and make sure this hyphens instead of openings or you can use underscores it doesn’t really matter now the next format we’re going to look at is PNG so PNG format does use when there’s one of two things happen that there is really flat graphics like these icons okay nice things like icons and typefaces and mottoes anything that has a really joyful flat designing to it comes out really good as a PNG PNG’s have a really good way of preserving delightful snappy margins at really small file sizes the other benefit of a PNG is that it employs opennes where as a JPEG doesn’t so I crave these icons here to be see-through so that I can change the background color like this and it’s still see through okay so i can go through change the background hue and there’s loopholes in the midst of here to show it through okay if I use a JPEG it doesn’t allow me to make love it has to have a solid background can’t be changed it’s the same now for these graphics now even though there are an image and I said JPEGs are great for images in this case I’m going to have to take ahead on file size to be a little bit larger because I miss transparent background and I’ll show you why this is a really good example to show you so I’m going to find unit 1 i’m going to claim sound it and there’s immediate sellers PNG now when you’re new ok you’re not just sure if it should be a PNG or not you can use the export auras which is the slightly long way so we’ve got the jpg format you can see in jpg there the quality if I hang that up to something like 70 aspect is what 10 kilobytes nice and small but it’s got this white background the JPEG will not permit clarity ok it’s not an intern makeup so we’re gonna have to do with PNG and we’ve got two styles there is PNG eight which is fine okay and thus file size is quite small but their actual dye palette it can use is actually quite small clanged 256 shades so if you want to use a full-color PNG you have to use this flan up now which is called a PNG 24 even though they don’t write it there so PNG eight ballads PNG for you’ll see the file sizes substantially different came this one here up to PNG 24 ok this is really big ok but this is the trade-off of having transparency JPEGs really small but graphics that have to have translucent backgrounds and have to use full-color have to use this PNG now ok so I’m going to use full coloring PNG export great and team one click ok huge so I should now work through and do the same for the other two heads and the remainder of the images now let’s look at doing it for this icon along the top and it would be the exact same process of exporting this image along the bottom here I’ve got my icon ok and I know this needs to be a PNG why because it needs transparent background which default moves it a PNG and it is a nice flat graphic which conveys it’s going to be nice and small right click and I could use my rapid export as PNG now because I know it’s going to be a PNG because it’s flat graphics it needs clarity it’s definitely a PNG ok so I’m going to thump exportation as PNG and then going to go straight to here and I’m going to settle it on my desktop and my with Britta graphics and I’m going to make it in there now I only work through the different icons and to say export as PNG let’s have a quick look at the PNG sorrows so you can see this one now 90 kilobytes really big because it’s a PNG trying to do what JPEGs do but you can see PNG’s with transparency doing what it does well see it’s down to kilobytes reading big addition these are the kinds of graphics that you’re going to need to hand over to your network make for your website built now I love to share so made a few of these videos free of course though I’d compassion for you to go on and do my full direction of over 50 videos there’s a deduction system in the description please like and subscribe and hide it our good YouTube beings now I’m saluting and motioning but you can’t see their Kenya

Dan

As found on YouTube

Share this article

Leave a comment

Related Posts