Illustrated designs

Photo Portfolio Web Page Layout

Photo Portfolio Web Page Layout - part 1
This tutorial will show you how to create a clean looking web layout for your portfolio.

Create Photo Portfolio Web Page Layout in Photoshop CS3

Create a new file (File>New) with 766x750 px and 72 dpi. Next use the Paint Bucket Tool (G) to paint the new layer with this shown color - #0F1715

Create Photo Portfolio Web Page Layout in Photoshop CS3

Find in Internet a kind of pattern, like this one:

Create Photo Portfolio Web Page Layout in Photoshop CS3

Edit>Define Pattern. Create a new layer and select this option Edit>Fill, to insert the pattern on our main picture.

Create Photo Portfolio Web Page Layout in Photoshop CS3

Make a mouse click on the same layer on Add a Mask option that may be found on the lowest part of the layers’ panel. Next choose the Brush Tool (B) and Opacity of 20% of black color to clean out the upper part of the picture.

Create Photo Portfolio Web Page Layout in Photoshop CS3 

Create Photo Portfolio Web Page Layout in Photoshop CS3

Select for
this layer these parameters: Blending mode-Soft Light

Create Photo Portfolio Web Page Layout in Photoshop CS3

The Rectangle Tool (U) is helpful in drawing a thin stripe on the lowest part of the picture. The element’s color is #0F1715

Create Photo Portfolio Web Page Layout in Photoshop CS3

Using the same instrument, it’s possible to represent the menu’s panel, reserved for the site’s header.

Create Photo Portfolio Web Page Layout in Photoshop CS3

Apply the next parameters by making a mouse click on the layer we work with on the layers’ panel.
Blending Options>Gradient Overlay

Create Photo Portfolio Web Page Layout in Photoshop CS3

Gradient’s parameters:

Create Photo Portfolio Web Page Layout in Photoshop CS3 

Create Photo Portfolio Web Page Layout in Photoshop CS3

Use the Rounded Rectangle Tool (U) with a radius of 10 px to draw on the menu’s panel a button. Next stage we should hold on Alt button while using the Rectangle Tool (U) and cut out the unnecessary elements.

Create Photo Portfolio Web Page Layout in Photoshop CS3



Popular Tutorials

Create Professional Design Studio Web Layout in Photoshop CSCreate Photographer Page Layout in Photoshop CS3Create Web Page Design Layout in Photoshop CS3Create Design Studio Website in Photoshop CS3Create Creative Studio Web Page in Photoshop CS3Create Creative Arts Studio Web Site Layout in Photoshop CS3Create Online Photo Portfolio in Photoshop CS3Making your own portfolio web page in Photoshop CS3Create Design Studio Website in Photoshop CS3Create Stylish WebStudio Web Layout in Photoshop CS

Latest Tutorials

Design grunge wordpress theme in Adobe Photoshop CS4Create contemporary web layout for your design studio in Adobe Photoshop CS4Create a trendy portfolio layout in Adobe Photoshop CS4Create a clean Freelancer portfolio layout in Adobe Photoshop CS3Create a nice looking photographer portfolio layout in Adobe Photoshop CS3

Subscribe via RSS



Your Favorite Articles

View All Favorites
No popular authors found.
No popular articles found.