Lets Get Started
To begin, I set my background color to #BF9268 and then created a new document that was 1200 pixels wide by 1000 pixels high:
Next, I used color #671900 with the soft brush tool set to 300 pixels and created this circle near the top of my page:
Still using the soft brush tool, I created other circles using colors # CC6B04 and #1D3855 of different sizes. Here is my outcome:
Next, add some noise to this layer:
And then apply a guassian blur:
Here is the top part of my page so far:
For now, I'm going to go ahead and hide the circles from view and work on the layer below them. Use the Rectangular Marquee tool to select an area 1200 pixels wide by 400 pixels high at the top of the page:
Then set your foreground color to # AB7849 and your background color to #5B3A17. Use the Gradient Tool to fill in the selected area with a gradient from foreground to background color:
Once that's done, you can un-hide the layer with the blurred circles so that they show over the gradient layer. Create a clipping mask by right clicking on the circles' layer and select "Create Clipping Mask":
You should now see something like this:
Using color #671900 and the Rectangle Tool, I created this shape to serve as the seam between the header area and the bottom of the page:
Next, I used the Rounded Rectangle Tool to create a white shape in the center of the page:
Then I applied these layer styles to the white rectangle:
Here is what my complete page looks like so far:
Now we'll need to type in our site's name. To highlight the site name, I used the Ellipse Tool to create a small circle near the top of the page beneath the center area:
Then I applied a guassian Blur to the circle using this setting:
Using color #671900 and Tahoma font, I typed in the site name over the highlighter and applied these layer styles:
Here is what my site name looks like when it's finished:
To create the navigation bar, first I used color #617900 and the Rectangle Tool to create a thin rectangle to run across the top of the layout:
Next I selected the Rounded Rectangle Tool and placed it directly above my thin rectangle going down near the top of the central area. Once both shapes are lined up the way you like, merge the two layers together (CTRL E) and apply these layer styles to the navigation bar:
Next, create a new layer directly above the navigation bar. With the Rectangular Marquee Tool set to feather 6px, select an area around just the rounded rectangular portion of the navigation bar:
With the area still selected, use the line tool with white to create small, vertical lines across the rectangular selection. For this, I used the grid to help me align my lines, and used the "Add to Shape Layer" setting so that all the lines would appear on the same layer:
Here is what my header looks like once I've finished drawing in my vertical lines:
Now we're going to set the Blending Mode for this layer to "Soft Light":
Now, create a new layer and use the lasso tool to select this area:
With your soft brush tool set to 30 pixels and opacity 50%, paint just over the top edge of the selection:
Then inverse the selection and repeat the process. You can also delete some of the white from inside:
And finally set the Blending Mode to Overlay and set your opacity:
I used Tahoma font with color#BF9268 to write in the links using the text tool and applied this drop shadow to each link:
Here is the completed header section for my layout with the completed navigation bar:
For the content that appears in the top portion of the central area, I used Tahoma font with color #5B3A17. On the right side, I placed a thumbnail image of another layout I developed.
To create the navigation arrows around the thumbnail image, I set my foreground color to #617900. Then I used the Line tool set to 6 pixels and created a small diagonal line:
I duplicated this process slanted the other way to create the arrow and then merged the two shapes together into one arrow. Next I applied these layer styles:
I repeated this process to create the right arrow as well.
To frame the thumbnail for the site that's on display, I first created another layer directly beneath the layer containing my site's thumbnail. Then, using the Rectangular Marquee Tool, I selected a rectangle around my picture and filled it in with color #1D3855. Next, I applied this layer style:
For the text in the middle, I used color # AB7849 and then applied this drop shadow:
I used the text tool to fill out the content for the bottom area as well.
For the highlighters behind the titles in the bottom area, I used color #1D3855 and the Ellipse tool to create a very thin ellipse:
Then I applied a shape blur to the ellipse:
Here is my result for the title highlighter in the bottom content area:
And finally, add in your social media icons. The set I used comes from claycauleyincat DeviantArt.
Here is what my finished layout looks like:
That's it all done, hope you enjoyed this tutorial, look out for more tutorials coming soon. Thanks.
