This will be your final result
1. The first thing we want to do is create a new document with the dimensions of 1024×768.
2. Next we want to go ahead and add a Wood Texture Background to our document. Go ahead and open it up in photoshop and move it onto your document and you’ll have something that looks like this
3. Now lets go ahead and put our TV which will house our portfolio content. You can either find a TV on your own, or you can use this one for this tutorial: HP TV DOWNLOAD. Once you have it move it onto your document and make sure its centered.
4. We want a little ‘glow’ behind our TV to give it a backlit effect, so go ahead and add the following blending options to your layer by right click its layer and choosing blending options
5. Using your Rectangle Marquee Tool to make a selection similar to the following and fill it with #09B5F5. Make sure this layer is under your TV Layer.

6. Next go ahead and duplicate your blue bars layer and choose Filter>Blur>GAUSSIAN BLUR and insert the following

7. You should have something that looks similar to this once your done with that

8. Now use your Marquee Tool with a feather of 10px to make a selection similar to the following and fill it with #09B5F5

9. Change the Blend Mode to Overlay and your document should look something like this
10. Its now time to work on our content area. Lets go ahead and start with a navigation bar. Using your Rectangle Marquee Tool make a selection similar to the following and fill it with #FFFFFF
11. Now on this layer insert the following blending options
12. Then go ahead and add some text that will serve as links to the right side like the following

13. Using your Rectangle Marquee tool make a selection similar to the following behind one of your links and fill it with #FFFFFF

14. Insert the following blending options onto that layer
15. We want to go ahead and make a shine to our active link, so go ahead and make a selection similar to the following and fill it with #FFFFFF

16. Lower the Opacity to about 8%, and change the blend mode to Soft Light and insert the following blending options
17. Your navigational menu will now look something like this

18. I did not want anything to fancy for a logo, so I went ahead and made a simple text logo with Helvetica Neu and made the first part #FFFFFF and the second part #0FE80F
19. For our content we will be using thumbnails similar to the following with a #CCCCCC 1px stroke. Lay them out something like this
20. The final step is to add a next and back button to the mix. Using your Rectangle Marquee or Rectangle tool make a rectangle similar to the following

21. Insert the following blending options onto your rectangles layer
22. Next use your Marquee Tool to make a circle similar to the following and fill it with #FFFFFF

23. Now insert the following blending options onto your circles layer
24. Use your Polygonal Lasso Tool to make a triangle and fill it with #172229 and you’ll have something that looks like this

25. Now go ahead and repeat those steps but for the right side and you’ll have something that looks like this. Also chose to lower the opacity to 50% on the left side to show that you can’t go back. This is the final result:
Remember if you have any questions or comments about this tutorial to leave your responses in the comments below and we will get back to you very quickly.

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





























36 Responses
Adrian
Funky funky. Cool stuff matt!
Matthew Heidenreich
haha, thanks
Eric Shafer
Now this I really like, probably your best tutorial so far Matt.
psaddict
Added to http://www.psaddict.com
Anto
Thats nice =) Good job man.
Fernando
Nice tutorial. How do you decide what color to use for the second color for you gradients? Thanks.
Matthew Heidenreich
@Fernando I’m not sure what you mean. If your talking about the blue, its just all about preference. In web design blue and green seem to be the most popular colors, so that is what I choose as far as gradients.
gilad
wow!
great tutorial/
keep make more tutorials!
sajjad
hi, why is only the web design bar got a blue colour and what program would you use to get the web page working, like getting the buttons to work
Matthew Heidenreich
@Sajjad
That is just suppose to represent an active part of the site. So you would be viewing the Web Design section in this case. You would have to use Adobe Dreamweaver, or some other coding program to get it running on a site.
sajjad
hi matthew can you do a tutorial on how to do the coding to get the site running on dreamweaver this would be really helpful. i would really appretiate it.
thanks
Matthew Heidenreich
I plan on having tutorials up in the future for coding up all of the layout tutorials I have created, but I am unsure as to when that will happen. When I get the funds I will just be paying someone to write the coding tutorials for the site. Just stick around and eventually you’ll see it up
sajjad
ok thanks sound good and excellent tutorial was helpfull
sadat
really liked it
MasterMP
next time describe all what you do.
my friend tried to make this and some thing where missing. (layer order)
But I think it is a very nice design
so keep up the good work and try to make a video tutorial next time.
David
Interesting idea for a website design. I like the light at the bottom and how it glows.
Brochures
Neat stuff you’ve got here. Really interesting design, and clean, uncluttered layout. Thanks for sharing this tutorial. Keep it up!
SEO RIDER
Nice design. But I don’t know code for this design.
CgBaran Tuts
Love that design, nice job
Mike
Hey, really like how simple but effective this tutorial is. The effect with the tv is small and subtle. Great job. -chicago web design
moha
how to code this awesome design!!!!
Matthew Heidenreich
The next PSD to XHTML tutorial will be on this tutorial
nice beg
that’s very good
Che ~ chemc
Great tutorial… HUGE thanks
Matthew Heidenreich
If you were interested in learning how to code this layout, we now have a tutorial up for it!
http://psdvibe.com/2009/04/20/coding-design-lab-tv-styled-layout/
shadolen White
this is a hot design. I design my flash player to look like a Tv with a satellite box attach to it. It gave off the presents of my designs looking like they were of a menu guides.
Keep up the great work.
Vuongot
Awesome!
I love this tutorial. Thank you for your good job!
Carl - Web Courses Bangkok
Yup, I really like this and I have a monitor that looks just like it. Like the blue colour at the bottom.
C
photo retouching
A really great looking result. Thanks for sharing.
photo retouching
A really professional looking result.Great tutorial!
Green
wow nice…! thanks…
china zyh
Very much, thank you!
I’M Chinese girl~
kasmi
WOOOOOOOOOW….
Great tutorial man , I have followed step by step and I’ve done it like it .
thanks alot…
orange
It’s good,and i like it.
Marcell
Very good tutorial! Love the final layout
philipphuc
Very thanks. Nice tutorial!