

10 Tips For Creating Website Mockups In Photoshop - erictobia
http://blog.plasticmind.com/design/creating-mockups-in-photoshop/

======
plasticmind
I don't think there's anything wrong with the "hybrid" approach. Obviously,
some things take a lot longer to do in CSS/XHTML, so Photoshop is the best
tool to use when brainstorming or comping for a client. But at some point it
can become counterproductive trying to replicate all browser behavior in
Photoshop, so I just "run with it" and deal with the detail in CSS/XHTML.

------
blasdel
0\. Do not mock up webpages in Photoshop.

~~~
briansmith
I disagree. Because of my background as a programmer, it never even occurred
to me to mock up websites using Photoshop when I started--it was 100%
CSS+HTML, all the time. But, a few times I was designing something and had to
to show a colleague a draft in a hurry, so I did a screenshot of the
incomplete page, pasted into MS Paint, and embellished it there. When they
made suggestions, I just went back into MS paint and re-arranged things again
in a few seconds and resent. It was amazingly productive compared to writing
all the code. And, I didn't even have layers--it was MS Paint!

After a few experiences like that, I switched to a hybrid, iterative approach
where I would mock stuff a few aspects of the page in a real image editor and
then code it when I found the correct look. It really saves a lot of time when
I am doing anything that requires non-trivial CSS and HTML.

It saves time because I end up throwing away the majority of my designs after
I see them--they look better in my head than they do on the screen. If I just
did it in HTML+CSS then I'd waste more time just doing the coding and I've
have less time to experiment with different looks.

The thing to keep in mind is that it isn't necessary to spend hours and hours
getting everything (e.g. font anti-aliasing, color shades, spacing) pixel-
perfect in Photoshop. You just need to get it good enough where you can tell
that the design is going to work. Then you can code it up as a HTML+CSS
mockup. No matter what you do, the Photoshop mock-up and the final version
aren't going to look the same anyway (especially when you consider browser
differences).

~~~
blasdel
Photoshop completely obscures the base reality of the medium of hypertext --
the document -- and directs all the focus onto surface concerns. I find that
if you start by building pages like it's 1994 (but with div+span & class+id),
and thinking about how to logically structure your document, the CSS can
slowly fall into place iteratively.

Photoshop has all sorts of clever tools for pixel-perfection, and it's very
easy to go overboard. The biggest problem is the easy delusion that the mockup
_is_ the object being designed, and the subsequent divorce from reality.

That's why I believe that if you're going to do anything outside a text-
editor/browser/inspector, it should be in an unreal medium: dry-erase,
crayons, cut-out construction paper, post-its, watercolors, _FINGERPAINTS!_

~~~
JoelSutherland
If you are capable of mocking something up in HTML+CSS, you should be able to
know what to avoid in photoshop.

------
ctingom
I use Photoshop as my thinking tool. Designers think too, not just
programmers. Designers don't just make things look pretty.

