large_thumb

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 video demos provide step by step instruction on how to create web images using different design techniques.

 

 

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>