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.

Let’s create a new file (File>New) of 1000×700px/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



Gradient Editor:





Next we’ll represent the web-site’s header, applying the earlier chosen Rectangle Tool (U).



The layer’s styles: Blending Options>Gradient Overlay



Gradient Editor:





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







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



The layer’s styles: Fill 0%, Blending mode-Color Dodge



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 texture’s parts coming out of the header’s edges:





Insert now the site’s name, keeping the demands from the next table (used font):

Post Pages: 1 2 3

If you enjoyed this article, please consider sharing it!