3.1 PSD: Header and Slider
It's time to get practical! We're going to lay out the design of a website as a PSD. We'll go through the process of designing the website from scratch, but I'm going to use a portfolio design I made for an earlier course as inspiration. Make sure you download the source files, so you can follow along! We'll start with the header and slider.
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.1 PSD: Header and Slider
Hey, welcome back. So this lesson will mark the start of the exercise part. In the previous course I've built this page that you see right here. It's the Portfolio page. It has three pages. A Home, Portfolio, and About. Now this page is fine if you're like, just starting out and you're a beginner. I used some very basic techniques. But since this is a more advanced course, I'm gonna redesign this page then build it using some more advanced techniques like using less, using some icon fonts, using custom fonts, using grids and so on. So, I'm not gonna worry about the previous PSD. Instead I'm gonna start from scratch and build the new PSD. Using roughly the same structure that I used here. So we're gonna have, like, a header which is gonna hold the logo and menu. Then we're gonna have a banner which will actually be a slider. Then it's gonna be this portfolio area, and the footer. And also, the portfolio will be changed. Instead of the sidebar, we're gonna have a next, previous navigation, to scroll through the projects. And also, instead of displaying the images from a specific project like this, I'm also gonna use a slider. And the about page will remain basically the same. Now, jumping to Photoshop, I have a blank document that's 1300 by 2500 and inside I only have a layer group for my grid. Now, I am going to use an 18 pixel base font size, which means I'm gonna have a 27 pixel baseline. So if I measure this, notice it's 27 pixels in height. And also, I'm using the vertical grid system adapted from Bootstrap 3. Because I'm also going to use Bootstrap 3 in the coding stage. So let's start by adding our header, which will contain the logo and the navigation. I'm just gonna give it color here. I'm gonna grab the rectangle tool. Draw a rectangle that's 1300 pixels in width and about, I don't know, 200 in height. Now I'm gonna position this on top and I'm gonna resize it to about this height, 108 pixels. I'm gonna make it black. And give it, let's call this Header BG. And give it an opacity of let's say about 70%. Cool. I'm gonna hide the grid. Next, I'm gonna do the logo. Now, for the logo, I'm gonna do something really simple. Grab the Ellipse tool, I'm gonna create an, an ellipse that's 54 by 54. [BLANK_AUDIO] Fill it with white, bring up the grid again, and align it with the grid. And notice my logo is two rows high. So by two rows, I mean 54 pixels, like this. Okay. Hide the grid. Call it Logo BG. Now, I'm gonna select it and go to Select > Modify > Contract. And I'm going to contract it by 5 pixels. Hit OK. And then I need to cut out this middle portion. So what I'm gonna do is once I make the selection, I'm gonna hit Cmd+Shift+I to inverse my selection. And then hit on the create mask button, or add layer mask, right here. So that creates a mask on my logo BG, and it cuts out this middle portion. Now I'm gonna go to the Font Awesome Cheatsheet, I'm going to search for camera. There we go. Grab this, text tool, paste that in, change the font family to Font Awesome and now we have a camera icon. Position it in the center. Fill it with white, and that's the logo. Very simple. Now, the Menu. For the menu, create a new group. And we have three menu items: Home, Portfolio and About. Fill this with white. And if you are wondering how I am filling these with white. Well, it's simple. Set your foreground color and background color to the proper colors and then you can use the Shift+Backspace and Cmd+Backspace to fill the current layer. So for example, I have my background layer set to white. And I, I can select any layer that I want, and hit Cmd+Backspace, and it fills it with white. Press Alt+Backspace, I'm sorry it's Alt backspace, not Shift. My apologies. Alt+Backspace to fill it with the foreground color. Great. Now this one, for fonts, I am going to use Open Sans. This is gonna be 14 pixels, bold and I am going to select a tracking of about 50. And also make it uppercase. And I can go to 100 even. Now you would increase the tracking, or the space between letters, to increase readability for that particular text. Okay. Now, I'm just gonna add a bit of space between these items. I'm gonna select this, in header background, line them on the center. Align the text to the left, to the right, sorry. Then show the grid and move it in place, just like that. Okay. Now this is the header. Next, it's the banner or the slider. And I'm gonna put this below the header because the header will now overlap everything on the page. I'm gonna sub the new color. And I'm just gonna import an image here that I've already prepared to save a bit of time. And that's called, Slide 1 BG, and it is 1300 by 600. So I'm gonna align it on the center and on the top. Now, let's have a look. I think this top header needs a bit less opacity. So bring it up to about 80%. Okay. That looks pretty good. Now since this is a slider, it, it must have some kind of next and previous buttons. So what I'm gonna do is use some icons again. So search for Chevron. And I'm gonna use a Chevron Right. Font awesome, bring this to about 55% white. Group it into something that intro group that's called Nav. I'll position it in the center of the slide, bring up the grid and position this on the right side. Now, duplicate it, and copy the chevron left,. [BLANK_AUDIO] And position that as well. Now I'm just gonna decrease the opacity of these to about 60%, or even 50. And you can do that by pressing the number keys. So for 10% opacity, you would press One, Two for 20%, Three for 30% and Zero for 100%. So I'm gonna leave mine at about 50%. Now about the Contents. In the previous theme we had this, the project title, a small description and this button here. And I, I'm gonna keep these, but display them in a different form. Something more elegant. So what I'm gonna do is create a new group called Banner Contents. And inside this one I'm gonna start with a text PROJECT TITLE. And the text here, it's not gonna use Myriad Pro. Instead, I'm gonna use a, a typeface called Roboto. And I'm gonna choose the light version. So Roboto, light, 55 pixels for font size and I'm gonna choose about 25 in tracking. Okay. Now I'm gonna grab the rectangle tool. And I'm gonna draw a rectangle that's about 108 pixels in height. Now let me bring up the swatches here. I'm gonna use this swatch. Set it's opacity to 90%. This, one is gonna be called Heading BG. And I'm just gonna align the text inside it, Header. Align it with the slide. Next, break up the grid and I'm gonna align it with the base line grid, as well. Okay. Now on top of this, I'm gonna add a Shadow. So let me just bring this up so you can see. I'm working with a very small screen real estate here. So I got to move things around. So drop shadow. Angle is gonna be 135 degrees. Distance is going to be 10 pixels, 0 spread and 0 size. And this will create this nice drop shadow and I am going to bring the opacity down to about 30%, hit OK. Okay. Next creating a group called Contents. Bring it below the header. Get the rectangle tool and we are gonna draw something like this, about 700 pixels in width. It should be enough. And I'm gonna choose pure black for this, about 80% opacity. Align it with the center of the slide. Align it with the bottom of my header and then bring it up 27 pixels. That's one base line measure. I'm gonna call this Contents BG. I'm gonna do a small text here. That's basically gonna say, this is a small description, keep it simple and to the point. Okay. Now align this on the center. Open Sans, Regular, 18 pixels. And also, no uppercase and letter spacing is reset to 0. Okay. Now w I'm gonna align this on the center. I'm roughly gonna position it about 54 pixels from the top. And then below this I'm gonna put the button. Now for the button I'm actually gonna use the same style as this one, because it's, I like it, I think it fits very well. So grab the rectangle tool, and draw a button that's about 54 pixels in height. [BLANK_AUDIO] I'm gonna group this called Btn Details, Btn BG. I'm gonna create a new style, add a stroke, 1 pixel. And for color I'm just gonna use the same yellow that I used in the previous theme. Reduce the fill all the way to zero and inside, I'm gonna add some text, See Details. I'm gonna use the exact same color for the text. Open Songs is gonna be Bold, 18 pixels, uppercase, 100 for letter spacing. Now I'm gonna align these and then align the button with the contents. And I'm gonna position the button about, let see 20, maybe 54 pixels from the text above it. And then I'm gonna increase the size of this box by 54 pixels. So that's gonna be about this much. Cool. Okay. So these are the Banner Contents. [BLANK_AUDIO] And this is actually the completed banner. So there you go. Header and our sliders slash banner. Now this is the end of this lesson. Next time I'll take care of the Portfolio area.