Table of Contents

Corporate & Portfolio Style Wordpress Layout

Tom Clayton
This site is reader-supported. When you buy through links on our site, we may earn an affiliate commission. Learn more.

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.

Corporate & Portfolio Style Wordpress Layout

Facebook
Pinterest
Twitter

More to Explore

30 Weird Things On Google Earth You Have To See

When Google Earth launched in 2001, it transformed how we see our planet. Suddenly, anyone with an internet connection could become a virtual explorer, discovering hidden wonders and bizarre sights from the comfort of their home.

10 Essential Drawing Apps For Laptop To Try Today

Do you remember the days of lugging around sketchbooks, pencils, and an array of art supplies? While traditional art will always have its charm, the digital revolution has transformed the way we create. Your laptop isn’t just a work machine anymore—it’s a portable art studio waiting to be unleashed.

Disclosure

As an Amazon Associate, we may earn commissions from qualifying purchases from Amazon.com. You can learn more about our editorial policies here.
This site is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to amazon.com. Amazon and the Amazon logo are trademarks of Amazon.com, Inc. or its affiliates.

Privacy