I want to become a web designer, so I'm watching a lot of Photoshop video tutorials, but some of those tutorials are not useful for web designing. For example, some movies are about skin, or teeth or drawing a flower or changing the pattern of a wall or things like this. Because I don't have any specific resource for web designing, and those tutorials are a kind of wasting time for me!

Do you know any tutorial source in order to help me learn web design in Photoshop?

What should I do to focus on web designing in Photoshop?

Which parts of Photoshop are necessary for web designing and which parts are not?


7 Answers 7


"I want to become a web designer, so I'm watching a lot of Photoshop video tutorial"

Do you know HTML, CSS and JS? If not, start there first.

Photoshop is then used as a tool to create the graphics that go with the HTML, CSS and JS.

There's nothing particular 'web site design' centric about particular tools in PhotoShop. It's simply an image creation and editing tool.


Each tool, brush, filter, and effect in Photoshop has its own purpose in the world. There is no simple "learn this tool well and use it for everything" because different tools, etc. are used for different effects.

For example, if you like shiny slightly-3dish glossy buttons on your page (these were very popular a while ago) you would need to use some shadow, several gradients, masking, and maybe a little hand-jiggering with a brush tool. For a background you may just use a solid color or gradient with a textured/patterned mask.

Since there is no "one part of Photoshop" to learn, the best thing you can do is to become well-rounded by using the various tools. Browse around and look at all varieties of sites. Take note of features that you like, and then try to recreate them yourself. Often you can dissect the elements - does the object have borders, gradients, textures, light-sources, etc. - and recreate something similar.

At the same time, I can't hammer-home hard enough that there is more to design than just Photoshop. My recommendation would be to take a design class at the local community college (or whever) and get a feel for things like balance, colors, whitespace, etc. These concepts often make the difference between looking professional and looking like somebody's aunt (who, in this scenario, is not a designer by trade) edited a Geocities template.

  • 4
    "...there is more to design than just Photoshop." Hear hear! +1. Commented Aug 8, 2011 at 18:52
  • 1
    Photoshop has serious lack of some features that designing a layout would benefit from...along lots of vector tools. I might switch to illustrator and use photoshop for other specialized graphics. Like characters, photorealistic icons...
    – user8795
    Commented Jul 3, 2014 at 2:04

If you want to design websites, you'd be far better off working with Fireworks than Photoshop. PS is, at heart, a photo manipulation application, and whilst its tools can be used for wireframes, they're not especially efficient at it. Put it another way: using PS for web design is like using PS as a DTP application over InDesign. Yes, it can be done, but it's not a great way to do it, and you'll lose out in the long run.

The advantages that Fireworks brings are:

  • much easier to work with true vector shapes
  • FAR easier to define pixel dimensions; no blurring of strokes on stretch etc.
  • can define 'master pages' to make sitewide design changes to your mockups, without having to redo every single image
  • easier to create a library of commonly used UI controls (valuable for designing web apps)
  • UI closer to typical desktop application interface, meaning a shallower learning curve

The only real advantages that Photoshop brings to the table are the fact that

  • the font rendering is better
  • your colleagues will know the application a (little) better
  • 1
    Yes, Fireworks is better, otherwise you have to use both Illustrator and Photoshop and switch back and forth.
    – Cakey
    Commented Aug 7, 2014 at 9:22

To design websites you should look at other mockups as well. Consider some of the effects you could use like page peels, navigation bar links. A lot of this isn't hard to do in Photoshop but will require a bit of Googling around. I often check Dribbble which is a wonderful design community. It's very popular, so you'll surely see a lot of new techniques web designers are implementing.

But to get a general overview, try working with a set of tutorials specifically used for designing websites. Even really basic tutorials. Because these will outline the steps for you, and you can replicate these on future projects. I added 2 really great resources below, I do hope you'll check them out. I guarantee you'll find a beginner's template tutorial you like - and you'll learn a lot!


On the note of "there's more to design than Photoshop": I found this insightful: http://naldzgraphics.net/tips/what-designers-need-to-know-about-typography/

  • It suffers from stilted prose and occasional grammar errors. I can summarize it (and improve upon it) in a comment box: Use good taste in all things, and look up and get very clear on the following words: font vs. typeface, serif vs. sans serif, kerning, tracking, spacing, leading, alignment, flush, justified. The article doesn't provide clear or complete definitions for most of these; the explanations are superficial and seem secondhand.
    – Wildcard
    Commented Jun 21, 2017 at 22:15
  • Also it's a link only answer.
    – Wildcard
    Commented Jun 21, 2017 at 22:16

Photoshop is just a tool and the better you know the tool, the better you'll be able to use it to do what you want to do. However, there is more to design than just knowing Photoshop.

This mindset that you just need to learn Photoshop and then you'll be a designer is the same as calling yourself a builder because you know how to use a hammer, or a mechanic because you can use a spanner. Design as such is making things work well (and probably look good in the process), it has very little to do with knowing Photoshop/Illustrator/InDesign/Sketch/whatever, but how you use those tools to fulfill your ideas.

There are tons of bad tutorials on YouTube and tons of good ones too. Learn how to do it all, the techniques will be valuable down the line anyway. Creative Block also have nice tutorials. But furthermore, look into color theory, layout theory, typhography (Eric Spiekerman's Stop Stealing Sheep & Find Out How Type Works is a very good intro) and other more traditional graphic design skills are much more valuable skills to invest your time in than just learning Photoshop.

Also, as someone mentioned earlier, learning HTML/CSS/JS is a definite plus for web design work too.


You can validate your PSD file for known web compatibility issues here https://www.oss-usa.com/web-preflight?promo=web-preflight it's free

  • Hi Nik, welcome to GDSE and thanks for your answer. I fail to see how this answers the questions, could you please elaborate? Thanks!
    – Vincent
    Commented Aug 7, 2014 at 11:23
  • I have experience in web-development and I met a lot of beginners in web-design. There are common mistakes that anyone can do. For example, decimal pixels in font sizes. This service can help newbie.
    – Nik
    Commented Aug 7, 2014 at 11:52
  • Thanks. It would, though, really help if you'd like to share your experience and spell out those mistakes. That way, your answer will still have (a lot of!) value in case the link breaks at a later time. Link rot is the reason we aren't very keen on (mostly) link-only anwers, and the reason I voted your answer down. Don't be discouraged, please, we know that using this site can be a learning curve. We are happy to have you, keep contributing!
    – Vincent
    Commented Aug 7, 2014 at 11:56

Not the answer you're looking for? Browse other questions tagged or ask your own question.