Design Studio Layout #2

In this tutorial you will learn how to make a clean layout for your design company. 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.

Author:

Matthew Heidenreich

Category:

Photoshop

This will be your final result

1. The first thing we want to do is create a new document with the dimensions of 1024×776.

2. Using your Paint Bucket Tool from your Tools Pallet go ahead and fill your background layer with #F1F8F9.

3. I like to start from the top and move my way down, so lets start on our header. Using your Rectangle Marquee Tool, make a selection similar to the following and fill it with #000000.

4. Next we need to add some blending options to this layer, so right click its layer and choose Blending Options from the drop down menu and insert the following


5. Now I wanted to add some halftones to our header to give it a bit more detail. I have provided you with the halftones and they can be found in the source files. Once you put it on your header, change its blend mode to Soft Light, and lower the opacity to 21% and it will look something like this

6. We now want to add a little ‘glow’ that will be behind our logo. Using your Elliptical Marquee Tool, make a selection similar to the following and make sure your feather is set to 18px and fill it with #FFFFFF.

7. Change the blend mode of your glow to Overlay, and then lower its opacity to 50% and it will look something like the following

8. For the logo I used the font Myriad Pro and laid my text out like the following. Make sure your tag line, and business name are on their own layers. On the “Squared” I have it set to “regular”, and the “Studio” is set to Bold.

9. On the “SQUAREDSTUDIOS” layer, insert the following blending options


10. I added a cheesy square to go along with the name, and this is what I came up with

11. Now it’s time for our navigation. Using your Rectangle Marquee Tool, make a selection similar to the following and fill it with #FFFFFF

12. Insert the following blending options on the layer you just created



13. Now we need to make a little 1px high highlight, and a 1px high shadow to give it some depth. The top color is #2C9CD3, and the bottom is #FFFFFF.

14. When you zoom out it will look something like this

15. Links are all that we need now. We want to go ahead and get our active link out of the way, and how it will be shown. Using your Rectangle Marquee Tool, make a selection similar to the following and fill it with #B7B7B7.

16. Now insert the following blending options onto its layer



17. For my text I used Helvetica with the color #525252 and after adding some links your header should look something like this

18. Next we are going to make our ‘featured’ area, where we will be displaying our latest work. Using your Rectangle Marquee Tool make a selection similar to the following and fill it with #000000

19. Insert the following blending options onto its layer


20. We want to have a nice 1px highlight at the bottom, so make a 1px high selection going across the bottom of the box you just created and fill it with #FFFFFF. Lower the opacity of its layer to 35%, and it will look something like this

21. Using your Rectangle Marquee Tool, make a selection similar to the following and fill it with #FFFFFF

22. Now insert the following blending options onto its layer




23. It will look something like this after you add a thumbnail preview, and some text.

24. The last thing we need to do is add some buttons so users will be able to selection “previous, next, etc”. Using your Rounded Rectangle Tool, make a Rectangle similar to the following

25. Now insert the following blending options




26. Using your Text Tool, now add some text similar to the following with the color #323232.

27. Insert the following blending options onto your text layer

28. All you need to do is do that again for a “view entire portfolio” button, and your layout will look something like this by now

29. Time to move onto our content area. The first box we are making is a place for you to put a quote to get the attention of potential clients. Using your Rectangle Marquee Tool, make a selection similar to the following and fill it with #FFFFFF

30. Now insert the following blending options onto its layer


31. For the “quotes” I used the color #B7B7B7, for the text I used #525252, and for the blue text I used #2590CE. I placed it in the following manor

32. The next box will be for putting a short description about yourself, or company. Using your Rectangle Marquee Tool, make a selection similar to the following and fill it with #FFFFFF

33. Now insert the following blending options onto its layer

34. For the title I used the font Myriad Pro with the color #2590CE, and for the dots and the description I used #525252 with the font Helvetica. The icons are from a free icons pack that you can download here.

35. I then did the same thing for a “services” box.

36. The last step is adding a footer. Using your Rectangle Marquee Tool, make a selection similar to the following and fill it with #B7B7B7

37. Insert the following blending options next


38. All that is left is to add some text and your done! This is what your final result should look like


Get a commercial/public use licence for this PSD (More info)

Show Some Love
Thank you for your support

20 Responses

Leave a Comment

Name (required)

Mail (required)

Website

Message

 

Sponsors