website promotion banner
eturnkeys
Your Ad Here
Photoshop  Home Photoshop Web Layout Nice Grunge Layout with Glowing Text
rss

Nice Grunge Layout with Glowing Text

Author: tutmaster More by this author


1. Create a new document with the size 800 by 1000 pixels and fill the background with the color #c89875.

2. Now we need a brick wall image. Follow the next link to download the image which I used. stock.xchng - brickwall texture 56 (stock photo by sundstrom). You will need an account to download the image. Open this image in Photoshop, then use the settings from the next image for Brightness/Contrast and Curves. Then go to Edit > Define Pattern. Do not close the image yet.

Nice Grunge Layout with Glowing Text image 1

3. Go back to our document and double-click the Background layer to unlock it. Then open the Layer Style window and use the settings from the following image for Pattern Overlay.

Nice Grunge Layout with Glowing Text image 2

4. To create the header place the brick wall image in our document using Move Tool (V). Use Free Transform (Ctrl + T) to scale it down. Go to Layer > Layer Mask > Reveal All then use a black brush to mask the bottom white part of the image. Open the Layer Style window and use the settings from the next image for Drop Shadow.

Nice Grunge Layout with Glowing Text image 3

5. Now we are going to create a glow effect for the title. Pick the Type Tool and type something using the white color. The font which I used is called Arista. Duplicate the text layer, then open the Layer Style window for the original text layer and use the settings from the following image. Transform the copy of the text layer intro a Smart Object then go to Filter > Blur > Gaussian Blur using a radius of two pixels. Place the both text layers intro a group, then change its blend mode to Color Dodge. Create a new layer (not inside the group) and fill it with the color #14436f. Then hold down Shift+Ctrl and click two-three times on the text layer's thumbnail. Make sure that you have selected the blue layer, then go to Layer > Layer Mask > Reveal Selection.

Nice Grunge Layout with Glowing Text image 4

Nice Grunge Layout with Glowing Text image 5

Nice Grunge Layout with Glowing Text image 6

6. Use Burn Tool to make the brick wall layer darker in some areas.

Nice Grunge Layout with Glowing Text image 7

7. Now we are going to create the menu background. Follow the next link to download a wood texture. FlyUpload / Share Files. Open it in Photoshop and place it in our document. Duplicate it and create the background menu like I did. Open the Layer Style window and use the settings from the following image for Outer Glow.

Nice Grunge Layout with Glowing Text image 8

8. Use the same technique which I presented you at the step 5 to create the same effect for the page titles.

Nice Grunge Layout with Glowing Text image 9

9. Select the Rounded Rectangle Tool and make the background for the content and sidebar. I used a radius of 10 pixels and the colors #ffd9bd (for the content background) and #ffc295 (for the sidebar).

Nice Grunge Layout with Glowing Text image 10

10. Use the brick wall image and the wood texture to create three columns for the footer. Take a look at the next image for reference. Open the Layer Style window and use the next settings for Outer Glow and Inner Glow.

Nice Grunge Layout with Glowing Text image 11

11. Follow the next link to download a set of splatter brushes Free Photoshop Brushes >> Splatter brushes - Dirty Brushes - Messy brushes. Create a new layer, set the foreground color to black and use the brushes you have just downloaded to make a grunge effect for the footer's columns. Set the blend mode for this layer to Overlay. You can do the same thing for the menu background.

Nice Grunge Layout with Glowing Text image 12

12. Our layout is almost done. All you have to do is to write the content.

Nice Grunge Layout with Glowing Text image 13

Final result:

Nice Grunge Layout with Glowing Text Tutorial: Final Result



Author's URL: www.talk-mania.com

Rate this Material: Bad 1 2 3 4 5 Excellent
print this page tell a friend subscribe to newsletter subscribe to rss

Add comments to "Nice Grunge Layout with Glowing Text"