beautiful_clean_blackwhite

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 design guide for step by step learning of photoshop.

 

 

This was written by Matthew Heidenreich

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>