Feb 8th

Simplistic Black and White Portfolio Layout in Photoshop

Simplistic Black and White Portfolio Layout in Photoshop

In this tutorial you will learn how to create a beautiful and clean portfolio in black and white using Photoshop. If you have any questions about this tutorial be sure to ask in the comments. Also, remember with all the tutorials, the psd is available for download.

Final Result

Click on the image to view the full-scale final result.

Let’s get started

1. The first thing we need to do is create a new document with the dimensions of 1020×1400.

2. Using your Paint Bucket Tool, fill your background layer with #F6F6F6.

3. The first thing we need to do is create the background to our header. For this, we need to use our Pen Tool. With your Pen Tool, make a path similar to the following, and make sure to bring it back and connect it to your first point (you will need to go off the document for this).

4. Next, open up your Paths Palette and choose the “Load Path as Selection” icon at the bottom. This will make your path a selection.

We then want to choose Select>Inverse to make a selection similar to the following:

5. Create a new layer and fill your selection with #000000. This will serve as the background to your layer.

6. Insert the following blending options onto your newly created layer. To do this right click your layer in the Layers Palette and choose blending options from the drop down menu.

7. For the logo I used the font Creampuff, and then Helvetica for the tagline. We want to add a little gradient to our logo, so insert the following blending options onto your Creampuff font layer.

Optionally, you can use a soft edged white brush to add a little ‘glow’ behind your logo. Just brush once behind your logo, and then change your blend mode to Soft Light, and lower the opacity to about 18%.

8. Time to move onto our navigation. Using your Rectangle Marquee Tool, make a selection similar to the following and fill it with #FFFFFF.

9. We want to mask out everything beyond our header, so to do so CTRL+CLICK the thumbnail for your headers background layer in the layers palette to select it. Then move back to your newly created layer and choose the layer mask icon from the layer palette to create the mask we need. It will look something like this:

10. Insert the following blending options onto your white rectangles layer:

11. We want to add an icon to represent our link, so I used the pictoico icon set. Keep this set handy as we will be using it throughout this tutorial. And this place some text under it in a similar way. Repeat the steps for as many links as you need, and your header will look something like this:

12. Now we want to go ahead and create a little cloud that will show our latest tweets. Using your Elliptical Marquee Tool while holding shift, make a selection similar to the following and fill it with #FFFFFF (holding shift will add to your selection).

13. Now insert the following blending options onto your cloud layer:

14. Then all that is left for your twitter cloud is to add some text and an icon. The icon I used was from the Pictoico Icon Set we used in Step 11. I changed the color to #3333337. For our main text we want to use the color #141415, and for the lighter grey text we want to use #686A6C. Your cloud will look like this:

15. Next we want to add some Social Media Icons to the right side of our twitter cloud. The icons I chose to use are from the ThinkDesign Social Media Icon Set . Place your icons in a similar way to the following:

16. Using your Rectangle Marquee Tool, make a selection similar to the following and fill it with #3333337. Remember you can hold SHIFT to add to your selection.

17. The last step for our social icons is to add a title. I used the font Georgia for our text. We then want to create a little arrow that points to our icons. To do so we need to make a path with our Pen Tool. Using your Pen Tool make a path similar to the following:

18. After you have your path, use your text tool to write on your path and make a bunch of dashes (- – -) like the following:

19. All that is left is to make a little triangle using your Polygonal Lasso Tool at the end of your arrow, and you’ll have something that looks like this.

20. Time to move onto our Featured Box where your “Featured Projects” can scroll/slide across. We want to go ahead and use our Rectangle Marquee Tool to create a selection similar to the following and fill it with #000000.

21. Insert the following blending options onto your newly created layer:

22. Take a screenshot of your favorite design, and then place it inside your box. You wanna make it about 5px smaller than your box so it has a nice border around your thumbnail, similar to the following:

23. The final step for our featured area is to create arrows to go back and forth. The easiest way to make the arrow we need is to create a rectangle and then duplicate it and rotate them in a similar way to the following. Once you have them the way you like, we want to merge those two layers by selecting them both in the layers palette and then choosing Merge Layers.

24. Insert the following blending options onto your arrow layer:

25. Copy your arrow and choose Edit>Transform>Flip Horizontal to create an arrow for the other side and your document will look something like this by now:

26. One of the last things we need to do is create our content area. Using your Rectangle Marquee Tool again, make a rectangle similar to the following and fill it with #FFFFFF

27. Insert the following blending options onto its layer.

28. Now all that is left for your content area is to add some content. All the Icons used below are from the Pictoico Icon Set we downloaded in Step 11. To make the dividers under each title’s heading, refer to Step 16 to create the double lines (refer to final image).

29. The last thing we need to do is create our footer. To create the footer I just reused elements from our header. I copied our headers background layer (Command+J), and then chose EDIT>TRANSFORM>FLIP VERTICAL. I then flipped it horizontally by using the same method. The only thing that changes is that you need to go into your blending options and change thing light direction in your Inner Shadow from -90, to 90. Add your logo and some links on the right side of your footer and your final template will look something like the following:

Become expert in web designing using our 220-701 design resources. Download the 350-030 tutorials and 70-642 design guide for step by step learning of photoshop.

Related Articles

Written by Matthew Heidenreich

Matthew Heidenreich is a freelance designer from St. Louis, Missouri. He enjoys teaching others how to create interface and web design tutorials. Find his work on his site, DeviseFunction. You can follow him on Twitter @Spicypepper.

Share Your Thoughts18 Comments

  • Mathew Carpenter February 8th, 2010 at 12:15 am

    I just stumbled across this website, and was fascinated with this tutorial. You have to be careful when focusing on just using Black and White as it can come across as dirty and/or dull but you seem to have pulled it off. Well done, Matthew. I’ll be sure to take a look at your other tutorials.

    • Matthew Heidenreich February 8th, 2010 at 12:18 am

      Thanks for your kind words. I have always thought the same way when it comes to black and white designs, and wanted to show that it is possible for anyone to create a clean and beautiful design, while keeping it minimal without flashy colors.

  • Kyle February 8th, 2010 at 10:38 am

    Great stuff! I really like your tutorials, you explain things very well. Looking forward to some html/css conversions.

  • ardhiee February 8th, 2010 at 12:16 pm

    nice tutorial, think about to create tutorial “convert to HTML”

  • Matthew Heidenreich February 8th, 2010 at 7:02 pm

    We will be adding some conversion tutorials at some point in the future, but for now they are just going to be Photoshop tutorials. We will have them in the near future hopefully.

  • Maxi February 11th, 2010 at 3:33 pm

    Beautiful layout is perfect for a designer. we expect to see html / css when you have time to do. good luck

  • Kawsar Ali February 12th, 2010 at 12:15 am

    Really nice. I love the outcome. It is nice and simple .

  • richard carpenter February 18th, 2010 at 12:19 pm

    hello mathew, i just stumbled across your website, didnt know you had another one going. i used to check regularly on PSDVIBE.

    much prefer your new website.

    good job on the tutorial btw.

    • Matthew Heidenreich February 18th, 2010 at 12:29 pm

      Thanks Richard, appreciate it – love visiting hv-designs.co.uk btw. Been going there since around 06 I believe. I decided to let PSDVIBE go, and plan on keeping devisefunction though for a long time and wanted to do more than just tutorials.

  • Nauman Akhtar March 17th, 2010 at 11:54 am

    Looks good, but colors are so dull

    • Matthew Heidenreich March 17th, 2010 at 12:01 pm

      It isn’t using color ;-) The idea behind a black and white theme is to focus your attention more to the content than the layout it self. Notice how your attention is drawn straight into the “Featured Content Slider”. But I appreciate the feedback!

  • Jonathan N. Hindi April 2nd, 2010 at 2:41 pm

    Hey Nice Tutorial and nice design keep it on but can you make a Css Tutorial From Psd To HTML And CSS For All Your Designs In PSD ?!?

    • Matthew Heidenreich April 2nd, 2010 at 4:07 pm

      Thank you for your feedback. I am working hard on a new layout for devisefunction and then we will hopefully be rolling out some coding tutorials soon after

  • krzysztof May 16th, 2010 at 12:55 pm

    great tutorial Matthew, thank you for sharing it!! perfect for photography portfolio website when you want your photos stand out from the content. I’ve learnt a lot!! keep it great work. I’d love to see it coded in xhtml/css someday. thanks!!

    • Matthew Heidenreich May 16th, 2010 at 1:39 pm

      We are currently starting to roll out xhtml and css versions of layouts, so stay tuned! This one is towards the top of the list.

  • Marthese February 17th, 2011 at 5:38 am

    Are there any conditions on how to use this tutorial?? can i use the templet?

  • independent Kiev escorts August 23rd, 2011 at 2:27 am

    We were very encouraged to find this website. I wanted to thank you just for this special look at. I without a doubt savored every chunk of it and i also have you added to check out fresh stuff you put up.

  • Danish usman September 22nd, 2011 at 12:39 pm

    Nice dude.i like your tutorial Matthew, thank you for sharing it.you explain things very well.thnxxxxxxxx

Leave Your Response