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:<\/p>\n
You will also need to download some leaf images. Here are<\/a> some leafs<\/a> that will do the job. Now let’s get started!<\/p>\n
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.<\/p>\n
<\/p>\n
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.”<\/p>\n
<\/p>\n
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.<\/p>\n
<\/p>\n
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.”<\/p>\n
<\/p>\n
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.”<\/p>\n
<\/p>\n
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.”<\/p>\n
<\/p>\n
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.”<\/p>\n
<\/p>\n
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.”<\/p>\n
<\/p>\n
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.<\/p>\n
<\/p>\n
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.”<\/p>\n
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.<\/p>\n
<\/p>\n
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.”<\/p>\n
<\/p>\n
Select the Eraser Tool (E), select a big soft brush and erase the left and right side of your navigation bar.<\/p>\n
<\/p>\n
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.”<\/p>\n
<\/p>\n
Repeat the previous step, but this time set the opacity of the layer to 60% and name it “highlight 2.”<\/p>\n
<\/p>\n
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.”<\/p>\n
<\/p>\n
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.<\/p>\n
<\/p>\n
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.<\/p>\n
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.<\/p>\n
Put this layer beneath the text layer that you have created at the previous step.<\/p>\n
<\/p>\n
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.<\/p>\n
<\/p>\n
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.”<\/p>\n
Create two more stars like I did, using the colors #c0c0c0 and #a8a8a8. Then name these layers “star 2” and “star 3.”<\/p>\n
<\/p>\n
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.<\/p>\n
<\/p>\n
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.<\/p>\n
<\/p>\n
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.<\/p>\n
<\/p>\n
Add a subtle shadow to each star using the settings from the following image, then change the color of each star to white.<\/p>\n
<\/p>\n
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.<\/p>\n
<\/p>\n
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.<\/p>\n
<\/p>\n
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.<\/p>\n
<\/p>\n
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.<\/p>\n
<\/p>\n
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.<\/p>\n
<\/p>\n
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.”<\/p>\n
<\/p>\n
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.”<\/p>\n
<\/p>\n
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.”<\/p>\n
<\/p>\n
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.”<\/p>\n
<\/p>\n
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.<\/p>\n
<\/p>\n
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.<\/p>\n
<\/p>\n
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.<\/p>\n
<\/p>\n
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.<\/p>\n
<\/p>\n
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.<\/p>\n
<\/p>\n
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%.<\/p>\n
<\/p>\n
Download this orange bar image<\/a>, 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.<\/p>\n
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.”<\/p>\n
<\/p>\n
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.<\/p>\n
<\/p>\n
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.”<\/p>\n
<\/p>\n
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.<\/p>\n
<\/p>\n
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<\/a> to download mine.<\/p>\n
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%.<\/p>\n
<\/p>\n
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.<\/p>\n
Duplicate this layer and move the new layer 1px to the left.<\/p>\n
<\/p>\n
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.<\/p>\n
<\/p>\n
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.<\/p>\n
<\/p>\n
Use the Pen Tool (P) to create some grass at the bottom of your green bar. To create shadows use the Burn Tool.<\/p>\n
<\/p>\n
Add some leafs into your image and put them above your green bar.<\/p>\n
<\/p>\n
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.<\/p>\n
<\/p>\n
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.<\/p>\n
<\/p>\n
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.<\/p>\n
<\/p>\n
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.<\/p>\n
<\/p>\n
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.<\/p>\n
<\/p>\n
Create a small white rounded rectangle in the lower right corner of the green rounded rectangle. Then download this star image<\/a>, 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.<\/p>\n
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.<\/p>\n
<\/p>\n
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.<\/p>\n
<\/p>\n
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.<\/p>\n
<\/p>\n
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.<\/p>\n
<\/p>\n
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.<\/p>\n
<\/p>\n
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.<\/p>\n
<\/p>\n
Well, that’s it! You can view the final image preview bellow, or view a larger version here<\/a>. I hope you enjoyed this tutorial.<\/p>\n