How to Create Your Own Single Page Portfolio Design in Photoshop
Today we’re going to be creating a single page portfolio design that can be used to showcase your design work and allow people to get in touch with you. You can use this design as your full blown portfolio, or as your personal web page (I may even be switching my personal blog to a modified version of this design).
I will be as detailed as possible in the tutorial, but if you have any questions, feel free to let me know in the comments and I’ll do my best to answer them.
Lets do it!
Step 1: Setting up your photoshop document
The first thing we’ll be doing is setting up our photoshop document. We’ll start by making the width 1000 and the height 1500.
Now you’re going to fill your background layer with #ebebeb. After you’ve done this, make sure you download the 960 grid from 960.gs and open up the 12 column photoshop grid, placing it in a new layer in our portfolio design.
As you can see, it doesn’t properly from top to bottom, so what I like to do is duplicate the grid layer two times, dragging one of the layers to the bottom and one to the top, making it appear as it’s one long grid. After I’ve got them lined up, I select each each layer and merge them into one layer, naming it “Grid”.
The last thing we’re going to do is give our background a bit of texture. Create a new layer under our grid layer and name it “texture”. select the entire document (ctrl+a) and fill it with the texture from the image below (it’s a default texture in photoshop cs4).
Now, change the blending mode to MULTIPLY and we’re all set to start adding in our web design elements.
Step 2. Adding in our header
This part is going to be the most critical as it is going to help showcase who you are right off the bat and allow people to know the name of your site/company by viewing your logo
What I want to do is create a logo that’s going to stand out and be noticeable when people view the site, so what I am going to do is grab the font tool, get the CHUNK FIVE font (download from the League of Moveable Type), set the font size to 48.4pt and #7fccd6 for the color, placing the text 20 pixels from the top of the document and lining it up with the furthest left grid line.
You’ll notice that the text spans the entire width of 5 grid lines. This was done for a reason. What I’m going to do now is help showcase the font a bit and the structure of the grid is going to help things move along a bit quicker.
Make a new layer and name it “underline” and then make a selection 380 pixels wide and 32 pixels tall, right under the title text.
Now, grab your gradient tool and have one color #000000 and the other be transparent. You’re going to drag and make a gradient from top to bottom in your selection like this:
Change the opacity of the gradient to 10% and add a layer mask. Now, you’re going to grab your gradient tool set it to be black to white and add a gradient to the layer mask like below.
Next, we’re going to do the same thing on the right side of the gradient layer, ending up with something very similar to the item below.
Duplicate the ‘underline’ layer, move it up two pixels and select the original underline layer (clicking the picture of the image layer like below).
What we’ll be doing with this selection is deleting it from the copy layer.
Step 3: Now we’ll be adding in the navigation
First, you’re going to want to create a new folder inside the HEADER folder and name it “NAVIGATION” so you can keep it separate from the rest of the header files. Create a new layer and name it “navigation”. Grab the text tool, still using the Chunk Five font, making it 18pt and #e9e9e9.
Add a drop shadow to the text layer with the following settings.
In order to make sure we know which items are hovered over, we’ll grab the Rounded Rectangle Tool, setting it to be a 5px radius and make a selection in a new layer named “hover”, giving it a color of #dedede.
Step 4: Creating the welcome text
The next step is to create a new folder, naming it Welcome and adding a new text layer inside of it, using the following character settings in the image below.
We’ll be adding the same drop shadow that we added to the navigation text, which will now make the text look like the below image.
Step 5: Lets add in our portfolio items
Now that we’ve got the header and welcome text out of the way, lets add in some portfolio items.
Create a new folder, name it “Portfolio” and head over to the designers toolbox to download their safari window PSD file so we can can set the portfolio items inside of it to give it a bit of better appeal.
We’ll be adding their PSD into our document, centering it and resizing it to 72% of it’s original size.
Now, duplicate the folder that the above image is in, renaming it to “left portfolio” and resizing it to 80%. Now, move it to the far left of the grid, 20 pixels from the bottom of the large portfolio box. Do the same thing again but name the new folder “right portfolio” and move it to the right side of the grid. You’ll end up with something like below.
The last thing we’ll be doing here is adding a bit of a shadow under the portfolio pieces, so grab your Elliptical Marquee tool and make a selection like below and fill it with black.
Now, deselect the circle and to go FILTER > BLUR > GAUSSIAN BLUR. Add in the information from the image below.
Step 6: Adding your “About Me” section
For this section, we’re going to keep it clean since it’s just going to give the visitor a bit of background information about you. First, we’ll be using the same font we used for the title of the site and giving our section a title. Notice that we utilized the same drop shadow as the rest of the font’s on the site.
Next, we’re going to create two layers – on the first layer, make a selection that’s 940px wide and 1px tall and fill it with #FFF. On the second layer, make a selection just like above, but 1px above the white line and fill it with #c9c9c9.
Next, grab your text tool, changing your font to Tahoma, size 12 and make a selection spanning 6 columns of the grid, filling it with some text about yourself. For the below sample, we’re going to use lipsum text.
Now, we’ll duplicate this layer and move it to the right side, making a newspaper style text reading.
Step 7: Adding in your services
First, we’ll duplicate the About folder and move it down below the original about layers.
Next, we’ll make the two text boxes a bit smaller in width, similar to the image below, adding in two more text boxes to fill out the row.
Step 8: Adding in the contact section
First, we’ll duplicate the about folder again, moving it down below the services section. Remove both text layers and you should end up with something like below.
Next, head on over to Function and grab their free icons (or you can use other icons if you’d like) and set them up under the get in touch text, like the image below.
Next, make a text box selection next to the social media icons, three columns wide and add in some text, like the image below.
Duplicate this text layer, move it to the right and add in three more forms of contact. I chose AIM, Twitter and Facebook. You can add in whatever you’d like here.
Step 9: Touching things up
One thing I noticed afterward was that the text looked a bit flat, so I went back and added in the white text shadow on all of the text, even the about and services text, giving it a bit more ‘umph’. I also added in a couple of my own designs into the portfolio section so they weren’t left white during the final view.
See the final result below (click the image to view it in it’s full size.
Join professional testking HP0-J36 training course to learn how to create single page profile in photoshop and become expert in web designing using testking 000-086 photoshop tutorials and testking HP2-E24 demos.
This entry was posted on Monday, March 29th, 2010 at 09:33 and is filed under Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
Very nice… But if it’s one page portfolio site, why did you create Work, Services and Contact link in header?
Those items can link and allow the person to scroll down the page right to the items they’re looking for. Add in a nice jquery smooth scroll and it gives the site some more polish 🙂
Nice, Mike! This is a cool reference. Thanks for sharing.
@slaFFik: I’m assuming it’s probably used for anchor links. =)
So Good! … I going to use it for My Personal Portafolio
This was so helpful!
I used it as a guide to design my one page portfolio!
http://creativeglofish.com
Thanks
Tim