Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Design a Dating Layout

Design a Dating Layout


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

Img

For this white shape i will add the following layer styles

Img

Img

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

Img

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

Img

Img

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

Img

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

Img

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

Img

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

Download 30.000 layer styles

Img

Img

Img

Img

This is the result

Img

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

Img

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

Img

With Line Tool i will create 2 horizontal lines.

Img

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

Img

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

Img

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 )

Img

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

This is my result

Img

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

Img

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

Img

Img

Img

Img

Img

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

Img

This is the final result and i hope you like it

Img



Author's URL: grafpedia
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Web Layout Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials


Like us to: