Strict portfolio design for Photoshop

The final result:

Sources for the lesson:

  1. Icons
  2. 960 Grid System

Step 1. Creating the site structure

To get started, download the 960 grid system. Open the file “960_download \ templates \ photoshop \ 960_grid_12_col.psd”. Press Ctrl + Shift + C to resize the canvas.

Using the tool Fill (Paint Bucket Tool) fill the background layer with # 242b30. Now you need to create folders for each part of the site.

Step 2. Creating a site header

Create a new folder and name it “Header”. Go to View> New guide (View> New Guide), in the appeared window choose Orientation – Horizontal (Horizontal), and in the Position field enter 100px.

Choose a tool Rectangularregion (Rectangular Marquee Tool), create a selection, as shown in the screenshot below, and fill it with white (#FFFFFF) color.

Add layer styles:

Overlaygradient (Gradient Overlay):
– linear gradient;
– angle 90;
– # 171c20;
– # 22292f;

Stroke (Stroke):
– # 0d1012;

Step 3. Creating a logo

Create a folder “Logo”, inside the folder “Header”. Choose a tool Text (Type Tool) and write your site name, with the same settings as in the screenshot below.

Add layer styles:

Overlaygradient (Gradient Overlay):
– linear gradient;
– angle: 90;
– # 929292;
– #bcbdbd, Position (Location): 30%;
– #dfdfdf, Position (Location): 50%;
– #dfdfdf, Position (Location): 100%;

Now create a new layer, name it “Light” and place it under the text layer. Create a selection as shown in the screenshot below.

Set the foreground color to white (#FFFFFF). Choose a tool Brush (Brush Tool), in the brush options, select a brush with the same parameters as in the screenshot below.

Create the same clarification as in the screenshot.

Install Opacity (Opacity) at 80% and overlay mode change to Softshine (Soft Light).

Step 4. Create a navigation

Create a folder “Navigation” inside the folder “Header”. Choose a tool Text (Type Tool) and create several menu items with the following settings:

I highlighted the link “Home” because it is the active link. For the rest of the links, I used the color # b6aefd. For the active link, add the following styles:

Overlaycolors (Color Overlay):
– # 232a2f;

Create a new layer and place it under the layer with the active link. Take the tool Rectanglewithroundedcorners (Rounded Rectangle Tool) and set the rounding radius to 5px.

Add the following styles:

Overlaygradient (Gradient Overlay):
– linear gradient;
– angle: 90;
– # 929292;
– #bcbdbd, Position (Location): 30%;
– #dfdfdf, Position (Location): 50%;
– #dfdfdf, Position (Location): 100%;

Stroke (Stroke):
– # 13181b;

Step 5. Create a slideshow

Create a new guide (View> New guide (View> New Guide)). Orientation (Orientation) – Horizontal (Horizontal), Position (Position) – 140px. Repeat the action and create another guide, position – 440px.

Create a new folder – “Slideshow”. Choose a tool Rectanglewithroundedcorners (Rounded Rectangle Tool), radius – 5px, and create a rectangle, as in the screenshot below, fill with color – # 171c20.

Add layer styles:

Create a selection for the layer, go to Select> Modify> Compress (Selection> Modify> Contract) and compress the selection to 5px. Create 4 new guides and drag to the edges of the selection.

Choose a tool Rounded Rectangle (Rounded Rectangle Tool) with 5px radius. The color I chose is # 36414a. In fact, the color for this form does not matter, because This will be the substrate for the images.

Add layer styles:

Internalglow (Inner Glow):
– # 424f5a;

Stroke (Stroke):
– # 111417;

Inside the “Slideshow” folder, create a “divider” folder. Choose a tool Rectangularallotment ( Rectangular Marquee Tool). Create two 1 pixel vertical lines. The color of the first is # 111417. The second color is # 424f5a.

We will divide the slide show into 2 parts. In the left part we will place the description to the picture, from the right part, and two buttons. Inside the “Slideshow” folder, create a “left” folder. Choose a tool Rounded Rectangle (Rounded Rectangle Tool), radius – 5px. Create a rectangle inside the background.

Add layer styles:

Overlaygradient (Gradient Overlay):
– Style: linear;
– # 242b31;
– # 36414a;

Create a new “header” layer. Take the tool Rectanglewithroundedcorners (Rounded Rectangle Tool), create a rectangle and place it just like in the screenshot below.

Add the following layer styles:
Internalglow (Inner Glow):
– # 424f5a;

Overlaygradient (Gradient Overlay):
– Style: linear;
– # 21282d;
– # 2f3840;

Stroke (Stroke):
– # 111417;

Now add your title using the tool Text (Type Tool). (Color – # 171c20; Indent – 20px)

Duplicate the text layer and move it 1 pixel down. Add layer styles:

Overlaygradient (Gradient Overlay):
– Style: linear;
– # d4d4d4;
– #ffffff;

Using tool Text (Type Tool) add a description.

Inside the “Slideshow” folder, create a “Read more” folder. Take the tool Rectanglewithroundedcorners (Rounded Rectangle Tool). Create a rectangle and place it just like in the screenshot below. Choose a tool Text (Type Tool) and write “Read more”, color – #dedede.

Create a folder “prev_next”. Choose a tool Rectanglewithroundedcorners (Rounded Rectangle Tool). Create and place a rectangle in the same way as in the screenshot below.

Add layer styles:

Overlaygradient (Gradient Overlay) ::
– Style: linear gradient;
– angle: 90;
– # 929292;
– #bcbdbd, Position (Location): 30%;
– #dfdfdf, Position (Location): 50%;
– #dfdfdf, Position (Location): 100%;

Stroke (Stroke):
– # 161b1f;

Choose a tool Arbitraryfigure (Custom Shape Tool) and select the same arrow as in the screenshot below.

Place it as in the screenshot below:

Add layer styles:

Overlaygradient (Gradient Overlay) ::
– Style: linear gradient;
– angle: 90;
– # 21282d;
– # 2f3840, Position (Location): 50% and 100%;

Now take some picture and place it on the right side of the slide show.

Choose a tool Pen (Pen Tool) and create the same shape as in the picture below, fill it with black (# 000000) color.

Go to Filter> Blur> Gaussian Blur (Filter> Blur> Gaussian Blur) set the blur radius to 5px. Opacity (Opacity) set to 80%.

Step 6. Creating the “What I Do” block

Choose a tool Text (Type Tool), write your headline and place it just like in the screenshot below.

Add layer styles:

Overlaygradient (Gradient Overlay):
– Style: linear gradient;
– # d4d4d4;
– #ffffff;

Inside the “What I Do” folder, create 4 folders: “I Capture Smiles”, “I Design Websites”, “Awards I Receive” and “I love to Socialize”. Use the Type Tool to write some text for each block. For titles, I used the following settings: Color – #dfdfdf; Size – 18pt. For description: Color – #dfdfdf; Size – 12pt. The styles for the “Read more” button are the same as for the button in the Slideshow. The block size is 220px.

If you completed the previous step, then you should already have something like this:

Step 7. Create a separator

Inside the folder “Divider” create a new folder “lines”. To make a separator use the tool Line (Line Tool). The color of the first line is # 111417. The second color is # 364148.

Choose a tool Rectangle (Rectangle Tool), create and place a rectangle just like in the screenshot below. Reduce the fill (Fill) to 0%.

Add layer styles:

Duplicate the layer and change the style. Overlaygradient (Gradient Overlay).

The color of the gradient is # 242b30;

Step 8. Creating an “About Me” block

Inside the folder “About Me” create a new layer, select the tool Text (Type Tool) and add a title and description. Use the same settings as in the “What I Do” block.

Step 9. Creating the “My Portfolio” block

Inside the “My Portfolio” folder, create a new layer, and use the tool Text (Type Tool) write your headline.

Choose a tool Rectangle ( Rectangle Tool) and place the rectangle as shown in the screenshot below.

Add layer styles:

Stroke (Stroke):
– # 161b1f;

Place your image in the same way as in the slide show.

Now, add a description, for this take the tool Text (Type Tool) and write the description as shown in the screenshot below.

Step 10. Create a footer

Create a new layer inside the footer folder. Choose a tool Rectangle (Rectangle Tool), color – # 171c20, create a rectangle (Height – 50px) and place it just like in the screenshot.

Add layer styles:

Externalglow (Outer Glow):
– # 111417;

Stroke (Stroke):
– # 364148;

Add your copyright on the left side of the footer and a few links on the right.

Step 11. Add Background Glow

Select the “Background” folder and inside it create 2 layers and name them “Slideshow_light” and “whatido_light”. Select the “Slideshow_light” layer, take the tool Rectangularregion ( Rectangular Marquee Tool) and create a selection as shown in the screenshot below.

To create a glow select tool Brush (Brush Tool), size – 700, hardness (hardness) 0%. Create a glow as shown in the screenshot below. In the overlay mode, select Softshine (Soft Light), Opacity (Opacity) 70%.

You should have the same effect:

Select the “whatido_light” layer. Take the tool Rectangularregion (Rectangular Marquee Tool) and create a selection, as in the screenshot below.

Change blending mode to Softshine (Soft Light) and Opacity (Opacity) decrease to 70%. Create a glow like in the screenshot below.

That’s all! I hope you have learned something new in this lesson, and I hope you enjoyed this lesson!

The final result:

Author: Michael John Burns

Like this post? Please share to your friends: