45 Step-by-Step Tutorials on Web Design with Photoshop
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
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Danny Outlaw
Danny Outlaw is best known for his work at Outlaw Design Blog. Aside from blogging, he also works full time as a Wordpress designer. Danny has freelanced from all over the world and is working on a book and website in which he will share his experience about Freelancing Abroad. Danny also has an unhealthy obsession with toys, LOST, and Sharpie markers.
Join our newsletter!
Freelance Jobs
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Psdtuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Some cool stuff. thx.
Great post. Thanks!
nice…
Good!
hmm great
COOOOOLLLLL! Loved someone of them! Besides some navigations are very interesting! Never saw that Wolkswagen inspired navigation before.
I hate psdtuts tutorial link on a psdtuts post…..
Other than nice list….
“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.. ?
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.
Nice round up
Awesome list!! Thanks 4 share!
any one from psdtuts can help me? add me on YM please jaycee_ph2
Nice list, no doubt that will be useful for many.
I’ve already seen 21. here @psdtuts, just gotta love that :D
Great list! Thanks. I was searching Tutorials like these
nice list indeed! thanks
Awesome Post thank you!
Great, always good stuff.
thanks
#24 and #39 are awful
Agreed.
nice collection, thanks pasdtuts
nice…
An excellent collection. Photoshop for web design rocks! Thx
awesome!
Thx for featuring tutorials from hv-designs.co.uk
Awesome list, thanks.
Amazing collection! Thank you.
Nice!
Great list of Photoshop tutorials! Bookmarked it for future reference.
Great stuff here, guys. Many Thanks for sharing all your hard work! Check out my health and consiousness blog at goMandala.com
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.
Nice tutorials, and thanks for listing 6 of mine :)
Sweeeeeeet.
http://www.casabasa.com
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/
“Site is listed as suspicious – visiting this web site may harm your computer.”
For #11. Google has it flagged.
jUST dropping here to say its a great stuff….. Love it
This is exactly what i needed, thanks for contributing
Very cool post…tnxs.
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!
I love u guys…
As soon as i get my visa i will sign up…
keep up the good work.
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?
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.
Great….
I have posted similar article on my blog also….
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…
Some websites flagged. Admins, check this article again please.
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
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.
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
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?
u gotta learn html/css
and buy dreamweaver.
this is the best thing that I need , thanks a lot
Thanks for featuring PsdVibe on that great list!
Nice list. Thanks for share
thank you very much :)
nice list. thanks for that!
Great roundup Danny!
Featured here: http://www.presidiacreative.com/web-picks-23/