Menu

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

Photoshop Paper Texture from Scratch - screen shot.

How to Create a Grunge Web Design

How to Create a Grunge Web Design - screen shot.

Create a Sleek, High-End Web Design from Scratch

Create a Sleek, High-End Web Design from Scratch - screen shot.

Design an Awesome Band Website Template

Design an Awesome Band Website Template - screen shot.

Designing a CSS based template (Part II, Part III)

Designing a CSS based template - screen shot.

Create a Dark Themed Web Design from Scratch

Create a Dark Themed Web Design from Scratch - screen shot.

Navigation and Search

Design Watercolor Effect Menu

Design Watercolor Effect Menu - screen shot.

Volkswagen Inspired Navigation

Volkswagen Inspired Navigation - screen shot.

Glossy-Style Carbon Fibre Navigation Buttons

Glossy-Style Carbon Fibre Navigation Buttons - screen shot.

CSS Menu With Icons

CSS Menu With Icons - screen shot.

Content Box with Orange Banner Heading

Content Box with Orange Banner Heading - screen shot.

Modern Web Search Bar

Modern Web Search Bar - screen shot.

Header

Professional Dark Header

Professional Dark Header - screen shot.

Pro Header With Picture and Navigation

Pro Header With Picture and Navigation - screen shot.

Hero Header Part I

Hero Header Part I - screen shot.

Header Backgrounds

Header Backgrounds - screen shot.

Design a Unique Header

Design a Unique Header - screen shot.

Design Studio Header

Design Studio Header - screen shot.

Professional Header Design

Professional Header Design - screen shot.

Content Boxes

Create a Latest Tweets Box

Create a Latest Tweets Box - screen shot.

Light Tabbed Content Box

Light Tabbed Content Box - screen shot.

Create a Dark Content Box with Glowing Navigation

Create a Dark Content Box with Glowing Navigation - screen shot.

Greenish & fresh content box design

Greenish & fresh content box design - screen shot.

Designing a Unique Bookmark Box

Designing a Unique Bookmark Box - screen shot.

Creating a Grungy Banner

Creating a Grungy Banner - screen shot.

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.

Related Content

This was published on Dec 18, 2008

62 Comments

Marcus Neto Dec 18 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…

Some really great tutorials here. Thanks!

Jacob Gube Dec 18 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.

nice collection again in this site. keep it up Jacob

Very nice this tutorial!

Rishi Luchun Dec 19 2008

Nice tutorials, good variety in producing loads of different web designs.

Thanks

Dietmar Dec 19 2008

Awesome Tutorial, can’t wait to get my hands on this!

Matthew Heidenreich Dec 19 2008

Thanks for linking to a few of tutorials I’ve wrote

highblood Dec 19 2008

HOT LIST! Thanks for sharing, Jacob! *bookmarked*

wow looks awesome!
got it from digg frontpage.
bookmarked. will check this out tomorrow. 12 midnight here…

Photoshop is the only way to go for making great websites! Thanks for the awesome list of tutorials.

Nice tutorials!

I tried some of them lately. Thanks for sharing!

Will for sure use some of these, thanks alot for the tutorials :D

Cheers,

I am working on a snooker site and your article has given me a couple of interesting ideas.

Paul

Patrick Sweeney Dec 19 2008

Excellent array of resources, nothing to crazy which is definitely not needed in web design.

Matthew Dec 19 2008

These tutorials crack!

Thanks for the ultimate list, appreciate it!

matt

Robbert Dec 19 2008

Wow, this is definitely some reading for X-mas!

Just make sure i can copy all text in those great designs.
trick: cover them with actual HTML text, but fully transparent.

Cheers for including some of my tutorials :)

Patareco Dec 19 2008

Loved the cactus one!

wonderful tutorials and wonderful designs. It will help me a lot. “How to Create a Grunge Web Design” inspired me a lot….

Great post! I love it

Jacob Gube Dec 20 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 Dec 20 2008

awesome collection

Navdeep Dec 21 2008

Very nice post

It’s a great collection, PSDTUTS tutorial are awesome

reginald Dec 24 2008

This is a very interesting website in which it shows good quality.
Thank you

Great tutorials thank you.Very helpful.

Great Tutorials, thanks for share!

Dream Meanings Dec 27 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 Jan 11 2009

gr8!

Have you found any cool articles on fireworks?

i cant see the –Create a Dark Content Box with Glowing Navigation–
can you mail me the link please!

Nice stuff btw.

Very excellent. I’m a Web / Graphics Designer and you’re right, these will come in handy!

Nice collection of tuts and sites :-)

VIKAS GUPTA Apr 17 2009

gr8 job dude

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!

some good images

Navdeep Jun 05 2009

Awesome header…It will surely help us for our design skills

Photoshop Mike Jul 04 2009

There’s a good 10 minute Grunge website tutorial here http://designertuts.com/grunge-template-in-10-minutes/

Corey Haggard Oct 17 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 Jan 29 2010

Gotta try this…

gr8 collection thx a lot

Excellent post. Keep up the working and looking forward to more great articles in the future.

nice bunch of links to make a standard webdesigner from you.

Nice collection of tuts !! keep it up Jacob

“Design a Unique Header” with a Trojan…

gr8 collection thx a lot

Thanks for the photoshop tutorials. It is going to be very handy when I get around to making my site more fancy.

Awesome tutorials :) thanks!!

Not up to date… Some links are not valid…

very nice tutorials. Thanks for the photoshop tutorials.

Wow…nice tuts..keep it up bro…….

Raymond Jan 29 2011

Many nice tutorials there :) allways quality content from you Jacob..

Popcorn May 05 2011

Great list.thanks!! =)

Sunil Soundarapandian Jul 25 2011

Nice list . . . and very useful

renra cikatos Aug 11 2011

thank you..it’s realy amazing design…

Nice Collection,thank u very much

it’s very nice tutorials.

Saeed Neamati Sep 30 2011

Guy, these tutorials are just great. Can you post more tutorials for web and web only. Thanks.

DJ Magdeburg Oct 13 2011

Some great tutorials here

Thanks from Valencia. Spain. Great tutorials.

This comment section is closed. Please contact us if you have important new information about this post.

Partners