3.3 PSD: Footer
In this lesson we'll design the site's footer.
1.Introduction1 lesson, 01:35
2.From Beginner to Pro7 lessons, 38:33
3.Creating a PSD Design4 lessons, 35:36
4.Rewriting the Code14 lessons, 1:42:32
5.Conclusion1 lesson, 00:57
3.3 PSD: Footer
Hey, welcome back. In the previous lesson, I finished the Recent Projects section. So let's see what we've got so far in our page. There's the header, there's the slider and the recent projects. So let's take care of the footer. Now, as usual create a new group here. I'm gonna use violet for for this group. And let's take a look at the footer in the previous theme. So, we had two sections basically. A Subscribe to Newsletter with simple form and Get in Touch. Now, what I'm gonna do here is get rid of this second section move the address and email in the About page and move these two icons in the footer. So, this dark background will be dedicated to the subscribe section. All right, so lets do that. I'm gonna start with a rectangle tool, 1300 by 200 for example. [BLANK_AUDIO] I'm gonna use the dark BG color. [BLANK_AUDIO] Okay? Let's position this, about three rows from the top section. I'm gonna call this 4BG. I'm gonna make it a little bigger and what I'll start with is what I call a header icon. Grab the rectangle tool, draw a rectangle that's about 81 pixels in height. Okay, I'm gonna use the yellow color for background. [BLANK_AUDIO] 90% opacity and basically I wanna copy the style of this header right here. I right click on the layer and you can't actually see it because it's off screen but you do have an option called copy layer style. So copy this, go back here and paste a layer style and notice it applied the same drop shadow. I am gonna call this icon BG, align it on the center. Position it like this and then bring it down 27 pixels. Okay, cool. Now, I'm gonna go back to my cheat sheet and I'm gonna grab an envelope icon. I'm gonna grab this one. [BLANK_AUDIO] Font awesome, about 55 pixels in, in font size. Align it on the center and there you go. Next, I'm gonna have some text like I used here and I'm gonna replace this text with the one I had in the previous site. Align it on the center, make this a bit bigger, something like this. Align it on the center as well and position this about 54 pixels from the top. Now, below this, I'm gonna have my form so create a new group called Form. Rectangle tool, draw a rectangle that's about 250 by 54 pixels. White, enlarge this to about 300 pixels. [BLANK_AUDIO] About 54 pixels there. [BLANK_AUDIO] I'm gonna call this Input BG and then I'm gonna have some text inside it like your email address. This will be the placeholder text so for color I'm gonna use this light text or very light text actually. I'm gonna use Italic about 18 pixels padding and that is the input. Now, I'm gonna duplicate the button, the Btn Details from from my header, right here. I'm gonna call this Btn Subscribe, bring it down and again 18 pixels from that side. I'm gonna call this Subscribe. Okay now, align the form in the center. I'm gonna increase the size of this, background to about 300 pixels or just use the grid. Okay, almost done, now the only thing left to add are these 2 icons and some copyright information, so I am just going to copy this. [BLANK_AUDIO] I'm gonna paste it right here. It's gonna be open songs irregular. [BLANK_AUDIO] Using the text color, 0 for letter spacing and normal case. Align this on the center and now I'm gonna add the Twitter and Facebook icons. So the first one is twitter-square using font awesome. It's gonna be 27 pixels in in font size. I'm gonna use color 2 from my swatches. And group this as social. Next, duplicate it and I'm gonna choose Facebook. Copy this paste it in. Let's add a bit of distance between these two. About 12 pixels should should suffice. Next, align it in the center. Leave about 54 pixels from the top and do the same with this and that's it basically. Let's have a final look. So, header, slider, area for recent projects. Hover state for a specific project. There's the subscribe area and the copyright information with the social links. That's it for the homepage. In the next lesson, I'll build the portfolio page.