如何在 Photoshop 中更高效地设计 Web 表格?

平面设计 adobe-photoshop 网站设计
2022-02-08 06:23:05

在 Photoshop 中设计表格花费了我太多时间 (IMO)。我需要轻松移动行、列和内容。我希望能够更快地度过这个难关。我已经尝试过 InDesign 和 Illustrator 以及矢量导出,但最终都合并到了 Photoshop 中。它是用于网络的。前端开发人员将把它们集成到 HTML 和 CSS 中。

4个回答

老实说.. Indesign。根据我的经验,Adobe Apps 表格中最容易在 Indesign 中格式化。

在 Indesign 中设置表格,另存为 PDF 或 EPS,在 Illustrator 中打开以根据需要进行调整(或在布局中使用)。虽然,您可以直接在 Photoshop 中放置 EPS。或者PDF,如果你想光栅化。

如果 Photoshop 交付是强制性的(我讨厌那个)......
然后在 Photoshop 中作为智能对象放置。或者,或者,您可以在 Illustrator 中通过在前面(或后面)复制/粘贴来解构,并在 AI 中为表格创建层结构。然后将 AI 导出到 PSD,并保持层层完整。这会产生一个分层的 PSD,然后可以简单地将其移动到您的主 PSD。

看起来工作量很大,但这比在 Photoshop 或 Illustrator 中格式化表格要容易得多。


在大多数情况下,Web 布局中的表格只是代表性的。为此,我为整体大小配置了一个矩形,然后仅添加 3 或 4 行数据以显示斑马条纹和标题。当整个表格将被程序循环填充时,我不会浪费时间不必要地格式化整个表格。

Photoshop 不是用于布局的!

我的挫败感和你几年前一样。就在那时,我转向 Illustrator 进行 UI 合成。好吧,实际上是 Fireworks,然后是 Illustrator。FW 还没有准备好……我仍然不相信它真的已经过测试版了;)

当然,Illustrator 也有自己的挫败感。您可以四处搜索有关奇怪的杂散像素和缺少渐变抖动的信息。但是,最后,它对我来说是利大于弊。它比我用过的任何东西都更有效地处理你描述的各种事情。

一旦你让设计师和开发人员摆脱了“但这不是 Photoshop!”的最初震惊。它工作得很好。事实上,几乎所有我帮助过过渡的人都回来感谢我一个又一个的功能,他们再也离不开这些功能了。事实上,他们中的大多数人最终讨厌那些被要求返回 Pshop 布局的项目。

你是怎么做到的

InDesign 是 Adob​​e 的布局和排版应用程序,对吧?是的,但在我看来,它不适合数字设备出口。我发现自己在布局过程中经常使用的插图工具也很弱。

Illustrator 拥有我的合成所需的所有工具。嗯,差不多。什么都没有。

  • 出色的网格布局工具(我几乎可以使用它)
  • 类型处理仅次于 InDesign(我不算 TeX!)
  • 从一个点或在文本框架内为列和其他定义的空间键入布局
  • 精确对齐和形状转换轻而易举
  • 画板使导出变得简单灵活
  • 广泛的JavaScript 支持
  • 图像或其他 Illustrator 文件的文件链接,无需嵌入,使全局更新变得容易
  • 符号是构建 UI 工具包的便捷方式

轻松编辑表格的另一种方法是首先在 html 中创建它们(内联 css,它甚至不必是干净的代码),然后将它们粘贴到您的设计中。对结果满意后,可以重新绘制它们。

这不是一个完美的过程,但它会完全按照它们在站点中的样子显示表格。要在 html 中编辑它们,您可以使用图像粘贴设计的其余部分(这样您就知道它周围有什么),并使用 firefox 或 chrome 的检查器进行实时更改。

您是否考虑过使用 Microsoft Excel?它在餐桌上非常棒。

您可以将图像插入单元格,然后调整单元格的宽度和高度以匹配图像。图像代码有点难看,所以当你在保存之前完成时,你可能想要删除图像,单元格将保持大小。

这样做的另一个技巧是快速屏蔽不同颜色的不同单元格,并像在 excel 中做一个快速模型一样自然地移动它们。

如果您已经有了正在使用的设计,则可以将其设置为整个电子表格的背景图像,然后调整其前面的单元格以正确定位。请注意,它会平铺您的图像,但如果您已经不能足够容易地发现它,您可以随时修改图像以使其具有明显的边缘。

完成后,只需另存为网页或单页网页。它放入的其他一些代码非常难看,但表格应该非常好,绝对可以用最少的努力来工作。