HV-Designs.co.uk

September 27th, 2010 in Photoshop Tutorials by Naomi

Create a Clean Portfolio Web Layout

• Share

Hello everybody, welcome to a new tutorial from HV-Designs. In this tutorial Naomi will walk you through the steps to create a clean portfolio web layout.

Ten years ago, I was working as a part-time DJ at a small radio station desperately trying to land a full time position there – any full time position. One day, I caught a lucky break when the marketing director at that station asked me if I knew anyone who understood computers and could learn how to make simple graphics for the station’s new web site. I told him that I was his gal – and less than a week later I was in his office learning my way around photoshop and HTML. I remember looking around at other radio stations’ web sites and the first time I came across one such web site with flashing lightning across the page while the logo bounced around – fading in and out of view. Both the marketing director and I drooled as we decided we just had to figure out how to create something similar for our own web site.

My, how trends have changed! Flash is still used a lot in web design, but the lightning effects, floating menus, hovering over a menu item here to see a pop up explanation over there, pictures and movies galore have all been sized down quite a bit in favor of a new trend known as clean designs. Clean designs allow the web site to be focused on the content rather than the glitz of the pictures and those little sayings that follow the mouse around the screen. So, in keeping with this trend, today’s tutorial is about creating a clean web layout that will work as a portfolio layout for web designers, photographers, or anyone else who may want their work displayed for all to see.

What We’ll Be Creating

Click image for full view.

• Social Media Icons by claycauleyinc

Lets Get Started

To begin, I set my background color to #BF9268 and then created a new document that was 1200 pixels wide by 1000 pixels high:

Next, I used color #671900 with the soft brush tool set to 300 pixels and created this circle near the top of my page:

Still using the soft brush tool, I created other circles using colors # CC6B04 and #1D3855 of different sizes. Here is my outcome:

Next, add some noise to this layer:

And then apply a guassian blur:

Here is the top part of my page so far:

For now, I’m going to go ahead and hide the circles from view and work on the layer below them. Use the Rectangular Marquee tool to select an area 1200 pixels wide by 400 pixels high at the top of the page:

Then set your foreground color to # AB7849 and your background color to #5B3A17. Use the Gradient Tool to fill in the selected area with a gradient from foreground to background color:

Once that’s done, you can un-hide the layer with the blurred circles so that they show over the gradient layer. Create a clipping mask by right clicking on the circles’ layer and select “Create Clipping Mask”:

You should now see something like this:

Using color #671900 and the Rectangle Tool, I created this shape to serve as the seam between the header area and the bottom of the page:

Next, I used the Rounded Rectangle Tool to create a white shape in the center of the page:

Then I applied these layer styles to the white rectangle:

Here is what my complete page looks like so far:

Now we’ll need to type in our site’s name. To highlight the site name, I used the Ellipse Tool to create a small circle near the top of the page beneath the center area:

Then I applied a guassian Blur to the circle using this setting:

Using color #671900 and Tahoma font, I typed in the site name over the highlighter and applied these layer styles:

Here is what my site name looks like when it’s finished:

To create the navigation bar, first I used color #617900 and the Rectangle Tool to create a thin rectangle to run across the top of the layout:

Next I selected the Rounded Rectangle Tool and placed it directly above my thin rectangle going down near the top of the central area. Once both shapes are lined up the way you like, merge the two layers together (CTRL E) and apply these layer styles to the navigation bar:

Next, create a new layer directly above the navigation bar. With the Rectangular Marquee Tool set to feather 6px, select an area around just the rounded rectangular portion of the navigation bar:

With the area still selected, use the line tool with white to create small, vertical lines across the rectangular selection. For this, I used the grid to help me align my lines, and used the “Add to Shape Layer” setting so that all the lines would appear on the same layer:

Here is what my header looks like once I’ve finished drawing in my vertical lines:

Now we’re going to set the Blending Mode for this layer to “Soft Light”:

Now, create a new layer and use the lasso tool to select this area:

With your soft brush tool set to 30 pixels and opacity 50%, paint just over the top edge of the selection:

Then inverse the selection and repeat the process. You can also delete some of the white from inside:

And finally set the Blending Mode to Overlay and set your opacity:

I used Tahoma font with color#BF9268 to write in the links using the text tool and applied this drop shadow to each link:

Here is the completed header section for my layout with the completed navigation bar:

For the content that appears in the top portion of the central area, I used Tahoma font with color #5B3A17. On the right side, I placed a thumbnail image of another layout I developed.

To create the navigation arrows around the thumbnail image, I set my foreground color to #617900. Then I used the Line tool set to 6 pixels and created a small diagonal line:

I duplicated this process slanted the other way to create the arrow and then merged the two shapes together into one arrow. Next I applied these layer styles:

I repeated this process to create the right arrow as well.

To frame the thumbnail for the site that’s on display, I first created another layer directly beneath the layer containing my site’s thumbnail. Then, using the Rectangular Marquee Tool, I selected a rectangle around my picture and filled it in with color #1D3855. Next, I applied this layer style:

For the text in the middle, I used color # AB7849 and then applied this drop shadow:

I used the text tool to fill out the content for the bottom area as well.

For the highlighters behind the titles in the bottom area, I used color #1D3855 and the Ellipse tool to create a very thin ellipse:

Then I applied a shape blur to the ellipse:

Here is my result for the title highlighter in the bottom content area:

And finally, add in your social media icons. The set I used comes from claycauleyincat DeviantArt.

Here is what my finished layout looks like:

That’s it all done, hope you enjoyed this tutorial, look out for more tutorials coming soon. Thanks.

• Share