Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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?

share|improve this question
up vote 14 down vote accepted

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.

share|improve this answer
"...there is more to design than just Photoshop." Hear hear! +1. – Philip Regan Aug 8 '11 at 18:52
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... – Muhammad Umer Jul 3 '14 at 2:04

"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.

share|improve this answer

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
share|improve this answer
Yes, Fireworks is better, otherwise you have to use both Illustrator and Photoshop and switch back and forth. – Cakey Aug 7 '14 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!

share|improve this answer

On the note of "there's more to design than Photoshop": I found this insightful:

share|improve this answer

You can validate your PSD file for known web compatibility issues here it's free

share|improve this answer
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 Aug 7 '14 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 Aug 7 '14 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 Aug 7 '14 at 11:56

protected by Community Oct 30 '15 at 16:24

Thank you for your interest in this question. Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).

Would you like to answer one of these unanswered questions instead?

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