PSD to HTML 3.11) Preparing the Portfolio Images

Previous: PSD to HTML 3.10)  Styling the Feature Section

Next: PSD to HTML 3.12)  Laying Out the Columns

PSD to HTML Complete Course

Transcription of PSD to HTML 3.11)  Preparing the Portfolio Images

hello and welcome back to the PSD to HTML responsive portfolio build now thatwe finished with our portfolio section are featured section are designedservices we’re gonna move on to our portfolio samples section but first weneed to prepare our images for exportso we have a background images here but I don’t want to see them as is becausesince we’re creating this responsibly these boxes are going to change size butI don’t want the image within it to change size instead I want theboundaries of this box to kind of conceal and reveal what’s behind it asit changes size so what’s it jumps down to the smaller version we can see thatthis section with our portfolio items in it it’s actually wider than it is in thelarge version but as it gets wider it’s revealing more of the image behind itit’s not stretching out the size of the image instead it’s just revealing moreof the image that’s what we want to achieve here so in light of that what weneed to do is we need to drill down to each of these images and save it as animage in and of itself so I’m going to option right click on the laptop imagehere and if we option click on the icon for that later we can see thateverything else disappears but we still only see the outline that we saw beforeand that’s because it’s currently linked basically to this rectangle one layerbelow it and you can see that it’s indented above that layer and there’sthis little bent arrow over it what I’m gonna do is option click or alt clickyou using a PC in between those two layers when you see this little when yousee your cursor change into the square with the broken arrow next to and if weclick now you’ll see a ton links those two layers there are no longer linkedtogether and now we can see the entire image well I don’t want to mess withthis file too much on its plate this image and put it into a new filesomebody create a new Photoshop file here and I’m gonna go ahead and make ita little bit larger than it needs to be will do you 1000 pixels by 1000 pixelsso it’s way too big but we’re going to trim it down once we get our image inthere so go back to file here and I’m gonna grab this laptop later and drag itonto that untitled later and drop it you can drop it anywhere you want to andthen we’re just gonna crop it so what’s dragged it up to the leftmaybe with a little bit of white space surrounded but once we get it we wantedI’m gonna hit see to switch to the crop tool and and will join up the top armsare in the bottom right corner until we get about right there then enter toapply that crap in there we go that’s what we need so we’re gonna hit FileSave for Web and we’re going to see this as JPEG medium seems to work outactually bumped it up but the quality at 2:50 so it’s actually a little higherthan Medium or click on Save and we’re going to save this we go back to aproject files folder I’m gonna say this in the site 16 folder in art imagesfolder and I’m gonna save this as laptops . JPEG or click on Save and thenwe go so know I’m going to hit Command Option Z to basically undo that lastcrop that we made or control all to see if you’re using a PC and we’re gonna getrid of that laptop later then we’ll jump back into her large file in a minutecommand options you couple of times until you get back to impact might beeasier if we just go to File revert to get back to this a saved version v2switch the move to a new let’s move on to our second portfolio item so I’mgoing to option right click or alter a click on a PC on this second image andthat’ll take us to the Acme color layer so I’m gonna grab that later and justdrag it up onto the untitled tab and release ittheir ego and this one is going to trim around the edges here so instead ofusing the crop tool we can actually use the trim option under the imageyou and we can trim based on the top left pixel color which is whites who usethat white color to base the trim on and you’ll see it trims away all that whiteso then we can see that and since this is a simple to color image we can changethis to a gift and probably get much better compression on it so I’m gonna godown to save and we’ll see this as Acme logo . give in that same images folderand then I’m going to back up to before we trimmed it and get rid of that Act melater then we’ll just back over to responsive portfolio large and come toour third items here so option right click to select that later this tabletflat layer and will drag that up onto the untitled tab and release it here andI’m gonna crop this one as well bring it up here and making a crop it to tightenthe leaves some breathing room around the edges there and that looks prettygood so we’ll save that for web I just use the keyboard shortcut command shiftoption in as or Ctrl Shift alton as if you’re using a PC and we’ll save that aswell and I’m gonna save this one actually let’s cancel that i’m gonnasave this as JPEG medium that brings a quality down a little too much you bringthat quality at 2:50 and that looks good so click on Save and inner images folderand Nina see this as tablet jpg so then will undo that trim or that crap and getrid of that tablet flat layer go back to our original file free to switch to themove tool and then we’ll grab our logo here so I’m going to option right clickon that and then grabbed the Acme insignia later grab that later in dragit onto entitled 1shift and released I’ll put it right in the center you’ll notice it dragged thisother layer with it because those two layers were locked together but that’simportant because if we turn off this background layer and lets unlink thoselayers by clicking on one of them and click on the link I come down here andif we turn the shape one layer off and gets rid of that white background on itwe need that so many turn that back on and then returned this background backon and just double-click in the empty area of that later and click on OK andthat basically unlocks it then we’ll double click again and I’m going toapply a simple let’s do color overlay and we’re going to choose kind of amedium to dark gray color for the background click on OK and then letscrop it so get up and leave plenty of room around the sides just like we didbeforelike so it’s pretty good and since this is a simple color scheme as well we justhave 45 colors were dealing with will change this went to a gift as well andwill come safe so we’ll see this one in the images folder as a logo for acnelogo or a logo with just the letter A and it I guess and go so that gets herimages ready in the next video will pull these images and search styling thesection or actually before we do that we also need to grab our icons so let’s getrid of this layer herefact will just create a new empty later and get rid of all of the other layersexcept for that MT lair and then we need to grab her icon so let’s grab this iconhereicon web design copy will drag that up onto the untitled layer and release itand then I’m going to go to image let’s actually before we don’t go in pull allof those icons and so we just have three different ones one of them is appearingtwice because we have two different graphic design samples so grab thesecond one-hitter option right click rolled right click on a PCdrag that onto the untitled Document hold under shift so that will center andput it right on top of the other one and then finally this video icon right clickoption right click excuse me that dragged out onto the untitled Documentshipped and release so we’ve all been placed in the center so now we can go toimage trim based on transparent pixels here and click on OK and that will turnit down so then we’ll turn off all of the layers except for the web designcopy later and we’ll save that for the web as a PNG 24 with transparency turnedonclick on Save and this is the web design I can’t say we’re gonna save this one asweb I found small believe that’s what we called it in a HTML to double checkindex HTML and if we go down to the portfolio section here we go withheightened small dot P&G website and smoke so we got that right let’s savethat and will turn off the web and turn on graphic and save for web again we’llsee this one as graphic that P&G I’m sorry what’s canceled that it should begraphic i finna small that P&G then we’ll turn that off during the videoplayer back save for web and will see that as video I found small that P&G sonow all over images are saved and ready to go to the next video will get startedstyling the section so thank you for watching and we’ll see you then