PSD to HTML 3.5) Preparing the Social Icons

Previous: PSD to HTML 3.4) Styling the Menu Items

Next: PSD to HTML 3.6) Arranging the Social Media Icons

PSD to HTML Complete Course

Transcription of PSD to HTML 3.5) Preparing the Social Icons

hello and welcome back to the PSD to HTML responsive portfolio build in our last lesson we finished up our header except for the images over here on the right to know when to export those images from Photoshop so that we canactually use them here and moved everything into the site ten faltered innavigate today here all the changes we make in this lesson will be saved inthat site 10 folder so it’s Jim back into Photoshop and talk about how we’regoing to export these layers now if you watch the series where I created thisparticular design in Photoshop then you know that I pulled these icons from theofficial YouTube and Twitter and Facebook sites and and we’re going touse these official logos or official icons on our site but first we need toexport them now it’s gonna be easier to align these properly horizontally if allof these images are the same height now we can see the icons themselves aredifferent heights so I’m going to say these s transparent PNG files and theyall have the same height so some of them will have more transparent pixels aroundthe edges but ultimately that will make it easier to adjust everything analyzingeverything vertically so what I want to do is find the largest with them heightfrom any of these icons and if we option right click on the YouTube icon forexample when we have the move tool selected or three using a PC Alton rightclick on that later on that item then that layer will be selected we can findthat YouTube layers here now keep in mind that that option right click oraltering click doesn’t always work sometimes you’ll have multiple layers ontop of each other in a particular area and if you have a layer above thisYouTube layer of for example which is somewhat transparent but still handssome pixels in thearea then it might get in the way of trying to click on the YouTube area buteither way you just need to locate that YouTube layer and I’m going to come andclick on the thumbnail area for that we are to create a selection that selectionof an open up the info panel and we can see the width and height its 28 pixelswide and 20 pixels tall you’ll notice if we control click or command click on theTwitter earlier and makes a selection of the bird and can see that it is 28pixels wide but 23 pixels tall and if you do the same thing for the Facebooklater bc its 28 by 28 the largest number we saw there for any of those dimensionsis 28 pixels so let’s go ahead and create a new Photoshop file that’s 28May 28 pixels so many command and control in a few using a PC gonna makeit 2828 pixels click on OK and we want these have transparent background somany create a new layer here and then drag the background layer to the trashcan so that all we have is this one transparent layer then we’re gonna goback into our responsible folio large PSD file an amended command or controlthe NNPC to deselect our selection and then we’re gonna grab these icons andmove them into that untitled Document and we can do that by grabbing the layerthat we need to get the U-two Blair selected now with the move tool I’mgonna grab the YouTube icon dragon up to the untitled one document and then whileholding on to shift I’m gonna release so after you drag it onto the untitled tabyou can hit the Shift key and then when you release your mouse button afterholding onto the shift key you’ll see that it drops that image or thosegraphics right in the center of the file so then we’ll come back to our portfoliopiece and will select the Twitter later and do the same thing for it will dragit onto the untitled there once the untitled file is selected then we canhold on to shift his shift and then release your mouse button and that willput it right in the center of this filethen we’ll do the same thing for the Facebook player will click to selecteddrag it onto the tab for the entire layer in the shift and release yourmouse button and put it where we need it now let’s test to make sure they reallyare where we needed to be sometimes they’re gonna be one or two pixels offso if I turn off the Twitter and Facebook layers and just leave theYouTube later on as well as the empty layer at the bottom I’m gonna fill thisempty later with black interior selected to make sure that black is selected froma foreground color and then we can fill the selected layer with the foregroundcolor by hitting option delete on a Mac or Alt backspace on a PC and we canalready see that we’re one pixel off here and you’re probably discover thatall of these are gonna have the same issue we’re all going to be about 1pixel and it’s kind of hard to see at this size but if we assume n we can seethat the top left corner is rounded out the top rate bottom right and bottomlester all square if you grab that Facebook layer here and with the move tolimit the left arrow key wants and the up arrow key ones and that gets us backto where we can see the entire image we can see all four corners rounded so whenyou’re dragging and icon or a graphic into another file and use the shifttrick and then release the mouse button it puts it pretty close to the center ofthe final but sometimes it’s one pixel off so you staying tuned engine intoplace you can see the entire icon here and there you go so you can turn that weare often the tweet earlier back on and after you turn it back on using the iconhere she’s me then you also make sure to click the layer itself to selected andthen again with the arrow keys were in addition to the left ones and up onceand when we don’t really need to move it down one and we just want to get itlooking like it’s pretty much vertically centered males gonna till its turn theTwitter layer off the YouTube later on and then click to select the U-two Blairand then againleft arrow keys to move it left one and then the up arrow key and it lookspretty good so then we can command one or control and assume back out twohundred percent and we can delete this layer one at the bottom line yes I wantto delete it so now with each layer selected one at a time we’re going tosave these winter project files folders so right now and you’ll see how onlyhave the YouTube later turned on the other two were turned off you know we’regonna go to File Save for Web and I want to see this is a PNG 24 file make surethat transparency is checked and click on Save then enter project files folderamnesty this new site 10 folder and a minute read a new folder inside thatfolder shift command and create a new folder they’re gonna call this newfolder images so in the images folder I’m gonna see this item as YouTube thatP&G and that’s the same name if you remember that we gave it in her coat ifwe jump back into text me and look at our codes here we can see they’re calledyou to death P&G Twitter and Facebook duh P&G so let’s go back into our finalturn off the YouTube later in turn on the Twitter earlier and then once againFile Save for Web PNG 24 click on Save and we’ll see this one has Twitter notbeing Gduring the two earlier off the Facebook later on enemies the keyboard shortcutfor Save for Web this time which is command shift option in S or using a PCcontrol shift all 10 s and then again make sure you get PNG 24 withtransparency checked in will click on safe and we’ll see this one asfacebook.com G so now that those files are saved we jump back into our browserand refresh we can now see our images over here and although we have left todo is to align them and arrange them where they need to be so we’ll get tothat in the next video for now it’s just make sure that all the files are savedand we’ll move on thank you for watching