Create A Forum Layout Using Photoshop

By Web Design | 38 comments | Photoshop | Tags: Create A Forum Layout, Forum Layout Tutorial, Learn How To Create A Forum Layout, Photoshop Forum Layout, Photoshop Forum Tutorial, Photoshop Layout Tutorial, photoshop tutorial, Web Design Layout Tutorial

Tweet

In this tutorial I am going to show you how to design a forum layout in Photoshop. The color scheme is black, orange and light blue which work very well together, but of course you can change the colors. There are 38 steps in total and will probably take around an hour to create. You don’t have to be a Photoshop whizz, just follow the simple steps below. If you have any problems then feel free to drop us a comment, or maybe even with links to what you have created using this tutorial.

To view a large version of what you will be creating, click here (will open in new window).

Step 1 – Setting up the document

Create a new document with the size 1000px by 1000px and fill the background with the color #ccdbe4 using the Paint Bucket Tool (G).

Step 2

Create a new group (Layer > New > Group) and name it “body.” Create a new layer inside this group, select the Rectangle Tool (U) and create a big white rectangle like I did.

Step 3

Select the Line Tool (U), set the weight to 1px and the color to #90a3ae and create two vertical lines – one in the left side of the white rectangle and one in the right side.

Step 4 – Creating the header bar

Create a new group and name it “Header Bar.” Create a new layer inside this group, select the Rectangle Tool (U), set the foreground color to #111111 and create a rectangle at the top of your canvas.

Step 5

Create a new layer, select the Rectangular Marquee Tool (M) and create a selection like I did. Then select the Gradient Tool (G), hold down the Shift key and drag a gradient #c4ced4 to transparent from the top to the bottom of your rectangular selection. Leave a distance of 1px between the dark gray rectangle and this gradient.

Step 6

Create a new layer, Ctrl-click on the thumbnail of the dark gray rectangle layer to select it and use the Gradient Tool (G) to create a subtle black to transparent gradient at the bottom of the dark gray rectangle.

Step 7

Create a new layer, Ctrl-click on the thumbnail of the dark gray rectangle to select it, and drag a gradient #dadada to #e1e1e1 from the top to the bottom of your selection. Then use the Line Tool (U) with the weight of 1px to create some vertical white lines on your light gray rectangle. Set the blend mode of this layer to Soft Light.

Step 8

Create a new layer and use the Pen Tool (P) to create a selection like I did. Then select a white soft brush (B) with an opacity around 50% and paint with this brush over the edges of your selection. You can also invert the selection (Ctrl+Shift+I) and use the Brush Tool (B) again, and then erase some parts of this layer using the Eraser Tool (E). Set the blend mode of this layer to Overlay.

Step 9

Now add a logo and a tagline in the header bar.

Step 10 – Creating the navigation bar

Create a new group and name it “Navbar.” Then create a new layer inside this group, select the Line Tool (U) and create a white horizontal line with the weight of 1px beneath the header bar.

Step 11

Create a selection like I did above the big white rectangle and draw a gradient #c4d6e0 to transparent from the top to the bottom of your selection.

Step 12

Create a new layer, select the Rectangle Tool (U), set the foreground color to #e77502 and create a rectangle between the white line and the blue gradient.

Step 13

Create a new layer, select the Line Tool (U) and create a horizontal line with the weight of 1px and the color #5e350c at the bottom of your orange rectangle. Set the blend mode of this layer to Overlay.

Step 14

Create a new layer and use the Line Tool (U) again to create a horizontal line over the one which you have created at the previous step using the color #f2b6a3. Then set the blend mode of this layer to Overlay and the opacity to 80%.

Step 15

Create a new layer, select the Line Tool (U) and create a horizontal line with the weight of 1px and the color #bc6105 at the top of your orange rectangle. Then create a new line in the same layer, leaving a distance of 1px between these two lines.

Create another horizontal line beneath the last one using the color #f2b97e.

Step 16

Use the Rectangular Marquee Tool (M) to create a selection like I did. Then select the Gradient Tool (G) and drag a #efa457 to transparent gradient from the top to the bottom of your selection in the same layer that you have created at the previous step. Then set the blend mode of this layer to Overlay.

Step 17

Create a new layer, select the Line Tool (U), set the color to black and the opacity to 17% and then create a horizontal line at the bottom of your orange rectangle.

Then create a rectangular selection using the Rectangular Marquee Tool (M), select the Gradient Tool (G) and create a #8f5112 to transparent gradient from the bottom to the top of your selection, leaving a distance of 2px between the line and this gradient.

Set the blend mode of this layer to Overlay.

Step 18

Use the Rectangular Marquee Tool (M) to create a rectangular selection in the middle of your navigation bar. Then select the Gradient Tool (G) and drag a #725625 to transparent gradient from the top to the bottom of your selection. Set the blend mode of this layer to Overlay.

Step 19

Create a rectangular selection with the height of 3px at the top of the gradient which you have created at the previous step, using the Rectangular Marquee Tool (M). Then select the Gradient Tool (G), set the opacity to 25% and drag a white to transparent gradient from the top to the bottom of this selection.

Step 20

Now we are going to create some separators. Create a new group inside the “navbar” group and name it “separators.” Then create a new layer, select the Line Tool (U) and create a vertical line with the weight of 1px using the color #754b23. Set the blend mode of this layer to Overlay and the opacity to 60%.

Then create a new vertical line next to the one which you have just created using the color #f7d1a4. Set the blend mode of this layer to Overlay and the opacity to 40%.

Step 21

Duplicate the lines which you have created at the previous step to create more separators.

Step 22

Create a new group and name it “Rollovers.” Create a new layer inside this group, select one of your buttons using the Rectangular Marquee Tool (M) and drag a #efa25b to transparent gradient from the top to the middle of your selection. Set the blend mode of this layer to Overlay.

Step 23

Create a new layer and use the Pen Tool (P) to create a small white arrow at the top of your button. Then double-click on this layer to open the Layer Style window and use the settings from the following image for Drop Shadow.

Step 24

Create a new group and name it “Link names.” Then select the Type Tool (T), set the color to white and write the names for your menu items. Then double-click on this layer to open the Layer Style window and use the settings from the following image. Set the blend mode of this layer to Overlay.

Step 25 – Creating the sidebar

Create a new group and name it “Member Login.” Create a new layer inside this group, select the Rounded Rectangle Tool (U), make sure that the “Fill Pixels” button is selected from the option bar, set the radius to 10px and create a black rounded rectangle.

Step 26

Set the foreground color to white and use the Rounded Rectangle Tool (U) with the same settings to create a white rounded rectangle in the middle of the black one.

Step 27

Set the foreground color to black and use the Rounded Rectangle Tool (U) to create a bar at the top of your rounded rectangle. Then select the Magic Wand Tool (W), click on the white area inside this rectangle to select it and then hit the Delete key.

Step 28

Create a new layer and put it beneath the black rounded rectangle layer. Then select the Rounded Rectangle Tool (U) and create a blue rectangle under the black one using the color #d3e3ef.

Step 29

Create a new layer above black rounded rectangle layer, select the Line Tool (U), set the weight to 3px and the color to #b8d2e5 and create a line like I did.

Step 30

Use the Type Tool (T) to add some text inside this rounded rectangle.

Step 31

Select the Pencil Tool (B) and create a dotted line at the bottom of the rounded rectangle using the color #8099a8.

Step 32

Create a new layer, select the Rounded Rectangle Tool (U), click on the “Paths” button from the option bar and create a path like I did. Then hit Ctrl+Enter to convert this path into a selection and use the Gradient Tool (G) to drag some white to transparent gradients at the top and the bottom of your selection.

Step 33

Select Brush Tool (B) and select a hard brush with the diameter of 1px. Then select the Pen Tool (P) and create a path at the top of your black rounded rectangle like I did. Right-click on your image, select Stroke Path, select “Brush” from that list, check the Simulate Pressure option and click OK. To delete the path hit Esc twice. Set the blend mode of this layer to Overlay and the opacity to 40%.

Step 34

Create two more rounded rectangles in your sidebar for “Forum Information” and “Partner Links.”

Step 35 – Creating the forums area

Create a new group and name it “forums.” Then create a black rounded rectangle like the ones from the sidebar.

To create the separators, create a new layer, select the Line Tool (U) and create two lines – a dark one (#000000) and a light one (#f1ad81). Then set the opacity of this layer to 20% and the blend mode to Overlay. Use the Type Tool (T) to add some text inside this area.

Step 36

Repeat the last step to create more forums. You can also add some icons and an area for ads.

Step 37 – Creating the footer

Create a new group and name it “footer.” Create a new layer inside this group, select the Rectangle Tool (U) and create a rectangle at the bottom of your layout using the color #e77502. Double-click on this layer to open the Layer Style window and use the settings from the following image.

Step 38

Create a new layer and use the Rectangle Tool (U) to create a rectangle at the bottom of the orange one using the color #424546. Set the blend mode of this layer to Overlay. Then select the Type Tool (T) and add some text in your footer.

Final Result

I hope that you enjoyed this tutorial. You can see the final image preview bellow or view a larger version here.