Create a RedBox Website Template: Tutorial & PSD

In this tutorial you will learn how to create a website template called RedBox. The template is theme based on a web agency but could be used for any type of business. The way the template is designed allows it to be developed responsively. You will also be able to download the Photoshop file at the end of the tutorial.

The Redbox PSD template looks like this:

Here is the tutorial on how to make a template like the RedBox:


Step 1.

Open a new file (file > new) 1400 x 1600 pixels


Step 2.

Create 2 vertical guides (view > new guide) 1 at 200px & 1 at 1200px. This is the centre and guides of your design.


Step 3.

Using the rectangle marque tool change the style to fixed size at 1400 x 120 pixels.




Step 4.

Fill using paint bucket tool the margue box with colour #2A2E39



Step 5.

Add your logo to the left guide in the new header.

Step 6.

Add your navigation to the right of the page using the type tool.


Step 7.

Create a 200 x 200 box using the rectangle marque tool and postion under a navigation as a drop down.


Step 8.

Fill the box with colour #e74e4e then add your sub navigation with type tool.




Step 9.

Add your main banner image sized 1400 x 400 and position under the header.

Step 10.

Create a box using the marque tool, position over the banner and fill with colour #e74e4e.




Step 11.

To make the intro box transparent change the opacity of the layer to 80% on your layers palette.


Step 12.

Add your intro text into the transparent box.


Step 13.

Create 4 new vertical guides at 500px, 550px, 850px & 900px. These are splits for your 3 services content.

Step 14.

Add a title, icon and text in between each of the 3 guides.


Step 15.

Add 5 portfolio images sized 250 x 220 and line up horizontally across the page, do the same again underneath to give you 10 portfolio images.


Step 16.

Using the marque tool add a 1400 x 200 box and fill with colour #B6B6B6 then position under your portfolio images.




Step 17.

Add your clients title with type tool and position to the left.


Step 18.

Add your left & right arrow icons and colour overlay (layer > layer style >colour overlay) with #e74e4e.



Step 19.

Add your client logos to fit inbetween the arrows and colour overlay (layer > layer style >colour overlay) them with #FFFFFF.


Step 20.

Using the marque tool add a 1400 x 100 box and fill with colour #2A2E39 then position under the grey clients background box.



Step 21.

Add your footer links and copyright using type tool to the left.


Step 22.

Add your social media icons to the right and colour overlay #B6B6B6 if necessary.




I hope you enjoyed the tutorial, if you wish to download the RedBox template then click the link below.

Download the Redbox PSD Here

About The Author: Adam

My name is Adam and I'm a Web Designer based in Norwich, Norfolk. I work for Design Vibe Creative a creative digital agency who specialise in producing creative digital brands for local businesses.

22 responses to “Create a RedBox Website Template: Tutorial & PSD”

  1. Lam Nguyen says:

    Thanks so much for this.

  2. Fantastic tutorial it is. Nice explain so very easy to follow step by step. I hope your tutorial will be beneficial for the beginner designer !!

  3. simon says:

    These are great tips for working with affiliates. Thanks for sharing!

  4. Wow!!! this is the best psd template tips, but how can I make it psd to php???

  5. Great tutorial, you should do a step by step video of this and put it on youtube. Very helpful thank you.

  6. uixone says:

    great tutorial thank you

  7. colorfx says:

    Thanks for the psd tips.

  8. savona says:

    Great tutorial, you should do a step by step video of this and put it on youtube. Very helpful thank you.

  9. Dmitry says:

    The best adult dating site on the net is

  10. Thanks for sharing a Great psd tutorial .

  11. Billy Washington says:

    Thanks for great work and sharing nice psd tutorial

  12. James Nill says:

    Thanks for taking the time to explain things in such great detail in a way that is easy to understand.

  13. Shawn Plep says:

    Thanks for this PSD and “how-to”! Has anyone made this into a HTML or WP template?

  14. Lisa Maria says:

    Amazing post this blog.Thanks  for your idea PSD suggestion share .

  15. sdfjl m;sdfk sdjfpo shfdn ldndo fgjpdfogjdflg dfg dfg

  16. Roy says:

    Amazing and innovative idea just shared here and thanks for this informative post. It helps me a lot.

  17. urmy says:

    I have nothing to say about this post that you revealed here perfectly. thanks a lot. you can check my resources about photo editing idea 

  18. annymohan says:

    I really enjoyed reading the content posted on this blog with innovative ideas. Holi 2019

  19. Thank you for share,very useful for me

  20. djonegreys says:

    Nice site! We sell round diamonds

  21. Karimunjawa says:

    nice site and design website…

    Visit here paket karimunjawa

Leave a Reply

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