Design an Online Template Shop Layout Using Photoshop

by Steven Snell

on November 2, 2009

in Tutorials

Today we will be designing a homepage layout for a premium template or theme seller. The design uses a dark color scheme and some texture. Here is a preview of the final result (click the image to see it in full size). At the end of the tutorial you will be able to download the original PSD file used to create the tutorial if you would like it for your own purposes.

Photoshop layout tutorial - PremiumTemplateShop

Setting Up the File:

Create a new file in Photoshop that is 1600 pixels wide and 950 pixels high.

Photoshop layout tutorial - PremiumTemplateShop

Step 1: The Background:

Set the foreground color to #545454 and use the paint bucket tool to fill the background layer with this gray color.

Photoshop layout tutorial - PremiumTemplateShop

Next, change the foreground color to #5f120a and add a new layer (Layer – New). Set a horizontal guide (View – New Guide) at 65 pixels and use the rectangular marquee tool to select everything above this guide. Then use the paint bucket tool to fill the selected area with the foreground color.

Photoshop layout tutorial - PremiumTemplateShop

Double click on the new layer in the layers palette to bring up the layer styles options. Check the box for drop shadow and set it to 50% opacity and and angle of 90 degrees. Leave the distance and size at 5 and uncheck the box for “Use Global Light.”

Photoshop layout tutorial - PremiumTemplateShop

Set the foreground color to #9c2f23 and add a new layer. Select the pencil tool and choose a square brush with a diameter of 1 pixel. Use the pencil tool to add a one-pixel border to the bottom of the header area. The image below is shown at 600% for better visibility.

Photoshop layout tutorial - PremiumTemplateShop

Add a new layer and set a horizontal guide at 465 pixels. Use the rectangular marquee tool to select everything above that guide. Set the foreground color to #333333 and the background color to #000000. Select the gradient tool and make sure the radial gradient is active and using the gradient that fades from the foreground color to the background color.

Photoshop layout tutorial - PremiumTemplateShop

Start the radial gradient by click in the middle of the canvas horizontally and about 100 pixels above the top of the canvas. Hold shift to keep a straight line and drag the mouse below the guide, to about the 600 pixel mark.

Photoshop layout tutorial - PremiumTemplateShop

That should give you a result that looks like this.

Photoshop layout tutorial - PremiumTemplateShop

Next, we’re going to add some texture on top of that gradient by using an image from Design Shard’s grunge texture pack. The specific image can be found in the Flickr set from Design Shard. Here is a look at the image.

Photoshop layout tutorial - PremiumTemplateShop

Save the image or copy it in to Photoshop. Desaturate it by going to Image – Adjustments – Desaturate. I’ve cropped the texture to be 1600 pixels wide and 465 pixels high so it will exactly fit in the area of the gradient. Copy the desaturated image and paste it in above the gradient layer. Double click on the texture layer in the layers palette and set the blend mode to Soft Light at 100%.

Photoshop layout tutorial - PremiumTemplateShop

Now move the gradient and texture layers behind the header and header border layers.

Photoshop layout tutorial - PremiumTemplateShop

This completes the background that we will be using for the design.

Step 2: The Header

For the title/logo we’re going to use the ChunkFive font, which can be downloaded for free. Set a vertical guide at 320 pixels to help line up the left edge of the text. I’m using 30pt ChunkFive in #dfd9d9.

Photoshop layout tutorial - PremiumTemplateShop

Set the background color to #dfd9d9 and the foreground color to #bebcbc, a slightly darker shade. Double click on the text layer in the layers palette and select “gradient overlay.” Choose the gradient that fades from the foreground color to the background color. Then click on “drop shadow” and set it to 50% opacity with distance and size at 3. Set the angle to 120 degrees and make sure the box is unchecked for “Use Global Light.”

Photoshop layout tutorial - PremiumTemplateShop

Next, we’ll add a navigation menu to the right side of the header using 14pt Arial in #dfd9d9. Set a vertical guide at 1280 pixels to align the right edge of the text.

Photoshop layout tutorial - PremiumTemplateShop

Step Three: The Featured Area

On top of the gradient and the texture we will be displaying some screenshots of templates on the right side of the screen, and some text and two buttons on the left side. To start with we are going to need three screenshots, so I am just using images from other Photoshop layout tutorials that I have published here on DesignM.ag. Of course, you can use images from any of your own sites or templates here.

Once you have the images that you will be using, resize them all to a width of 400 pixels. We’re going to use guides to help us line up the screenshots, so set vertical guides at 700, 790, and 880 pixels, and horizontal guides at 115, 190, and 265 pixels.

Copy the first screenshot that you want to sit in the back and paste it in to your canvas. Then use the free transform (Edit – Free Transform) to align it as shown in the image below.

Photoshop layout tutorial - PremiumTemplateShop

Then, paste in your second screenshot and line it up with the guides as shown.

Photoshop layout tutorial - PremiumTemplateShop

Then, do the same with the third screenshot, which will sit in front of the other two.

Photoshop layout tutorial - PremiumTemplateShop

Add a drop shadow to each of the screenshot layers by double clicking on the layer in the layers palette and selecting “drop shadow.” Set the opacity at 50% and the angle at -120 degrees (“Use Global Light” should be checked). Set the distance and size to 3 pixels.

Add a new layer and set the foreground color to #545454. Select the area below the 465 pixel mark and fill it by using the paint bucket tool. This will hide the bottom portions of the screenshots under our content area.

Photoshop layout tutorial - PremiumTemplateShop

Next, we’re going to simply add some text to the left of the screenshots, just below the logo. I am using 14pt italic Georgia in #dfd9d9, and the paragraph is centered.

Photoshop layout tutorial - PremiumTemplateShop

We’re going to add two buttons below the text. The first button will promote the sale of individual templates and the second button will promote a club membership that gives access to all of the templates.

To mark off the area for the buttons I’m going to set vertical guides at 350 pixels and 640 pixels, and horizontal guides at 285, 345, 375, and 435 pixels. Set the foreground color to #6f1910 and the background color to #9c2f23, and select the rounded rectangle tool. Set the radius to 10 pixels. Use the guides to draw two buttons with the rounded rectangle tool.

Photoshop layout tutorial - PremiumTemplateShop

Double click on the layer of the first shape in the layers palette and click on “gradient overlay.” Choose the gradient that fades from the foreground color to the background color and have the darker shade on the bottom. Then, click on “stroke” and set it to one pixel outside and #b34235 as the color. Repeat this to give the second button the same gradient overlay and stroke.

Photoshop layout tutorial - PremiumTemplateShop

Now we’re going to add some text on top of the buttons. I’m using 18pt Arial in #230a0b for the first line of text and 14pt Arial in #dfd9d9 for the second line of text. Double click on the text layers in the layers palette and set a drop shadow of 75% opacity, 120 degree angle (“Use Global Light” not selected) and a distance and size of one.

Photoshop layout tutorial - PremiumTemplateShop

To add a little bit of texture to the buttons I am going to use the splatter brushes from Bittbox. If you don’t already have those brushes you can download them for free. Before you do anything with the brushes, make sure you add a new layer over the buttons, but below the text, so you can experiment and get rid of the layer if you don’t like how it turns out. Select the area over one of the buttons, choose a color very similar to that of the buttons (I used #6f1910), and choose one of the splatter brushes. Resize the master diameter of the brush to make it small (I used between 400 – 600 pixels) and apply some splatter effects using the brushes. Try using a few different brushes to see what you like.

Then duplicate the layer (Layer – Duplicate) and use the free transform (Edit – Free Transform) to move it in place over the second button.

Photoshop layout tutorial - PremiumTemplateShop

Step Four: The Horizontal Band

Add a new layer and set the foreground color to #5f120a. Use the rectangular marquee tool to select an area that is 40 pixels high and the entire width of the canvas, directly below the dark textured area. Use the paint bucket tool to fill it with color. Double click on the layer in the layers palette and give it a drop shadow with 50% opacity, 120 degrees (“Use Global Light” not checked), and a distance and size of 2 pixels.

Photoshop layout tutorial - PremiumTemplateShop

Use the pencil tool to give this horizontal band a one-pixel top border of #9c2f23 and a one-pixel bottom border of #7c7b7b.

Photoshop layout tutorial - PremiumTemplateShop

We’ll add some text for a promotional deal in this area using 18pt italic Georgia in #dfd9d9. The words “Limited Time Special:” is in #e57b70 and also in bold. “See the details” is also in #e57b70.

Photoshop layout tutorial - PremiumTemplateShop

Here is a look at what we have so far.

Photoshop layout tutorial - PremiumTemplateShop

Step 5: The Content Area

Our content area is going to have 3 columns. The left and center columns will be used to list features of the templates, along with icons, and the right column will contain some “About Us” information. We’re going to use guides to control the layout of the columns and to help us line up the icons properly. Clear any guides (View – Clear Guides) that are currently being used and set new vertical guides at 320, 368, 620, 650, 698, 950 and 980 pixels. And set horizontal guides at 550, 580, 628, 660, 708, 740, 788, 820, and 868 pixels. We’ll use these guides in a minute to line up the icons and the text.

First, here are the icons that we will be using. From the Function free icon set we’re using the computer icon, the folder icon, and the mail icon. From the Flavour Extended icon set from Smashing Magazine and Oliver Twardowski we are using the check icon, the clock icon, the security icon, and the tablet icon. From the Portfolio icon set from Vandelay Design and IconShock we will be using the palette icon. Download the icon packs and open the icons that we will be using. All of the icons from the Function pack and from the Flavour Extended pack are 48 x 48 pixels, so you can leave them at this size. Re-size the palette icon to be 48 x 48 pixels.

Let’s start by entering the text that will go at the top of the list of features. I’m using 18pt bold Arial in #5f120a. The left edge of the text should line up with the vertical guide at 320 pixels and it should sit above the horizontal guide at 550 pixels.

Photoshop layout tutorial - PremiumTemplateShop

Now we can start adding the icons. Copy the check icon and use the rectangular marquee tool to select the area between the vertical guides at 320 pixels and 368 pixels, and between the horizontal guides at 580 pixels and 628 pixels. This will give us a selected area of 48 pixels by 48 pixels, the same size as the icon, so the icon will go right in place when we paste it.

Photoshop layout tutorial - PremiumTemplateShop

With the area still selected, paste in the icon.

Photoshop layout tutorial - PremiumTemplateShop

Then you can repeat this process of selecting the area and pasting in the icon for the other seven 48 x 48 spots.

Photoshop layout tutorial - PremiumTemplateShop

Next, we’ll add the text to go next to the icons. Next to the check icon, enter a text box and use 14pt Arial in #dfd9d9. We’re highlighting part of the text by using #230a0b and bold.

Photoshop layout tutorial - PremiumTemplateShop

Then repeat the process by adding text next to each icon (click the image below to see in full size).

Photoshop layout tutorial - PremiumTemplateShop

In the right column enter a text box with a header in 18pt bold Arial, #5f120a. The rest of the text is 14pt Arial, #dfd9d9.

Photoshop layout tutorial - PremiumTemplateShop

Step: The Footer

Add a new layer and set the foreground color to #424141. Use the rectangular marquee tool to select the bottom area of the canvas and use the paint bucket tool to fill the selection. Change the foreground color to #7c7b7b and use the pencil tool to add a one-pixel border above the footer.

Photoshop layout tutorial - PremiumTemplateShop

Then add some text in the footer in 14pt Arial in #dfd9d9.

Photoshop layout tutorial - PremiumTemplateShop

That’s the end of our design, and here is the final result.

Photoshop layout tutorial - PremiumTemplateShop

You can download the original PSD here. (4.7 MB zip file)

For more Photoshop layout tutorials see:

Powered by Shutterstock

About Steven Snell

Stephen Snell is the owner and editor of Vandelay Design. Connect with Stephen on google+