39

Create A Forum Layout Using Photoshop

title1
Share!

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).

step1

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.

step2

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.

step3

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.

step4

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.

step5

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.

step6

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.

step7

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.

step8

Step 9

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

step9

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.

step10

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.

step11

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.

step12

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.

step13

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%.

step13

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.

step15

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.

step16

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.

step17

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.

step18

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.

step19

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%.

step20

Step 21

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

step21

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.

step22

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.

step23

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.

step24

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.

step25

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.

step26

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.

step27

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.

step28

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.

step29

Step 30

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

step30

Step 31

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

step31

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.

step32

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%.

step33

Step 34

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

step34

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.

step35

Step 36

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

step36

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.

step37

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.

step38

Final Result

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

final_result_small

Get Free Email Updates!

Sign up now and receive an email when we publish new content.

We will never give away, trade or sell your email address. You can unsubscribe at any time.

About the Author

Iggy Ko

Facebook Twitter Google+

I am the owner and main person behind WebDesignDev. I blog about all kinds of web design topics.

Iggy KoCreate A Forum Layout Using Photoshop

Comments 39

  1. Jon Rawlins

    Great tutorial, was looking around for some good Forum tutorials, will definately keep this one in mind :)

    Thanks again.

  2. yuz

    wow…..very great tutorial, i like this web site tutorial because it’s show very detail how to make website layout.. and easy to understand.very good forum… :)

  3. GreyGoose

    Great tutorial, although Photoshop does do the job, a Vector Graphics tool such as Illustrator, CorelDraw, Xara or Inkscape would be even better, as unlike Photoshop (which is great for photo editing, if incredibly over-priced ) that’s what they’re designed to do and you don’t get the jagged edges on enlargement.

  4. Oliver

    Brilliant tutorial! Will have to bookmark this and have a go at it. Looks really professional. Thanks for this great tutorial

  5. Winnipeg Web Design

    Great Tutorial!

    I was hoping to create a forum some day. This gave me a ton of ideas on how to make a really eye catching THEME.

    Thanks again!

  6. Photoshop Web Layout tutorials

    This is great website layout but beginner have some problem to continue it great for web developers also for me.

  7. Online Forums

    I’ve always wondered how graphic designers made themes for online applications like forums. Always had a feeling it was using Adobe PhotoShop and then breaking it up into pieces. Thanks for showing me how this works in this article, much appreciated :)

  8. ChristopherD

    Im confused. What you did looks amazing…but I am completely new (found this in my first search) to this and am wondering how what you did is implemented…you obviously don’t use the jpeg you used to show your final result. So, you save each aspect seperately to use when designing a forum?

    My apologies if this is a dumb question, but like I said, brand new to this.

    Thanks.

  9. Stephanie Bertha

    Nice idea you have with a forum design. I appreciate your step by step thumbnails, they’re very clear!

  10. Winnipeg Computer Repair

    Wow great guide on making a forum theme layout using photoshop. thanks for sharing this great info I’ll try this out myself and hope it works as well as you explain it! great job and good work!

  11. Ashraf

    Wow!! great tutorial for website design. I like it. because it’s show very detail how to make website layout. thanks for nice post

  12. Nitai Roy

    Creating shadow using Photoshop CS 6 is really advanced than photoshop 7.

    To be honest this tutorial will be beneficial for the beginner as well as experts in photoshop.

  13. clipping path services

    Excellent tutorial. It is complicated for beginners but very helpful for developers.
    Thanks to share with us.

Leave a Reply

Your email address will not be published. Required fields are marked *