Making a layout for a portfolio in Photoshop

This lesson is about how to create a portfolio template using Adobe Photoshop CS3.

Materials for the lesson:

Step 1. Create a new file File> New (File> New (Cntr + N)) 1000×700 pixels. Select Tool Rectangle(Rectangle Tool (U)) to determine the location of the background

Step 2. Apply the following layer style to the background layer by double-clicking on the layer you are working with on the layers palette: Blend Options> Gradient Overlay (Blending Options> Gradient Overlay)

Gradient Editor (Gradient Editor):

Here is what you should get:

Step 3. Then we will make the website header using the previously used Tool. Rectangle (Rectangle Tool (U)).

Select Layer Style: Blend Options> Gradient Overlay (Blending Options> Gradient Overlay)

Gradient Editor (Gradient Editor):

The result should be:

Step 4. Now we need to create a background texture using a useful tool located on BGPatterns. Set the parameters in turn, as shown in the figures.

Download a new sample and go through Editing> Define Pattern (Edit> Define Pattern). On the new layer we will choose Editing> Run Fill (Edit> Fill (Shft + F5)) by applying the saved pattern.

For this layer, apply: Fill (Fill) 0%, Blend Mode> Light Baseline (Blending mode> Color Dodge)

Apply to this layer Add layer mask (Add a Mask), select Tool Brush (B) black to erase the parts of the texture that extend beyond the edges of the “caps”:

Step 5. Now write the name of the site, using the following font parameters (font used):

The result of this step:

Next, select the Layer Style: Overlay Settings> Shadow (Blending Options> Drop Shadow)

Blend Options> Outer Glow (Blending Options> Outer Glow)

Blend Options> Gradient Overlay (Blending Options> Gradient Overlay)

Gradient Editor:

About this result you should achieve:

Step 6. Using the Tool Rounded Rectangle (U) (radius 20), make the menu button:

For the layer with the button, select the following parameters: Fill (Fill) 0%, Blend Options> Outer Glow (Blending Options> Outer Glow)

Blend Options> Stroke (Blending Options> Stroke)

Result:

Step 7. Make three copies of the layer with the button (Ctrl + J) and select Editing> Free Transform (Free Transform). Place copies of the layers as shown below:

Step 8. Write the names for the menu buttons, placing each word on a separate layer using the following parameters:

Apply to the layers containing the button names the style shown below: Blend Options> Outer Glow (Blending Options> Outer Glow)

Step 9. Then we will choose the tool Rectangle (U), select the rectangular area where our images will be located, fill in the area using color # F5F5F5

Apply Layer Style: Overlay Settings> Shadow (Blending Options> Drop Shadow) with the following settings:

Make three more copies of the layer with a rectangular area (Ctrl + J) and select Editing> Freetransformation (Free Transform), place copies as shown below:

Step 10. Paste the pictures on the layers, I used a photo of the girl from deviantart. I would like to thank the author of these artworks:

Choose a similar style for layers with pictures: Blend Options> Stroke (Blending Options> Stroke), with the following settings:

Step 11. Using the Tool Rectangle (U) with a white fill, place the button below the picture.

Apply to layer with layer style button: Overlay Settings> Shadow (Blending Options> Drop Shadow)

Make three copies of the layer containing the button (Ctrl + J), select Editing> Free Transform (Free Transform), place copies as shown below:

Step 12. Write the names for the buttons made with the following settings:

Well, we are almost there.

It now remains to enter the main text of the site:

Step 13. To give a finished look, let’s do the following: using the Tool Line (U), we will draw a line under the text, setting the color # 6E6969.

Step 14. In the last stage, we will insert copyright text using the following font settings:

Layer Style: Overlay Settings> Shadow (Blending Options> Drop Shadow)

Blend Options> Outer Glow (Blending Options> Outer Glow)

Blend Options> Gradient Overlay (Blending Options> Gradient Overlay)

Gradient Editor:

That’s all!

Author: designstacks

Like this post? Please share to your friends: