home tutorials forums downloads contact-us
Gradient Twirl Professional Portfolio Layout Tech Site Layout Professional Logo Design Fresh Tutorials:
Last Update: 2.14.2007
Online: 105 Users
Advetise on For only $50 per month! Tutorials Effects Professional Portofolio Layout

Professional Portofolio Layout

In this tutorial you will learn how to create a very elegant layout that would look great as a personal portfolio to show your work. The steps used in this tutorial are techniques used a daily basis by professionals in graphic design and web development, after finishing this tutorial you to will know and understand these fundamental techniques.

Download File Download Professional Portofolio Layout Source Package

Go To Page: [ 1 2 ]

Page 1 of 2

Step # 1
Create a new document in photoshop that is 800 x 800 pixels in size, and fill the background with white (#FFFFFF).

Step # 2
I usually start with the header, so that's where we'll begin:

We'll start by creating the header for our layout. Find yourself a nice stock photo to use that you will build and blend your layout around. A good place to find free stock images is here: Which is a service l highly suggest. There are also many great pay-per-photo stock companies out there that you can research as well.

The image I will be using in this tutorial is available in the download pack for this tutorial:

Go ahead and open your image in photoshop.

Press CTRL + A on your keyboard to highlight the image, and press CTRL + C to copy it.

Now move back to our original layout document (which is 800x800) and press CTRL + V to paste it onto our layout.

By picking a stock photo to build the layout around first we can easily decide what would be a good color scheme to, rather than the other way around.

Once your header photo is pasted you may need to resize it by pressing CTRL + T on your keyboard, placing your mouse near one of the small squares (called nodes) near the top right corner, holding down the SHIFT key while clicking and dragging inward towards the center of image.

Here is how my header looks so far, after positioning the photo in the top right corner of the layout:

Step # 3
Next l went ahead and added a logo to the header. The font used here is a basic Ariel, however there are several designer fonts available for free download in our downloads section that you could choose from.

Here is how my layout looks after adding my fictional company logo:

Step # 4
The next step is to the navigation or menu bar. Create a new layer on your document and name it "Menu Bar". Get our the rectangular marquee tool () and make a selection similar to what l have done here:

Fill this selection with white (#FFFFFF).

Double click this layer, and apply the following blending options:
Outer Glow:

Inner Glow:

Color Overlay:

Gradient Overlay:



Step # 5
Hold down the CTRL Key on your keyboard and click on the Menu Bar layer in your layers pallet. This will make a selection of everything n this layer. Now get out the Rectangular Marquee tool (), press and hold the ALT key on your keyboard. and deselect the lower half of the menu bar selection, so you have the upper bar selected.

Set your foreground color to white (#FFFFFF), get out the Gradient Fill Tool () and select the "foreground to transparent" gradient:

Click a little bit below the selection and drag it to a little bit above the selection.

Step # 6
Create a new layer. Get out the Pencil Tool () and set it up like so:

Change the blending mode of this new layer to "Soft Light":

Now while holding down the SHIFT key on your keyboard, draw a horizontal line onto your navigation bar one pixel above the bottom as l've done here. Holding down the SHIFT key ensures that the line will be drawn perfectly straight:

Now draw another horizontal line across the top of the image one pixel under on this same layer as l've done here:

Step # 7
Now for the navigation bar dividers. Create a new layer, get out the Pencil Tool () and set it up like so:

Change the blending mode of this new layer to "Soft Light":

Hold down the SHIFT key on your keyboard, and draw a vertical line on to your navigation bar as l've done here:

Next press CTRL + J on your keyboard to duplicate this layer.

Press 'V' on your keyboard to get out the move tool.

Tap the LEFT ARROW <- on your keyboard once to nudge this duplicate layer to the left one pixel.

Press CTRL + I (that's an i) on your keyboard to invert the color from white to black.

Press CTRL + E to merge this layer with the previous.

This will create a very nice inset button effect.

Repeat this process once for each of the buttons you'll need and use the Move Tool (press V on your keyboard to get out the move tool) to position them along your navigation bar.

Go To Page: [ 1 2 ]
Page 1 of 2
Tutorial Index

Download File Download Professional Portofolio Layout Source Package

Author: xfader
Discuss this tutorial on the Forums
Kostenloses für den Webmaster Free online adobe Photoshop tutorials! Learn webdesign easy with our adobe photoshop CS2 and Adobe Photoshop CS tutorials
All Affiliates / Your Link Here
© 2007 - 2008 Duplication/Redistribution prohibited. Map
Top of Page