Voosh Themes

How To Design A Clean and Minimal Online Photography Website

In this tutorial I’m going to show you how to design a clean and minimal photography website in Photoshop. In particular, we’ll be focusing on designing the front page of the Rikona WordPress Theme that I released earlier this week.

In this design we’re aiming for a clean and minimal look – we’re therefore only going to include what’s absolutely essential in the design. This includes the freelancer’s name, their job title, a “featured” photo, and also a collection of thumbnails that the user can select and then view in the featured photo section.

We’ll also need a navigation area that links to other pages on the site – freelance photography sites typically have a page that contains a short bio of the site’s author, an overview of the services they provide, a blog, and a page where people can get in contact with them.

Below is a screenshot of the template we’ll be creating.

1. Create A New Document

Create a new document with a size of 1100 x 2000. Then add some vertical guides at 70px and 1030px – that gives us a width of 960px which should easily fit on most screens.

2. Add The Background

We then need to add a grey-white gradient overlay effect to the background – use the following settings to achieve this:

3. Create The Header

In the header we need to include the freelancer’s name and job description – for the name, set the font to Myriad Pro, the text size to 70px, the color to #000, and the letter spacing to -40px. Type your name:

Next we want to add the job title – keep the font as Myriad Pro, set the color to #AAA, the size to 40px, keep the letter spacing as -40px, and type something like “Freelance Photographer”:

4. Create The Navigation Area

To create the navigation area set the font to Arial, the size to 20px, the color to #000, and type the names of the other pages on the site in uppercase. Also include a tilde (~) as a separator between the different page names:

5. The Featured Photo Section

To create the featured photo section we need to use the Rectangle Tool and draw a rectangle that is around 620x370px in size. Position this rectangle in the center of the page:

We then need to add some effects to make it stand out a bit – first, add an outer glow effect with the following settings:

Then add a color overlay:

Finally, add a stoke:

Your rectangle should end up looking something like the following:

We then want to add an image inside of this rectangle – select a photo of your choice – you might to check out morgueFile which has a range of photos that you can use in your templates. For mine, I’ve used a photo of some flowers – resize the photo to 600x350px and then place it in a layer above your rectangle:

6. The Thumbnails

Creating the thumbnails is a very similar process to creating the featured photo in the previous step – using the Rectangle Tool, create a rectangle that is 140x86px in size – create four copies of this rectangle and place them all next to each other:

Then copy the layer style that you used for the featured section background in the previous step and apply it to each of the smaller rectangles you just created – they should end up looking like the following:

Now that we have our thumbnail backgrounds, we need to get some more photos to display – again, have a look around at morgueFile (or somewhere else with stock photos/images) and use some photos that you like. Resize the photos to 130x76px in size and place them on top of the thumbnail backgrounds:

7. Add The Footer

At the top of the footer we need to create a line – using the Line Tool, set the weight to 2px, the color to #EEE, and draw a line from your left border to the right. To create a nice effect with the line we want to erase the edges to create a fade effect – select the Eraser Tool, switch to the Brush mode, and select the 300px brush:

Ensure that the layer your line is on is selected and then click a couple of times on the left edge of the line – repeat this process for the right side of the line:

Finally, we want to add some copyright text – set the font to Arial, the size to 14px, and the color to #444. Type something like “Copyright © 2010 ~ Tiffany Sanderson ~ All Rights Reserved”:

Your template should now look something like the following screenshot:

8. Change The Color Scheme

In this step I want to show you how you can easily change the template to have an alternative color scheme – this is what we’re aiming for:

The first step is to change the background’s gradient overlay – choose the following settings:

Then change the color of the text for the name to #FFF. The color of the job title text can remain the same (#AAA).

Next set the color of the navigation text to #EEE:

We then need to change the effects applied to the featured background image – use these settings for the outer glow:

These for the color overlay:

And these for the stroke:

Copy this layer’s effects and then apply it to your thumbnail backgrounds:

Then change the color of your footer line to #222 using a color overlay effect. Change the color of the footer text to #EEE.

And for the final step, choose some photos that go well with this color scheme – I’ve chosen some cars. Your template should hopefully look something like the following:

Conclusion

In this tutorial I was hoping to illustrate that you don’t always need to use lots of fancy shapes and gradients to achieve nice results – through using very simple and subtle effects we’ve been able to create a clean and stylish design. Check out the Rikona Features Page for more details about the theme where this design is used – there’s also the live demo that you can visit to take a closer look.