How can I get more efficient at designing tables for web in Photoshop?

Question

It takes me too much time (IMO) to design tables in Photoshop. I need to move rows, columns and stuff easily. I'd like to be able to get through this faster. I've tried InDesign and Illustrator and vector exports but it ends up all merged into Photoshop.. It's for web. Front-End developers are going to integrate those in HTML and CSS.

Answer 1

Honestly.. Indesign. Among the Adobe Apps tables are easiest formatted in Indesign in my experience.

Set the table up in Indesign, save as PDF or EPS, open in Illustrator to tweak if needed (or use in layout there). Although, you could just place an EPS in Photoshop directly. Or the PDF, if you want it rasterized.

If Photoshop delivery is mandatory (I hate that)...
Then place as smart object in Photoshop. Or, alternatively, you can deconstruct in Illustrator via copy/Paste in Front (or back) and create a layer structure for the table in AI. Then export AI to PSD with layers in tact. This results in a layered PSD which can then simply be moved to your primary PSD.

Seems like a lot of work, but it's way, way easier than formatting tables in Photoshop, or Illustrator for that matter.

---

In most cases tables in a web layout are merely representational. To that end, I configure a rectangle for the overal size, then merely add 3 or 4 rows of data to show zebra striping and headers. I don't waste time formatting an entire table needlessly when it'll be filled by a programed loop.

Answer 2

Photoshop is not for layout!

My frustrations were the same as yours years ago. That's when I moved to Illustrator for UI comps. Well, acutally Fireworks then Illustrator. FW just wasn't ready ... I'm still not convinced it's really out of beta ;)

Illustrator has it's own frustrations, of course. You can search around for info on strange stray pixels and the lack of gradient dithering. But, in the end, it's pluses outweigh it's minuses for me. It handles the sorts of things you describe much more efficiently than anything else I've used.

Once you get the designers and developers past the initial shock of "But it's not Photoshop!" it works quite well. In fact, nearly everyone I've helped make the transition has come back to thank me with one feature after another that they just can't live without any more. In fact, most of them end up loathing those projects where they're asked to go back to Pshop layout.

So how do you do it

InDesign is Adobe's layout and typography app, right? Yes but it's not geared for digital device exporting, in my opinion. It's also very weak in the illustration tools that I find myself using constantly in the course of a layout.

Illustrator has all the tools I need for my comps. Well, almost. Nothing has it all.

• Excellent tools for grid layout (which I use for just about everything)
• Type handling is second only to InDesign (I'm not counting TeX!)
• Type layout from a point or within a text frame for columns and other defined spaces
• Precision alignment and shape transformation is a breeze
• Artboards make exporting simple and flexible
• Extensive javascript support
• File linking for images or other Illustrator files without embedding, making global updates easy
• Symbols are a convenient way to build up a UI kit

Answer 3

An alternative way to easily edit tables would be to first create them in html (inline css, it doesn't even have to be clean code) and then paste them into your design. Once you are happy with the result, you can re-draw them.

It's not the perfect process, but it will show the tables exactly like they will look like once in the site. For editing them in html, you can paste the rest of your design using images (so you know what's surrounding it), and use the firefox or chrome's inspector to do changes live.

Answer 4

Have you considered using Microsoft Excel? Its pretty great at tables.

You can insert images into cells then adjust the cell width and height to match the image. Code for images is a bit ugly so when you're done before saving you might want to then delete the image and the cell will keep the size.

Another tip for doing it this way would be to quickly block out different cells in different colors and moving them about just as naturally as can be to do a quick mockup right in excel.

If you already have a design you're working with you can set it to be the background image of your entire spreadsheet and then adjust the cells in front of it to get the positioning right. Just note that its going to tile your image but you can always modify the image to give it an obvious edge if you can't spot it easily enough already.

When you're done just save as Webpage or Single Page Webpage. Some of the other code it drops in is pretty ugly but the table should be pretty good, definitely workable in minimal effort.

Answer 5

This is sort of like asking how to be more efficient at hammering nails with this screw driver.

It's simply the wrong tool for this.

PhotoShop is not a page layout app, let alone a web content app. It's OK for broad page design and mockups, but isn't a tool for managing detailed web design specifications. That's what CSS is for.

So, ideally, you'd do a few things in PhotoShop if you desire, but the actual laying out and designing of content such as a table is likely better off being done in actual HTML and CSS.