PSD to Responsive Website Tutorial #2 – Slicing Images in Photoshop

yo what’s going on chaps welcome to your second PSD to responsive website tutorial and in this video we’re just going to dive in and start slicing up some images in Photoshop ah okay then gang so as you can see I’ve gone ahead and opened up this PSD template in Photoshop and I precisely want to show you what we’re going to be slicing which portraits we need to extract from this PSD file so we can use them in our improve so what you want to do is head down to this slice tool right here you might need to right-click and make sure it’s slice tool that’s adopted right here and not this one or this one okay so adopt that and then what you want to do to slice something is just click and then drag around the image that you want to slice okay just like that and then that little yellow-bellied frontier will pop up doubled clink it and you can give your slicer name your likenes your appoint and it’s some specific width and altitude qualities if you just wanted to tweak those also so let’s do rid of that you can see I’ve already made some slicings these little blue chests right here and now and now and here and here they’re all the slicings are made for this website so I’m just going to go through each one by selecting the slice select tool to show you what the dimensions are what’s called them so if you want to exactly start these slice as well we’ve got this one for the logo and it’s just called logo and these are the dimensions right here now we could use precisely ordinary text in the HTML to make this logo but I’ve not got the actual am font file for that so I’m just going to make it any epitome for now to save some time next what I’ve done is this banner right here so it’s this big and it’s called banner and these are the dimensions so that’s okay these down here they are all announced icon 1 or icon 2 or icon 3 etc and they’re all 96 by 96 pixels so you might wanna slice those as well these thumbnails here I’ll order click one snap two I feel yeah and then snap three and “theyre all” 380 by 270 then down now we’ve got this little quotation mark for the block wall area and if we redouble clink that you can see I’ve called it excerpts and these are the dimensions and then finally down here if we zoom in in the footer “youre seeing” these little Twitter icons these little bays Fowls I exactly sliced one of them we don’t need to slice all three because we’re going to use the same one for every single tweet and I’ve capture that sugared and it’s 13 by 10 pixels so I’ve sliced that as well now if you’ve opened this PSD file open in Photoshop is where you might have noticed some little extra icons down here now I have removed those for the sake of this tutorial exactly to save some time we’ve got icons here I’m going to show you the technique and the same technique would be used for these things over here but for quickness I’m just going to do it on these things right here and delete those ones okay so that is it my friends that is the entire Photoshop file slice these are all the epitomes the work requires so what you want to do when you’ve done that is go to file and save for web machines and then what we need to do now is go through each slice that we’ve made by clicking on it make sure this is selected this icon then we can click on them so click on the slices and make sure you choose the appropriate format for each one now this is a flat epitome so we’re just going with PNG 8 this is the banner so I’ve gone with a JPEG medium quality merely to save some file size you can see the file size down there that’s why I’ve not made it high-pitched if you framed it on maximum “youre seeing” jumps up to night 1k but medium is 12 K so it saves a great deal of file size and the quality isn’t increased from that much so I’m just going to hold down infinite to drag down here and then click on this this is a PNG 8 as well as is this and the other icons and this is a jpg again medium caliber as are the other snaps you can see the rolled JPEG medium quality and then this quotation mark is a PNG is just a flat persona as is this tweet down now okay PNG 8 so once you’ve done that for each slice just got to save and then what you want to do is select all wedges here because that only conveys it’s going to say about the idols that you’ve sliced and not the extra stuff that Photoshop deems necessary for some reason and so made to ensure that I were chosen all slivers and then only sounds Save you can see I’ve already done that li save all of those personas there in an images folder okay you might be looking at this and thinking well I’ve not sliced that that is an extra little icon that I’ve created for the mobile design and we’re going to cover that in the next seminar so go ahead and sounds Save and then we are done chaps so in the next seminar what we’re going to do is we’re going to take this pattern right we’re going to make a new PSD and we’re going to transfer this to the brand-new PSD to represent or to create a portable goal so we’ve got a kind of useful starting point on where we need to get to for mobiles as well so if you have any questions whatsoever feel free to propel specific comments down below otherwise that guys don’t forget to subscribe share and like and I’ll told you in the very next video

digital marketing

As found on YouTube

Share this article

Leave a comment

Related Posts