5

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.

5 Answers 5

5

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.

3

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
4
  • Can you give more details on the actual techniques and tools that you use in Illustrator? I think this question is about getting things done, the pragmatic way. Jan 16, 2013 at 19:41
  • I've added some specifics to my answer. Jan 16, 2013 at 23:05
  • There's a book you may want to look into reading: UI Design with Adobe Illustrator by Rick Moore, which may help you with design concepts (around Illustrator workflows) and maximizing your effort if you are thinking about using Illustrator for comps. Cheers! Jan 17, 2013 at 0:04
  • 1
    @KevinBomberry thanks for the recommendation, I hadn't seen that one. Looks great. Jan 17, 2013 at 0:33
2

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.

4
  • 1
    I was on a UX team where every design had to be spec'ed out in PhotoShop and sent overseas as JPG images. We thought it was insane. The solution? We designed everything in HTML and CSS. Screen shot, save as JPG, send.
    – DA01
    Jan 16, 2013 at 21:15
  • @DA01 the question states that the HTML and CSS is done by front-end developers. You're assuming that the OP knows how work with those technologies. Jan 17, 2013 at 20:15
  • 1
    Yep. I'm assuming that. I realize that's not always true, but any designer doing web design is going to benefit from learning it sooner or later. It often is the best tool to create design iterations with at times. This being a good example.
    – DA01
    Jan 17, 2013 at 20:16
  • Completely agree with DA01. If you are designing for web, you can't do it right without knowing what goes behind it (specially now with all the fluid, responsive sites). And you can learn the basics of HTML and CSS in a day.
    – Yisela
    Jan 17, 2013 at 22:23
1

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.

4
  • Is this a joke? I might vote it up just for comedic value. Jan 17, 2013 at 0:35
  • 1
    Whats wrong with it? Have you ever actually tried it or are you just hating on it because its not the answer you were expecting?
    – Ryan
    Jan 17, 2013 at 3:00
  • Of course I've used it and many other spreadsheet apps. Extensively. For operational reporting and analysis. It is clearly not the right tool for web comps. If you have examples to the contrary, please add them to your answer. Jan 17, 2013 at 5:05
  • As much as I begrudge Excel, I'd agree with Ryan that it's definitely an appropriate tool (and likely a lot easier than using PhotoShop a lot of the time).
    – DA01
    Jan 17, 2013 at 6:48
1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.