Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Lessons:27Length:3 hours
  • Overview
  • Transcript

3.4 PSD: Portfolio and About Pages

Hey, welcome back with the home page complete, it's now time to move on to the Portfolio page. So what I'm gonna do here is go to File > Save As > Portfolio.psd. So basically, I'm gonna create a copy of the home page with a different name. And I'm doing that, because there are a lot of common elements to both of these pages, like the header and the footer. So, I'm gonna keep the header, but from the banner, I'm gonna delete some stuff. Like the navigation, since this is no longer a slider. Instead of this image, I'm gonna use a different one. I have it right here. [BLANK_AUDIO] It's an image, 1,300 by 350. Okay. So delete the old one. Delete the banner contents, we don't need those. Instead of PROJECT TITTLE, I'm gonna say, PORTFOLIO and align it in the center. And this Heading BG, instead of this red color, I'm gonna use the Dark BG color. And what I'll do is simply get all of this and position it 27 pixels down. Okay. Great. Now for the content, I'm gonna delete the PORTFOLIO items. I'm gonna delete this link. This one will actually hold the PROJECT NAME, but it will be bold. I'm also gonna add a smaller text, which is gonna say, CURRENT PROJECT. This will use Open Sans, bold, 18 pixels. Or actually, why not a bit smaller like 16 pixels. 100 there and for the font color, I'm gonna use very light text. Align that in the center, as well. Now the PROJECT NAME, I'm gonna align it with the bottom of the text above and do about 27 pixels and then grab these two and do about 108 pixels from the banner above. So, it looks something like this. Now for each portfolio project, we're gonna have a description text. So, I'm gonna draw a text box, that's about 800 pixels in width. I'm gonna paste some Lorem Ipsum. [BLANK_AUDIO] It's gonna be Open Sans, regular 18 pixels. Use the normal text color. [BLANK_AUDIO] And I'll only keep like two lines of this. And don't forget to increase the line height to 27 pixels. Align this in the center as well about 54 pixels from the top and that's the into text. Now, I'm gonna add some sort of project navigation with two links. One for next project, one for previous project. But first, I'm gonna add a small separator line. That's about 1,140 pixels in width and 1 pixel in height. Now, I choose the, this value, because it matches my grid exactly. Okay. I'm gonna place this right there. I'm gonna call this HR. Use the border color and then I'm gonna copy some of this text. [BLANK_AUDIO] Gonna paste it here, it's gonna say, previous project. It's gonna be italic and Open Sans. This little arrow will be Arial. And let me just set the foreground color to my link color, so it's easier for me to color stuff. Align it there about 27 pixels from that. Duplicate it. This one's gonna say next project. Add the little arrow, align it with the grid and that's basically for the project header. Now, instead of the normal images that I would use in the portfolio project, I'm going to use a slider, just like the one in the home page. So, I'm gonna reopen my home page. I'm going to grab this slider. [BLANK_AUDIO] Duplicate it in my portfolio. I'm gonna push it down. [BLANK_AUDIO] Call up slider. Let's see. Use about three rows there to position it and I'm gonna get rid of the banner contents. So now, it's just a normal slider. Cool. And below that, we'll have the footer. Which again, I'm gonna position using the grid, something like that. And that is the portfolio page. Project information on top, project navigation and slider for the images in that project. Now, I'm just gonna do the About page really quick, because it's very, very simple. File > Save as > About.psd. Change this to ABOUT US or ABOUT ME, whatever you want. The banner will be changed as well, so I'm just gonna bring up the new one. [BLANK_AUDIO] I'm gonna bring up this text, because it's the only thing that I'm gonna keep. Okay. So basically, we're gonna have some description paragraphs, followed by the address that I remove from the footer and then some text for the email address. So to get in touch, simply email me at, let's say, office@domain.com and this will be a link. I'm gonna make it italic. Gonna bring up a footer about here and that is the About page. So that's it for the PSD's. You saw that I was able to create these really fast, because I didn't pay that much attention to, to very minor details, which I'll take care of in the CSS stage. Now the next step is to take this design, slice it up. Meaning, exporting all of the images that we're going to use and then writing the HTML for it. That's coming up in the next lesson.

Back to the top