A few weeks ago we released the free Elegant Photography WordPress theme. Today we’re going to walk through the process of designing the theme’s home page in Photoshop.
While the design was used to create a WordPress theme, the same design could be coded to use with another CMS or just with static HTML/CSS.
What We’ll Be Creating
Here is a look at the final design that we’ll be creating in this tutorial. Click the image to see it in full size.
The layout and design of this page is rather simple. The idea is to keep the focus on the photography and to keep the photos as the center of attention. The home page is designed to include a large slider/slideshow. Lower on the page is a section that shows featured images from 4 recent blog posts with a link to each post.
The following resources will be used:
We’ll also be using some random photos, you can of course use your own or simply use solid colored blocks as place holders.
Step 1: File Set Up
Create a new file in Photoshop that is 1400 pixels in width and 1310 pixels in height.
Step 2: The Header
We’ll start with the navigation menu. Add two new vertical guides at 220 pixels and 1180 pixels to set the edges of the content area (the content area will be 960 pixels wide, centered).
Our navigation menu will be 50 pixels in height with thin borders at the top and bottom. Create a new layer. Set the foreground color to #e3e3e3 and use the pencil tool with a square brush tip set to 1 pixel (alternatively, you could use the line tool). Create the first border 150 pixels from the top of the canvas and the second border 50 pixels below the first.
Next, use the text tool to create text for the navigation menu. I’m using 14 pt regular Droid Sans in #333333 for the text. Center the text between the two guides. Click on the image below to see the navigation menu in full size.
We’re also going to design a drop down so the menu will be able to support drop downs if they are needed. Use the text tool to create a few drop down links.
Behind that text layer, set the foreground color to #ffffff and use the rectangle tool to create a shape that will be used as the background for the drop down. Add a 1 pixel stroke in #e3e3e3 to create a border.
Add a new layer above the white rectangle and use the pencil tool to cover up the border at the top of the dropdown.
We’ll also show an example of a link on hover, so duplicate the text layer for the main navigation and change the color of a link to #e22d2d. When visitors hover over a link it will change to this color.
We’re now done with our nav menu. You can hide the drop down layers and the text for the link on hover.
Now we’ll create the site title in the header. In the center of the header use the font Lobster in 48 pt text with a color of #999999. click the image below to see the header in full size.
Step 3: The Slider
Now that we’re done with the header design, we can move on to designing the area that will be coded into a slider/slideshow. We want the photos used in the slider to be the focal point of the home page.
We’ll be designing the area to support photos that are 940 pixels wide and 580 pixels high. There will be 9 pixels of white space and a 1 pixel border around the outside, so use the rectangle tool to create a white box that is 960 pixels wide and 600 pixels high. Leave 50 pixels of space below the header to the top of the rectangle (so the rectangle will start 250 pixels from the top of the canvas). Add a 1 pixel inside stroke in #e3e3e3 to the rectangle layer. Next, paste in a photo that is 940 x 580 on top of the rectangle layer. Click on the image below to see it in full size.
To add to the look of the slider we’ll use a swirl vector from Vandelay Premier. If you’re not a Vandelay Premier member you can substitute with another swirl vector. Copy the vector in Illustrator and paste in into Photoshop as a smart object.
With the smart object in Photoshop, move it below the photo and the layer of the white photo background. Use the free transform to move the smart object to the left side of the photo and to size it as needed.
With the smart object in place, open the layer styles options and add a color overly of #e3e3e3. Click the image below to see it in full size.
Duplicate the smart object layer and flip it horizontally (Edit > Transform > Flip Horizontal). Then use the free transform to move it to the right side. Line it up as a mirror image of the swirl on the left side. Use guides if need assistance to make sure it is lined up properly. Click the image below to see it in full size.
The only thing left to do with the slider is to design the manual controls. Use the ellipse tool to create circles that are 25 pixels in diameter, and place them above the photo layer.
Open the layer styles options for each layer and add an inner shadow with the following settings:
This will give the circles a subtle shadow at the top.
For the first circle we’ll also add a color overlay of #fff553. This will be used to indicate which slide is active.
We’re now done with the slider area. The image below shows our design so far, click on it for a full-size view.
Step 4: Lower Content
Below the slider we’ll design an area that will highlight recent blog posts. To start, add a line of text that says “Recent Blog Posts” in 18 pt bold Droid Sans with a color of #333333. Leave 50 pixels of white space between the bottom of the slider and the top of the text.
We’ll be using thumbnails that are 200 x 200, surrounded by 4 pixels of white space and a 1 pixel border. Use the rectangle layer to create 4 white rectangles that are 210 pixels by 210 pixels with 40 pixels. There should be 40 pixels between each rectangle and 20 pixels between the line of text and the top of the rectangles.
Then paste in some sample images at 200 x 200. Click the image below to see it in full size.
Next, add a sample post title and date of publication below each thumbnail. For the title use 14 pt bold Droid Sans in #333333. For the date use regular weight instead of bold.
Step 5: The Footer
All we have left now is the footer. Set the foreground color to #e3e3e3 and add a new layer. Use the pencil tool with a square tip and 1 pixel diameter to create a border 40 pixels below the bottom of the text. Alternatively, you can use the line tool to create the border.
Leave 20 pixels of space below the border and add some footer text in 14 pt Droid Sans, #333333.
Here is our final result. Click the image to see it in full size.