Menu

25 Photoshop Tutorials for Web Designers

Advertisement

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.

insic Dec 18 2008

nice collection again in this site. keep it up Jacob

Julius Dec 19 2008

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*

ngkong Dec 19 2008

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

Shaun Dec 19 2008

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

Arjen Dec 19 2008

Nice tutorials!

I tried some of them lately. Thanks for sharing!

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

Liveo Dec 19 2008

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!

stelt Dec 19 2008

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!

Belmos Dec 20 2008

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

Thomas Dec 22 2008

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

kiran Dec 25 2008

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?

tiago Mar 26 2009

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!

Chris Apr 04 2009

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…

vl4dt Feb 17 2010

gr8 collection thx a lot

Aivea Mar 24 2010

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.

Henry Apr 06 2010

Nice collection of tuts !! keep it up Jacob

Zarack Apr 09 2010

“Design a Unique Header” with a Trojan…

rakesh May 03 2010

gr8 collection thx a lot

rakesh May 03 2010

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

Sarah Jul 26 2010

Awesome tutorials :) thanks!!

Not up to date… Some links are not valid…

Sasha Dec 05 2010

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…

Sakthi Aug 17 2011

Nice Collection,thank u very much

Rajesh Sep 16 2011

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

angel Oct 22 2011

Thanks from Valencia. Spain. Great tutorials.

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

Advertisements
Partners