Corporate & Portfolio Style WordPress Layout

Wordpress can be used in many many ways, it has great CMS features which can be used with any style of website. In todays tutorial I’ll be walking you through the process of creating a Corporate & Portfolio Style Wordpress Layout.

In Interface, Photoshop Tutorials

What We’ll Be Creating

Corporate & Portfolio Style WordPress Layout

Resources Used In This Tutorial

Getting Started!

Create a new (Ctrl + N) document 1200 x 1340 pixels with a white (#ffffff) background, select the “Rectangular Marquee Tool” (M) and create a selection roughly about 1200 x 435 pixels.

Corporate & Portfolio Style WordPress Layout

Once you’ve created the selection select the “Fill Tool” (G) and fill the selection with any color. Press “Ctrl + D” to deselect the selection then add a “Gradient Overlay” using the settings below.

Corporate & Portfolio Style WordPress Layout

Corporate & Portfolio Style WordPress Layout

Spicing Up The Header

Load a selection around the rectangle “Layer > Load Selection” then create a new layer above the rectangle layer and go to “Filter > Render > Clouds” then go to “Filter > Render > Difference Clouds”.

Corporate & Portfolio Style WordPress Layout

Now go to “Filter > Blur > Motion Blur”.

Corporate & Portfolio Style WordPress Layout

Deselect the selection by press “Ctrl + D” and then set the layer blend mode to “Color Dodge”. You should have something like this.

Corporate & Portfolio Style WordPress Layout

Completing The Header

At the top of the header area add a small black bar with a fill setting of 20%. Create the bar using either the “Rectangle Tool” (U) or the “Rectangular Marquee Tool” (M).

Corporate & Portfolio Style WordPress Layout

Once you’ve created the top bar add a “Stroke” using the settings below.

Corporate & Portfolio Style WordPress Layout

In the top left hand corner of the top bar add a simple textual navigation displaying important links. Fill the links with the color white #ffffff.

Corporate & Portfolio Style WordPress Layout

Download the “Web Social Icons” from the resources list, then add your favorite social icons on the right side of the top bar.

Corporate & Portfolio Style WordPress Layout

Underneath the top bar select the “Text Tool” (T) and add the website title and slogan. The font I’ve used is call “Diavlo”.

Corporate & Portfolio Style WordPress Layout

Behind the title and slogan add a nice little sparkle by using one of the “Bling Brushes” from “Media Militia”. Set the opacity of the bling brush to around 75%.

Corporate & Portfolio Style WordPress Layout

Creating The Navigation

Select the “Rounded Rectangle Tool” (U) with a radius of 10px (10px By Default) then drag out a rectangle underneath the title and slogan. Once your happy with the rectangle set the blend mode to “Soft Light”.

Corporate & Portfolio Style WordPress Layout

Simply add the text links using the “Text Tool” (T) and the color #518ca2. On the right side of the navigation if you have space create a white #ffffff rounded rectangle again using the “Rounded Rectangle Tool” (U).

Corporate & Portfolio Style WordPress Layout

Inside the white rectangle add a small magnifying glass from photoshops custom shapes library then simply add a small line of text which indicates its a search field.

Corporate & Portfolio Style WordPress Layout

Creating The Featured Area

Select the “Rounded Rectangle Tool” (U) then drag out a big rectangle which overlaps the color background.

Corporate & Portfolio Style WordPress Layout

When your happy with the rectangle add the following layer styles.

Corporate & Portfolio Style WordPress Layout

Corporate & Portfolio Style WordPress Layout

Corporate & Portfolio Style WordPress Layout

You should have something like this.

Corporate & Portfolio Style WordPress Layout

Load a selection around the featured rectangle “Layer > Load Selection”, then contract the selection by 8 pixels “Select > Modify > Contract”.

Corporate & Portfolio Style WordPress Layout

Once contracted, paste your featured artwork into the selection. When pasting use the “Paste Into Feature”, for CS5 users you can find it here “Edit > Paste Special > Paste Into” for CS4 users and below you should find it in the first tier of the edit menu.

Corporate & Portfolio Style WordPress Layout

Once the artwork has been pasted into the selection deselect the selection with “Ctrl + D”. Inside the featured artwork image begin to create a simple caption which consists of a black box with low opacity and some text.

Corporate & Portfolio Style WordPress Layout

Setting Up The Content Part Of The Layout

On a new layer above the background layer make a small selection like the image below using the “Rectangular Marquee Tool” (M).

Corporate & Portfolio Style WordPress Layout

The selection should span the width of the canvas. Once the selection has been made select the “Gradient Tool” (G) with a color type of “Foreground to Transparent”.

Corporate & Portfolio Style WordPress Layout

Drag the gradient from the top of the selection downwards then set the opacity of the layer to around 14%.

Corporate & Portfolio Style WordPress Layout

Create a new layer above the shade layer then create two 1 pixel lines on top of each other. Color the first top line in black #000000 and the bottom line in white #ffffff, then set the layers blend mode to “Overlay”. Place the line over the last 2 pixels of the colored background.

Corporate & Portfolio Style WordPress Layout

Finally, select the “Rectangular Marquee Tool” (M) and make a selection around half of the canvas which is left over, leaving a small space at the bottom for the footer and a bigger space underneath the featured area for some additional content. Fill (G) the selection with the color #f4f4f4.

Corporate & Portfolio Style WordPress Layout

Adding The Additional Content

Using the CS4 icons or any other icons you wish to use place, evenly place them underneath the featured rectangle.

Corporate & Portfolio Style WordPress Layout

On the side of the icons using the “Text Tool” (T) add a simple bold title and a paragraph of text.

Corporate & Portfolio Style WordPress Layout

Creating The Intro Box

Using the “Rounded Rectangle Tool” (U) drag out a rectangle just after where the new grey background starts. The box should be big enough for some text and a button.

Corporate & Portfolio Style WordPress Layout

Once you’ve created the rectangle add the following layer styles.

Corporate & Portfolio Style WordPress Layout

Corporate & Portfolio Style WordPress Layout

Inside the box add some text using the “Text Tool” (T) then on the right side of the box create another but button sized rectangle.

Corporate & Portfolio Style WordPress Layout

To the button sized rectangle add the following layer styles.

Corporate & Portfolio Style WordPress Layout

Corporate & Portfolio Style WordPress Layout

Corporate & Portfolio Style WordPress Layout

Add the text “Read More” into the button, you should have something like this.

Corporate & Portfolio Style WordPress Layout

Creating The Gallery

Select the “Rounded Rectangle Tool” (U) then create 6 small rectangles. To each rectangle add the following layer styles.

Corporate & Portfolio Style WordPress Layout

Corporate & Portfolio Style WordPress Layout

Corporate & Portfolio Style WordPress Layout

You should have something like this.

Corporate & Portfolio Style WordPress Layout

Load a selection around the first rectangle “Layer > Load Selection”, contract the selection by 8 pixels just like we did with our featured rectangle “Select > Modify > Contract” then paste an image inside using the “Paste Into” feature.

Corporate & Portfolio Style WordPress Layout

Repeat the above steps for the other 5 rectangles until you have something like this.

Corporate & Portfolio Style WordPress Layout

Creating The Footer: Final Step

Duplicate the colored rectangle layer along with the shade and the divider line, then move them towards the bottom of the canvas. Deselect the divider line from the layers window leaving the shade layer and colored rectangle layer. Flip the two layers vertical by going “Edit > Transform > Flip Vertical”, once flipped move the divider line back into place and position all 3 layers at the bottom of the canvas.

Corporate & Portfolio Style WordPress Layout

Select the “Text Tool” (T) and add the copyright text inside of the colored area (Now the footer).

Corporate & Portfolio Style WordPress Layout

Conclusion

Thanks for taking part in this tutorial, if you managed to finish this tutorial I’d love to see some of your results. Feel free to post them up on our Facebook Fan Page.

  1. July 28, 2011 at 3:54 AM

    Another great design, i love the translucent designs, its always a challenge to convert this kind of design to HTML, thanks for sharing…

  2. July 28, 2011 at 9:38 AM

    Wow, really cool layout! I really like the header..Keep it up dude!

  3. rahul raj
    July 29, 2011 at 5:37 AM

    nice layout…………

  4. July 29, 2011 at 1:52 PM

    you have made beautiful blog template …! i just want to make template like this for my blog …! i will try to make this template perfectly thank you so much richard ..!

  5. July 29, 2011 at 11:11 PM

    wow great tut has always
    awesome design

  6. August 3, 2011 at 10:57 PM

    Thanks for sharing..Using this for inspiration for my new portfolio site!

    Greg

  7. August 9, 2011 at 7:32 PM

    that’s really good and so cleany

  8. August 13, 2011 at 1:43 PM

    Very interesting, A+

  9. August 27, 2011 at 12:24 PM

    nice 1

  10. September 9, 2011 at 1:23 PM

    Nice layout there! thanks for sharing!

  11. September 13, 2011 at 10:30 AM

    Uaoooo!!! Very Cool and Great Exposure

  12. Herve
    November 24, 2011 at 5:42 AM

    Amazing web layout- had fund practicing it.
    thanks for sharing.

Give Us Your Feedback

Here on Photoshop Plus we use something called Gravatar, its a little image which will appear next to your name when you comment on a blog. Using a gravatar will help us recognise genuine comments from the spam comments.


Don't forget to leave a comment on this post, we appreciated your feedback good or bad.

There's currently 12 Comments On Corporate & Portfolio Style WordPress Layout, why not add yours!

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Auto Scroll To The Top
css.php