In the end, it all comes down to “What workflow is best for you“?
I’ve started designs off in Photoshop & HTML (similar to this article) and found a nice balance for me:
1. Using Markup/Textile, create the home page content. (This lets you easily learn the structure of your new site and what elements will become the most/least important)
2. Hop into Photoshop with your BlueprintCSS/960gs .PSD template and draw out your layout on the grid.
3. Create your titles & headlines (you already know what they are from step 1) & adjust layout accordingly.
4. Toss in your copy (again, step 1) and prune as necessary.
5. Head back to your document from step 1 & put in the grid markup to match your PSD.
6. Export images & adjust CSS to match.
Granted, there’s a bit of back & forth but let’s remember what Photoshop is great for: quickly creating several mockups using duplicate components for testing things out. You lose this flexibility once you’re in the markup world because, with grids, you essentially end up with <tables> again.
Layer Effects == CSS3, so if you add a shadow, emboss, or something similar, it should translate nicely to CSS.
If you’re relying on browser-equivalent typography on Photoshop, you’re doing it wrong. In this realm, it’s for testing out site designs & layouts. Your typography (outside of headings, of course) is just for filler. Your content boxes should be stretching vertically (and horizontally) anyway.
In the end, find what works best for you and your clients will be happy :)
Eric Clemmons
In the end, it all comes down to “What workflow is best for you“?
I’ve started designs off in Photoshop & HTML (similar to this article) and found a nice balance for me:
1. Using Markup/Textile, create the home page content. (This lets you easily learn the structure of your new site and what elements will become the most/least important)
2. Hop into Photoshop with your BlueprintCSS/960gs .PSD template and draw out your layout on the grid.
3. Create your titles & headlines (you already know what they are from step 1) & adjust layout accordingly.
4. Toss in your copy (again, step 1) and prune as necessary.
5. Head back to your document from step 1 & put in the grid markup to match your PSD.
6. Export images & adjust CSS to match.
Granted, there’s a bit of back & forth but let’s remember what Photoshop is great for: quickly creating several mockups using duplicate components for testing things out. You lose this flexibility once you’re in the markup world because, with grids, you essentially end up with <tables> again.
Layer Effects == CSS3, so if you add a shadow, emboss, or something similar, it should translate nicely to CSS.
If you’re relying on browser-equivalent typography on Photoshop, you’re doing it wrong. In this realm, it’s for testing out site designs & layouts. Your typography (outside of headings, of course) is just for filler. Your content boxes should be stretching vertically (and horizontally) anyway.
In the end, find what works best for you and your clients will be happy :)