DesignM.ag

Today we’ll be going through the process of designing the homepage for premium theme marketplace using Photoshop. There are new theme sellers popping up every day, so this type of site should be relevant for many people. Throughout the tutorial, most of the screenshots of the design in progress can be seen in full-size by clicking on the image.

Here is a look at the end result of what we will be designing (click to see in full-size).

Step 1: Create a new document

Create a new document in Photoshop that is 1600 pixels wide and 1100 pixels high.

Step 2: Create a radial gradient background

On the background layer we will create a radial gradient using two different shades of gray. Set the foreground color to #908d7e and the background color to #1d1e16. Then, select the gradient tool and make sure that the radial gradient is selected.

With the radial gradient selected, click (and hold) at the top center of the document, drag to the bottom of the document (hold down the shift key while dragging to keep it straight) and release at the bottom of the document. You may want to experiment a little bit to get the gradient that you want. Then go to Filter – Noise – Add Noise, and set it to 1% and “uniform.”

That should give you a result that looks like this.

Step 3: Create the header

Next, we’ll create a green bar at the top of the page to serve as the header that will contain the site title and the navigation menu. To do this we will first create a new layer (Layer – New) an then use the rectangular marquee tool to select an area that is the full width of the document and covers the top 60 pixels. Use the paint bucket tool to fill this area with the color #5d8b39. Then at the bottom of this bar, use the pencil tool to create a 1 pixel border in #77993e. Double click on the layer in the layers palette to bring up the layer styles options. Give the layer a drop shadow at 90 degrees and change the opacity to 20%, and the distance and size of 3 pixels.

We will be using a 960 pixel width for the layout of the page, so you can set vertical guides at 320 pixels and 1280 pixels to show what portion of the document you will be working with.

We’ll be using the name “Killer Themes” for our site, so line up the site title with the vertical guide at 320 pixels and center it vertically in the green header. For the title I am using the font Delicious at 30 pixels, bold. Double click the layer in the layers palette and add a 90 degree drop shadow at 25% opacity, with a distance and size of 2 pixels. Then, select gradient overlay and create a gradient on the text with white at the top and a light gray (I’m using #dad9d9) at the bottom.

You will then have a title that looks like this.

To finish off the header we will be creating a simple navigation menu. I’m using 14 point Arial font in white for the text. Then, use the pencil tool to create a 1 pixel border (color #77993e) to the sides of each link. Line up the right border of the last link to the vertical guide at 1280 pixels so it is lined up properly with the edge of the page.

This is what we have so far.

Step 4: Add the theme screenshots

Most theme sellers use screenshots of their themes prominently in the design of their site, so we will do the same. I don’t personally have any themes for sale, so I will use images from two previous Photoshop tutorials that I posted here at DesignM.ag (clean blog layout and non-profit website) and another screenshot from one of my gallery sites, Folio Focus. For this you will obviously use screenshots from whatever themes/templates you are selling, and re-size them in three different sizes. You may want to experiment a little bit to get the sizes to work right for you and for the screenshots that you are working with.

Set a horizontal guide at 600 pixels and paste in the largest of the 3 screenshots, using the vertical guide at 320 pixels as well as the new horizontal guide to align the image. Double click on the layer in the layers palette and give it a drop shadow, changing the distance and the size to 7 pixels.

Then, repeat the process by pasting in the second screenshot, give it the same drop shadow, and place this layer beneath the layer of the first screen shot so that it appears to sit behind it.

Then, repeat the process again with the third and smallest screenshot. Give it the same drop shadow and place this layer beneath the layer of the second screenshot.

Step 5: Add some text

Now we will add one line of text above the screenshots. I’m again using Delicious at the font, this time in 24 pt italic, and it is centered. Double click the layer in the layers palette and give the text a drop shadow with a distance and size of 1 pixel.

Next, we will be adding text for a limited time discount offer. For this I am using 14 pt Arial.

That completes the top section of the page. Now we will move to the bottom where there will be more text.

Step 6: Add 3 columns of text

Create a new layer. Using the horizontal guide at 600 pixels that was used to line up the bottom of the screenshots, use the rectangular marquee tool to select everything below this guide and fill it with #5d8b39.

Then, using a darker shade of green (#3f6935), create a 5 pixel border at the top of the lighter green area.

We’ll be making three columns, each 280 pixels wide, with two 60 pixel-wide gutters. To help with this, I’m using vertical guides at 320px, 600px, 660px, 940px, 1000px, and 1280 pixels. Use these guides to help line up the sub headers that will go at the top of each column.

In the first column I will be adding 100 px x 100 px thumbnails of each theme, with a 5 pixel border in our light green color, #77993e. Then I’ve added a title and description for each theme, with a link for more information. The text is all 14 pt Arial, the theme titles are in bold and the “read more” links are italicized.

In the middle column we’re going to add some recent blog post headlines with excerpts and links. Again, for this area we are using 14 pt Arial with the blog post titles in bold and the “read more” links italicized.

In the third column we will be adding some breif customer testimonials about the themes. The 14 pt Arial font is used here as well, with the text of the testimonial in italics.

Step 7: The Footer

To finish off the design we will be creating a simple footer with links to the main pages of the site. First, create a new layer. Then use the rectangular marquee tool to select the footer area and fill it with #3f6935. Use the pencil tool to create a #77993e 1 pixel border at the top of the footer.

Then, add text for the links using 14 pt Arial in white.

The Finished Product

Here is the result of this tutorial.

If you’d like to work with the original Photoshop file used for this tutorial, you can download it here.

For more Photoshop layout tutorials, please see:

• Design a Clean Blog Theme in Photoshop
• Design a Layout for a Non-Profit Organization in Photoshop
• Website Layout Toolbox