Corporate WordPress Style Layout

In this tutorial you will learn how to create a corporate wordpress styled layout. If you have any questions about this tutorial be sure to ask in the comments. Also, remember with all the tutorials, the psd is available for download.

Author:

Matthew Heidenreich

Category:

Photoshop

Be sure to visit part 2 of this tutorial on how to code the Corporate WordPress Style Layout.

This is the final result

1. The first thing we want to do is to create a new document with the dimensions of 1024×1478 (it can vary to your liking).

2. Next thing we want to do change the overall background color to #1e2329 using your paint bucket tool

3. Now, use your rectangle marquee tool make a selection similar to the following and fill it with #383d43.

4. Next lets go ahead and add our dummy links in the top right of our header. My link color is #FFFFFF and the dividers are #525961 (see image below for example)

5. I also chose to place some text on the left side providing a telephone number with the same choice of colors as well. For our ‘logo’, the text color for ‘corporate’ is #FFFFFF, and the text color for ‘layout’ is #65b8f9. you should now have something that looks like this

6. The next step is to add a little divider between the two background colors. To do so create a new layer and use your rectangle marquee tool to make a selection 2px high and fill it with #FFFFFF. Make sure it spans across your whole document

7. On this newly created layer, input the following blending options


8. Next thing I did was find a stock photo to use in my header. I choose to use one I found at sxc.hu (great free stock photo website), and added a 1px stroke with this color #505255

9. Next lets go ahead and make a search field. For this step I simply used a rectangle marquee tool to make a selection similar to the following and fill it with #FFFFFF

10. I then used the following blending options on its layer

11. The next step we need to take is to create a search button. To do so I used my rectangle marquee tool again and made a selection similar to the following and filled it with #FFFFFF.

12. I then proceeded to add the following blending options onto its layer. Before you close out of your layer style’s box please read the next step.



13. Now we will be using this very same gradient and drop shadow on other elements to come in this layout, so we will save ourselves some time by using the ‘Styles’ menu in our blending options. Choose the ‘New Style…’ button from the right side and name your style ‘blue gradient’

14. You will notice that a thumbnail is now added to the list for you to use, and you can go ahead and hit ok to continue.

15. Now just add some white text that says ‘search’ and you can add some text in your input field if you’d like and your document should look something like this

16. The next step is to create a main navigation menu that will go horizontally under our stock photo. To do so, lets go ahead and use our rectangle marquee tool to make a selection similar to the following and fill it with any color (it won’t matter)

17. Next we want to right click that layer and input the following blending options



18. Now we want to go ahead and add some links to our menu. Using the text tool make something similar to the following. The font color I used was #CBD9E7

19. To display our active link we want to do something special. Making sure this is under your newly created text layer, using your rectangle marquee tool make a selection similar to the following and fill it with #FFFFFF

20. Now this is where your ‘Blue Gradient’ comes in. Go to your Blending options and then to the styles menu and select it and you should now have something like this

21. Lets go ahead and step back and look at our layout right now to see where we are

22. Looking good I’d say. The next thing we want to do is to add a sidebar. Using your rectangle marquee tool make a selection similar to the following and fill it with #26292E

23. Now using your rectangle marquee tool again (or rectangle tool, which ever you prefer), make a selection similar to the following. It is going to represent what our sidebar headings look like

24. Just use your ‘Blue Gradient’ on that layout and then add some text to name the section and you’ll have something that looks like this

25. Repeat those steps for as many boxes as you want and I came up with this

Yes, I do realize I used the same text under most popular and recent comments (I can be lazy too)

26. For the left side where our posts would be displayed, I have variation backgrounds. For the first post the background color is #2F3338 and for the second it is #2A2D32. Your document will look like this

27. The last step I did was to add some fake content and to add some footer links and this is your final result

 
Get a commercial/public use licence for this PSD (More info)

Remember if you have any questions or comments about this tutorial to leave your responses in the comments below and we will get back to you very quickly.

If you enjoyed this tutorial please take a moment to visit one of our sponsors

Show Some Love
Thank you for your support

63 Responses

  • Houston SEO

    This is a nice layout which is perfect for a company wanting a clean & professional website. Thanks for sharing.

  • FourPx Rathnaraj

    It’s a very good layout. Perfect for the company which delivers cost effective services to the clients. On seeing the pics itself the users will understand about the company.

  • Gideon

    I’m really sorry but I come from a windows programming background and recently moved into the web programming world.

    If I did create this, it would be one gigantic graphic and then It would be fixed on the webpage background for a specific resolution correct? Is there no way to create all this in parts and stuff it up a page?

    Thanks so much

    Gideon

  • supersawsaw

    I’ll definitely use this tutorial on my current project. thank you very much!

    @gideon, you’ll need to check part 2.

  • Moe

    I used your template, and love it. Since i know nothing about programming, do i need to hire someone to fill in the services, and products tabs, or is there a way for me to do it on my own?

  • chillyweed

    really nice tuts xD

  • anshul

    Thanx for this layout..it was my 1st one ^^

  • RWH

    Detailed step-by-step guide that would certainly help sharpen your designing skills. Thanks a lot guys! This is definitely a very helpful and educational tutorial!

  • WT

    Thank you for sharing and good tutorial you for corporate wordpress theme.

    Good job.

  • Hoffmann

    The hands need retouching badly.

  • Tomas

    Woah, woah. This is by far the best guide i’ve ever seen. Well explained, easy-to-follow, and the result it’s just awesome!

    Thank you very much for posting this guide. Keep up the good work!

  • Antanas

    how do you make equal spacing between different text layers in step 18? please answer as quick as you can ^^

  • Ryan

    I followed your template and created a website for my IS class. Great walkthrough and website. I have one question. I went through anc completed the slicing of the page and saved it for Web Media, as the walkthrough describes. When going to the website, I am unable to highlight and copy any texts. I believe this is because the text is now an image and not an actual text box. Is there any way to solve this problem?

Leave a Comment

Name (required)

Mail (required)

Website

Message

 

Sponsors