Theatre: design an elegant, dark portfolio site

by DedrickPayne - Templates, Tutorials

Portfolio sites can be used by a whole lot of folks: from web designers, to photographers and artists. Learn how to design such an elegant and stylish web site.

Final Product:

Final Product

Step 1: The Guides

First, create a new document with the demensions of 1600 x 1286 px.

Then, add the following guides by going to View > New Guide.

  • orientation Vertical and position 342px
  • orientation Vertical and position 1257px
  • orientation Horizontal and position 38px
  • orientation Horizontal and position 552px
  • orientation Horizontal and position 974px

This is what we get:

Guides

Step 2: The Background

Next, grab the Paint Bucket Tool and fill the canvas with the color #33182b.

Canvas

Now, grab the Brush Tool with a diameter of 300px and hardness of 0%.

Arrange the colors #6c4e77, #643b65 and #774175 as shown here:

Color Arrangement

Now, grab the Brush Tool once again with white chosen as the foreground color.

On a new layer make a circle and cut it in half with the Rectangle Marquee Tool. Change the Blend Mode to Overlay:

Now, duplicate the half circle as shown below:

Next, select all of the dupicated layers and merge them together as shown below.

Once merged reset the Blending Mode back to Overlay and rename the layer Glow.

Now, duplicate the Glow layer and go to Edit > Transform > Flip Horizontal.

Play with the placement of the two glow layers to get a look that you like. This is what I got:

Next, stretch out the layers as shown below:

Finally, position as shown here:

Step 3: Title / Navigation

Next, create a selection with the Rectangle Marquee Tool and fill with #33182b as shown:

Now, type out your title. I used Gotham Book at 24px.

Next, type out your navigation. I used Gotham Book at 18px.

For both the title and navigation, go into the Blending Options and set a Gradient Overlay as shown below:

Now, duplicate the navigation background and go to Filter > Blur > Gaussian Blur set to 5px to get a shadow under the navigation. This is the result:

Step 4: Window Preview

Next, we will add a window preview to the top of the webpage.

Head over to Designers Toolbox and pick up the Safari PSD.

Insert your desired screen capture into the template and place the windows as shown in the picture below:

Step 5: Content

Now, grab the Single Row Marquee Tool and make a selection directly below the second horizontal guide (Guide directly after our preview windows) and fill it with #170b13.

Repeat the same process directly below that line and fill with #7a3a67. See example below:

Grab the Erase Tool and set to 125px and a hardness of 0%. Fade the line out as shown below:

Next, grab the Brush Tool and set #522443 as the foreground color with a size of 250px and hardness of 0%.

Make one dab and cut it in half as shown below:

Now, stretch it out to each vertical guide like shown below:

Right-click the layer and click Duplicate Layer click OK. With the duplicate selected go to Edit > Transform > Flip Vertical.

Head to Edit > Brightness/Contrast and set Brightness to -90 and position as shown:

Grab the Type Tool and type out the heading “WE’VE GOT THE GOODS!”

Set tracking to 200 and apply the same layer style as we did on the title and navigation.

Next, head to Pixel Mixer and download the Basic Set icon package.

Once downloaded, insert the 32px Briefcase, Calendar and Graph icon into our document.

Arrange and add text as shown below:

Apply same layer style as the title, navigation and header to the section titles.

Next, create dividers for our three sections by grabbing the Pencil Tool. Use the colors #170b13 and #4e2642 and create a divider as shown below:

Use the Erase Tool to fade out both ends of the divider.

Lastly, dupilcate the divider we just created and place it as shown in the picture below:

Step 6: Footer

Next, duplicate the background we made for the “We’ve Got The Goods” text and place it on the last horizontal guide as shown here:

Next, grab the Text Tool and type out our footer in Verdana in a size of 12px.

Final Product

This is the end of the tutorial and our finished product: (Click image to enlarge)

Final Product

Remember to download the PSD to have a closer look at the final product!

Download template

About the author

Dedrick Payne is a 19 year old beginning web designer from Houston, Texas. He is into many different types of design and enjoys creating things.


Visit DedrickPayne's Website | All Articles From This Author

31 Comments


Add your comment - (need a gravatar?)

Enable CommentLuv?

Sponsors

Sponsors

Recent tutorials

Sponsors

Write for us!

Write tutorials for us and make money! Check out the details and submit your tutorial.