PSD to HTML 3.8) Preparing the Featured Icons

Previous: PSD to HTML 3.7) Styling the Body Text

Next: PSD to HTML 3.9)  Preparing the Background Image

PSD to HTML Complete Course

Transcription of PSD to HTML 3.8)  Preparing the Featured Icons

hello and welcome back to the PSD to HTML responsive portfolio built in thislesson we’re going to tackle the Features section here where we have abackground image few icons and a few pieces of text me if we look at it as itis in our browser right now we don’t have a lot to go off of we put our iconsinto our HTML but we haven’t actually made those icons yet so they’re justshowing up as into links so let’s start by going into Photoshop and let’s takethese icons here and make something out of them or create a new image thatcontains these icons so I’m going to option right click on one of these iconsor alter a click if you’re using a PC in that should select that icon later andit’s called icon web design and I’m going to come and click on that later tomake a selection of it and then look in our info panel just to see how bigdeselection is so this is 64 pixels by 64 pixels so I’m gonna create a new filethat 64 by 64 pixels and will create a new blank layer there and drag thebackground layer to the trash can so that we have transparent pixels here andthen we’ll jump back into our Photoshop file and will grab that icon web designgraphic and drag it out onto that new file we just created under shift let goof your mouth and that will pace the icon in the center of the file so thenwe’ll do the same thing for other two icons I’m going to option right clickHerault right click on the graphic design icon that will select the graphicdesign icon later and then we’ll drive that into the untitled Document shiftand released to drop it in the center and then one more time election rightclick on video production icon make sure that’s the right layers selected andwhat’s at selected will click enjoying it up onto the untitled tab and then hitshift release our mouse and that will pass it right in the center so thenwe want to make sure that everything is a land property so go down to this emptylater one here I’m in a sleek black asthma foreground color in the option toleave or Alt backspace on a PC to fill that later with black then let’s turnall but one of our icons so that we’ve got the icon web design later stillturned on and we can see that our icon needs to be nudged 1 pixel into the leftone pixel to keep from dropping off the edges and it looks good so probably needto do the same thing with the rest will turn off the icon web design laterturned on the icon graphic design and then click on that later to make sureits elected and then we’ll hit the up and left arrow keys each once and thenwe’ll do the same thing for the icon video earlier and were ready to go soI’m going to turn off your 1 I’m just got the icon video later turned on rightnow so I’m going to save for Web File Save for Web make sure P&G 24 selectedtransparencies turned on and will click on safe I’m gonna save this in the let’sjump down to the psych 13 folder which is where we’re working right now and allthe changes we make in this lesson will be saved in that same 13 folder willjump into our images folder and we’re going to add this particular image solet’s call it let’s look at her reached email to see what we called it there soit’s jump into index study gmail and it looks like accidentally closed so manyjump into finder and then once again dragged site 13 on to text me their egoso there’s our index study shemale file will scroll down to earth featuredsection and we called these just web graphic and Video Dub P&G easy enough sowe’ll come back into Photoshop and this is our video I canceled just callingvideoed up here and she then we’ll turn that layer off turn on the graphicdesign later and then once againFile Save for Web PNG transparent click on Saveand this one is for graphic design so graphic that P&G will turn off thegraphic design later in turn on the web design later and then one more timeFile Save for Web and PNG transparent save and will save this one as web thatP&G so now we can go into chrome and refresh and we can’t really see itchange here first of all we need to make sure I’m looking in the right file itshould be site 13 folder / index study Gmail and we see that there’s no morespacing in between he text here and that’s because these images have beenplaced on the page but the images are white and it’s on a white background soit’s kind of hard to see right now so just to make sure our images were allpulled incorrectly I’m gonna go ahead and put our dark grey background coloron this featured section so let’s jump back into HTML and here’s our featuredsection so he’d section element that has a class of future so it’s give that adark grey background color and we’re going to open up our site that CSS fileI’m going to scroll all the way down to the bottom and create a new section herefor the featured section and then will point to the future class which againremember that entire section element has a classic feature and will just give ita background color and we’re going to use a dark green value of 36 36 36 sowe’ll save that and then we’ll jump back into chrome and refresh the page and nowwe can see those icons in place soon now that we’ve got our images prepared andin place we’ll go ahead and move on to the next video we will pull in thebackground images and get everything laid out like we wanted to thank you forwatching and I’ll see that