In this tutorial i will show you how easy is to create a layout for a dating agency. Before we start you will need to download the following set with gradients if you want to speed up your design process.

Please note that you require a VIP membership in order to download these set of gradients. A vip account will allow you to download all existing resources from Grafpedia.

Create a new document with the following size: 1000 x 1100 pixels. With Paint Bucket Tool add a nice gray ( #f0f0f0 ) on your background.

Select rounded rectangle toll, and set the radius to 5 pixels, then draw a nice shape on the top right side of the layout

For this white shape i will add the following layer styles

Now you have a few alternatives to choose some nice hearts to create a cool logo

27 Photoshop Heart Brushes – Hi-Res

http://www.grafpedia.com/vip-downloads/27-photoshop-heart-brushes-hi-res

Vector file - dating agency layout

http://www.grafpedia.com/vip-downloads/vector-files-dating-agency-layout

Valentine’s day vector icons – Love icons

http://www.grafpedia.com/vip-downloads/valentines-day-vector-icons-love-icons

As you can see i will use 2 hearts, and i will place it like in the following image

I will duplicate each heart and i will place it above the first hearts

The small hearts are filled with a white color, and then you can reduce the opacity value to 20-30 % ( you can change the opacity from the top of you layer palette – The opacity settings can be changed only if you select a layer )

With Pen Tool i will create a surrounding line around the two hearts, and i will add there some text with Horizontal Type Tool

Under our logo we will create a search form. for now i have used some basic forms. If you know some css then when you code the layout you will be able to add some custom styles to your forms

Next we will create a navigation bar. With Rounded Rectangle Tool i will create a dark shape. The color is not important right now because we will add some layer styles in our next steps

Here are the layer styles we will use for the navigation bar from above.

Please note that the layer styles are available only for Vip Members

Download 30.000 layer styles

This is the result

In this box i will add a nice stock image, and some text

Under the search form i will create also a button, and i will us the same layer styles i have used for the navigation bar

With Line Tool i will create 2 horizontal lines.

I will add some text with Horizontal Type Tool, as well some place holders for images

On the right side of the body i will add also some text

In the body of the layout i will add also a nice slideshow which you can animate with any javascript library you want ( jquery, mootools, etc )

I will use the same layer styles i have used to create the navigation bar

This is my result

Please note the it is very important how many colors are you using when you create a web layout. Almost 90 % from layouts use only 3-4 colors so please be careful when you design layouts.

In this slideshow will be presented your last registered members. So here i will create some place holders for images

The shapes from above are made with Rounded Rectangle Tool, and they have applied the following layer styles

Now i will create a simple footer for this dating agency. All you ahem is to create one more time the two thin lines, and then with Horizontal Type Tool i will create some text

This is the final result and i hope you like it

If you want to download this layered PSD layout please register for a VIP account, and you will be able to download our entire collection with Premium resources.