Create a Very Simple Portfolio Web Layout with Photoshop

Create a Very Simple Portfolio Web Layout with Photoshop

In this web design tutorial, we will be creating a minimalist, dark-themed web layout that’s perfect for a portfolio site. We’ll only cover the creation of the basic parts of the layout and leave it up to you to apply your own finishing touches.

Final Result

To view the finished product, click on the following image to see the full-scale version.

Final Result

Setting up the Photoshop document

1 Open up Photoshop, create a new document (Ctrl + N) that is 1000px by 1000px and with a white background (#FFFFFF).

New document settings

Creating the background

2 Select the Rectangular Marquee Tool (M) and create a marquee selection covering the entire Photoshop canvas (Ctrl + A).

3 Choose Edit > Fill and fill the selection with any color. Fill the Background layer with a dark gray color, #0E0E0E.

4 Duplicate the Background layer (right-click on the layer in the Layers Panel and choose Duplicate layer). Double-click the duplicated layer to open up the Layer Styles dialog box and then add a Gradient Overlay with the following settings.

Gradient overlay settings.

Making the Navigation menu

5 Select the Rounded Rectangle Tool from the Tools Panel. Set the Radius of the tool to 5px. Create a large rectangle in the canvas that is 900px by 50px. This will serve as the navigation menu’s background.

6 Select the Gradient Tool (U), then in the Options bar, open Gradient Editor and use the settings shown below.

Gradient Editor settings.

7 Make a new layer. Create a linear gradient going from top to bottom of the navigation with the Gradient Tool.

Creating a linear gradient.

8 Choose the navigation background layer in the Layers Panel, select the Magic Wand Tool (W) and click the outside of the navigation. You should see a selection like the following figure.

Selection created with the Magic Wand Tool.

9 With the Magic Wand selection still active, switch to the layer with the linear gradient on it, and press the Delete key to clear the area beneath it. This is what you should end up with:

After Magic Wand selection is cleared.

10 Lower the opacity of the layer to 25%.

opacity is lowered to 25 percent.

Designing the content area

11 Select the Rounded Rectangle Tool from the Tools Panel. Set the Radius of the toml to 5px. Create a large rectangle in the canvas (900px by 200px). This will serve as the Main content area’s background.

Main content background.

Adding a search input field

12 Select the Rounded Rectangle Tool again. Set the Radius of the tool to around 5px. Create a small white (#FFFFFF) rectangle (250px by 30px) at the right side of the main menu bar. This will serve as the search input field.

Search input field.

Adding a search button

13 Select the Rounded Rectangle Tool from the Tools Panel. Set the Radius of the tool to 5px. Create a small (38px by 38px) light blue (#0089FF) rectangle on top of the search input field, oriented at the right of it.

search button.

14 Double-click the layer with the search button to open up the Layer Styles dialog box and then add a Gradient Overlay as shown below.

Gradient overlay settings for search button.

Finishing touches

15 Finish the layout by adding your content: add your header, banners, navigation links, content boxes and footer.

Navigation links

To simulate HTML text, I chose Arial with the anti-aliasing method set to None (you can do this in the Options bar of the Horizontal Type Tool).

Navigation link items filled in.

Mid content

I placed introductory text and an image in the top "mid content" area.

mid content section.

Main content/ Copyright

I filled in the main content area section with a few image thumbnails arranged in a three-column layout. I placed the copyright information of the site at the bottom of the design.

main content area filled.

Header

I placed a simple logo at the top left corner of the design. Here’s the finished view of the header section of the design.

Header

What I ended up with…

Final Result

Now it’s your turn to show us what you what you’ve got!

If you followed along this tutorial and would like to share your final touches, share it with the rest of us in the Six Revisions Flickr Group.

Download the source file for this tutorial

The PSD source file is available for you to download and study.

Related Content

About the Author

Reece is an enigmatic and mysterious freelance designer based in the beautiful state of Victoria in Australia. He loves to create eye-catching websites.