What We’ll Be Creating
Resources Used In This Tutorial
Creating The Background
Create a new (Ctrl + N) document 1200 x 1140px with a white background. Select the the “Rectangular Marquee Tool” (M) then make a selection a cross the top half of the canvas. Once you’ve created the selection, fill (G) it using the color black #000000.
Once you’ve fill the selection add a “Gradient Overlay” using the settings below.
Next, select the “Rectangular Marquee Tool” (M) again only this time make a selection half the size of the first rectangle, fill (G) the selection with the color black #000000. Once the selection has been filled go to “Filter > Render > Lens Flare”, place the lens flare at the top left of the new rectangle.
Now that the lens flare has been added set the layer blend mode to “Screen”. You should have something like this.
Download some cloud brushes from the resource list.
Then add some clouds in the blue part of the rectangle, add some heavy clouds across the white line of the lens flare to hide where the rectangle ends. If you don’t succeed in hiding the edge of the rectangle you can use a layer mask.
Don’t worry to much about the edge in the middle as this will be covered by the rest of the header section.
Creating The Featured Area
Select the “Rounded Rectangle Tool” (U) with a radius of about 20px.
Drag out a rectangle leaving a decent amount of room for the website title.
We now need to modify the rectangle, to do this re-select the “Rounded Rectangle Tool” (U) then drag out two new rectangles, one at the top and one at the bottom. Make the rectangle at the bottom slightly smaller than the one at the top. To make sure the rectangle adds to the shape layer hold down the shift key before dragging out the two new rectangles.
On the two new rectangles we need to cut off the corners. Select the “Pen Tool” then change the option at the top to “Subtract From Shape Area”.
Cut the rounded corner off the top and bottom rectangle, simply hold down the shift key to add to the shape layer then draw a small triangle.
Now that the corners have been cut, download and open the blue abstract wallpaper.
Copy the wallpaper to the clipboard then load a selection around the featured rectangle we just modified. To load a selection select the layer then go to “Layer > Load Selection”. Once the selection has been loaded go to “Edit > Paste Special > Paste Into”.
The wallpaper should have been pasted within the rectangle shape and should be able to moved and transformed inside of the rectangle. If this is the case then the paste special command worked, you can now hide the old rectangle shape. Place the wallpaper so the flower like pattern is in the top left corner of the shape then add the following layer styles.
You should have something like this.
Add Some Text To The Header Area
At the top of the layout over the top of the lens flare add the website title. The font i used is verdana and the color was picked from the blue inside the wallpaper using the “Eye Dropper Tool” (I).
Next add some text on the right side of the title, this is a good place to advertise your company phone number if you have one. Then add some text inside of the featured area, the bolder the better.
Creating The Navigation
Select the “Rounded Rectangle Tool” (U) then on a layer behind the featured area drag out a rectangle coming out of the top right, the right side of the rectangle should line up neatly with the featured area.
Once the rectangle has been created add the following layer styles.
Inside of the navigation rectangle add a textual navigation.
Finishing Up The Featured Area
Underneath the featured area in the little space add a simple contact us feature. Start off with a rectangle and a sentence about contacting your company.
To the little rectangle add the following layer styles.
You should have something like this.
Lastly on the right side of the featured area add 4 small circles using the “Ellipse Tool” (U).
These 4 circles simulate that the featured area is some what of a jquery slider type featured area.
Creating The Main Content Area
The main content area is made up of 3 boxes filled with content and a small gallery. Starting with the 3 content boxes, select the “Rounded Rectangle Tool” (U)
To each of the 3 rectangles add the following layer styles.
You should have something like this.
Fill your 3 boxes with your desired content, I’ve opted for a welcome box, services box and some client testimonials. The titles of each box use a shade of grey and a shade of blue from the website title, doing this is a good way to bring in some color to the layout instead of having just one dull color, mostly grey or black.
Creating The Gallery
Create 4 rectangles using the “Rectangle Tool” (U), fill (G) each rectangle with the color grey #f1f1f1.
Load a selection around the first rectangle “Layer > Load Selection” then go to “Select > Modify > Contract” contract the selection by around 5-10 pixels. Copy and paste one of your gallery images into the rectangle by going to “Edit > Paste Special > Paste into”.
Repeat these steps for next 3 rectangles. You should end up with something like this.
Creating The Footer
Duplicate the featured shape then move the shape to the bottom of the canvas. Go to “Edit > Transform > Flip Horizontal” to flip the shape horizontally.
Inside of the rectangle where there is a kind of flap, download and add some social icons from the elegant social icons pack.
Inside of the rest of the footer area add your copyright information.
Conclusion
Thanks for taking part in this tutorial, if you managed to finish this tutorial I’d love to see some of your results. Feel free to post them up on ourFacebook Fan Page.
