Now, we have everything we need so let's get started.
Step 1:-
First, we will create a new document with 900 px Width and 900 px Height, and transparent background.
Step 2:-
Now let's color our background. For this, select ";Paint Bucket Tool"; with foreground color #9d0409.
Step 3:-
Now let's duplicate the background layer. Simply ";Right Click"; the layer and select ";Duplicate Layer";. Or, you can get the same effect by pressing ";CMD/Ctrl + J";. Now we are going to add some Noise to our background. For this go to Filter - Noise - Add Noise. The noise amount should be 7.16%.
Step 4:-
Time to create some buttons. Now select ";Rounded Rectangle Tool"; and create a small rectangle at the top. Fill it with #99080c.
Step 5:-
Our navigation bar looks very boring so let's add some effects. First we are going to add some gradient. And for this, click on Layer - Layer Style - Gradient Overlay. Our left side Color stop should be #3d0200 and right side color stop should be #ab1a1e.
Now click on Layer - Layer Style - Outer Glow. Make sure that outer glow color is #bba162 and blending mode should be ";Linear dodge (Add)";. With 100% Opacity.
Step 6:-
Now we are going to add the navigation names or page names. For this, simply select the ";Text Tool"; and type the pages. Make sure the text color is # ffbf9c.
Step 7:-
Add the logo on the upper left corner.
Step 8:-
Now select ";Rounded Rectangle Tool"; and create a Rectangle in the middle. After that fill it with #7f1413. Then add gradient to our rectangle. For this click on Layer - Layer Style - Gradient Overlay. Outer color stop should be # 8c0b0e and middle one should be #c72e2a.
Step 9:-
Now let's add some decorations. For this we will use different Brushes from our Heart brush set. Randomly use these brushes with different colors like #4d0404, #8f0411, #ff0000 and #710303. Make sure you create a new layer every time you use a different brush. You can create a new layer by clicking Layer - New Layer.
Step 10:-
Now it's time to add some glow. Select the heart layer and go to Layer - Layer style - Outer glow. Make sure our outer glow color is #917841 and blend mode should be ";Linear Dodge(Add)";.
Step 11:-
Let's add some starts to get that glittering effect. For this I'm using our Star brush set. We are going to keep our size quite small. And our color will be #ffffff.
Step 12:-
Now we are going to add some outer glow to our stars. For this click Layer - Layer Style - Outer Glow. Our outer glow should be # ffd178 and blending mode should be ";Linear Dodge (Add)";.
Step 13:-
Now let's add an image on the left side of our rectangle.
Step 14:-
Now we'll create a nice search box on the right. For this select our ";Rectangle Tool";, create a Rectangle and fill it with # 000000. Let's add some shadow to our Rectangle. For this go to Layer - Style Layer - Drop Shadow.
Step 15:-
Select ";Rectangular Marquee Tool"; and create a rectangle.
Now we are going to add some gradient effect. For this select the ";Gradient Tool";. Make sure left color stop should be # 5c5c5c, Middle and right color stop should be # 111111.
Step 16:-
Now let's add our search box title using ";Text Tool";. Then select ";Line Tool"; with ";Weight 2 px"; and create a small horizontal line with color #121212 and reduce the Opacity to 25%.
Step 17:-
Now we'll create some options in our search box using our ";Text Tool"; and ";Rectangle Tool";. Make sure our text color is # 7b7b7b. Now create a small Rectangle next to each text. Click on the rectangle layer, and then Click Layer - Layer style - Gradient Overlay. For creating a Gradient we are going to change the left color stop to #808080 and right color stop to # ffffff. Plus we are going to add a small arrow using ";Custom shape tool";. Fill the arrow with # 000000. After creating all the options by simply duplicating the Rectangle layer. You can do that by ";Right-clicking"; the rectangle layer and selecting duplicate layers or you can do the same by pressing down ";CMD/Ctrl +J";.
Now to complete the search box we'll create the search button. Simply select ";Rounded Rectangle Tool"; and create a small button. And fill it with # 363535. Now let's add gradient to our button.
For this go to Layer - Layer style - Gradient Overlay. Left color stop should be # 000000 and right color stop should be #545454. And now our search box is complete.
Step 18:-
Now we are going to create an image slider. For this select ";Rounded Rectangle Tool"; and create a rectangle. Fill it with # 0a0a0a and reduce the opacity to 88%.
Then click on Layer - Layer Style - Gradient Overlay. Make sure our outer color stops are #000000 and middle one should be # 96070b.
Step 19:-
Now add some images and create some Outer Glow for each image. I'm using two colors # 8d120e for boys and # ff9e7b for girls. Opacity should be 100%, Noise 0%, Size 7 px, Range 2% and Jitter 0%.
Step 20:-
Now let's add options. For this we'll use our Chat icons and 20 Valentine icons. Add text using ";Text tool"; and icons. Plus we'll create a more button by selecting ";Rounded Rectangle Tool"; and creating a small rectangle. And add gradient to this. Make sure outer color stop are #99080c and middle one should be #ce4e3b. Then add text to these buttons using our ";Text Tool"; again. Now duplicate all these layers and place it on images.
Lastly, let's add arrows on the sides for navigation. First create small circle using our ";Ellipse Tool";. Fill it with # f68833. Now it's time to add arrows. You can create your own arrow using ";Pen Tool";. And fill it with color # 000000. Now let's add some ";Outer Glow"; to the arrow. Outer glow color should be # fda352. And create the same circle and arrow on the other side. Now our slider is done.
Step 21:-
Now select ";Rounded Rectangle Tool"; and create another rectangle. Fill it with # 6e0403. Now we are going to use the Heart brush set again. And randomly use these brushes with different colors like #4d0404, #8f0411, #ff0000 and #710303.
Now we are going to add gradient to our rectangle. For this select Layer - Layer style - Gradient Overlay. Left color stop should be # fab49b, middle on should be # bb191e and color stop on the right should be #f37032. Keep the opacity to 90%.
Step 22:-
Now add an image on the right side.
Step 23:-
Now let's add some text and title using ";Text Tool";. Make sure our title text color is # b72a03 and other text should be # ecebeb. Now add some ";Outer glow"; to the title. Keep the Outer glow color # fbfbc4. And blending mode should be ";Linear dodge (Add)";. And then add the ";more"; button. But this time fill it with #691f1c.
Step 24:-
Last but not the least add the copyright text at the bottom. Using our famous ";Text Tool"; and make sure the color is # b3b3b0. And we are done.
Below is the final result of our romantic dating layout. Click on it to view the full size image. I hope you guys enjoyed this tutorial and learn something. Do try and share your results with us. You can also download the original PSD of this layout as well as other items I've used from our VIP member area. So simply register and get instant access to our thousands of amazing items to create some outstanding designs.
