Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Gaming Layout #5

Gaming Layout #5


Create a new document 900x740 select the colors #fafafb and #d8d8d8. Select the gradient tool with a reflected gradient, drag your gradient over your canvas. Start the gradient from about the middle of the canvas then drag as far up towards the top of the screen as you can.

Gaming Layout #5 image 1

Using a combination of two colors add your website title, the colors ive chosen are #505b64 and #0c83be. The font i used for the text is called "dirty ego".

Gaming Layout #5 image 2

Using the rectangle tool or the rectangular marquee tool create a small rectangular box.

Gaming Layout #5 image 3

Fill the box with any color then goto "edit > transform > perspective". Select the bottom middle anchor point and drag towards the left side of the canvas.

Gaming Layout #5 image 4

Add this gradient overlay to your rectangle.

Gaming Layout #5 image 5

Place your rectangle up by your website title and slogan. Duplicate the rectangle as many time as you need, ive used 6 rectangles for my navigation. Place the rectangles side by side leaving a 1 pixel gap between each button.

Gaming Layout #5 image 6

The very first button on the navigation, change the gradient overlay to the image below.

Gaming Layout #5 image 7

Label your navigation buttons, then add a text based navigation in the top right corner.

Gaming Layout #5 image 8

Find your desired featured image, place it underneath the navigation bar, its best if the image is the same width as the bottom of the navigation.

Gaming Layout #5 image 9

Add these layer styles to your featured image to complete the effect.

Gaming Layout #5 image 10

Gaming Layout #5 image 11

On top of your featured image add a black rectangle at the bottom with an opacity of 50%.

Gaming Layout #5 image 12

In the space on the left side of the featured image add another rectangle with these layer styles.

Gaming Layout #5 image 10

Gaming Layout #5 image 13

Gaming Layout #5 image 11

Inside this rectangle add some dummy news articles.

Gaming Layout #5 image 14

Create another 3 boxes like the image below using the same layer styles as the previous box we made.

Gaming Layout #5 image 15

The two bigger boxes will be used for previews and reviews, the small third box will be used to seperate the content from an advert that will be in the left over space. Add your dummy content to the boxes.

Gaming Layout #5 image 16

Finally create a box the whole width of all the boxes put together.

Gaming Layout #5 image 17

Add these layer styles to the box to complete the effect.

Gaming Layout #5 image 10

Gaming Layout #5 image 18

Gaming Layout #5 image 11

Inside the footer box add your footer elements to complete your website. The finished peice looks like this.

Gaming Layout #5 Tutorial: Final Result



Author's URL: Hv-Designs.co.uk
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Add comments to "Gaming Layout #5"

Only registered users can write comment

No comments yet...