Grafpedia decided to make you happy with a wonderful icons pack special Saint Valentine's day and a Photoshop tutorial teaching you to create a template regarding this subject. This template is dedicated to single people, it wears the colours of love and Saint Valentine: pink, red.
Each part of this website is efficient and can be used for all types of scripts dedicated to a dating website (newsletter, search engine, etc.....).
Pictures: I bought on Fotolia.com a licence for the picture displayed in
the carousel. It means that you do not get any right to use it (it
explains why the download psd file does not include this picture). You
can download it or another picture too, by your side, from Fotolia.com.
Before to start this tutorial, please see below the final result. You can also free download the icons pack on this page.
We can now start the creation of the template.
STEP 1 Create a document
Open your Photoshop software, then go to menu File>New and enter a name, width and height for your document. To validate, press the OK key.
Your document appears on screen. If you do not see the layers windows, display it going to menu Window>Layers.
Put a horizontal mark to 10px, and at 20px from the top of your picture. Use the Rectangular Marquee Tool (M) to create a band with a size of 1000x10px. Create a new group and name it the Top (to create it go to menu Layer>New>Group). Then create a new layer into this group and name it bg (to create a new layer go to menu Layer>New>Layer). Fill up now your selection with the Paint Bucket Tool (G) and the colour #a40000.
Create now on the right a higher band, 20px. On the right side of this band, colour this part this the colour #850000.
To finish, use the Text Tool (T) to add your first slogan. Add a shadow on the text (go to menu Layer>Layer style>Shadow).
STEP 2 Create the logo
To create the logo, create first a new group and name it the logo. Use the Text Tool (T) to add the name of the website (font used: Androgyne*) and under the slogan (font used: Helvetica).
*To download from: http://www.dafont.com/androgyne-tb.font
Then slide and drop the icon with shape of heart, available from the special Saint Valentine's day pack. Remember you can free download these icons from this page.
STEP 3 First menu
On the right of the logo, you must find a small horizontal menu including very important links. This menu is really easy to create. Create first a new group that you name the menu. Use then the Text Tool (T) to simulate the links. Regarding the hover effect, use the Rounded Rectangle Tool (U) with a radius of 4 to create a rectangle under the last link (fill up this rectangle with this colour #eee4e4).
STEP 4 Second menu
There must be a second menu just under, bigger, then easy to discover. Create a new group and name it the menu. Use the Marquee tool (M) to create an active selection with size of 1 000w 40. Create anew layer and fill your selection using this colour #eee4e4.
Use again the Rectangular Marquee Tool (M) to create a rectangle over the band, and a border of 2px width under the band (see picture below). Fill up these elements using colour #a40000. To finish, use the Text Tool (T) to add the first link.
Use one more time the Text Tool (T) to add the other links.
STEP 5 Create the button
Now, we have to work on the button to register, which will be on the right of this button. Follow the process to create this button.
1 Create a rounded rectangle with a radius of almost 40px (use the rectangular rounded tool (U) and the colour #a40000).
2 Apply two layer styles on this rectangle: an internal glow and a gradient overlay (go to menu Layer>Layer style>internal glow).
3 Duplicate your rounded rectangle (right click on the layer and select duplicate the layer) Then change to white the colour of filling up. Reduce now the size using the free transformation (Ctrl/Cmd + T to create a red border around the rectangle).
4 Go to menu Layer> Layer Mask>Reveal all, use the Foreground Gradient => Transparent on the layer mask to create a reflection.
5 Add the text using the Text Tool (T). Add a shadow on the text.
6 To finish, import the icon with a cherry shape available from the pack of icons.
See here the final result:
STEP 6 Create the carousel
Create a new group and name it the carousel. Import your picture (the picture must take all the width of your document). Use the Marquee tool (M) to cut your picture on its height to respect a size of 670px.
Use the rounded rectangle toll (U) with the colour #a40000 to create a rectangle with a size defined as 900x230px. To create a rectangle with the correct size, remind you can use help of the guides or you can create a rectangle and use the free transformation to enter the correct values of the size.
Create a shape of heart over your rectangle and use this time the colour #820000. To create this shape, use the custom form tool (U), check now the picture below.
Hit uppercase key while drawing the shape.
Add a layer mask on the layer (menu layer>Layer mask>reveal all) then colour in black the external part of the red rectangle.
Use now the Text Tool (T) to add a new slogan as well as a description of the website.
STEP 7 Search engine
To create the search engine, create first a new group that you name the form. Use the Text Tool (T) to enter the several labels and other contents. Regarding the inputs, easy use the Rectangular Marquee Tool (M). Add an outline to these rectangles (menu Layer>Layer styles>Outline).
On the right of each white rectangle, create a square using same tool. Add two layer styles on this square: an outline and a gradient overlay.
Put an arrow over the rectangle (you can find this con on this page:
http://www.iconfinder.com/icondetails/43221/128/arrow_black_go_monotone_right_solid_icon
Add now two layer styles to this icon: a colour overlay and a shadow.
See now the result:
Duplicate your document to create to columns for your form.
To finish the form, use the same method to create the second button (refer to step 5).
For the icon, go to this page to find all what you need: http://www.iconfinder.com/search/?q=zoom.
STEP 8 Create the page numbering
To close the part regarding the carousel, you need to add a page numbering on the left side of the picture previously added. Create a new group and name it the page numbering. Create now three rounds defined with a size of 12x12px (two of them in red #850000 and one in black #fff).
Check below the result:
STEP 9 Create the contents
The content of the website includes two different parts:
- One part to display the online members, the last subscribers or the most popular of them.
- One part to display a description of the website, the services or the last news.
Create first a new group that you name the women. Create then a new rectangle defined with a size of 440x250px, using colour #eee4e4 as filling up.
Use the Text Tool (T) to add the title of the block.
Use same style as the one used for the form (on the right of the inputs) to create a counter of connected people.
Go to Google to look for pictures of nice girls, adding under each picture, age and name of the girl.
Duplicate the women group and name it the men. Put this group on the right side of your picture.
See the result with the two blocks.
STEP 10 Second part of contents
Regarding this part, nothing is complicate. Create a new group that you name the description. Create a new layer and a red border of 2px height and import the icons. Use now the Text Tool (T) to add texts. To finish, add two buttons with same styles as them previously used
STEP 11 The footer
Regarding the footer, create first a new group, then use the Rectangular Marquee Tool (M) to fill up the bottom part of your picture (use the red colour #a40000). Use same tool to create a rectangle with a size of 1 000 x 40 that you place just under your picture (fill up this rectangle again with this red colour #820000).
Create a new group named the box1. Create a title using the Text Tool (T) with the font Androgyne (colour white, size 20px).
Use one more time the Text Tool (T) to simulate a list of links.
Create a new layer and use the brushes with an arrow shape (you download them from this link:: http://www.grafpedia.com/vip-downloads/325-bullet-icons-pixel-arrows
Duplicate twice the box1 group. Use the Move Tool (V) to put the copies at their correct place.
Regarding the last block, you are going to create a register form for the newsletter. To do it, add a title and a description as done for the other blocks.
Create the rectangle using the Rectangle Tool (U) and add three layer styles: internal shadow, colour overlay, outline. See the setting below:
Create now a new button (refer to step 5 for the technical method)
STEP 12 Add the Copyright and the links for social networks
Last step is regarding the Copyright of the website, as well as some links for social networks like Twitter and Facebook. Create a new group and name it the Copyright. Use the Text Tool (T) to add the Copyright on the left side of your picture.
Add three icons on the right, fill up these icons with the colour #d72626. Notice that I found these icons on this website: http://www.iconfinder.com/search/?q=iconset%3Asocial
This tutorial is now finished. Wasn't it easy?
