PSD to HTML 3.9) Preparing the Background Image

Previous: PSD to HTML 3.8)  Preparing the Featured Icons

Next: PSD to HTML 3.10)  Styling the Feature Section

PSD to HTML Complete Course

Transcription of PSD to HTML 3.9)  Preparing the Background Image

hello and welcome back to the PSD to HTML responsive portfolio built in thislesson we’re going to move forward with laying out our featured section butfirst we need to grab this background image so in Photoshop get my move towardselecting option right click on that background image or alter a click ifyou’re using a PC and now we can see that later here and there’s an exposureadjustment above that layer so we turn that exposure just enough we can seethat change the color of it so when I leave that on but I want to turn offeverything basically except for this layer so now hold on to option oralternate PC and click on the icon next to that laterthat’ll turn everything else off but as we mentioned we have this exposure layerabove it we need to turn that leader back on so will turn them back on andthere we go that’s what we’re going for so now I want to take what we’ve gothere and cropper in age to what we can see in the visible area here so many dothat by going to image and trim and I want to trim based on transparent pixelsthis will trimmer image to get rid of all of this extra area so click on OKand will wait a second in there we goit trims its so let’s save this for the web will go to File Save for Web thissummer going to save it as a jpeg file because we don’t need any transparencyaround the edges we just need the image itself so many good to JPG medium andsee if the quality is high enough and I don’t like it did get a little bit toofuzzy around the dark edges so let’s bring their quality at 2:50 and see thatlooks better in those good so we’ll go ahead and save that will save this asfeature hyphen BG for backgroundJPEG images folder so click on Save and now we’ve got that saved I’m gonna go toFile revert and that will revert to our last saved version of this design andnow let’s jump into your browser so far we’ve got our three icons set upand you can see the list bullets on those icons are next to those icons weneed to get rid of those bullets and then arrange these and put thebackground image on it and put the the white borders in between we look backinto Photoshop file we can see where these thin white borders in between eachsection will go back into our code and get started so moved everything into thesite 14 folder and we’re going to scroll down to the new feature section that wecreated in the last video and then we go so I remember we have a a list for youto index HTML and come down to the feature section we have unfolded listwith a class of feature list and unordered list also has a class ofcontainers so that the section of the class of feature can have that greenbackground that extends all the way to the edges of the browser but then thefeature list inside it will just expand the whip if you will of that 900 pixelswe’ve been working with so as we saw before that container or that list stillhas those bullet points let’s get rid of that we’re going to target this featurelist class so we go to our CSS file good on the bottom skip a couple lines Andrearuled for feature hyphen list so for that particular unordered list we’regoing to set our list style to noneher background image on it so we’re gonna see background colon spacereappoint to a URL and then inside parentheses and inside quotes an amusingsingle quotes here a minute I dot dot / images / feature heightened BG died jpgso the reason to take dad died is because this styles of this I’m sorrythe style sheet is in these styles folders who hit dot dot to back up outof the style folder and then we went into the images folder to that featureBG . jpg so then we want this aligns to the top center of are unordered list andwe’re not going to repeat it so no hyphen repeatso there’s a background image and also and set the height we know that ourheight according to a Photoshop file you can go into your Photoshop file todouble check that your height for the section is 300 pixels so let’s go aheadand save that jump back into your browser and refresh and we still don’tsee our background image let’s go back into our files and think anybody did yougo to Photoshop here let’s fact I’m gonna go to find her I believe I seethat accidentally 13 folder forgetting that we just moved to a new folder so inthe images folder foresight foresight 13 excuse me whether it is feature BG somegoing to expand site 14 and just grab that featured eg JPEG and drag it intothe images folder foresight 14 and then we should be good to goso let’s jump back into your browser now and refresh here we go now we can seethat background image so now that we’ve got that in place in our next video willmove forward with lining up our icon side-by-side and centering them in theirrespective sections so thank you for watching and I’ll see you in the nextvideo