Mockups in photoshop


Ive noticed that alot of web designer jobs ask that you know how to do web design mockups in photoshop but I need to know a little more nameley:

Once you do a mockup in photoshop for a client is that it or is it just the first stage and the second is converting it into code.

Ive never used photoshop for mockups so Ive got alot of learning to do & this notion you can export photoshop mockups into HTML & CSS perplexes me.

Is there a tutorial that explains how to do photoshop mockups of web sites and this stuff about exporting into code.

Any insights welcome :slight_smile:

Or inkscape : ) Or sodipodi… or Xara…

SpikeZ, that step-before-zero… is one of the most important steps. This is what you talk with the client over, before opening Photoshop. If you write a little clearer, you can even do some basic usability testing with it. You can pre-create some textures or colour-schemes in PS and present that to the client at the same time as the sketch, but you don’t want to build a whole PS design only to have the client say “yeah but I thought our logo would work better over here and smaller and in a matte style” or something.

…and, the client may expect the web page to really have that Lobster font (which maybe it can, if the users’ browsers support @font-face).

@Scathmere: For vector graphics, you should use Illustrator since it’s a vector drawing application. Photoshop doesn’t produce true vector graphics.

Interestingly I just happened to be on pixel2life and came across this:

That runs you through pretty much everything you would need to know.
One tip though, never EVER use photoshop to create the final HTML code for your site! Its rubbish and far easier to do it yourself!

Brilliant thank you for your replies :slight_smile:

Creating a mockup in photoshop saves alot of time, since using vector graphics make it easier to try different color options, sizes, and effects.

Good luck!


there are quite some good articles on Designbump about converting psd to (x)html.