Discuss: Quick CSS Mockups with Photoshop
by Casper Voogt
- Editorial Comments
2 ConceptPreview -- a little related and hopefully h
This isn’t self-promotion, just something I put together that has made my life a little easier.
http://marylandmedia.com/projects/conceptpreview/
ConceptPreview is a simple CSS based navigation tool. It was created primarily for web designers to quickly, effortlessly and subtly integrate a utility to present multiple design concepts. Often times web design concepts are required to be presented within HTML to help give accurate visual representation of the intended design.
posted at 01:02 pm on January 23, 2007 by Martin Ringlein
3 Do you need to ditch Fireworks? No
The problem I ran into was that I could only export HTML code using tables, when what I really wanted was relatively positioned div elements.
I was disappointed to read your Background paragraph and discover that Fireworks was pretty much useless at producing xhtml code. Rather than giving up hope I found the following Adobe tutorial:
Modifying HTML Output with HTML Styles in Fireworks
You can argue that this technique (Simple CSS-Based HTML Style) requires some work, but certainly far less than fixing the perceived problems with Fireworks.
posted at 01:38 pm on January 23, 2007 by Darroch Reid
4 Fireworks is to succeed ImageReady
Adobe has pretty much said that ImageReady is being set out to pasture — in favor of Fireworks CS3. So although this article is great at uncovering ImageReady’s often overlooked powers, come this spring, many Adobe users may start seriously looking at Fireworks as their new web graphics design tool.
When I look at Fireworks now, I realize it has considered itself as a pure web graphics design tool for much of its product life, from content creation to optimization. Where as ImageReady always felt like a Web graphics post-processing tool for Photoshop. And less than stellar one at that. You usually have to flatten your Photoshop files to make them usable in ImageReady. It was just dog slow if you didn’t, which made ImageReady less than useful. Not to mention ImageReady always struggled to keep feature parity with Photoshop (try Smart Objects in ImageReady).
Let’s just hope Adobe brings Fireworks up-to-date allowing you to save out more workable web standards-based code.
posted at 04:36 pm on January 23, 2007 by George Penston
5 Thanks for the feedback
Chris; yes, you could define the slice as non-image before exporting, though I always just export and define the CSS style for that div afterwards. I may for example end up creating a background image for a particular slice, and the source file for that background image could be a separate PSD or Fireworks file.
Darroch; thanks for the Adobe link. I’m not giving up on FW … I just don’t use it for certain things right now. It’s great for creating web graphics, but less so for full layouts. I also like the Adobe styles and image control better, though ImageReady’s far from perfect in its handling of smart objects. The Adobe Fireworks technique does require too much work IMO, esp. for a mockup.
George; I too look forward to a better Fireworks this spring. It would be a welcome change. I’ve tended to use ImageReady for the overall layout and Fireworks for occasional graphics. I’ve also been frustrated by IR’s limitations, esp. having to jump back to PS to make certain changes.
posted at 06:00 pm on January 23, 2007 by Casper Voogt
6 RE: Do you need to ditch Fireworks?
That’s a great resource; who knew you could modify the HTML output? While I am posting the page to my del.icio.us ,the code is very scary!
It was good to be reminded that the process for creating a website doesn’t need to be a grueling, do-every-single-thing-by-hand experience. I think back fondly to the days of slicing up a mock and just having it work (then I force myself to remember: tables bad! standards good!)
Thanks for the article; it reminds me that it’s good to “let go and let Adobe” sometimes…especially when it’s easy!
posted at 08:00 pm on January 23, 2007 by Zack Katz
7 RE: Fireworks is to succeed ImageReady?
A few years ago I stopped using Fireworks because the designers I worked with always provided very complex, layered PSDs (Photoshop CS2). Fireworks would open these files, although something important (fonts, gradients, etc.) would often be lost and I’ll just mention how badly Illustrator files would look. I’m not sure about Fireworks v.8… I’m very interested in Fireworks CS3, and whether it integrates as well as ImageReady with all Adobe products.
For now, I prefer using Photoshop CS2, slicing complex layered elements and using my own output settings to keep things tidy. I don’t have much need for quick XHTML/CSS mock-ups, although this article was very thought-provoking. Thanks!
posted at 08:46 pm on January 23, 2007 by Kevin Davison
8 Finally the result, happy clients
We used ImageReady and Photoshop to make it quick and easy.
The design was a little to hard to make because IE don’t support PNG :( We thought this should be a simple way to do use gif format to make it work and then built up the css grid with ImageReady and the make the rest by hand. It took a lot of work to make it work. Finally the result, happy clients :) http://www.arken-regnbagen.se/
A kinder garden in Stockholm, Sweden.
Year: Spring 2006
posted at 08:51 pm on January 23, 2007 by Thomas Krajewski
9 Umm - why was my comment about SiteGrinder delete
It seemed very topical.
Chris
posted at 11:34 pm on January 23, 2007 by Chris Perkins
10 Why even use Image Ready...
… when Photoshop CS2 and CS3 can export XHTML from slices? Is the XHTML output better? I just design in PS and Save For Web with slices making sure <div> instead of <table> is selected and all’s well. Good article.
posted at 11:54 pm on January 23, 2007 by Giovanny Gutierrez
Discussion Closed
New comments are not being accepted, but you are welcome to explore what people said before we closed the door.
Got something to say?
Discuss this article. We reserve the right to delete flames, trolls, and wood nymphs.
Create a new account or sign in below if you’d like to leave a comment.
Subscribe to this article's comments: RSS (what’s this?)
1 It will also generate non-image slices too!
“Some slices (a content area, for example) may be of a single color and thus should be set using a CSS style without any images.”
Why not change the slice type to “No Image” and then set the background colour too, then imageready will generate the that css for you.
The same works for areas of text, though in both cases if you wish to have a meaningful name you have to rename it before changing the type as selecting “no image” removes the name box.
posted at 09:10 am on January 23, 2007 by Chris Shepherd