SEARCH
Newsletter
Subscribe to get design tips, latest trends, free stuff and more.
It doesn't look like an e-mail address

hosting

  Tutorials Photoshop Web Layout How to Create a Sleek Portfolio Layout in Photoshop

How to Create a Sleek Portfolio Layout in Photoshop

Another Portfolio tutorial here guys, since there are more newbies struggling to get their first site design and layout. I did a couple of portfolio designs for you.

Today we will do a new layout and create a sleek portfolio layout in photoshop. You can download the PSD at the bottom.

Before we start, here are the things that we need.

abromov1 How to Create a Sleek Portfolio Layout in Photoshop

Start of Sleek Portfolio Layout Tutorial

1 canvas How to Create a Sleek Portfolio Layout in Photoshop

Open a new canvas and set the width to 980, height 1606. Next fill the entire canvas with #F1F1F1

2 header bg How to Create a Sleek Portfolio Layout in Photoshop

Grab your Marquee Tool (M) and select a 50px-like on the very top of the canvas, this will be our header. Fill it with #212121

3 header logo How to Create a Sleek Portfolio Layout in Photoshop

On the left side, we will create our text logo. Grab Pacifico font, 39pt #ffffff

4 header logo dropshadow How to Create a Sleek Portfolio Layout in Photoshop

Right click on the text logo layer, select Blending Options > Drop shadow angle 138, foreground color is #00000, distance and size is 5px

5 navi How to Create a Sleek Portfolio Layout in Photoshop

On the right side, we will do our navigation. Put the text, we used Arial Bold #ffffff, 14pt

6 navi drop shadow How to Create a Sleek Portfolio Layout in Photoshop

In navigation drop shadow, set the angle to 138 foreground #000000 distance and size 5px

7 slideshow How to Create a Sleek Portfolio Layout in Photoshop

Next create a new layer named it slide-bg, fill it with #F46554

8 slideshow line How to Create a Sleek Portfolio Layout in Photoshop

The layer where header and slide-bg meet, grab your Single Row Marquee Tool (M) and fill it using brush and foreground color #fa9588

9 slideshow text How to Create a Sleek Portfolio Layout in Photoshop

Next is to add the text on our homepage. First font used was League Gothic 83pt #FFFFFF, next is Pacifico 42pt #FFFFFF.

10 slideshow websites How to Create a Sleek Portfolio Layout in Photoshoptitle text shadow How to Create a Sleek Portfolio Layout in Photoshop

For the drop shadow, foreground is #cf4a3a angle is 138, distance and size is 1px

 

Next is to get the images from our previous tutorial, set it up like the one above.

11 slideshow website dropshadow How to Create a Sleek Portfolio Layout in Photoshop

For the Portfolio images drop shadow, foreground color is #000000 distance is 11px, size 29px

12 slideshow bottom layer How to Create a Sleek Portfolio Layout in Photoshop

Create a new layer, use Marquee Tool (M) and fill in half the page. This will fill the rest of the images

13 icons bg How to Create a Sleek Portfolio Layout in Photoshop

Create a new layer, named this website-black and fill it with #212121

14 icons dropshadow How to Create a Sleek Portfolio Layout in Photoshop

For the website-black layer, select drop shadow and foreground #8E8D8D, angle -90 distance and size is 5px

15 icons stroke How to Create a Sleek Portfolio Layout in Photoshop

Stroke's color #323232 and size 3px

16 icons text How to Create a Sleek Portfolio Layout in Photoshop

Next, we will use the icons that we downloaded earlier.  Title font is PT Sans 20pt #FFFFFF

17 icons title dropshadow How to Create a Sleek Portfolio Layout in Photoshop

For title font drop shadow, foreground is #000000 angle 138 and distance and size 5px

18 icon complete How to Create a Sleek Portfolio Layout in Photoshop

We also added some text, you should have the same image above

19 testi bg How to Create a Sleek Portfolio Layout in Photoshop

Below the website-black layer, we will a create a new layer named testi-bg fill it with #FFFFFF

20 testi stroke How to Create a Sleek Portfolio Layout in Photoshop

Fill in the stroke foreground color #dddddd, size is 1px

21 testi avatar holder How to Create a Sleek Portfolio Layout in Photoshop

Grab your Ellipse Tool (U) and hold SHIFT to make a perfect circle, name this avatar-holder

22 testi avatar How to Create a Sleek Portfolio Layout in Photoshop

Now, drop the image that you're going to use. Make sure that this layer is on top of the avatar-holder

23 testi clipping How to Create a Sleek Portfolio Layout in Photoshop

Right click on the image layer and select create clipping mask

24 testi clipping complete How to Create a Sleek Portfolio Layout in Photoshop

You'll have something like this one, drag the image or resize it to fit

25 testi complete How to Create a Sleek Portfolio Layout in Photoshop

Next is to add a couple of text, we use PT Sans font 14pt #000000

26 post body How to Create a Sleek Portfolio Layout in Photoshop

Now for our post body, grab Rounded Rectangle Tool (U) and set the radius to 5px and fill it with #FFFFFF

27 post image How to Create a Sleek Portfolio Layout in Photoshop

Grab this coming soon page image and right click > create clipping mask

28 post stroke How to Create a Sleek Portfolio Layout in Photoshop

For the post body stroke, foreground color is #ededed size 1px

29 post complete How to Create a Sleek Portfolio Layout in Photoshop

Group the post-body and image, and duplicate it. Just change the image and make sure they are all aligned, for the text font. Title is PT Sans Bold 14pt #000000, for the category PT Sans Italic #868686

30 footer bg How to Create a Sleek Portfolio Layout in Photoshop

For the footer, use Marquee Tool (M) to select the area and fill it with #212121, next do a Marquee Tool select for the lower part and fill it with #000000. Make sure that you do this on a new layer and cut it in three columns.

31 footer about us How to Create a Sleek Portfolio Layout in Photoshop

On the first column, we will add a small about text. Title font is PT Sans Bold 14pt #FFFFFF, the text is PT Sans Regular 12pt.

32 footer flickr How to Create a Sleek Portfolio Layout in Photoshop

For the next column, we will create a flickr image. Grab your Ellipse Tool (U) and fill it with #FFFFFF

33 footer flickr avatar How to Create a Sleek Portfolio Layout in Photoshop

Next, add you image and right click > create clipping mask

34 footer flickr stroke How to Create a Sleek Portfolio Layout in Photoshop

In avatar-holder layer, right click > blending options and select stroke, set the size to 3px and color to #FFFFFF

35 footer flickr complete How to Create a Sleek Portfolio Layout in Photoshop

We now have this icon smile How to Create a Sleek Portfolio Layout in Photoshop

36 footer newsletter How to Create a Sleek Portfolio Layout in Photoshop

On the third column we will create a newsletter section, grab Rounded Rectangle Tool (U) and set the radius to 10px, fill it with #000000

37 footer newsletter button How to Create a Sleek Portfolio Layout in Photoshop

Create a new Rounded Rectangle layer and cut off the left side, fill it with #F46554

38 footer newsletter button innershadow How to Create a Sleek Portfolio Layout in Photoshop

Inner Glow foreground color #f56856, set size to 4px

39 footer newsletter button gradient color settings How to Create a Sleek Portfolio Layout in Photoshop

Copy the gradient color settings above

40 footer newsletter button stroke How to Create a Sleek Portfolio Layout in Photoshop

In stroke, color is 8f1202 and size 1px

41 footer newsletter button complete How to Create a Sleek Portfolio Layout in Photoshop

Here is our button, I also added a text in the textbox. Font used was PT Sans 13pt #FFFFFF

42 footer newsletter button submit How to Create a Sleek Portfolio Layout in Photoshop

We also added a submit text on the button, font was the same with the text beside it.

43 footer newsletter submit dropshadow How to Create a Sleek Portfolio Layout in Photoshop

For the submit text drop shadow, distance and size is 1px. Foreground color is #000000

44 footer complete How to Create a Sleek Portfolio Layout in Photoshop

Here is our completed footer, we also added a site title on the left side and social media icons from the right.

abromov1 How to Create a Sleek Portfolio Layout in Photoshop

And we are done!

subscribe to newsletter