Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for professional graphic designers and non-designers trying to do their own graphic design. It's 100% free, no registration required.

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 for learning web designing 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
add comment

5 Answers

up vote 11 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
2  
Now now. Some aunts are professional designers. :) –  Lauren Ipsum Aug 8 '11 at 18:14
1  
"...there is more to design than just Photoshop." Hear hear! +1. –  Philip Regan Aug 8 '11 at 18:52
    
Farray: my nieces thank you. ;) –  Lauren Ipsum Aug 8 '11 at 19:27
add comment

"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
add comment

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
add comment

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/

share|improve this answer
add comment

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
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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