Step 1

Open the “960_grid_12_col.psd” file in Photoshop (it’s located inside the “photoshop” folder, which is inside the “templates” folder). The red bars that you see represent the grid system. To hide them, simply click on the eye icon of the “12 Col Grid” group.

This Photoshop document has some guides which will be useful. To turn the guides on, go to View > Show > Guides, or use the shortcut Ctrl/Cmd + ;.

Now we will increase the size of our document. Go to Image > Canvas Size and use the settings from the following image. Then select the Rectangle Tool (U) and create a rectangle with the height 390px at the top of your document using the color #40aae1. Double-click on this layer to open the Layer Style window and use the settings from the following image.

Step 2

Create a new group (Layer > New > Group) and name it “header”. Create another group inside the first one and name it “logo”.

Select the Rectangle Tool (U) and create a rectangle with the height 80px and the color #2b86b6. Select the Move Tool (V), activate the guides and position your rectangle as you see in the image below. Name this layer “rectangle”, double-click on it and use the settings from the following image. For Stroke I used the color #1f688e.

Step 3

Select the Type Tool (T) and write the name of your layout in the middle of the rectangle using the color #93d2f2 and any font that you like (I used Myriad Pro Bold Italic). Double-click on your text layer and use the settings from the following image.

Step 4

Create a new group, put it underneath the “logo” group and name it “navigation”. Then select the Rounded Rectangle Tool (U) and create a rounded rectangle as you see in the following image using the color #62beee. Make sure that the left hand area of this rounded rectangle goes underneath the logo.

Name this layer “navbar”, double-click on it and use the settings from the following image. For Stroke I used the color #80c8ed.

Step 5

Select the Type Tool (T) and write the name for your navigation menu items using the color #e3eff6.

Step 6

Create a new group and name it “featured”. Then select the Type Tool (T) and add some text in the left hand area of the blue rectangle.

Open an image that you like in Photoshop, use the Move Tool (V) to move it into your first document and place it in the right hand area of the blue rectangle, next to the text. You can use Free Transform (Ctrl/Cmd + T) to change the size of the image. Take a look at the following image for reference.

Step 7

Select the Rounded Rectangle Tool (U), set the Radius to 4px and create a rounded rectangle with the dimensions 160px by 34px and the color #efd314. Name this layer “button”, double-click on it and use the settings from the following image. Then select the Type Tool (T) and write the words “Continue Reading »” on your button using the color #91800e. Group these two layers (Ctrl/Cmd + G) and name the group “button”.

Step 8

Activate the guides. Then create a new group and name it “services”. Select the Type Tool (T) and write the word “Services” using the font Helvetica Bold with the color #5f7581 and the size 23pt. Place your text as you see in the following image.

Select the Rectangle Tool (U) and create a rectangle with the dimensions 300px by 90px underneath the text using the color #cbd4da. Name this layer “image_holder”.

Add an image above the rectangle, right-click on the image’s layer and select Create Clipping Mask to make it visible only over the area of the rectangle.

Step 9

Select the Type Tool (T) and add some text underneath the image using the color #6f7f87.

Then select the Rounded Rectangle Tool (U) and create a small button using the color #84d8ed. Name this layer “button”, double-click on it and use the settings from the following image. For Stroke I used the color #67bcd2.

Select the Type Tool (T) and write the words “Read More »” inside the button using the color #308297.

Step 10

Create two more areas like the “Services” one, for “Portfolio” and “About”. Then select the Line Tool (U), set the weight to 1px and create two vertical lines between the content areas you created using the color #cbd4da.

Step 11

Now we will create an area for recent blog posts. Create a new group and name it “blog”. Then select the Type Tool (T) and write the words “From the blog”.

Use the Rectangle Tool (U) to create a square underneath the text with the dimensions 180px by 180px. Add an image above the rectangle, right-click on its layer and select Create Clipping Mask. Select the Type Too (T) and add some text next to the image using the color #5f7581. Group these layers and name the group “post #1″. Then add one more blog post next to the first one.

Add a “Read more” button in the right hand area of the blog section, underneath the blog posts.

Step 12

Create a new group and name it “footer”. Then select the Rectangle Tool (U) and create a rectangle with the height 38px and the color #618ba6 at the bottom of your web layout. Then create another rectangle above the previous one with the height 250px and the color #8dbad8.

Step 13

Activate the guides. Then select the Type Tool (T) and add some text in the left hand area of your footer using the color #49697d. Then add two more blocks of text next to the first one.

Step 14

Select the Line Tool (U) and create two vertical separators between the blocks of text from the footer. Use the color #608eac

Step 15

Select the Type Tool (T) and add a copyright statement in the middle of the dark blue rectangle from the footer. Use the color #cbd4da.

Final Result

Below you can see the final result of this tutorial. I hope you enjoyed it. See you soon with a new one.

Related posts:

1. How to Create a Minimalist Gallery Theme Layout
2. Create a Portfolio Layout with Wooden Background in Photoshop
3. How to fill an empty bottle with water in Photoshop

Before we begin, download the 960 Grid System and open the “960_grid_16_col.psd” file in Photoshop. You will see some red bard (16 of them). That’s our grid and we’ll create our layout using it. You can also hide the red bars and use the guides instead. To activate the guides use the shortcut Ctrl/Cmd + ;. Now let’s start creating the web layout!

Step 1

We’ll begin by increasing the size of our document. Go to Image > Canvas Size and use the settings from the following image. Then go to Layer > New Fill Layer > Solid Color and use the color #111111.

Step 2

Download this texture and open it in Photoshop. Use the Move Tool (V) to move the image into your first document. Name this layer “concrete texture”. You can change the size of this layer by going to Edit > Free Transform (Ctrl/Cmd + T).

Add a mask to this layer (Layer > Layer Mask > Reveal All). Then select the Gradient Tool (G) and drag three black-to-transparent gradients – one on the right hand side of the texture, one on the left hand side and one at the bottom. Take a look at the image below for reference. Set the blend mode of this layer to Overlay.

Step 3

Activate the guides (Ctrl/Cmd +;). Then select the Type Tool (T) and write the name of your layout. I used the font Calibri and the color #eeeeee. Place your text as you see in the following image. Then double-click on the text layer and use the settings from the image below.

Step 4

Create a new group and name it “navigation items”. Then select the Type Tool (T) and write the name for your navigation menu items. I used the font Calibri with the size 18pt and the color #eeeeee. Activate the guides to help you arrange these text layers in the right hand side of the layout.

Select the Line Tool (U), set the weight to 2px and create a horizontal line underneath the first navigation menu item. This will indicate the active page of the website.

Step 5

Select the Rounded Rectangle Tool (U), set the Radius to 6px and create a rounded rectangle with the dimensions 700px by 400px and the color #dadada (to see the size of your shape, open the Info panel – Window > Info). Name this layer “rectangle”, double-click on it and use the settings from the following image.

Step 6

Select the Ellipse Tool (U) and create a big white circle over the right hand side of the rounded rectangle. Set the Fill of this layer to 0%. Then double-click on this layer and use the settings from the image below. Name this layer “shine”, right-click on it and select Create Clipping Mask to make it visible only over the area of the rounded rectangle.

Step 7

Select the Rectangle Tool (U) and create a smaller rectangle inside the bigger one using any color you want. Name this layer “image_holder”.

Open an image that you like in Photoshop and move it over the rectangle you created. Name this layer “image”, right-click on it and select Create Clipping Mask.

Step 8

Create another rectangle next to the one you created earlier using the color #474747 and the dimensions 240px by 370px. Name this layer “rectangle”, double-click on it and use the settings from the image below. For Stroke I used the color #545454.

Step 9

Now we will create a featured bar. Select the Rectangle Tool (U) and create a rectangle with the dimensions 190px by 32px and the color #16aadb. Double-click on this layer and use the settings from the following image. For Stroke I used the color #0e90c2.

Step 10

Select the Type Tool (T) and write the word “featured” in the middle of the rectangle using the color #eeeeee. Double-click on this layer and use the settings from the following image.

Step 11

Select the blue rectangle layer and the text layer, right-click on one of them and select Convert to Smart Object. Name this layer “featured”. Then go to Edit Free Transform (Ctrl/Cmd + T), hold down the Shift key and rotate this layer at 45°. Use the Move Tool (V) to move this featured bar in the upper right corner of the gray rectangle.

Select the Rectangular Marquee Tool (M), hold down the Shift key and create two selections like you see in the image below. Then go to Layer > Layer Mask > Hide Selection.

Step 12

Select the Pen Tool (P) and make sure that the “Shape layers” button from the option bar is activated. Then create two small triangles on the right and left sides of the blue bar using the color #0e506b. Name these layers “shadow”.

Step 13

Select the Type Tool (T) and add some text inside the gray rectangle using the color #eeeeee.

Step 14

Create a new group and name it “button”. Select the Rounded Rectangle Tool (U), set the Radius to 4px and create a small button using the color #16aadb. Name this layer “button”, double-click on it and use the settings from the following image. For Stroke I used the color #0e90c2.

Select the Type Tool (T) and write the words “Read more »” inside your blue button using the color #eeeeee.

Step 15

Create a new group and name it “works”. Select the Type Tool (T) and write the words “Latest works” in the left side of your layout, underneath the featured area, using the color #eeeeee.

Select the Rounded Rectangle Tool (U), hold down the Shift key and create a square with rounded corners, the dimensions 176px by 176px and the color #e4e4e4. Then select the Rectangle Tool (U) and create a small square inside the previous one using the color #b3b3b3. Select these two layers and duplicate them as many times as you want (drag them over the ‘Create a new layer’ button from the bottom of the Layers panel). Use Move Tool (V) to arrange all these layers.

Create a blue button underneath the squares just like you did earlier, but change the text into “View portfolio”. Take a look at the image below for reference.

Step 16

Create a new group and name it “blog”. Select the Type Tool (T) and write the words “From the blog” underneath the “Latest works” area using the color #eeeeee.

Then create two squares like you did earlier, but change the dimensions of the bigger square to 200px by 200px. Add some text next to these squares using the color #eeeeee for headlines and #dddddd for the body.

Finally, create a new button and write the word “Blog” inside it.

Step 17

Create a new group and name it “footer”. Then select the Line Tool (U) and create a horizontal line with the weight 1px, the width 940px and the color #333333. Name this layer “1px line”. Hit Ctrl/Cmd + J to duplicate this layer, select the Move Tool (V) and move the new layer two pixels down. Then select the Type Tool (T) and add a copyright statement underneath the two horizontal lines using the color #555555.

Final Image

Below you can see the final result of this tutorial. I hope you enjoyed reading it. Stay tuned for the next one!

Related posts:

1. Design a Business Web Layout in Photoshop
2. Create a Portfolio Layout with Wooden Background in Photoshop
3. How to fill an empty bottle with water in Photoshop

• Free Social Media Icons
• Function Icon Set
• Nature photos: 1 | 2 | 3

I would like to thank Gin-n-Juice, Philipp Klinger and Paulo Brand

1. Create a Clean and Colorful Web Layout in Photoshop
2. Create a Portfolio Layout with Wooden Background in Photoshop
3. Design a Business Web Layout in Photoshop

I really hope that you will enjoy it. Please let me know what you think! If you like it, I’ll record more video tutorials soon.

Related posts:

1. Downhill Bike Racer on Fire

Before we begin, you will need a wood texture. The one which I have used is from Grafpedia. Click here to download it (note: you will need to sign up for a membership account if you don’t have one already; it will cost you $9.95 and you will have access to some great resources for one month).

I have also used the Gridmaker plugin. If you have Photoshop CS4, download the plugin, install it, and then let’s get started!

Step 1 – Setting up the document

Use the Gridmaker plugin with the following settings to create a new document. You can hide/show your guides by going to View > Show > Guides (Ctrl+;).

Step 2

Increase the size of your document by going to Image > Canvas Size.

Step 3 – Creating the background

Open your wood texture image and move it into your document using the Move Tool (V).

Step 4

Now we are going to use two Brightness/Contrast adjustment layers to make the texture darker. Go to Layer > New Adjustment Layer > Brightness/Contrast and use the settings from the following image. Set the blend mode of this layer to Multiply, then duplicate it (Ctrl+J) and set the blend mode of this new layer to Normal.

Step 5

Select the Gradient Tool (G), hold down the Shift key and drag three black to transparent gradients in three separated layers, like I did. Set the opacity of these three layers to 90%.

Step 6 – Creating the navigation bar

Create a new group and name it "navigation bar." Open the Info palette (F8), select the Rectangle Tool (U) and create a rectangle with the size 940px by 60px using the color #aa4113. You can see the size of your rectangle in the Info palette while you are creating it. Name this layer "navigation bar."

Note: You can create more guides by dragging them from the ruler (Ctrl+R).

Step 7

Double-click on the "navigation bar" layer to open the Layer Style window and use the settings from the following image.

Step 8

Select the Type Tool (T) and add the text for your menu items using the color #dc8158. Add a layer style to each of these text layers using the settings from the following image.

Step 9

Create a new group inside the "navigation bar" group and name it "separators." Then select the Line Tool (U), set the weight to 1px and create a vertical line between two of your menu items using the color #9a3001. Double-click on this layer to open the Layer Style window and use the settings from the following image. Then duplicate this layer (Ctrl+J) as many times as you need and move each line between your menu items using the Move Tool (V).

Step 10

Select the Type Tool (T) and write the name of your layout above the navigation bar using the color #aa431b. Double-click on this layer to open the Layer Style window and use the settings from the following image.

Step 11

Select the Type Tool (T) and add some text beneath the navigation bar using the color #e3b9a0. Considering that we are creating a portfolio layout, you can write a small description about who you are and what you do. Then double-click on this text layer to open the Layer Style window and use the settings from the following image.

Step 12 – Creating the "Featured Project" area

Create a new group and name it "featured project." Select the Rectangle Tool (U) and create a rectangle with the size 940px by 240px using the color #994b1d. Double-click on this layer to open the Layer Style window and use the settings from the following image. Name this layer "featured image bg."

Step 13

Open an image that you like in Photoshop and move it into your document using the Move Tool (V). Put this image above your rectangle, then right-click on it and select Create Clipping Mask. Now your image is using the rectangle which you have created at the previous step as a mask. Set the opacity of this layer to 80% and name it "featured image."

Step 14

Select the Rectangle Tool (U) and create a rectangle like I did using the color #1d0d05. Set the opacity of this layer to 90% and name it "small rectangle."

Step 15

Select the Type Tool (T) and write the name of your image on that black small rectangle using the color #bb9680. Double-click on this layer to open the Layer Style window and use the settings from the following image.

Step 16

Select the Custom Shape Tool (U), right-click on your image, select an arrow that you like, hold down the Shift key and create an arrow using the color #bb9680. Move this arrow in the right side of the "featured project" area and name it "right arrow." Set the opacity of this layer to 20%.

Duplicate this arrow (Ctrl+J), go to Edit > Transform > Flip Horizontal and move this new arrow in the left side of the "featured project" area. Name this layer "left arrow."

Step 17 – Creating the "Recent Projects" area

Create a new group and name it "recent projects." Then select the Rectangle Tool (U) and create a rectangle with the size 620×230 using the color #0c0704. Name this layer "image 1 bg."

Step 18

Open an image that you like in Photoshop, move it into your document using the Move Tool (V), and put it above the black rectangle which you have created at the previous step. Name this layer "image 1", right-click on it and select Create Clipping Mask. Set the opacity of this layer to 80%.

Step 19

Select the Type Tool (T) and add some text in the right side of the first image from the "recent projects" area, using the color #e8a48c. Double-click on this text layer to open the Layer Style window and use the settings from the following image for Drop Shadow.

Step 20

Repeat the last three steps to create the second image for the "recent projects" area.

Step 21 – Creating separators

Create a new group and name it "separators." Select the Line Tool (U), set the width to 1px and create a horizontal line from the left side of your layout to the right side, using the color #2f1107. Name this layer "dark line."

Duplicate the "dark line" layer, select the Move Tool (V) and hit the down arrow on your keyboard to move this layer one pixel down. Change the color of this line to #aa431f and name it "light line." Put these two lines between the main block of text and the "featured project" area.

You can create as many separators like this one as you want.

Step 22 – Creating the footer

Select the Rectangle Tool (U) and create a rectangle with the height of 50px using the color #220d06. Double-click on this layer to open the Layer Style window and use the settings from the following image. Set the opacity of this layer to 90% and name it "footer."

Select the Type Tool (T) and write anything you want in the footer of your layout using the color #8b4c38.

Final Result

We’re done! I hope you enjoyed this tutorial. It’s the first layout tutorial that I wrote on PSDBURN. If you like it, I will write more like this one in the future. You can view the final image preview bellow or view a larger version here.

Don’t forget to spread the word about this tutorial and share your thoughts about it in the comments bellow.

Related posts:

1. Design a Business Web Layout in Photoshop
2. How to Create a Minimalist Gallery Theme Layout
3. How to fill an empty bottle with water in Photoshop

Resources

Here are all the resources you will need for this tutorial. Download them and then let

Related posts:

1. Create a Portfolio Layout with Wooden Background in Photoshop
2. Create a Clean and Colorful Web Layout in Photoshop
3. Create a Nature Inspired WordPress Layout

Step 1

First of all, create a new document in Photoshop. Double-click on the "Background" layer to unlock it, and then use the Paint Bucket Tool (G) to fill the background with the color #48b1ce.

Step 2

Double-click again on the background layer to open the Layer Style window. Then use the settings from the following image.

Step 3

Create a new layer and fill it with white using the Paint Bucket Tool (G). Right-click on this layer and select Convert to Smart Object. Then go to Filter > Noise > Add Noise and use the settings from the following image. Set the blend mode of this layer to Multiply, the opacity to 20%, and then name it "noise."

Step 4

Download this image, open it in Photoshop and use the Magic Wand Tool (W) to separate the bottle from the background and put it into a new layer. Then double-click on the bottle layer to open the Layer Style window and use the settings from the following image.

Step 5

Select the Pen Tool (P), click on the "Shape layers" button from the option bar, set the foreground color to #5791c7 and create a blue shape like I did. Then set the blend mode of this layer to Color Burn.

Step 6

Now we will have to create the water from the top. Use the Pen Tool (P) to create a shape like I did. Set the blend mode of this layer to Color Burn.

Step 7

There is an area where the two shapes are overlapping. To correct this we will use a mask. Hold down the Ctrl key and click on the thumbnail of the first shape. Then make sure that the "Shape 2" layer is active and go to Layer > Layer Mask > Hide Selection.

Step 8

We want the water from the top to be darker, so, duplicate the "Shape 2" layer and set the opacity of the new layer to 20%.

Step 9

Hold down the Ctrl key and select all the layers from the Layers palette (without the background). Then use the Move Tool (V) to move these layers into the document you created at the beginning of the tutorial. With these layers still selected, right-click on one of them and select Convert to Smart Object. Use Free Transform (Ctrl+T) to scale this layer down and rotate it. Set the opacity of this layer to Hard Light and name it "bottle."

Step 10

Double-click on the "bottle" layer to open the Layer Style window and use the settings from the following image.

Step 11

Now we are going to add some textures to the water. Download this image, open it in Photoshop and move it into your document using the Move Tool (V). Right-click on this layer and select Convert to Smart Object. Then go to Edit > Free Transform (Ctrl+T), scale this layer down and rotate it.

Step 12

The bubbles should be only in the water. To make this happen, go to Layer > Layer Mask > Hide All. Then select a soft white brush and paint with it over the water. Take a look at the following image for reference. Right-click on this layer and select Create Clipping Mask. Then set the opacity of this layer to 40% and name it "bubbles."

Step 13

Download this image, open it in Photoshop and move it into your document using the Move Tool (V). Right-click on this layer and select Convert to Smart Object. Go to Layer > Layer Mask > Hide All, then select a white soft brush and paint with it over the water. Set the blend mode of this layer to Screen, the opacity to 60%, and then name it "water texture."

Step 14

Select the "bottle", "bubbles" and the "water texture" layers, and then group them (Ctrl+G). Name the group "bottle."

Step 15

Now we are going to create some beautiful circles using the Photoshop’s brush engine. Select the Brush Tool (B), open the Brushes palette (F5) and use the settings from the following image. Then you can save the brush by clicking the "Create new brush" button from the bottom of the Brushes palette. Create a new layer beneath the "bottle" group, hit the D key to set the foreground color to black and the background color to white and paint with this brush on your image. Use different sizes for your brush to create some nice circles. Set the blend mode of this layer to Soft Light and name it "circles."

Step 16

Now we are going to add some beautiful lines in our image. I have used a set of lines from a vector pack from the Talk-Mania shop called Lines vector. Note that this vector pack is not free, but the price is very affordable. If you download the vector pack, open the .AI file in Illustrator, use the Selection Tool (V) to select a set of lines, copy those lines (Ctrl+C) and paste them (Ctrl+V) into your Photoshop document as a smart object. Set the blend mode of this layer to Luminosity, the opacity to 40%, name it "lines", and then put it beneath the "circles" layer.

Note: you can use these Photoshop brushes as an alternative to the vectors which I have used.

Step 17

The lines beneath the bottle are too bright and don’t look good. To correct this we will use a mask. Go to Layer > Layer Mask > Reveal All. Hold down the Ctrl key and click on the "bottle" layer’s thumbnail to select the bottle. Make sure that your layer mask is active, then select a big soft black brush and paint with it over the bottle. You can also mask some other areas of your layer.

Step 18

Now we are going to create a 3D word in Adobe Illustrator. Open a new document in Illustrator, select the Type Tool (T) and write the first letter of your word. For the Fill color use #339CC1 and for the Stroke color use #5FACC1. Then go to Effect > 3D > Extrude & Bevel, check the Preview option and experiment with those settings. Repeat this step to create all the letters of your word.

Step 19

Use the Selection Tool (V) to select the first letter of your word, copy it (Ctrl+C) and paste it (Ctrl+V) into your Photoshop document. Continue to copy and paste all your letters from Illustrator into Photoshop. Then go to Edit > Free Transform (Ctrl+T) to rotate and arrange your letters the way you want. Name each layer properly and add an Outer Glow to each one of them using the settings from the following image. Then select all these layers, group them (Ctrl+G) and name the group "3D text."

Step 20

Add a layer mask to your "3D text" group (Layer > Layer Mask > Reveal All), select a small black soft brush with an opacity around 30% and mask the edge of each letter. Make a subtle change, not a very noticeable one.

Step 21

Duplicate the "water texture" layer and put this new layer above the "3D text" group. Set the opacity of this layer to 30%.

Step 22

Finally, you can add a quote that you like using the Type Tool (T). The quote which I have used is from Radu Ceuca’s blog.

Final Result

Well, that’s all. I hope you enjoyed this tutorial. You can view the final image below or view a larger version here.

Related posts:

1. Create a Portfolio Layout with Wooden Background in Photoshop
2. Design a Business Web Layout in Photoshop
3. How to Create a Minimalist Gallery Theme Layout

Related posts:

1. Create a Portfolio Layout with Wooden Background in Photoshop
2. Create a Nature Inspired WordPress Layout
3. Design a Business Web Layout in Photoshop

I want to thank Grant Friedman for organizing the contest and to David Perel, Marc Perel and Nat Perel (the Obox Design team) for creating Hash One, the greatest WordPress theme I ever seen. I’m very lucky to be one of the 40 people who won this theme. For more information about Hash One view this screencast.

I still have to work on some details, but I hope you guys like the new look of PSDBURN. Please feel free to share any thoughts you have in the comments.