Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Design Studio Layout #2

Design Studio Layout #2


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

Design Studio Layout #2 image 1

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.

Design Studio Layout #2 image 2

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

Design Studio Layout #2 image 3

Design Studio Layout #2 image 4

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

Design Studio Layout #2 image 5

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.

Design Studio Layout #2 image 6

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

Design Studio Layout #2 image 7

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.

Design Studio Layout #2 image 8

9. On the "SQUAREDSTUDIOS" layer, insert the following blending options

Design Studio Layout #2 image 9

Design Studio Layout #2 image 10

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

Design Studio Layout #2 image 11

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

Design Studio Layout #2 image 12

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

Design Studio Layout #2 image 13

Design Studio Layout #2 image 14

Design Studio Layout #2 image 15

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.

Design Studio Layout #2 image 16

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

Design Studio Layout #2 image 17

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.

Design Studio Layout #2 image 18

16. Now insert the following blending options onto its layer

Design Studio Layout #2 image 19

Design Studio Layout #2 image 20

Design Studio Layout #2 image 21

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

Design Studio Layout #2 image 22

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

Design Studio Layout #2 image 23

19. Insert the following blending options onto its layer

Design Studio Layout #2 image 24

Design Studio Layout #2 image 25

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

Design Studio Layout #2 image 26

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

Design Studio Layout #2 image 27

22. Now insert the following blending options onto its layer

Design Studio Layout #2 image 28

Design Studio Layout #2 image 29

Design Studio Layout #2 image 30

Design Studio Layout #2 image 31

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

Design Studio Layout #2 image 32

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

Design Studio Layout #2 image 33

25. Now insert the following blending options

Design Studio Layout #2 image 34

Design Studio Layout #2 image 35

Design Studio Layout #2 image 36

Design Studio Layout #2 image 37

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

Design Studio Layout #2 image 38

27. Insert the following blending options onto your text layer

Design Studio Layout #2 image 39

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

Design Studio Layout #2 image 40

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

Design Studio Layout #2 image 41

30. Now insert the following blending options onto its layer

Design Studio Layout #2 image 42

Design Studio Layout #2 image 43

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

Design Studio Layout #2 image 44

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

Design Studio Layout #2 image 45

33. Now insert the following blending options onto its layer

Design Studio Layout #2 image 46

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.

Design Studio Layout #2 image 47

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

Design Studio Layout #2 image 48

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

Design Studio Layout #2 image 49

37. Insert the following blending options next

Design Studio Layout #2 image 50

Design Studio Layout #2 image 51

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

Design Studio Layout #2 Tutorial: Final Result



Author's URL: PSDVIBE
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Add comments to "Design Studio Layout #2"

Only registered users can write comment

Reader's comments