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.
10 Tips For Creating Website Mockups In Photoshop
11–18 of 18 posts
Re: 10 Tips For Creating Website Mockups In Photoshop
#12I use Photoshop as my thinking tool. Designers think too, not just programmers. Designers don't just make things look pretty.
Re: 10 Tips For Creating Website Mockups In Photoshop
#13Earlier quoted context omitted.
Photoshop's not 'for' print, either. I think you'll be hard pressed to find a better program to use for doing graphic design, especially for things that are to remain digital.
Good point. A possible argument against Photshop (and similar tools) is that they lead you to create a look that you will never ever get quite correct in a Web page. Assorted fonts, kerning, leading, and so on may not be reproducible in CSS. On the other hand, if you are mindful of these things, it's a big help to have multiple layers and such that you can easily move, swap around, etc.
Two of the ten points on the list address your concern with fonts.
3. Use Crisp antialiasing on your font layers.
4. Use web safe fonts on any parts of the site with live text.
Re: 10 Tips For Creating Website Mockups In Photoshop
#14Earlier quoted context omitted.
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 an…
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 eas…
If you are capable of mocking something up in HTML+CSS, you should be able to know what to avoid in photoshop.
Re: 10 Tips For Creating Website Mockups In Photoshop
#150. Do not mock up webpages in Photoshop.
An exception: if you want to make a design that is not easy to do in just HTML/CSS, use Photoshop. Probably first.
HTML/CSS is the Blub of design. It's easy and holds your hand, but if you know how to design and know the medium Photoshop makes it easier to do things unimaginable by those working just within HTML/CSS.
So, please, feel free to not use Photoshop. For some, it'll work just fine.
(edit: I actually like to use Illustrator more, but a similar argument applies)
Re: 10 Tips For Creating Website Mockups In Photoshop
#16Earlier quoted context omitted.
Because the web is not print.
Photoshop's not 'for' print, either. I think you'll be hard pressed to find a better program to use for doing graphic design, especially for things that are to remain digital.
Agree. you can move elements and groups of elements SO much faster in photoshop/fireworks than in CSS/HTML. The only thing faster is drawing. If you are brainstorming layout with CSS/HTML, you'll run out of steam quick.
Re: 10 Tips For Creating Website Mockups In Photoshop
#17Earlier quoted context omitted.
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 an…
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 eas…
Photoshop is just as capable of doing a fast, pixel-imperfect layout, filling the role of MSPaint, fingerpaints, or whatever. If the designers find themselves thinking of the Photoshop sketch as the final product, that strikes me as more the designers' problem than Photoshop's.
Re: 10 Tips For Creating Website Mockups In Photoshop
#18Earlier quoted context omitted.
Because the web is not print.
Photoshop's not 'for' print, either. I think you'll be hard pressed to find a better program to use for doing graphic design, especially for things that are to remain digital.
I've found Photoshop great for retouching digital photos, but Illustrator far easier for UI mockups. I do not see the benefit of setting anything in pixels until it needs to be.