Create a Blog Web Layout With 3D-looking Elements in Photoshop

In this tutorial we will create a web layout with 3D-looking elements using Photoshop. I will show you how to add that 3D look to your web designs, how to create a pattern that we can use in our web layout and how to use the 960 Grid System. Let’s get started.

Final Web Layout Preview

Below is the web layout that we are going to create in this tutorial. Click on the image to see the full-size version.

Introduction

In this tutorial we will use the 960 Grid System. Go ahead, download it and unzip the archive file. Then open the “960_grid_24_col.psd” file in Photoshop (you will find it inside the “photoshop” folder which is located inside the “templates” folder).

After you open the .psd file in Photoshop you will see 24 red bars. That is the grid system that we will be using. You can hide the red bars by clicking on the eye icon of the “24 Col Grid” layer.

During this tutorial I will ask you to create shapes with certain dimensions. Open the Info panel (Window > Info) and when you create a shape you will see its exact width and height. This .psd file contains some guides as well which will be very useful. To activate them go to View > Show > Guides, or use the shortcut Ctrl/Cmd + ;. I usually hide the red bars and activate the guides whenever I need them.

Now that we covered the basics of using the 960 Grid System, we can move on to creating the actual web layout. Let’s get started!

Step 1 – Setting up the document

Before we begin creating the actual layout, we need to increase the dimensions of our document to give us enough space to work with. Go to Image > Canvas Size (Ctrl + Alt + C). Set the width to 1200px and the height to 1600px.

Step 2 – Changing the background color

The Background layer in the Layers panel is currently locked. To unlock it, click on the little black lock icon from the top area of the Layers panel. Then change the color of this layer to #b8d1d9.

Right-click on the Background layer and select Convert to Smart Object. Double-click on this layer to open the Layer Style window and use the settings from the following image for Gradient Overlay. With the Gradient Overlay window opened, click on the image and move this gradient at the top of the layout.

Go to Filter > Noise > Add Noise and use the settings from the image below.

Step 3 – Creating the background of the image slider

Create a new group (Layer > New > Group) and name it "image slider". Then select the Rectangle Tool (U) and create a rectangle with the dimensions 950px by 400px. Activate the guides (Ctrl + to help you create this shape. Name this layer "slider bg" and put it at a distance of 140px from the top edge of the document.

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

Step 4 – Creating the header

Create a new group and name it "header". Put this group underneath the "image slider" group.

Select the Rectangle Tool (U) and create a rectangle with the dimensions 980px by 140px and the color #0098d8. Name this layer "header bg", right-click on it and select Convert to Smart Object. Double-click on this layer to open the Layer Style window and use the settings from the image below.

Go to Filter > Noise > Add Noise, set the Amount to 1, the Distribution to Uniform and tick the Monochromatic option.

Step 5 – Creating a dashed line pattern

Create a new document with the dimensions 14px by 5px. Create a new layer (Ctrl + Shift + N) and select the Pencil Tool (it’s underneath the Brush Tool – B). Right-click on your image and select a brush with the size 1px. Then create a horizontal line using the color #535353, as you see in the image below.

Hide the Background layer. Then go to Edit > Define Pattern, give your pattern a name and click OK. Now you can close this document.

Step 6 – Applying the dashed line pattern

Select the Rectangle Tool (U) and create a rectangle with the dimensions 980px by 5px. Put this rectangle at the top of the header, as you see in the image below. Name this layer "dashed line" and set its Fill to 0%. Then double-click on it and use the settings from the following image for Pattern Overlay.

Duplicate the "dashed line" layer (Ctrl + J) and put the new layer at the bottom of the header.

Step 7

Now we will give a 3D look to the header. Select the Pen Tool (P), zoom in to the lower left corner of the header and create a triangle as you see in the image below. Use the color #09678f. Name this layer "triangle".

Duplicate the "triangle" layer (Ctrl + J), go to Edit > Transform > Flip Horizontal and move this layer at the lower right corner of the header using the Move Tool (V).

Step 8 – Adding the name of the web layout

Select the Type Tool (T) and write the name of your web layout in the right hand side of the header. I used the font Swiss Black Condensed with the color #b8d2dd and the size 60px. Double-click on this text layer and use the settings from the following image.

Step 9 – Adding the social media icons

Download these free social media icons from Function and open in Photoshop the ones that you want to use. Move these icons into your web layout document using the Move Tool (V). Group all these layers (hold down Ctrl, select them and hit Ctrl + G) and name the group "social icons".

Select the Rectangle Tool (U) and create a rectangle over the social media icons using the color #35a5d5. Name this layer "social bg" and put it underneath all the social icons. Set the Fill of this layer to 70%, then double-click to open the Layer Style window and use the settings from the following image. For Stroke I used the color #0072a3.

Step 10 – Creating the navigation bar

Select the Rectangle Tool (U) and create a rectangle with the dimensions 980px by 50px and the color #0098d8. Put this layer at a distance of 15px from the bottom edge of the header.

Name this layer "navigation bg", right-click on it and select Convert to Smart Object. Double-click on this layer and use the settings from the following image for Bevel and Emboss. Then go to Filter > Noise > Add Noise and use the settings from the image below

Using the Pen Tool (P) create two triangles on the left and right hand sides of the navigation bar, just like you did for the header. Use the color #09678f.

Step 11 – Adding the navigation menu items

Create a new group and name it "navigation items". Select the Type Tool (T) and write the name for your navigation menu items. I used the font Swiss Roman Condensed and the color #e2e9ec. Add a shadow to these text layers using the settings from the following image. The color that I used for Drop Shadow is #066993.

Step 12

Create a new group and name it "search bar". Select the Rectangle Tool (U) and create a rectangle with the dimensions 210px by 26px and the color #e2f0f4. Put this rectangle in the right hand side of the navigation bar. Name this layer "search bar" and add a 1px stroke to it using the color #006089.

Select the Type Tool (T) and write "Type and hit enter to search" inside your search bar using the color #656c6f.

Step 13 – Completing the image slider area

Go to the "image slider" group. Select the Rectangle Tool (U) and create a rectangle with the dimensions 890px by 290px. The color is not important. Name this layer "image_holder". Then open an image that you like in Photoshop and use the Move Tool (V) to move it into your initial document. Move the image above the "image_holder" layer, right-click on the image’s layer and select Create Clipping Mask. This will make the image visible only over the area of the "image_holder" rectangle. Name this layer "image".

Step 14 – Creating the arrows for the image slider

Create a new group and name it "right arrow". Select the Rectangle Tool (U), hold down the Shift key and create a square with the dimensions 45px by 45px and the color #0098d8. Name this layer "square", right-click on it and select Convert to Smart Object. Then go to Filter > Noise > Add Noise and use the settings from the image below.

Select the Pen Tool (P) and create a triangle at the bottom of this square to connect the square with the background of the image slider. For this shape use the color #09678f and name the layer "triangle".

Copy this symbol "» ", go to Photoshop, select the Type Tool (T) and paste it. I used the font Myriad Pro Semibold with the color #d9e8ee and the size 50pt.

Step 15

Duplicate the "right arrow" group. Then go to Edit > Transform > Flip Horizontal. Name the new group "left arrow" and move it to the left hand side of the image slider using the Move Tool (V).

Step 16

Using the Rectangle Tool (U) create a rectangle with the dimensions 155px by 45px and the color #0098d8. Put this rectangle at the bottom area of the image slider. Name this layer "rectangle", double-click on it and use the settings from the following image for Gradient Overlay.

Select the Type Tool (T) and write the words "View Project »". I used the font Myriad Pro Semibold with the color #d9e8ee.

Create a small triangle at the lower right corner of the rectangle using the Pen Tool (P) and the color #09678f.

Step 17

Create another button with the text "More Info" next to the one you created at the previous step using the same technique.

Step 18

Select the Rectangle Tool (U) and create a rectangle with the dimensions 980px by 230px and the color #b2c2cb. Name this layer "content bg", double-click on it to open the Layer Style window and use the settings from the following image. The color that I used for Stroke is #8a8c8d.

Create two triangles at the top corners of the rectangle using the Pen Tool (P) and the color #595959.

Step 19 – Creating the "About" area

Now we will divide the area that we created at the previous step into three content columns.

Create a new group and name it "about". Select the Type Tool (T) and add some content for this section. Because our grid has 24 columns and we need three content columns, this first text block should be 8 columns wide. Activate the guides to help you create this text area.

For the headline I used the font Swiss Bold Condensed with the color #444444 and for the block of text I used the font Arial Regular with the same color.

Step 20 – Creating the "Services" area

Create a new group and name it "services". Then select the Type Tool (T) and add another block of text next to the "about" area. Use the same fonts and colors that you used at the previous step.

For the bullet points from the list I used the Ellipse Tool (U) to create small circles with the dimensions 5px by 5px and the color #444444.

Step 21 – Creating the "portfolio" area

Create a new group and name it "portfolio". Then select the Type Tool (T) and add the headline for this area.

Select the Rectangle Tool (U), hold down the Shift key and create a square with the dimensions 65px by 65px and the color #d2d2d2. Name this layer "square 1", double-click on it and use the settings from the following image. For Inner Glow I used the color #92989b and for Stroke I used #65696a.

Duplicate this square layer 7 times (Ctrl + J) and use the Move Tool (V) to arrange the squares as you see in the image below. Leave a distance of 12px between squares.

Step 22 – Creating the blog area

Create a new group and name it "blog". Select the Rectangle Tool (U) and create a rectangle with the dimensions 950px by 830px and the color #e5ecef. Name this layer "content bg".

Step 23

Select the Line Tool (U), set the Weight to 1px and create a vertical line over the left hand edge of the rectangle you created at the previous step. Use the color #73888e. Name this layer "1px line".

Step 24

Create a new group and name it "blog posts". Select the Rectangle Tool (U), hold down the Shift key and create a square with the dimensions 200px by 200px. Name this layer "image_holder", double-click on it and use the settings from the following image.

Open an image that you like in Photoshop and move it over the rectangle you created, using the Move Tool (V). Name this layer "image", right-click on it and select Create Clipping Mask to make it visible only over the area of the "image_holder" layer.

Group these two layers together and name the group "post #1".

Step 25

Select the Type Tool (T) and add some content next to the image you added at the previous step. I used the color #444444 for this block of text and the same fonts I used in the content area above the blog area.

Now we will create a "read more" button for the blog post. Select the Rounded Rectangle Tool (U), set the Radius to 4px and create a rounded rectangle with the dimensions 130px by 26px. Double-click on this layer and use the settings from the following image.

Step 26

Duplicate the "post #1" group two times to create two more blog posts. Use the Move Tool (V) to arrange these blog posts one underneath the other.

Step 27 – Creating the sidebar

Create a new group and name it "sidebar". Then select the Rectangle Tool (U) and create a rectangle with the width 270px and the color #cdd9df. Put this rectangle in the right hand side of the blog area.

Select the Line Tool (U) and create a vertical line with the weight 1px and the color #888888. Name this layer "1px line" and put in the left hand side of the sidebar. Duplicate this layer (Ctrl + J) and put the new line in the right hand side of the sidebar.

Step 28

Hold down the Ctrl key and click on the vector mask of the "sidebar bg" layer. Then go to Layer > New Fill Layer > Gradient. A new window will appear. Select a black-to-transparent gradient and use the settings from the following image. While the Gradient Fill window is opened, click on your image and drag the gradient to the left. Set the opacity of this layer to 20%.

Duplicate the "gradient fill" layer (Ctrl + J), change the angle of the new gradient to 180 degrees and move it to the right.

Select the Move Tool (V) and leave a distance of 1px between the edge of the sidebar and these gradients.

Step 29 – Adding the content for the sidebar

Create a new group and name it "popular". Then select the Type Tool (T) and add the headline "Popular articles" using the color #514d47. I used the font Swiss Bold Condensed.

Add a list of articles names underneath the headline using the color #6a655d. To create the bullet points, I used the Ellipse Tool (U),0

Create another list for "Recent work" just like you created the first one.

Now create a list for Flickr photos. Write the headline "Flickr" using the Type Tool (T). Then select the Rectangle Tool (U) and create a square with the dimensions 65px by 65px. Use the same layer style that you used for the squares from the "portfolio" area.

Step 30

Use the Rectangular Marquee Tool (M) to create a selection at the top of the blog area, like you see in the image below. Then go to Layer > New Fill Layer > Gradient and use the settings from the following image. Select the Move Tool (V) and leave a distance of 1px between the top edge of the blog area and this gradient. Change the opacity of the gradient layer to 10%.

Step 31 – Creating the footer

Create a new group and name it "footer". Select the Rectangle Tool (U) and create a rectangle with the dimensions 980px by 50px and the color #0098d8. Name this layer "footer bg", right-click on it and select Convert to Smart Object.

Double-click on this layer to open the Layer Style window and use the settings from the following image. Then go to Filter > Noise > Add Noise and use the settings from the image below.

Using the Pen Tool (P), create two triangles in the upper corners of the rectangle. Then select the Type Tool (T) and add some copyright information in your footer.

Final Result

Below is the final web layout of this tutorial. I hope you enjoyed the tutorial and learned some new things. If you have any questions or recommendations, share them in the comments section below. Stay tuned for the next tutorial here, on Grafpedia.