Designing A Membership Site In Adobe Photoshop

How To Design Your Own Membership Area In Photoshop

The idea for this design was to create a membership area for the software WishList Membership which is a WordPress plugin, however the design could be used for any membership site or even a blog, if you get the right coder.

Being quite a well known blogger and marketer, I’m often asked to review products and give testimonials – one thing that most sites have in common is the poor design and usability, it seems to always be an after thought. The thing is, if people are paying you to have access to the content and the site is hard to navigate and not nice to look at, it will take away from their experience and will increase the chances of refunds and negative feedback.

Creating a custom designed site for more people will seem daunting but really the benefits are huge and a small amount of investment goes a long way! My friend Ryan lee loves membership sites because, unlike selling a eBook, you will get paid, month after month as long as they stay a member! Just remember when you are putting together any website, whether it is a blog or a membership site – make it easy for your users to navigate around because this will encourage your readers to view more pages which in turn will make you more money!

Resources You May Need

Finding a Designer: Although this is a step-by-step tutorial using Adobe Photoshop, if you are new, you may find it hard to do. I recommend you check 0Desk for a cheap web designer.

Getting the Design Coded: Just like finding a designer, 0Desk also has a great selection of programmers at a much discounted rate.

Software To Use: I highly recommend WishList Membership site for your membership website.

In this tutorial I will show you how to create a blue web layout for a “how to make money online” course website. Let’s get started!

What You Will Be Designing

This is the web layout that we are going to create. Click on the following image to see the full size version.

Step 1

Create a new document in Photoshop with the dimensions 1400px by 2080px. Create a new group and name it “navigation”. Select the Rectangular Marquee Tool (M) and create a rectangular selection with the height 44px. Create a new layer, select the Gradient Tool (G) and drag a linear #0e6da3 to #005e95 gradient from the top of the selection to the bottom. Name this layer “top bar”.

Step 2

Ctrl/Cmd-click on the thumbnail of the “top bar” layer to select it. Then set the foreground color to #007fc3, select a soft brush (B) with the size 200px and paint with it over a small area from the left side of the blue bar.

Step 3

Use the Line Tool (U) to create a horizontal line with the weight 1px and the color #0180c3 beneath the blue bar. Add a black mask to this layer (Layer > Layer Mask > Hide All). Then select a white soft brush and paint with it over the left area of your blue bar. Name this layer “1px line”.

Step 4

Select the two layers from the “navigation” group and hit Ctrl/Cmd + E to merge them. Double-click on the new layer to open the Layer Style window and use the settings from the following image for Drop Shadow.

Step 5

Set the foreground color to #52c3fd, select a soft brush with the size 70px and paint with it over the left area of the blue bar. Name this layer “light” and set its opacity to 35%.

Step 6

Use the Line Tool (U) to create a white line with the weight 1px at the top of the blue bar. Name this layer “1px line” and set its blend mode to Overlay 45%.

Step 7

Select the Type Tool (T) and write the name for your navigation menu items. Then add a subtle shadow to your text layers using the settings from the following image.

Step 8

Use the Pen Tool (P) to create a small triangle beneath the first navigation menu item. Name this layer “rollover”, double-click on it and use the settings from the following image.

Step 9

Create a new group and name it “searchbar”. Then select the Rounded Rectangle Tool (U), set the radius to 5px and create a white rounded rectangle with the dimensions 190px by 26px. Double-click on this layer to open the Layer Style window and use the settings from the following image for Drop Shadow. Name this layer “searchbox”.

Step 10

Select the Type Tool (T) and write the word “Search…” in the left side of the search box using the color #28537d. Then select the Custom Shape Tool (U), select the search icon and create one in the right side of the search box using the color #52b3d6.

Step 11

Create a new group beneath the “navigation” group and name it “header”. Then select the Rectangular Marquee Tool (M) and create a selection with the height 140px. Create a new layer and use the Paint Bucket Tool (G) to fill the selection with the color #22476a. Name this layer “header bg”, double-click on it to open the Layer Style window and use the settings from the following image.

Step 12

Use the Rectangular Marquee Tool (M) to create a rectangular selection with the height 15px beneath the header. Then create a new layer, select the Gradient Tool (G) and drag a #b2b1b1 to transparent gradient from the top of the selection to the bottom. Name this layer “gradient” and set its opacity to 70%. Leave a distance of 1px between the header and this gradient.

Step 13

Create a new layer, select a white soft brush (B) with the size 300px and click once over the left area of the header. Then set the blend mode of this layer to Overlay 77%.

Step 14

Create a new layer and use the Line Tool (U) to create a horizontal white line with the weight 1px at the bottom of the navigation bar. Name this layer “1px line” and set its blend mode to Overlay 50%.

Step 15

Use the Type Tool (T) to write the text for your layout’s header. You can also add a subtle shadow to your text layers using the Layer Style window. As you can see in the following image I also used an image of a blogging e-book.

Step 16

Create a new group and name it “content”. The content of this layout is split into three areas: ‘Modules’, ‘Bonus Reports’ and ‘Accelerate Program’. Select the Type Tool (T) and write the word “Modules” in the left side of the layout, beneath the header. I used the font Museo Sans and the color #272b2d. Then add a tagline in the right side of the layout using the font Helvetica and the color #909090.

I created the quotes that you see in the following image using the font Gill Sans Ultra Bold with the color #e1e1e1 and the layer style settings from the following image. Select the Line Tool (U) and create a horizontal line with the weight 1px and the color #e6e6e6.

Step 17

Use the Rectangular Marquee Tool (M) to create a rectangular selection with the size 311px by 127px. Create a new layer and fill this selection with white. Then add a 1px stroke to this layer using the color #d9d9d9 and the settings from the following image. Then add an image inside this rectangle and some text beneath it.

Step 18

Repeat the previous step to create more images for the ‘Modules’ area. As you can see below, my second image has a thicker stroke. I used the a 9px size for the Stroke layer style and I also created an arrow in the right side of the image using the Pen Tool (P).

Note: you can also use guides to organize your images better. To create guides, activate the Rulers (Ctrl/Cmd + R), click on the top ruler or on the left ruler and drag guides towards your document.

Step 19

Repeat the previous three steps to create the ‘Bonus Reports’ and ‘Accelerate Program’ areas.

Step 20

Create a new group and name it “Footer”. Then use the Rectangular Marquee Tool (M) to create a rectangle with the height 280px and the color #e7e7e7 into a new layer. Name this layer “footer bg”.

Then select the Line Tool (U) and create a horizontal line with the weight 1px and the color #cbcbcb at the top of the rectangle. Name this layer “1px line”.

Step 21

Select the Type Tool (T) and start adding the footer content. You can also use an image for the ‘about’ area.

Step 22

Select the Line Tool (U) and create a horizontal line with the weight 1px and the color #cbcbcb. Then use the Type Tool (T) to write a copyright statement beneath this line.

Final result

Here is the final result of this tutorial. I hope you enjoyed it and you learned something new. Click on the image below to see the full size version.