PhotoshopForce.com
PhotoshopForce.com home tutorials forums downloads contact-us PhotoshopForce.com
PhotoshopForce.com
Levels Adjustment Tool Grunge Signature Professional Logo Design Energy Pulse Background Effect Fresh Tutorials:
Last Update: 2.14.2007
Online: 123 Users
Adverts
Advetise on Photoshopforce.com For only $50 per month!
PhotoshopForce.com
PhotoshopForce.com 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 2 of 2


Step # 8
This step is quite the same as step 3, but than a little bit bigger and with another color.

Make another layer and take the Rectangular Marquee Tool () and make a selection like this:


Fill this selection with white (#FFFFFF).
Double click this layer, and apply the following blending options:
Gradient Overlay:




Stroke:


Result:





Step # 9
Create a new layer. Set your foreground color to white (#FFFFFF). Get out your Pencil Tool () and set it up like so:


Now draw a box 1 pixel inside of this container we made in the previous layer as l've done here. Remember holding down the SHIFT key while you draw your lines will ensure that you make perfectly straight lines.

Here l've added 3 lines total. One on the top, one on the bottom, and one on the right side of the container:





Step # 10
Finally we're going to add the text to our layout.

First we'll add some text to our navigation system. To do so select a font you like, here l've used "Perspective Sans", but if you don't like this font there are several designer fonts available for free download in our downloads section.

Once your text has been added, double click the layer, and apply the following blending options:
Drop Shadow:


Result:


At this point you can add a few more minor details to the layout. As you can see l've added some blue lines to separate each of the main content areas. This was done simply with a 1 pixel pencil tool and a blue color setting. Here's how the final layout may look after being sliced and having content added:


Thank you very much for reading this tutorial, l hope you have learned some useful techniques along the way. Please be sure to check out the rest of our photoshop tutorials for more tips and tricks on creating web layouts and graphics in Photoshop!


Download File Download Professional Portofolio Layout Source Package



Author: xfader
Discuss this tutorial on the PhotoshopForce.com Forums
Affiliates:
9 tutorials - Photoshop tutorials , Flash tutorials, PHP tutorials and much more  SourceCrave - Quality Webmaster Resources www.VidPit.com: Funny, Cool & Sexy videos! Photoshop Family :: Great photoshop tutorials!
All Affiliates / Your Link Here
HOME   |   TUTORIALS   |   FORUMS   |   DOWNLOADS   |   CONTACT US
© 2007 - 2008 www.PhotoshopForce.com Duplication/Redistribution prohibited. Map
Top of Page