How To Create a Green Grunge Web Layout

Home » Adobe Photoshop » How To Create a Green Grunge Web Layout

In this tutorial I will show you how to create a green grunge layout. There are over 60 steps, so it may take quite a few hours to finish. Before we begin, take a moment to download some grunge brushes for use with Photoshop. There are a lot of them on many websites on the internet. Here are some high quality brushes that you can use:

You will also need to download some leaf images. Here are some leafs that will do the job. Now let’s get started!

Step 1

Create a new document in Photoshop with the dimensions 1200px by 490px. Then select the Paint Bucket Tool (G) and fill the background with the color #274618.

step1

Step 2

Create a new layer and use the Rectangular Marquee Tool (M) to create a selection like I did. Then select the Gradient Tool (U) and drag a gradient from the top of your selection to the bottom, using the colors #de6d00 and #912b00. Name this layer “orange bar.”

step2

Step 3

Create a new group (Layer > New > Group) and name it “brushes.” Create a new layer inside this group, set the foreground color to white, select a grunge brush and paint with it over your orange bar. Set the opacity of this layer to Overlay and name it “grunge brush overlay.” Then you can use the Rectangular Marquee Tool (M) to select the areas that are outside of your orange bar and delete them.

step3

Step 4

Repeat the previous step using a different brush and the color #d46300. Then use the Rectangular Marquee Tool (M) to select the area of this brush which is over your orange bar and delete it. Set the blend mode of this layer to Soft Light and name it “grunge brush soft light.”

step4

Step 5

Use the Rectangular Marquee Tool (M) to create a selection like I did. Then go to Layer > New Fill Layer > Gradient and use the settings from the following image. Set the blend mode of this layer to Soft Light 54% and name it “black gradient.”

step5

Step 6

Use the Rectangular Marquee Tool (M) and create a selection at the top of your document. Then go to Layer > New Fill Layer > Gradient and use the settings from the following image. Set the blend mode of this layer to Overlay and name it “white gradient.”

step6

Step 7

Select the Line Tool (U), set the weight to 1px and create a horizontal line at the top of your orange rectangle using the color #140c06. Name this layer “1px black line.”

step7

Step 8

Use the Line Tool (U) again to create a horizontal white line with the weight of 1px beneath the black line. Set the blend mode of this layer to Overlay 22% and name it “1px white line.”

step8

Step 9

Create a new group and name it “brushes.” Create a new layer, set the foreground color to white, select a grunge brush and paint with it on your canvas. You can use as many brushes and layers as you want. Then set the blend mode of each layer to Overlay.

step9

Step 10

Now we are going to create the background for our navigation bar. Create a new group and name it “navigation bar.” Create another group and name this one “navigation bar brushes.”

Create a new layer inside the “navigation bar brushes” and paint with a white grunge brush beneath your orange bar. You can use as many brushes and layers as you want. Then set the blend mode of each layer to Overlay.

step10

Step 11

Create a new layer and use the Rectangular Marquee Tool (M) to create a selection like I did. Select the Gradient Tool (G) and use the settings from the following image to create a new gradient. Then drag this gradient from the top of your selection to the bottom. Name this layer “navigation bar.”

step11

Step 12

Select the Eraser Tool (E), select a big soft brush and erase the left and right side of your navigation bar.

step12

Step 13

Now we are going to add a light effect above the navigation bar. First, use the Rectangular Marquee Tool (M) to create a selection like I did. Then create a new layer, select a white soft brush (B) with a diameter around 200px and paint with this brush over the bottom area of your selection. Take a look at the following image for reference. Set the blend mode of this layer to Overlay and name it “highlight.”

step13

Step 14

Repeat the previous step, but this time set the opacity of the layer to 60% and name it “highlight 2.”

step14

Step 15

Select the Line Tool (U) and create a horizontal line with the weight of 1px at the top of your navigation bar, leaving a distance of 1px between the navigation bar and this line. Then select the Eraser Tool (E) and erase the left and right side of the line. Double-click on this layer to open the Layer Style window and use the settings from the following image. Name this layer “1px green line.”

step15

Step 16

Select the Type Tool (T), set the foreground color to white and write the text for your navigation menu items. Then double-click on this layer to open the Layer Style window and use the settings from the following image.

step16

Step 17

Use the Rectangular Marquee Tool (M) to create a selection like I did. Then create a new layer, and drag a gradient from the top of your selection to the bottom, using the colors #6fb600 and #479501.

Create a new layer, and use the Rectangular Marquee Tool (M) to create a smaller selection, like I did. Then drag a gradient from the top of your selection to the bottom using the colors #b9f100 and #65bc05.

Put this layer beneath the text layer that you have created at the previous step.

step17

Step 18

Create a new group and name it “header.” Now we are going to create a logo. First, select the Type Tool (T) and write the word “FIKED” using the white color. The font which I have used is called Impact. Double-click on this layer to open the Layer Style window and use the settings from the following image.

step18

Step 19

Now we are going to include some stars in our logo. Select the Custom Shape Tool (U), right-click on your image, select the “5 Point Star” shape, hold down the Shift key and create a star using the color #dedede. Name this layer “star 1.”

Create two more stars like I did, using the colors #c0c0c0 and #a8a8a8. Then name these layers “star 2” and “star 3.”

step19

Step 20

Ctrl-click on the vector mask of the “star 1” layer to select that star. Go to Select > Modify > Expand and expand the selection by 3 pixels. Then click on the “star 2” layer and go to Layer > Layer Mask > Hide Selection.

step20

Step 21

Ctrl-click on the vector mask of the “star 2” layer to select that star. Go to Select > Modify > Expand and expand the selection by 3 pixels. Then click on the “star 3” layer and go to Layer > Layer Mask > Hide Selection.

step21

Step 22

Ctrl-click on the thumbnail of the “Fiked” text layer to select the text, go to Select > Modify > Expand and expand the selection by 5 pixels. Then click on the mask of the “star 2” layer and fill the selection with black. Take a look at the following image for reference.

step22

Step 23

Add a subtle shadow to each star using the settings from the following image, then change the color of each star to white.

step23

Step 24

Select the Type Tool (T), set the foreground color to white and write “LIVE EXTREME” beneath the “FIKED” word. Double-click on this layer and use the settings from the following image for Drop Shadow.

step24

Step 25

Use the Rectangular Marquee Tool (M) to create a selection like I did. Go to Layer > New Fill Layer > Solid Color and set the color to white. Then set the blend mode of this layer to Overlay and put it beneath the “Fiked” layer.

step25

Step 26

Create a new layer and use the Rectangular Marquee Tool (M) to create a selection like I did. Then drag a white to transparent gradient from the left side of your selection to the right side. Name this layer “gradient” and set its blend mode to Overlay.

step26

Step 27

Use the Type Tool (T) to add more texts in your header. In the following image you can see the settings of each layer style that I have applied to my text layers.

step27

Step 28

Group all the layers created so far (without the background) and name the group “header & navigation.” Now we are going to increase the size of our canvas, so we can create the rest of the layout. Go to Image > Canvas Size and use the settings from the following image. Then fill the background with the color #274618.

step28

Step 29

Create a new layer and paint with a black grunge brush (B) beneath your navigation bar. Then set the blend mode of this layer to Soft Light and name it “black grunge.”

step29

Step 30

Select the Rectangle Tool (U) and create a big white rectangle, like I did. Then double-click on this layer to open the Layer Style window and use the settings from the following image for Stroke. Name this layer “content bg.”

step30

Step 31

Use the Rounded Rectangle Tool (U) to create a small rounded rectangle in the upper left corner of your big white rectangle. Then drag a gradient over this rounded rectangle from the left to the right side, using the colors #8ecf3b and #639029. Put this layer beneath the “content bg” layer, leaving only a half of the rounded rectangle visible. Then name this “rounded rectangle.”

step31

Step 32

Select the Line Tool (U), set the weight to 4px and create a white line with the same height as your big white rectangle. Then set the blend mode of this layer to Overlay and name it “white line.”

step32

Step 33

Now we are going to create two vertical dotted lines. First, select the Pencil Tool (B), open the Brushes palette (F5) and set the spacing to 236%. Then set the foreground color to #639029, hold down the Shift key and draw a vertical dotted line from the top of your big white rectangle to the bottom. Put this line in the left side of your white rectangle, duplicate it (Ctrl+J) and then put the new line in the right side.

step33

Step 34

Select the Rounded Rectangle Tool (U), set the radius to 20px and create a rounded rectangle at the bottom of your big white rectangle, using the color #639029. Then use the Rectangular Marquee Tool (M) to select the top part of this rounded rectangle and delete it.

step34

Step 35

Select the Type Tool (T), set the foreground color to white and write the text for your navigation menu items on your green rounded rectangle. Then double-click on the text layer to open the Layer Style window and use the settings from the following image for Drop Shadow.

step35

Step 36

Add two horizontal dotted lines at the bottom of your big white rectangle – one using the color #639029 and another one using the color #182b0e.

step36

Step 37

Use the Rectangular Marquee Tool (M) to create a selection like I did. Then drag a radial gradient from the center of your selection to the left edge, using the colors #366121 and #1f3713. Put this layer beneath the green rounded rectangle layer.

step37

Step 38

Create a new layer, select a black grunge brush and paint with it over the footer of your layout. Then double-click on this layer and use the settings from the following image. Name this layer “grunge brushes” and set its blend mode to Soft Light 66%.

step38

Step 39

Download this orange bar image, open it in Photoshop and move it into your document using the Move Tool (V). Put this bar in the footer of your layout and name this layer “orange bar.” Then select the Type Tool (T) and write a copyright statement.

step39

Step 40

Now we are going to create an advertisement spot. Select the Rectangle Tool (U) and create a rectangle with the dimensions 250px by 250px, using the color #cad7ba. Then double-click on this layer and use the settings from the following image for Stroke. Name this layer “250×250.”

step40

Step 41

Select the Type Tool (T) and write “250×250 Advert spot” on your rectangle using the color #494949. Then use the the Line Tool (U) with the settings from the following image to create two arrows, like I did.

step41

Step 42

Now we are going to create a shadow beneath the advertisement spot. Use the Rounded Rectangle Tool (U) with a radius of 5px to create a selection. Then use a black soft brush to create a shadow like I did. Set the blend mode of this layer to Soft Light 65% and name it “shadow.”

step42

Step 43

Create a new layer and use the Rectangular Marquee Tool (M) to create a selection like I did. Then drag a black to transparent gradient from the left side of your selection to the right side. Set the blend mode of this layer to Soft Light 50%, name it “gradient” and move it beneath the 250×250 rectangle layer.

step43

Step 44

Now we are going to create a green bar next to the big white rectangle. First, create a new group and name it “green bar.” Then you can take a look at the following image for reference and use the Pen Tool (P) to create your own bar, or you can click here to download mine.

If you chose to create your own bar, use the Burn Tool to create a subtle shadow and make your bar look like it’s 3D. Then use the Rectangular Marquee Tool (M) to select the area of your green bar that is over your 250×250 advertisement spot and delete it. Double-click on this layer and use the settings from the following image for Drop Shadow.

step44

Step 45

Duplicate the green bar layer and move the new layer next to the original one. Ctrl-click on the thumbnail of this new layer to select it and fill the selection with black. Then set the opacity of this layer to 15%.

step45

Step 46

Create a new layer, select a soft brush (B) with the diameter of 1px and set the foreground color to #98a15e. Select the Pen Tool (P) and create a path in the middle of your green bar, like I did. Then right-click on your image, select Stroke Path, then select Brush, make sure that the Simulate Pressure option is not checked and click OK. Use the Burn Tool to make some areas of this line darker.

Duplicate this layer and move the new layer 1px to the left.

step46

Step 47

Ctrl-click on the thumbnail of any of the two layers that you have created at the previous step to select that line. Then go to Layer > New Adjustment Layer > Brightness/Contrast and use the settings from the following image. Then hit Ctrl+J to duplicate this adjustment layer.

step47

Step 48

Create a new layer, Ctrl-click on the thumbnail of the green bar layer to select the bar and paint with some black grunge brushes over your green bar. Set the blend mode of this layer to Overlay.

step48

Step 49

Use the Pen Tool (P) to create some grass at the bottom of your green bar. To create shadows use the Burn Tool.

step49

Step 50

Add some leafs into your image and put them above your green bar.

step50

Step 51

Select the Brush Tool (B), select a soft brush with the diameter of 2px and set the foreground color to #606442. Then use the Pen Tool (P) to create some kind of rope at the top and at the bottom of your green bar. To do this, create your path with the Pen Tool (P), then right-click on your image, select Stroke Path, select “Brush” from that list and click OK. Then use the Burn Tool to add some shadows to your ropes. Use the Eraser Tool (E) to erase some parts of the ropes, to look like they are surrounding the green bar.

step51

Step 52

Create a new group and name it “content.” Create a new layer inside this group, select the Rounded Rectangle Tool (U), set the radius to 5px and create a rounded rectangle using the color #cad7ba. Then select the Line Tool (U), set the weight to 3px and create a white line in the right side of the rounded rectangle. Take a look at the following image for reference.

step52

Step 53

Create a new layer and use the Rounded Rectangle Tool (U) to create a rounded rectangle at the bottom of your layout. This will be the area for the latest videos. Then use the Rectangle Tool (U) and the Line Tool (U) to create some white rectangles and lines. Select the Type Tool (T) and write “LATEST VIDEOS” in the right side of your rounded rectangle.

step53

Step 54

Use the Rectangle Tool (U) to create two white rectangles with the dimensions 468px by 60px. Put one rectangle at the top of the content area and one at the bottom. Then add a stroke to these rectangles using the settings from the following image and use the Type Tool (T) to write “468×60” in the lower left corner of each rectangle.

step54

Step 55

Create a rounded rectangle beneath the first advertising spot, using the color #cad7ba. Then add a horizontal white line with the weight of 6px at the bottom of this rounded rectangle.

step55

Step 56

Create a small white rounded rectangle in the lower right corner of the green rounded rectangle. Then download this star image, open it in Photoshop, move it into your document using the Move Tool (V) and duplicate it four times. Arrange all these stars and write the word “Ratings” in front of your white rounded rectangle, using the color #92a080.

step56

Step 57

Use the Type Tool (T) to write the word “Screenshots” in the upper right corner of your green rectangle. Then add three square images beneath the text with the dimensions 100px by 100px.

step57

Step 58

Select the Rectangle Tool (U) and create a rectangle with the dimensions 320px by 260px, using the color #768268. Then select the Type Tool (T) and write “Video Spot” in the center of this rectangle, using the color #a0ae8e. Then use the Type Tool (T) again add more text beneath your rectangle.

step58

Step 59

Use the Rectangle Tool (U) and the Type Tool (T) to create a search bar and a login panel in the upper left corner of your content area. In the following image you can see the settings of each layer style that I have applied to my rectangles.

step59

Step 60

Now we are going to create the “Products” area. Create a white rounded rectangle and write the word “Products” on it, using the color #a0ae8e. Use the Line Tool (U) to create a white line with the weight of 4px beneath the rounded rectangle. Then add five images with the dimensions 180px by 78px and add a stroke to each of these images using the settings from the following image.

step60

Step 61

Add nine square images beneath your video area. Then add an Outer Glow to each of these images using the following settings. Select the rectangle Tool (U) and create a rectangle with the dimensions 100px by 16px at the bottom of each image, using the color #dfdfdf.

step61

Step 62

Create a new layer and use the Pencil Tool (B) to create two white dotted lines at the top and at the bottom of your orange bar. Set the blend mode of this layer to Overlay and use the Erase Tool (E) to erase the right side of these two lines.

step62

Final Result

Well, that’s it! You can view the final image preview bellow, or view a larger version here. I hope you enjoyed this tutorial.

final_result_small

Author
Iggy
Iggy is an entrepreneur, blogger, and designer who loves experimenting with new web design techniques, collating creative website designs, and writing about the latest design fonts, themes, plugins, inspiration, and more. You can follow him on Twitter

49 thoughts on “How To Create a Green Grunge Web Layout”

  1. I did this in PS. Made some heavy mods just for the fun. Then I did a Twitter background version. Basically move the header to the bottom left. And boxes swirls and twirls, discs, and splatters, and WHY on the left.
    Now I’m re-doing this template in Illustrator to torture myself.

    But I do not know how to XHTML+CSS.
    Will you follow this up with a XHTML+CCS tutorial (Fireworks) ?
    Or can you point me in the right direction to a good tutorial ?

    Reply
  2. WOW !! incredible tutorial , one of the best tutorials i have ever seen.

    Great job, i really going to implement it with some mods.

    Thanks ,,

    Reply
  3. Geez!
    What a post. Beautiful design. Daring green. Excellent detailed tutorial. I know what I’ll be doing this weekend. You just overdelivered.

    I only recently subscribed to your mailing list. But if this is what the future is going to look like. I will spend a lot of time here.

    Thanks,
    Robert

    Reply
  4. Thanks for another great tutorial, very detailed. I might use this for some inspiration for my new designs. I will have to bookmark this for future reference.

    Reply
    • Hey Scott,

      It was the old design I got made a few years back, however the new one will be a modified version of this one.

      Michael

      Reply
  5. Great post!

    For your information, I’m not sure if it’s just me but I cannot see the screenshot on IE8. Everything is ok on Firefox 3.5 though.

    Thanks for sharing this incredible post.

    Reply
  6. Wow, I just wrote a massive tutorial that’s scheduled for tomorrow and it took about 5 hours… and this is longer! Great tutorial, very detailed!

    Reply
  7. man this is the best web site tutorial h ave ever seen….it is really detailed and simple to follow…i am surely gonna follow this site 🙂

    Reply
  8. you are amazing, i found your site about a year ago, i was 12 then, learning (simple)photoshop, no luck, now i come to your site at least once a week looking for the best tutorials…

    you really are,
    the best.

    Reply
  9. Andy,

    Awesome tutorial!

    Even though this style of a site isn’t to my tastes (i’m more into the modern, simple, sleek design) I hope you create more of these tutorials. They are VERY helpful, especially for people new to web design and development!

    Thanks again and keep up the great work!

    Reply
  10. Wow, that must have taken you ages to make this tutorial.
    Amazing work, and the outcome is beautiful.

    I really appreciate the work you put into your posts, Andy.

    Keith.

    Reply

Leave a Comment