Illustrated designs - http://www.illustrateddesigns.com
Dating Agency Weblayout
http://www.illustrateddesigns.com/articles/2549/1/Dating-Agency-Weblayout/Page1.html
By Art-D !
Published on 12/5/2006
 
Dating Agency Weblayout in Photoshop CS Dating Agency Weblayout
This tutorial will show you how to create an online dating weblayout.

Dating Agency Weblayout - part 1
Open a new file, having 766x700 px and 72 dpi. Apply the parameters indicated next step. (the basic color must be 8D0107).

Dating Agency Weblayout in Photoshop CS

Blending Options-Bevel and Emboss

Dating Agency Weblayout in Photoshop CS

Dating Agency Weblayout in Photoshop CS

Blending Options-Pattern Overlay

Dating Agency Weblayout in Photoshop CS

Use next instrument then to represent a figure colored in FAF7F2 with the sizes shown below.

Dating Agency Weblayout in Photoshop CS

Blending Options-Drop Shadow

Dating Agency Weblayout in Photoshop CS

Blending Options-Stroke

Dating Agency Weblayout in Photoshop CS

Take the next tool now to picture a rectangle that must be of this color – 717171.

Dating Agency Weblayout in Photoshop CS

Take another tool now and represent an element colored in 404040 and then apply this instrument to erase the upper part, like it is demonstrated next image. Apply the same parameters.

Dating Agency Weblayout in Photoshop CS

Blending Options-Drop Shadow

Dating Agency Weblayout in Photoshop CS

Dating Agency Weblayout - part 2
Blending Options-Stroke

Dating Agency Weblayout in Photoshop CS

Take again this tool to insert a picture with the color EAEAEA and the parameters from next step.

Dating Agency Weblayout in Photoshop CS

Blending Options-Stroke

Dating Agency Weblayout in Photoshop CS

Apply the previous tool to represent a figure with the parameters indicated in the lower picture.

Dating Agency Weblayout in Photoshop CS

Blending Options-Stroke

Dating Agency Weblayout in Photoshop CS

Take the next instrument to picture an element colored in EE2425, then apply the next tool to delete the upper part of the image. Make everything look like in the next picture.

Dating Agency Weblayout in Photoshop CS

Blending Options-Drop Shadow

Dating Agency Weblayout in Photoshop CS

Blending Options-Stroke

Dating Agency Weblayout in Photoshop CS

Apply again to picture an element colored in FF3367, then use another tool to erase the upper part of our picture. Use the same sizes demonstrated in the picture.

Dating Agency Weblayout in Photoshop CS

Blending Options-Drop Shadow

Dating Agency Weblayout in Photoshop CS

Dating Agency Weblayout - part 3
Blending Options-Stroke

Dating Agency Weblayout in Photoshop CS

Take again this tool to add one more element colored in 404040 and the parameters shown next step.

Dating Agency Weblayout in Photoshop CS

Blending Options-Drop Shadow

Dating Agency Weblayout in Photoshop CS

Blending Options-Stroke

Dating Agency Weblayout in Photoshop CS

Copy the new made layer and place everything out the same way it is done below.

Dating Agency Weblayout in Photoshop CS

Apply the next instrument to represent a figure colored with the following color 3BA2EC and the parameters from next step (we're beginning to create Main Menu).

Dating Agency Weblayout in Photoshop CS

Blending Options-Drop Shadow

Dating Agency Weblayout in Photoshop CS

Blending Options-Stroke

Dating Agency Weblayout in Photoshop CS

Copy this new made layer 3 times and place out the first one exactly it is done below.

Dating Agency Weblayout in Photoshop CS

The second one must be enlarged, using Free Transform selection and placed out also like it is demonstrated below.

Dating Agency Weblayout in Photoshop CS

Dating Agency Weblayout - part 4
Don’t forget about placing correctly the layers.
In the third one must be changed the color on BE0000. Apply also Free Transform selection to increase its size.

Dating Agency Weblayout in Photoshop CS

place correctly the layers.
Apply now the next instrument to insert a figure colored in B8B8B8, then use the next tool to erase the upper part and the left one, like it is demonstrated next picture (figure for welcome windows).

Dating Agency Weblayout in Photoshop CS

Blending Options-Stroke

Dating Agency Weblayout in Photoshop CS

Use now a different instrument to picture an element drawn in F47190.

Dating Agency Weblayout in Photoshop CS

Add the text now (text for Search form), keeping the same type, size and the color.

Dating Agency Weblayout in Photoshop CS

Dating Agency Weblayout in Photoshop CS

Add now Agency Name, keeping again the type, size and the color.

Dating Agency Weblayout in Photoshop CS

Dating Agency Weblayout in Photoshop CS

Blending Options-Drop Shadow

Dating Agency Weblayout in Photoshop CS

Add another part of the text and keep again the same type, size and the color, shown in the table.

Dating Agency Weblayout in Photoshop CS

Dating Agency Weblayout - part 5
Dating Agency Weblayout in Photoshop CS

Blending Options-Drop Shadow

Dating Agency Weblayout in Photoshop CS

Next text for Main Menu also must be added with the same type, size and the color.

Dating Agency Weblayout in Photoshop CS

Dating Agency Weblayout in Photoshop CS

Blending Options-Stroke

Dating Agency Weblayout in Photoshop CS

Add the next part of the text. You may see below the demands for the text.

Dating Agency Weblayout in Photoshop CS

Dating Agency Weblayout in Photoshop CS

Blending Options-Stroke

Dating Agency Weblayout in Photoshop CS

Keep using now the same instrument and represent a figure with the same parameters shown next step.

Dating Agency Weblayout in Photoshop CS

Dating Agency Weblayout in Photoshop CS

Dating Agency Weblayout - part 6
Blending Options-Drop Shadow

Dating Agency Weblayout in Photoshop CS

Blending Options-Gradient Overlay

Dating Agency Weblayout in Photoshop CS

Gradient’s parameters.

Dating Agency Weblayout in Photoshop CS

Blending Options-Stroke

Dating Agency Weblayout in Photoshop CS

Copy the new made layer and place it out like it is shown below, but changing Blending Options-Gradient Overlay

Dating Agency Weblayout in Photoshop CS

Dating Agency Weblayout in Photoshop CS

Dating Agency Weblayout in Photoshop CS

Using the next tool , it’s possible to draw the small circle we need colored in 0073A7, with the sizes shown below.

Dating Agency Weblayout in Photoshop CS

Dating Agency Weblayout in Photoshop CS

Blending Options-Inner Shadow

Dating Agency Weblayout in Photoshop CS

Dating Agency Weblayout - part 7
Take the known instrument and insert a new figure of white color with the sizes shown next image.

Dating Agency Weblayout in Photoshop CS

Represent another element with the previous tool, but it must be colored in white

Dating Agency Weblayout in Photoshop CS

Dating Agency Weblayout in Photoshop CS

Take the next tool and insert a new figure colored in 3BA2EC. The parameters are indicated next step.

Dating Agency Weblayout in Photoshop CS

Blending Options-Stroke

Dating Agency Weblayout in Photoshop CS

Take the necessary picture now and place its layer above the new made one, holding on Alt button and make a click between these layers. The photo will transform itself into a mask (header is ready now).

Dating Agency Weblayout in Photoshop CS

Dating Agency Weblayout in Photoshop CS

Apply the next instrument to picture a figure colored in F8A8BB with the parameters from below.

Dating Agency Weblayout in Photoshop CS

Blending Options-Stroke

Dating Agency Weblayout in Photoshop CS

Copy this new made layer.

Dating Agency Weblayout in Photoshop CS

Dating Agency Weblayout - part 8
Then use again the indicated tool to represent a picture with the color FF3367 and the parameters must be the same with those from below.

Dating Agency Weblayout in Photoshop CS

Dating Agency Weblayout in Photoshop CS

Blending Options-Inner Shadow

Dating Agency Weblayout in Photoshop CS

Copy the recently made layer two times and place everything out the same way it is demonstrated next step.

Dating Agency Weblayout in Photoshop CS

Take the next tool to insert a new figure colored in FFFFFF and it must have the next sizes.

Dating Agency Weblayout in Photoshop CS

Blending Options-Stroke

Dating Agency Weblayout in Photoshop CS

Copy this new made layer.

Dating Agency Weblayout in Photoshop CS

Apply the instrument and introduce another element with the color CCCCCC and with the parameters form next image.

Dating Agency Weblayout in Photoshop CS

Dating Agency Weblayout in Photoshop CS

Blending Options-Stroke

Dating Agency Weblayout in Photoshop CS

Dating Agency Weblayout - part 9
Take the instrument to introduce a rectangle now of black color.

Dating Agency Weblayout in Photoshop CS

Dating Agency Weblayout in Photoshop CS

Insert the same way several other elements for Search Form and Login Form (the lens is possible to draw with and its color must be C6C6C6)

Dating Agency Weblayout in Photoshop CS

Using the shown instrument , build several lines colored in 09577B, like in the next image.

Dating Agency Weblayout in Photoshop CS

The same instrument may be useful in representing the lines colored in A9A9A9 (the interrupted line draw with the next tool and it must be pictured in white)

Dating Agency Weblayout in Photoshop CS

Apply the same tool to continue representing the lines colored in 0088DA.

Dating Agency Weblayout in Photoshop CS

One more line built by the same instrument, but colored in 9E0000.

Dating Agency Weblayout in Photoshop CS

Apply now the next tool to insert 5 small dots colored in BE0000.

Dating Agency Weblayout in Photoshop CS

Dating Agency Weblayout in Photoshop CS

Place this new represented layer 5 times and place it out the same way it is done below.

Dating Agency Weblayout in Photoshop CS

Dating Agency Weblayout - part 10
Use the next instrument to build another line, but colored in black this time.

Dating Agency Weblayout in Photoshop CS

Take the next tool to represent a triangle of black color also.

Dating Agency Weblayout in Photoshop CS

Dating Agency Weblayout in Photoshop CS

Copy this new created layer and place it the same way it is shown below.

Dating Agency Weblayout in Photoshop CS

Applying the next tool create a rectangle of blue color with the sizes from below.

Dating Agency Weblayout in Photoshop CS

Blending Options-Stroke

Dating Agency Weblayout in Photoshop CS

Copy this new made layer two times and make use of Free Transform selection to enlarge them and place everything out the picture indicates it below.

Dating Agency Weblayout in Photoshop CS

Take the photo now and place its layer above the layer, holding Alt button. Click between the layers and the picture becomes a mask.

Dating Agency Weblayout in Photoshop CS

Dating Agency Weblayout in Photoshop CS

Take a different photo now and place its layer above the layer with the blue rectangle, holding the Alt button. Click between these layer and the photo becomes a mask.

Dating Agency Weblayout in Photoshop CS

Dating Agency Weblayout - part 11
Take the next photo now and place its layer above the layer with the blue rectangle, holding on the same Alt button. Click between these layer again and the photo becomes a mask also.

Dating Agency Weblayout in Photoshop CS

Take another photo now and place it the same way it is indicated next image.

Dating Agency Weblayout in Photoshop CS

Applying now the next tool , represent a figure colored in BE0000 with the parameters from next step.

Dating Agency Weblayout in Photoshop CS

Blending Options-Drop Shadow

Dating Agency Weblayout in Photoshop CS

Blending Options-Stroke

Dating Agency Weblayout in Photoshop CS

Copy this new made layer two times and place them out the same way like in the next picture.

Dating Agency Weblayout in Photoshop CS

Now add the text for Quick Search Form, Members Login, Welcome Windows, Featured Profiles keeping the Tahoma type, the size and the color.

Dating Agency Weblayout in Photoshop CS

Finished!

View full size here.