I'm a web developer for a year and a half now. I work particularly on client-side. I'm good at (x)HTML/CSS/Javascript/jQuery.

My work goes in converting PSD files to (x)HTML. (PSD files came from clients)

Now I'm planning to go on designing too. My knowledge of photoshop is just the basic, I guess - Just the things I need to effectively convert PSD files to a web page.

I'm really eager to learn. My questions:

  • How can I learn this with just the internet and me?
  • Are there steps or guides you know that could help me as a newbie?
  • What are the challenges I may face and what can you suggest?
  • What tool(s) would you suggest?




Practice using Photoshop and learning how to use it as a tool. Each new Photoshop tool and technique you add to your knowledge will expand what you're able to do by a great deal. There are hundreds and thousands of good tutorials on the net that will teach you how to use Photoshop.

Practice by copying other people's work. Don't copy it to sell, copy it to practice on your own. If you see a website you like, try creating the mockup for it in Photoshop. Ditto for any graphics, icons or effects that you see. As you learn the techniques and develop a feel for what's out there, you will find your own artistic touch.

Practice your basic drawing and design skills. If you don't understand the basics, every design you make will end up looking amateur or off in some undefinable way. At the bare minimum, you need to understand the following: color theory, contrast, repetition, alignment, proximity, whitespace, font choice and setting, perspective, minimalism.

Practice your business acumen. Form must meet function. Your website designs must have purpose. Understand that each web page has a primary goal and other lesser goals. It's your job as the designer to call attention to those goals. Everything else is clutter. Also understand that there are the website's goals and the user's goals and they may not always be the same. Good design and higher conversion rates are found at the intersection of business and user goals.

Practice asking for help. Actively seek out criticism of your designs and don't hold on emotionally to any one design too closely. Seek improvement, not gratuitous praise. Push yourself creatively, but always strive for ease of use and clarity in your designs.

Practice patience. To get to a professional level, you'll need to spend a lot of hours tweaking and adjusting your designs. Photoshop may be digital, but to do it right, it takes just as much time as any painting. You'll fail a lot at first. What you think is amazing, others may not. You will get there eventually. Persevere.

  • I'm doing the 2nd one on your list. I'm trying to copy this as an exercise. I'm stuck with lines style or divider. do you have any hints or tuturials link on how can I achieve that? or any line/divider tuturials will do. thanks.
    – Reigel
    Sep 23 '10 at 8:50
  • @Reigel - If you're doing it in CSS, do something like the following: .divider {height:1px; width:100%; background:#555; border-bottom:1px solid #DDD; display:block; clear:both; overflow:hidden;} If in Photoshop, just use the line tool and create two thin lines, with the bottom one being lighter to get a beveled edge look. Or check out any of the following: webtint.net/tutorials/…, buildinternet.com/2009/06/…, justcreativedesign.com/2009/05/19/web-design-polishing-tutorial Sep 23 '10 at 14:39
  • Thank you for the response. I don't really have a problem in CSS. I'm on photoshop. and your response was a great help.
    – Reigel
    Sep 24 '10 at 1:33
  • No problem, glad I could help. Sep 24 '10 at 1:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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