Create A Clean And Modern Portfolio Layout

Article - Create A Clean And Modern Portfolio Layout

Create A Clean And Modern Portfolio Layout

A good design is key to attracting visitors to your website. However, tons of flashy graphics can be a deterrent for some visitors who have slower connections. We’ve created a simple, yet clean and modern portfolio layout and we’ll show you how we did it.

A portfolio should be clean and to the point. Prospecting clients won’t want to search through tons and tons of content for key information so displaying it prominently and clearly will help you convert prospects into actual clients. Here, we’ll show you step-by-step how to create a clean and modern portfolio layout.

Step One

Create a new Photoshop document with a size of 900×800 and set the background color to #151515.
Once you’ve done this, you should have a clean, dark background in front of you. Now, go to Filter > Noise > Add Noise. Set the Amount to 1.75% with a Uniform Distribution and make sure the Monochromatic box is checked; hit OK.
Modern Temp Add Noise

Step Two

Now lets add some catchy header text. With the font Nevis and the color #f7f7f7, type the name of your design in 36pt font. Too easy.
Now, open your text layer’s Blending Options (right-click the text layer). Select Drop Shadow and set the color to #000000 (black) and the Blend Mode to Multiply. Now set the Opacity to 35%, the angle to -90° and the Distance and Size to 0, keep be sure to keep the Spread at 0%.
Modern Temp Drop Shadow

After the Drop Shadow, we’re going to apply a Gradient Overlay. Select Gradient Overlay and use the default black and white gradient and set the Blend Mode to Pin Light with an Opacity of 35%. Change the Style to Reflected and the angle to 90°.
Modern Temp Gradient Overlay

Hit OK on the Layer Style dialog box. Your text should now be a little bit prettier.

(the dark line in the middle is just a burn that I used to create a drop shadow for the next step)

Step Three

Let’s start adding some content areas to the layout. Select the Rounded Rectangle Tool (U) and create a shape size of 840×355 with the color #1caaec; now Select the Burn Tool and burn the sides of the box (play with the settings until you get an effect you like) or use this one.

A quick progress check…

Now lets add a darker box for the footer. Do the same as above except use #151515 as the color and make the height only 255px (this box should be all the way to the bottom of the document). We’re not going to put any layer styling here, but we will need to draw a separator line on the footer. Select your Pencil Tool and change the size to 1px then draw a horizontal line all the way across the footer box with the color #101010 about 35px from the bottom. Draw a second line right below the one you just drew with the color #252525. Now you should have the footer separated with just a little space at the very bottom. You’ll see what we’re going to put here in the next step.

Before moving on, your layout should look similar to:

Step Four

Almost done! Bascially all that’s left is filling the layout with text, which really makes a big difference. There’s really nothing left for us to teach you. All you need now is the text tool and a creative eye to make your key words pop. We’ve even left room for you to add some thumbnails of your work.

Hope you enjoyed this tutorial, let us know what you think would make it easier to follow and don’t forget to download the .zip for an exact replica in PSD and HTML form of what you’ve just learned!

Check out these other tutorials we’ve written:

(.zip file contains tutorial PSD and coded tutorial site)

About the author

TutsArena is dedicated to providing the best, free web design tutorials.

Visit TutsArena's Website | All Articles From This Author

15 Comments

June 9 at 3:22 pm Alan(Quote)

Alan said:

The ZIP download contains a coded version of this tutorial so you can get started right away. Simply change a few of the images and you’re good to go.

Comment here if you need any help.
June 9 at 11:38 pm .(Quote)

. said:

how long did it take you to make this website?
June 10 at 12:07 pm Alan(Quote)

Alan said:

It took roughly two hours to design the website and another four hours to code it. It took longer to code because it’s not my cup of tea, it was a lot of back and forth to get it right.
June 11 at 9:11 am vik(Quote)

vik said:

thats cool man, nice, sleek and simple.

could u kindly tell me or refer me to a tutorial on how to slice this?
also, what if u have a tonne of text that cant fit in that box?

well done, enjoyed it.
June 11 at 10:13 am Alan(Quote)

Alan said:

Hi vik,

If you downloaded the tutorial, you’ll see it also comes with a coded version. All you have to do is slice your new images to the same size as the old ones and overwrite them.

I will be writing a slicing tutorial soon, but until then check out: http://www.webdesign.org/web/photoshop/web-layout/slicing.8536.html

The only problem with slicing a layout with Photoshop’s Slicing Tool is that it outputs an HTML file with tables, which are generally frowned upon in today’s design community. An easy way to slice it manually is to flatten the image and use the Marquee Tool (M) to cut out the images then save them separately.

Also, unfortunately, when this layout was designed, the blue box was intended to be a static box, thus we didn’t design it to expand. However, you can simply add a new box below it and allow that one to expand, just make sure it will tile when it expands so it doesn’t get choppy.

Hope this helps!
June 11 at 11:07 am Tirath(Quote)

Tirath said:

Awesome layout
Thanks so much for your kind effort for posting it
I learn a lot
Keep up good work
god bless you
June 11 at 3:28 pm Tak(Quote)

Tak said:

hey man, awsome tut… simple, clean and effective layout, nicely done.
but i was wondering if you know any good tuts for learning the coding, i mean its all good looking at others and trying to learn from that, but when it comes to trying to code your own its a whole other story lol.. well for me anyway

but yeah its a good tut, keep up the good work
June 11 at 3:51 pm Alan(Quote)

Alan said:

Thanks for the comments Tirath and Tak.

Tak, I haven’t come across any in-depth coding tutorials before. I started by editing whatever free templates I could find by process of trial and error.

However, since you asked, I’ll be on the lookout for some coding tutorials for you. Keep checking back here to see if we’ve posted any!
June 11 at 3:58 pm Tak(Quote)

Tak said:

Thnx, i appreciate it, im actually trying one now from the site of the link you posted earlier but i will keep checking back

thnx again!
June 12 at 5:41 am Noe(Quote)

Noe said:

I’d like to know,how to export the psd pile into a css style sheet
June 12 at 2:54 pm Alan(Quote)

Alan said:

Hi Noe, while I’m not familiar with any way to convert a psd into a css style sheet automatically, you should check out Site Grinder.

http://www.medialab.com/sitegrinder/

I’ve never used it before but it looks promising.
June 16 at 12:06 am Tom(Quote)

Tom said:

Where can i download the font [Delicious]? the one you used for the content caption
June 16 at 2:28 pm Alan(Quote)

Alan said:

Hey Tom, you can find that font listed in our 15+ Excellent Free Fonts post. If you need any more help, just ask!
November 26 at 2:29 pm AzureBright(Quote)

AzureBright said:

Thanks for keeping this simple. I am not a designer and I found it very useful and straight forward.
December 27 at 7:14 am lukematthew iveson(Quote)

lukematthew iveson said:

your website is amazing and very useful. i love the tuts on how to create a layout in photoshop…the only question i have is how do you go about coding it form there as it is a single image?

thanks luke

TutsArena