25 Photoshop Tutorials for Web Designers
Adobe Photoshop is the tool of choice for most web designers. From creating a website template to objects and components such as content boxes and buttons, Photoshop doesn’t fail to deliver.
In this collection, you’ll find 25 excellent Photoshop tutorials geared towards web designers. You’ll find a variety of tutorials that include creating full web page templates, navigation menus, headers, and content boxes.
Templates
Photoshop Paper Texture from Scratch
How to Create a Grunge Web Design
Create a Sleek, High-End Web Design from Scratch
Design an Awesome Band Website Template
Designing a CSS based template (Part II, Part III)
Create a Dark Themed Web Design from Scratch
Navigation and Search
Design Watercolor Effect Menu
Volkswagen Inspired Navigation
Glossy-Style Carbon Fibre Navigation Buttons
CSS Menu With Icons
Content Box with Orange Banner Heading
Modern Web Search Bar
Header
Professional Dark Header
Pro Header With Picture and Navigation
Hero Header Part I
Header Backgrounds
Design a Unique Header
Design Studio Header
Professional Header Design
Content Boxes
Create a Latest Tweets Box
Light Tabbed Content Box
Create a Dark Content Box with Glowing Navigation
Greenish & fresh content box design
Designing a Unique Bookmark Box
Creating a Grungy Banner
Missed a favorite of yours?
If you know of a good Photoshop tutorial for web designers – why don’t you share it with all of us in the comments.
62 Comments
Marcus Neto
December 18th, 2008
Do people really prefer photoshop for designing websites over fireworks? I really need to work photoshop back into my workflow then cause I have been getting stuck in fireworks for over a year now…
Matt
December 18th, 2008
Some really great tutorials here. Thanks!
Jacob Gube
December 18th, 2008
@Marcus Neto: I think Photoshop is much better for web design, Fireworks for me doesn’t seem to have enough “oomph”.
@Matt: Thanks, glad you like it.
insic
December 18th, 2008
nice collection again in this site. keep it up Jacob
Julius
December 19th, 2008
Very nice this tutorial!
Rishi Luchun
December 19th, 2008
Nice tutorials, good variety in producing loads of different web designs.
Thanks
Dietmar
December 19th, 2008
Awesome Tutorial, can’t wait to get my hands on this!
Matthew Heidenreich
December 19th, 2008
Thanks for linking to a few of tutorials I’ve wrote
highblood
December 19th, 2008
HOT LIST! Thanks for sharing, Jacob! *bookmarked*
ngkong
December 19th, 2008
wow looks awesome!
got it from digg frontpage.
bookmarked. will check this out tomorrow. 12 midnight here…
Shaun
December 19th, 2008
Photoshop is the only way to go for making great websites! Thanks for the awesome list of tutorials.
Arjen
December 19th, 2008
Nice tutorials!
I tried some of them lately. Thanks for sharing!
Alex
December 19th, 2008
Will for sure use some of these, thanks alot for the tutorials :D
Liveo
December 19th, 2008
Cheers,
I am working on a snooker site and your article has given me a couple of interesting ideas.
Paul
Patrick Sweeney
December 19th, 2008
Excellent array of resources, nothing to crazy which is definitely not needed in web design.
Matthew
December 19th, 2008
These tutorials crack!
Thanks for the ultimate list, appreciate it!
matt
Robbert
December 19th, 2008
Wow, this is definitely some reading for X-mas!
stelt
December 19th, 2008
Just make sure i can copy all text in those great designs.
trick: cover them with actual HTML text, but fully transparent.
Eli
December 19th, 2008
Cheers for including some of my tutorials :)
Patareco
December 19th, 2008
Loved the cactus one!
Belmos
December 20th, 2008
wonderful tutorials and wonderful designs. It will help me a lot. “How to Create a Grunge Web Design” inspired me a lot….
Jhay
December 20th, 2008
Great post! I love it
Jacob Gube
December 20th, 2008
@Belmos: That’s the goal, to inspire you on your own designs. You can look at these tutorials in two ways: (1) for practice and to get familiar with Photoshop techniques by doing, (2) to get familiar with techniques on how to create the popular styles out there.
@Patrick Sweeney: Nothing too crazy, or off-the-wall here – I wanted to share tutorials that were practical and can actually be used in a web design.
Pablo Formoso
December 20th, 2008
awesome collection
Navdeep
December 21st, 2008
Very nice post
Thomas
December 22nd, 2008
It’s a great collection, PSDTUTS tutorial are awesome
reginald
December 24th, 2008
This is a very interesting website in which it shows good quality.
Thank you
kiran
December 25th, 2008
Great tutorials thank you.Very helpful.
cutt
December 26th, 2008
Great Tutorials, thanks for share!
Dream Meanings
December 27th, 2008
Thanks for the photoshop tutorials. It is going to be very handy when I get around to making my site more fancy.
Vaibhav Gupta
January 11th, 2009
gr8!
Eric
March 6th, 2009
Have you found any cool articles on fireworks?
tiago
March 26th, 2009
i cant see the –Create a Dark Content Box with Glowing Navigation–
can you mail me the link please!
Nice stuff btw.
Rick
March 30th, 2009
Very excellent. I’m a Web / Graphics Designer and you’re right, these will come in handy!
Chris
April 4th, 2009
Nice collection of tuts and sites :-)
VIKAS GUPTA
April 17th, 2009
gr8 job dude
Herb
April 21st, 2009
I’m really hoping someone can help me… I can’t see it in any of the above tut’s.
I’m looking for the best way to go about creating the shadow effects like this: http://www.idealistconsulting.com/
See how the shadows are not ‘straight shadows’ ? They appear more in the middle of the lines… They’re kinda ‘bent’ shadows, making the line look kinda like a ribbon – hope that makes sense.
I could work out a way to do it but I’m sure I could do better.
Thanks,
Herb.
Continuing to love SM – thanks!
nev
May 13th, 2009
some good images
Navdeep
June 5th, 2009
Awesome header…It will surely help us for our design skills
Photoshop Mike
July 4th, 2009
There’s a good 10 minute Grunge website tutorial here http://designertuts.com/grunge-template-in-10-minutes/
Corey Haggard
October 17th, 2009
Very good post here, will certainly help me and lots of others. I normally deal with Fireworks with web design but am starting to use photoshop more and more. Excellent write!
jimbo cortes
January 29th, 2010
Gotta try this…
vl4dt
February 17th, 2010
gr8 collection thx a lot
Aivea
March 24th, 2010
Excellent post. Keep up the working and looking forward to more great articles in the future.
mike
April 1st, 2010
nice bunch of links to make a standard webdesigner from you.
Henry
April 6th, 2010
Nice collection of tuts !! keep it up Jacob
Zarack
April 9th, 2010
“Design a Unique Header” with a Trojan…
rakesh
May 3rd, 2010
gr8 collection thx a lot
rakesh
May 3rd, 2010
Thanks for the photoshop tutorials. It is going to be very handy when I get around to making my site more fancy.
Sarah
July 26th, 2010
Awesome tutorials :) thanks!!
Ozan
November 26th, 2010
Not up to date… Some links are not valid…
Sasha
December 5th, 2010
very nice tutorials. Thanks for the photoshop tutorials.
Amda
December 26th, 2010
Wow…nice tuts..keep it up bro…….
Raymond
January 29th, 2011
Many nice tutorials there :) allways quality content from you Jacob..
Popcorn
May 5th, 2011
Great list.thanks!! =)
Sunil Soundarapandian
July 25th, 2011
Nice list . . . and very useful
renra cikatos
August 11th, 2011
thank you..it’s realy amazing design…
Sakthi
August 17th, 2011
Nice Collection,thank u very much
Rajesh
September 16th, 2011
it’s very nice tutorials.
Saeed Neamati
September 30th, 2011
Guy, these tutorials are just great. Can you post more tutorials for web and web only. Thanks.
DJ Magdeburg
October 13th, 2011
Some great tutorials here
angel
October 22nd, 2011
Thanks from Valencia. Spain. Great tutorials.
Leave a Comment