Lessons:27Length:3 hours
  • Overview
  • Transcript

3.2 PSD: Homepage Portfolio Area

Hey, welcome back. In the previous lesson, I started to redesign our portfolio website and I got the header and the slider completed. Now it's time for the portfolio area. And in the previous project, we had this, basically a two column list of items with an image, a project title, a description, and a link for details. Now, I'm gonna switch things up a little bit because I'm gonna use three columns this time. I'm gonna hide the description and this link right here, and instead I'm gonna place the project title in a hover state. So I'll show you that in just a bit. But for now, coming back here, I'm gonna create a new group below the banner called Portfolio Area. Or actually, let's call it content since it's more generic. I'm gonna give it the green color and I'm gonna start with a heading. I'm gonna call this recent pro, projects. It's gonna be Roboto > Light. 32 pixels. So let's bring up swatches, the text color. It's gonna be this. And for letter spacing, I'm going to use about 25. That looks pretty good. Cool. Align this on the center. And then I'm gonna position it roughly three baselines right here. And when I say baselines, means three of these rows. Okay. Recent projects. I'm also gonna add a link here that's gonna say, see all projects. Now, this will be much smaller. It's gonna have this color right here. It's gonna be Open Songs, Regular. Actually, regular, italic. 18 pixels. [BLANK_AUDIO] And I'm gonna paste small arrow there. And also letter-spacing reset to zero. Align this in the center and put it about 54 pixels from that heading. Now, for the portfolio entries. I already have some images cut out to the proper dimensions. So I'm just gonna import the first one with this little puppy right here. I'm gonna call this Portfolio Item. I'm gonna leave about two rows from the link on the top and align it with the grid. Now as you can see this image roughly fits my grid, so it's almost four grid columns, which allow me to add three of these images. Now on top of this I'm going to add a border. So where is it? Where is it? Stroke, one pixel. Color is going to be 919191. It's the border color that we used in the previous theme. Hit okay, and then I want to create like a white spacing between the image and this border. Now, I can do that very easily in CSS, but in Photoshop, you can use inner glow. So, set the blend mode to normal. Set the color to white. Opacity is gonna be 100%. Choke is gonna be 100% so that it's not blurred. And size, just hit three. And there you go. You have a nice border and some padding around the image. Okay, now, what I'm gonna do is, I'm gonna duplicate this. [BLANK_AUDIO] Two times. Roughly align these with the grid. Align this in the center. Okay. And I'm going to copy these. Duplicate them. And I'm gonna use about 27 pixels distance between the top and bottom. Okay, so the, the idea here is when I hover on an image, I'm gonna get some information about it like the project name. So, let's use this last image for the hover state. And the first thing I'll do is I'll add a color overlay. I'm gonna use pure black, with an opacity of about 80 or even 70% or 75. This looks pretty good. So hit okay, and I'm gonna create a new group here, called hover contents. Bring up the text tool, this is the project name. I'm gonna use the yellow for the color. And this will be Roboto, light, 23 pixels. Align on the center, center it with with the image. And I'm gonna place that about 54 pixels from the top. And maybe a bit more. Let's do another 27, right there. So that's 81 pixels from the top. Duplicate this, and create a new text called Click for Details. This is just a small indicator. I'm gonna use open songs for this. Regular. About 14 pixels, color is gonna be white, and let's distance this a bit, like 100. And this, I'll position it about 54 pixels from the project name. Okay, so that is the hover state. So when you hover on one of these images, apart from being a link which will send you to the portfolio page, it will display this additional information. Now the only thing that I have to do on this page is the footer, so that's coming up next.

Back to the top