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.

What We’ll Be Creating

Resources Used In This Tutorial

• Web Social Icon Pack
• CS4 Icons By Pkarwowski
• Bling Brushes By Media Militia

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.

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.

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

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

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

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

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

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.

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

• Web Social Icon Pack

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

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

• Bling Brushes By Media Militia

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

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

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.

Creating The Featured Area

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

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

You should have something like this.

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

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.

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.

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

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

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

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.

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.

Adding The Additional Content

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

• CS4 Icons By Pkarwowski

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

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.

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

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.

To the button sized rectangle add the following layer styles.

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

Creating The Gallery

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

You should have something like this.

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.

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

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.

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

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.