7/30/13

Freelancer portfolio design

Home Adobe Photoshop Freebies Inspiration

Search adobe, tutorials, news.

Subscribe via RSS | Get E-mail Updates | Follow us on Twitter

Freelancer portfolio design

May 8th, 2009 by ART-D Posted in Adobe Photoshop, Web Layout

Step by step tutorial on how to create a portfolio web layout in Adobe Photoshop CS3.

Final Image Preview

StumbleU 1

www.adobetutorialz.com/articles/3075/1/Freelancer-portfolio-design

1/28

7/30/13

Freelancer portfolio design

Lets create a new file (File>New) of 1000x700px/72 dpi. Select the Rectangle Tool (U) to represent the background of the layout to be.

Choose the next demonstrated styles by making a click on the layer we work with on the layers palette: Blending Options>Gradient Overlay

www.adobetutorialz.com/articles/3075/1/Freelancer-portfolio-design

2/28

7/30/13

Freelancer portfolio design

Gradient Editor:

www.adobetutorialz.com/articles/3075/1/Freelancer-portfolio-design

3/28

7/30/13

Freelancer portfolio design

Next well represent the web-sites header, applying the earlier chosen Rectangle Tool (U).

The layers styles: Blending Options>Gradient Overlay

www.adobetutorialz.com/articles/3075/1/Freelancer-portfolio-design

4/28

7/30/13

Freelancer portfolio design

Gradient Editor:

www.adobetutorialz.com/articles/3075/1/Freelancer-portfolio-design

5/28

7/30/13

Freelancer portfolio design

Now well have to create a background pattern with useful tool located on BGPatterns, setting the parameters by turn.

www.adobetutorialz.com/articles/3075/1/Freelancer-portfolio-design

6/28

7/30/13

Freelancer portfolio design

Download the new pattern and go to Edit>Define Pattern On the new layer well select Edit>Fill and apply the saved pattern.

The layers styles: Fill 0%, Blending mode-Color Dodge

www.adobetutorialz.com/articles/3075/1/Freelancer-portfolio-design

7/28

7/30/13

Freelancer portfolio design

Make a click on the same layer on the bottom part of the layers panel on Add a Mask selection and choose the Brush Tool (B) and black color to erase the textures parts coming out of the headers edges:

www.adobetutorialz.com/articles/3075/1/Freelancer-portfolio-design

8/28

7/30/13

Freelancer portfolio design

Insert now the sites name, keeping the demands from the next table (used font):

www.adobetutorialz.com/articles/3075/1/Freelancer-portfolio-design

9/28

7/30/13

Freelancer portfolio design

The layers styles: Blending Options>Drop Shadow

Blending Options>Outer Glow

www.adobetutorialz.com/articles/3075/1/Freelancer-portfolio-design

10/28

7/30/13

Freelancer portfolio design

Blending Options>Gradient Overlay

Gradient Editor:

Using the Rounded Rectangle Tool (U) (radius of 20 px), try to make the menus button:

www.adobetutorialz.com/articles/3075/1/Freelancer-portfolio-design

11/28

7/30/13

Freelancer portfolio design

The layers styles: Fill 0%, Blending Options>Outer Glow

Blending Options>Stroke

www.adobetutorialz.com/articles/3075/1/Freelancer-portfolio-design

12/28

7/30/13

Freelancer portfolio design

Make three copies of the buttons layer and select the Free Transform option to place the copies the same way indicated below:

Insert the titles for the menus buttons, putting each word on a separate layer:

www.adobetutorialz.com/articles/3075/1/Freelancer-portfolio-design

13/28

7/30/13

Freelancer portfolio design

Select for the layers containing the buttons titles the same styles demonstrated below: Blending Options>Outer Glow

Next well select the Rectangle Tool (U) to represent the sites panel, giving it the color #F5F5F5

www.adobetutorialz.com/articles/3075/1/Freelancer-portfolio-design

14/28

7/30/13

Freelancer portfolio design

The layers styles: Blending Options>Drop Shadow

www.adobetutorialz.com/articles/3075/1/Freelancer-portfolio-design

15/28

7/30/13

Freelancer portfolio design

Make three copies of the layer and choose Free Transform option to place the copies the same way as below:

Insert the pictures on the made layers, I used this photo from deviantart. I would like to thank the author of this artwork:

www.adobetutorialz.com/articles/3075/1/Freelancer-portfolio-design

16/28

7/30/13

Freelancer portfolio design

Select the same styles for the pictures layers: Blending Options>Stroke

Try to represent a button under the picture, choosing the Rectangle Tool (U) and white color.
www.adobetutorialz.com/articles/3075/1/Freelancer-portfolio-design 17/28

7/30/13

Freelancer portfolio design

The layers styles: Blending Options>Drop Shadow

www.adobetutorialz.com/articles/3075/1/Freelancer-portfolio-design

18/28

7/30/13

Freelancer portfolio design

Make three copies of the layer containing the button and use Free Transform option to place the copies the same way demonstrated below:

Insert the titles for the made buttons:

www.adobetutorialz.com/articles/3075/1/Freelancer-portfolio-design

19/28

7/30/13

Freelancer portfolio design

Next well introduce the basic text on the site:

www.adobetutorialz.com/articles/3075/1/Freelancer-portfolio-design

20/28

7/30/13

Freelancer portfolio design

Using the Line Tool (U), well represent a line under the text, giving it the color #6E6969

On the last stage well insert the copyright, keeping the next demonstrated demands:

www.adobetutorialz.com/articles/3075/1/Freelancer-portfolio-design

21/28

7/30/13

Freelancer portfolio design

The layers styles: Blending Options>Drop Shadow

Blending Options>Outer Glow

www.adobetutorialz.com/articles/3075/1/Freelancer-portfolio-design

22/28

7/30/13

Freelancer portfolio design

Blending Options>Gradient Overlay

Gradient Editor:

www.adobetutorialz.com/articles/3075/1/Freelancer-portfolio-design

23/28

7/30/13

Freelancer portfolio design

Finished! View full size here.

Tags: design, freelancer, layout, Photoshop, portfolio, tutorial, Web Layout If you enjoyed this article, please consider sharing it!

www.adobetutorialz.com/articles/3075/1/Freelancer-portfolio-design

24/28

7/30/13

Freelancer portfolio design

Serega
25/04/2010

Name (required) Mail (will not be published) (required) Website (optional)

Submit Comment

You can score your best marks by consulting our jncia and 1Y0-A24 dumps exam practice questions,you can also download our best quality BH0-006 dumps,000-119 and F50-532 which will greatly help you in preparation.

www.adobetutorialz.com/articles/3075/1/Freelancer-portfolio-design

25/28

7/30/13

Freelancer portfolio design

Advertise Here

adobetutorialz
Like 7,442 people like adobetutorialz.

F acebook social plugin

Custom Signs Royalty Free Images Download Adobe Photoshop online photo retouching services Hughesnet Gen4 Free Stock Photos and Images

www.adobetutorialz.com/articles/3075/1/Freelancer-portfolio-design

26/28

7/30/13

Freelancer portfolio design

Adobe Connection eFOX shop fr Chinawaren in Deutschland Wholesale Handbags From China,Enjoy Wholesale Price

Categories
Acrobat Family Adobe Photoshop Adobe Technologies Creative Suite Family Design Software Digital Imaging Digital Photography Software

About / Contact Us
Contact Us Advertise with us Submit a bug report Privacy Policy

Popular searches
Merry Christmas Saint Valentine Wallpapers

Subscribe Stats
Subscribe via RSS Get E-mail Updates
27/28

www.adobetutorialz.com/articles/3075/1/Freelancer-portfolio-design

7/30/13

Freelancer portfolio design

Freebies Inspiration Macromedia Products Photoshop Plugins Print and Web Publishing Video and Audio 2006-2011 Adobetutorialz. All rights reserved. a Media Temple company

Photo Effects Web Layouts

Follow us on Twitter

www.adobetutorialz.com/articles/3075/1/Freelancer-portfolio-design

28/28