While many web designers create mockups in Adobe Fireworks and Dreamweaver, no design program gives you quite so much control as Adobe Photoshop. The lessons collected here will show you how to create gorgeous and functional complete websites, blogs, layouts, nav menus and headers in Photoshop.
1. Design Your Own Personal Portfolio Page In Photoshop
2. Design a High End Webdesign From Scratch
3. Design a cool Photography Portfolio
4. Unique Desktop Layout
5. Design the Perfect Website in Adobe Photoshop
6. Konvicted Art
7. Vibrant Modern Blog Design in Photoshop
8. Clean Business Layout Tutorial
9. Unique Grungy Website Layout
10. Photoshop Paper Texture from Scratch then Create a Grungy Web Design with it!
11. Clean Blue Navigation Box
12. Dark Navigation Box
13. Design Watercolor Effect Menu
14. Curled Corner
15. CSS Menu With Icons
16. Nature Theme Header
17. Stunning Vista inspired menu
18. Design a Cartoon Grunge Web site Layout
19. How to Create a Grunge Web Design in Photoshop
20. Green Navigation
21. Create a Magic Night Themed Web Design from Scratch in Photoshop
22. Modern Portfolio Layout
23. High-Detailed Plastic Navigation Bar
24. Black Website Design
25. Creating A Professional Magazine Web Layout
26. Wii Web Header
27. Modern Web 2.0 Web Layout
28. Dark Style Web Template
29. Make an Elegant Blog Layout in Photoshop
30. How to Create a Sleek and Textured Web Layout in Photoshop
31. How to Create a “Worn Paper” Web Layout Using Photoshop
32. Metallic Header Design
33. Content Box With Orange Banner Heading
34. Hero Header Part 1
35. Hero Header Part 2
36. Blue on Black Navigation Bar
37. Clean White Navigation Bar
38. Design a Unique Bookmark Box
39. Volkswagen Inspired Navigation
40. The Ultimate Grunge Design Tutorial
41. Real Estate Web Design
42. Designing a Clean Photo Portfolio Site In Photoshop
43. Simple Design Studio Layout Design
44. Design a Hand Drawn style Website in Photoshop
45. Stylish Design Agency Layout Tutorial
Related Posts
Keep reading with more great tutorials and articles!
Enjoy this Post?
We'd love your vote!
Plus Members
Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.
User Comments
( ADD YOURS )Sebastian May 28th
Some cool stuff. thx.
( )TomH May 28th
Great post. Thanks!
( )imsraaia May 28th
nice…
( )jrosadocruz May 28th
Good!
( )snnaqvi May 28th
hmm great
( )Diego SA May 28th
COOOOOLLLLL! Loved someone of them! Besides some navigations are very interesting! Never saw that Wolkswagen inspired navigation before.
( )lawrence77 May 28th
I hate psdtuts tutorial link on a psdtuts post…..
Other than nice list….
( )Nine2Five May 28th
“While many web designers create mockups in Adobe Fireworks and Dreamweaver, no design program gives you quite so much control as Adobe Photoshop.”
Since Fireworks is mentioned, so where are the Fireworks tutorials
of web designing? Net is overloaded of PS tutorials.
While designing web with Photoshop, you only can use restricted amount of PS features. So im not quite sure how that giving more control on the web design.. ?
( )smiley June 8th
try doing a gradient in illustrator and see how it comes out, u get these lines where the colour cant mix..
then try it in ps and it turns out seemless.
thats one reason why i use photoshop and illustrator to make sites.
and i only use fireworks to make advanced rollovers and to cut up my site.
( )Josh May 28th
Nice round up
( )Dario Gutierrez May 28th
Awesome list!! Thanks 4 share!
( )jaycee May 28th
any one from psdtuts can help me? add me on YM please jaycee_ph2
( )Teppo Saarikoski May 28th
Nice list, no doubt that will be useful for many.
I’ve already seen 21. here @psdtuts, just gotta love that
( )marbio May 28th
Great list! Thanks. I was searching Tutorials like these
( )iseethings May 28th
nice list indeed! thanks
( )Alex Mcvitie May 28th
Awesome Post thank you!
( )NICEOUTPUT May 28th
Great, always good stuff.
thanks
( )Master May 28th
#24 and #39 are awful
( )Mikah Sargent June 17th
Agreed.
( )sriganesh May 28th
nice collection, thanks pasdtuts
( )mhamed May 28th
nice…
( )Symon May 28th
An excellent collection. Photoshop for web design rocks! Thx
( )squarehouse May 28th
awesome!
( )richard carpenter May 28th
Thx for featuring tutorials from hv-designs.co.uk
( )T-Law May 28th
Awesome list, thanks.
( )dannyrobes May 28th
Amazing collection! Thank you.
( )Mikkel May 28th
Nice!
( )Tom Duong May 28th
Great list of Photoshop tutorials! Bookmarked it for future reference.
( )Jake Torossian May 28th
Great stuff here, guys. Many Thanks for sharing all your hard work! Check out my health and consiousness blog at goMandala.com
( )Alex May 28th
Has anyone else noticed that the two tutorials for the navigation bars from PSFreak are marked as attack sites in Firefox?
I’d be careful. Surprised Tuts+ actually posted them on here.
( )James May 28th
Nice tutorials, and thanks for listing 6 of mine
( )Franky May 28th
Sweeeeeeet.
( )http://www.casabasa.com
Sharon October 23rd
PSD tuts is a great site and I have it listed in my resources. Thanks for the reminder Franky! Should also have included http://frankyaguilar.com/
( )Michele May 28th
“Site is listed as suspicious – visiting this web site may harm your computer.”
For #11. Google has it flagged.
( )xphunt3r May 29th
jUST dropping here to say its a great stuff….. Love it
( )Maik May 29th
This is exactly what i needed, thanks for contributing
( )Lorenzo Bondioni (Css Bamboo) May 29th
Very cool post…tnxs.
( )Farid Hadi May 29th
Seems like you’ve listed some useful tuts here. I’ll be checking some of them out as soon as I find some time.
( )Thanks for collecting these!
Nelson May 29th
I love u guys…
As soon as i get my visa i will sign up…
keep up the good work.
( )Darlesson May 29th
I understand the passion for Photoshop. But it’s sad when a web designer wants to decide what is the only acceptable way to do something related to design. Where are the creativity and the personalization of something if it’s a copy?
I recommend the author of this article to research and test Adobe Fireworks. This is the ONLY Adobe design software created specifically for web design. Web design is its specialty. So why critics against it even more when is not known by who criticize?
( )Sean Hodge May 29th
I really love Fireworks, especially for wireframing and planning a website. It’s multi-page functionality is great. You can produce web 2.0 style sites quickly.
Photoshop really excels though when you want to add in a layer of illustrative effects like: photo manipulation, deteriorated grunge style graphics, and more. Photoshop can take a well-planned design and add a layer of illustrative depth and detail.
Fireworks is great for building websites quickly and for planning. I used Fireworks the most for client projects when I was freelancing because it’s so quick.
Ultimately software doesn’t think, the designer does. Whatever software gives you the best results is great. My opinion though is that Photoshop is has some awesome power for adding polish to your web designs and making them stand out with depth of design and uniqueness, of course the client project has to account in the budget for the added time it takes to create a great, polished design in Photoshop. Thx.
( )Nikhil May 29th
Great….
I have posted similar article on my blog also….
( )Kim May 29th
What good is it to learn how to make a picture of a webpage in photoshop without the code that goes with it? ie. #1?
( )The end of that article says “the portfolio is done!”
Well, it’s unusable…
Giuliano May 29th
Some websites flagged. Admins, check this article again please.
( )Rano May 29th
These are some old tutorials. Still very nice.
Another 40 tutorials you can find on this link:
http://www.100tutorials.com/photoshop/best-photoshop-tutorials-for-web-layouts
Included in this set are also some of our tutorials
( )e11world May 29th
I’ve seen better articles than some of the ones posted here. I wish I had bookmarked them (remember all of them). nice list though.
( )Montana Flynn May 29th
You could spend a lifetime learning new techniques in photoshop and web design. Thanks for the great roundup, my delicious bookmarks have a lot of great graphic design resources and you can find them on my blog or my delicious ID montanaflynn
( )Kevin Fourie May 30th
Nice designs…
( )but once ive designed them, how do i get them up and running??? thats what i just done understand… any one that could explain it?
smiley June 8th
u gotta learn html/css
and buy dreamweaver.
( )Waseem Senjer May 30th
this is the best thing that I need , thanks a lot
( )Jean-Baptiste Jung May 31st
Thanks for featuring PsdVibe on that great list!
( )Şarkı Dinle May 31st
Nice list. Thanks for share
( )ims May 31st
thank you very much
( )Tobias Fendt June 1st
nice list. thanks for that!
( )Eric Shafer June 1st
Great roundup Danny!
Featured here: http://www.presidiacreative.com/web-picks-23/
( )Joan Sanchez June 1st
This is a great post.
( )Leoslab June 1st
great list! Thank you..
( )Kre8iveminds June 2nd
Really cool list. Thanks a lot.
( )Jamie Allsop June 2nd
These are some really nice designs. To create mock ups I have always used Photoshop and then use Fireworks to slice it up and create image rollovers and then I go into Dreamweaver.
( )Meshach June 2nd
Great stuff, this will help. Thanks.
( )Web design cheltenham June 3rd
Great resources for any budding or seasoned designers, cheers
( )Alan June 4th
Inspiring list, thanks so much for sharing.
( )Jince Thomas June 5th
I was searching for good navigtions and menu bar… here i got , love it…..
thanks a lot.
( )g June 5th
Thanks a lot! Thanks for sharing!
( )Navdeep Singh June 5th
WOW!!!!!!!
( )paul June 7th
that’ll keep me busy for the next month or two
thanks
( )Hemanth Kumar June 7th
Thanks for the cool Design tutorials….I need some of these techniques in designing a website for Hotel….
( )Justin June 9th
these template monster sites are so lifeless and boring. they’re all the same really. just a template with a different skin.
( )!DuRarDz June 10th
great works .
( )very nice thanks ……..
Michel S. Alonso June 11th
Thanks!! Great Post!!
( )sandeep June 18th
nice list thanks!
( )Mário June 19th
very cool! I like it!
( )Alz June 20th
These all look AMAZING! I cannot wait till I join the plus and get more of these
Thanks for your help over the years!
( )Amy June 25th
VERY cool!!! Thank you sooo much!
( )sugeng sunaryo July 4th
Hmmm… It`s very Cool..
( )Thank you for your help..
Mubarak Ali July 18th
Subhaan allah!!
( )Superb collection
i’ve gone mad of it
really superb
Jaspal Singh July 31st
Great collection of Photoshop resources.
( )Thanks for sharing.
lhoylhoy August 6th
these works inspires me to focus on web design! more power!
( )j000 August 8th
I’m gonna try some for sure. Some cool tutorials here.
( )Mohan August 20th
Awesome, Awesome & Awesome Effort !!
Man Nice Collections
( )NAV!GAT0R September 3rd
all of thise are very good and so beauty! =)
( )thanx a lot!
oyunlar September 30th
great
( )thank you verymuc
Coldfire421 October 15th
Great work, got more idea in web design cool thnx
( )webtechnepal October 26th
Great Collections of web design tutorials. Thanks
( )Tamaboy November 17th
Wow… very Awesome web design colections tutorials thx very much
( )