How to design a layout with Membership Area In Photoshop

Templates, Tutorials, Web layouts 17 Comments

How to design a layout with Membership Area In PhotoshopHello. This tutorial will teach you how to create a beautiful website in Photoshop in just a few steps. You will create a website to allow users to register on your website very fast.

Register for a VIP account to get ALL the resources from Grafpedia and 12 months of free updates.

Create a new document, and make the background color to #dadada.

With Rectangle Tool, create a new shape( #1c1c1c) and place it on the top of the website.

Right under this shape i will create another dark shape ( #292929 )

On the bottom i will create also a small footer with the same tool, and with the same color ( #292929 )

Between the two shapes i will add some lines

With Rounded Rectangle Tool i will create a shape like in the following image, and i will place it in the middle of the layout.

For this round shape i have used the following layer styles.

On the left side i will create a smaller shape

And on the right side i will create another shape with a darker color.

Here i will duplicate the layer, i will rasterize, and i will cut a shape like in the following image

Then with the same technique i will create some small buttons

Here is the layer styles i have used to create the buttons

I will add a image like in the flowing screen shot, and on the bottom i will add another shape with a opacity value of 20-30 %

On the left side i will create a sign up form

You will see some nice indented forms. I have used the following styles.

Right under the form you will need a button

The layer styles i have used are bellow

Like any website, you will need a logo. I will use Grafpedia’s Logo

On the right side i will create a horizontal navigation menu, and you will see that i have created also a button, It has the same layer styles i have used for the form.

Under the main area of the website i will create a shape with Pen Tool

I will go to Filter > Blur > Gaussian Blur, and i will use these values

I will move this dark area a little to the top, and i will make sure the layer is above the background layer.

After then you can add some text over your layout. This is my final result. i hope you like it.

.