Jan 11th

Simple Business Style Portfolio Layout in Photoshop

Simple Business Style Portfolio Layout in Photoshop

In this tutorial you will learn how to make a minimal and simple web layout for a business, or portfolio website. 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.

Lets get started…

1. First thing we want to do is create a new document with the dimensions of 1024×1035.

2. Using your Paint Bucket Tool fill your background layer with #1E1E1E.

3. Now create a new layer and fill it with #000000. With this new layer selected, go to “Filter > Noise > Add Noise” and insert the following options:

4. Lower your Noise layers opacity to about 11% to give it a nice light texture.

5. For our logo, we want to use a simple font. I chose to use Myriad Pro set to semibold italic with the following blending options on its layer

6. It will look something like this

7. We want to add a little glow behind our text logo, so using your Elliptical Marquee Tool with the feather set to about 20px, make a selection similar to the following and fill it with #FFFFFF

8. Change your layers blend mode to Screen and then lower its opacity to about 47%. It will look something like the following

9. Next is our navigation. We want to lay out our links in a similar way to the following. All the non-active links colors are #FFFFFF, and the home link is #171717

10. For our active link we want to add a ribbon effect behind our “home” text. Using your Rectangle Marquee Tool make a rectangle similar to the following and fill it with #FFFFFF

11. Next use your Polygonal Lasso Tool to make a selection similar to the following

12. Choose Select>Inverse to inverse your selection and we then want to add a layer mask with this selection. With your selection, choose the Add Layer Mask icon from your Layers pallet:

13. Now we want to add some color to our ribbon, so insert the following blending options onto your layer

14. At this point your header should look something like this

15. Using your Rounded Rectangle Tool with a radius set to 5px, make a selection similar to the following to create the backdrop for our featured box:

16. On this layer insert the following blending options

17. We then want to add some texture to our featured box. CTRL+CLICK your rounded layers thumbnail to select it and then fill a new layer with #434343. Next go to “Filter>Noise>Add Noise” and insert the following (NOTE: Keep your select active):

18. Now we want to add a motion blur by going to “Filter>Blur>Motion Blur” and insert the following

19. You should have something that looks like this by this point:

20. The last thing to do is change your layers blend mode to Overlay. I chose to duplicate this layer to give it a deeper look, and you’ll have something that looks like this

21. Next thing to do is add some text describing our featured item. I added some text in a similar fashion below:

22. Insert the following blending options to achieve the drop shadow on your text layers

23. Using your Rounded Rectangle Tool yet again, we want to make a Rounded Rectangle with a radius of 5px to make a rectangle similar to the following behind our “Learn More” text layer.

24. Lower this layers opacity to 30%.

25. The last step for the featured box is to add a box for our thumbnail. Using your Rectangle Marquee Tool make a selection similar to the following and fill it with #FFFFFF

26. Now insert the following blending options onto its layer

27. Add a thumbnail, and that’s it for your featured box! You’ll have something that looks similar to this

28. With your Rounded Rectangle Tool still set to 5px, go ahead and create a rectangle similar to the following for our “Get a Quote” button.

29. Insert the following blending options onto its layer

30. Go ahead and create another Rounded Rectangle like the one you just made that will serve as an “About us” button.

31. Insert the following onto it’s layer:

32. I added a light little shadow under the icons using my Elliptical Marquee Tool with a feather of about 20px and resized it and lowered the opacity to about 24% with a Soft Light blend mode. You will have something that looks like this:

33. Almost finished! Moving onto our content area, we want to use our Rounded Rectangle Tool with a radius of 5px to make a #EEEFEB rectangle similar to the following

34. Using your Rectangle Marquee Tool make a rectangle similar to the following and fill it with #FFFFFF

35. Add the following blending options to this layer

36. All that is left now is to add a footer with our Rounded Rectangle Tool again with your foreground set to #CACEB7. Add some content and your final product should look something like the following:

Learn how to create images with 640-863 tutorials. Our PMI-001 study guide and 640-553 video demos provide step by step instruction on how to create web images using different design techniques.

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 Thoughts16 Comments

  • Saad January 11th, 2010 at 12:48 am

    Awesome Tutorial Mathew!

  • Avangelist January 12th, 2010 at 7:28 am

    Really nice concept. One thing I would strong advise against though is placing the page text in the image block at the top (you would have to do this to achieve the drop shadow effect) this would make the text unsearchable and with this kind of site, that is what you are looking at primarily.

  • T.V. January 12th, 2010 at 3:11 pm

    Testimonials column is just too big for golden ratio. Would look better if it was smaller though!

  • Tirath January 14th, 2010 at 2:00 am

    Awesome tutorial with nice web layout
    Thanks so much for posting & sharing it
    Keep up good work
    we expect more tuts from you
    God bless you :-)

  • Ryan January 16th, 2010 at 11:04 am

    Nice tutorial, will be helpful to many.

  • Webjohn01 June 30th, 2010 at 7:27 am

    Hello Matt!

    I really enjoy reading and doing it. it helps me a lot how to use photoshop further in creating my own web layout.

    Keep up the good work.

    More thanks!

  • Free PSD Tutorials February 20th, 2011 at 3:18 am

    nice tut ty :)

    • aser March 24th, 2011 at 5:25 pm

      welington

  • Dan September 15th, 2011 at 6:47 pm

    Your tutorials are just awesome! I envy you that you know so much :D . Excellent work!

  • Amirale January 26th, 2012 at 5:17 am

    Awesome,keep doing it better,its just little big,but amazing

  • Sid February 1st, 2012 at 11:55 am

    Really nice tutorial! It really helped me, keep up the good work! Hope to see some more exciting tutorials from you!

  • Damien February 16th, 2012 at 11:55 am

    I like the tutorial, eat some pie while i do it.

  • Devlin and Luke Pie February 17th, 2012 at 9:33 am

    Where’s the BEEF?????

  • Sidhart bannana February 17th, 2012 at 9:37 am

    Real life man,, color by number

  • Tromappeasp June 12th, 2013 at 7:25 am

    International Fur Association (IFTF) トート プラダ
    data show that China, Japan and South Korea, fur clothing and accessories sales hermes.gamagaeru.jp
    increased more than threefold over the past 10 years, in the 12 months ended April 2012 increased by 5% to $ 5.6 billion. During this period, the global fur sales rose by 3.3% to $ 15.6 billion. “Financial Times” miu miu 財布
    pointed out that despite the stagnant economic growth, プラダ メンズ
    but the luxury goods sales performance since the financial crisis relatively well, such as Russia and China economies upstart consumer demand played an important role. コーチ メンズ バッグ
    International Fur Association, said that in addition to winter, シャネル アクセサリー
    fashion designers are increasingly turning to the use of fur in the spring and summer clothing design, making fur sales increase. miu miu 財布
    The CEO Mark Otten (MarkOaten,), the International Fur Association, said, despite the weak global economy, but he believes コーチ メンズ バッグ
    that the fur sales this year will continue to rise.

Leave Your Response