Photoshop在网页设计中的确切作用/关系是什么?

平面设计 adobe-photoshop 网站设计
2022-02-07 12:34:16

我对 Photoshop(和任何其他图像处理软件)在网页设计中的关系感到困惑。我可以在任何地方看到无数关于如何从头开始制作网页布局的教程,其中大多数都包含真实网页的全部内容。但它在那里。没有进一步说明如何将设计实现为真正的网页/网站(除了那些我知道你认为已成为过去的切片-n-dice 方法。)

我确定我的问题不是开放式的,因为我将在这里列出更明确的问题。

我的假设是:

  • Photoshop 旨在仅用于将徽标、横幅等准确导出到网页。
  • 使用 Photoshop 创建 Web 布局仅用作真实站点的模型(仅作为指南?)
  • 完成构建后,您应该使用 CSS、HTML 等手动编码来实现设计。

如果我所有的假设都是正确的,那么我最重要的问题是:

为什么人们喜欢使用 Ps 来创建网页布局,如果他们不能将它构建到一个真实的站点中(我指的是那些不会编码的人。)?我可以看到他们的设计过于详细,以至于使用 Twitter Bootstrap 和 JQuery UI (afaik) 等工具/框架来实现它似乎是不可能的。

PS :( Post Scriptum不是另一个)我最初是一名编程学生,不知道您如何进行网页图形设计。此外,我不想争论使用 Illustrator 或框架(由 Adob​​e 逐步淘汰)。

4个回答

再有,Photoshop、Illustrator 等。人。用于支持网络资产,而不是用于整页/站点模型。

是的,有些人仍然使用 Photoshop 构建整个页面模型。实际上,如果一个站点非常基于自定义图像,那么它可能是必要的。但是传统上不再进行切片了。

还有一些开发人员不希望设计师进行任何编码。所以他们只想要一个分层文件,这样他们就可以解构它并自己构建代码。我偶尔会遇到这些类型的开发人员,但他们在我的工作中变得越来越少。

你的问题真的没有笼统的答案。最后,这取决于特定的人员及其所需的工作流程。我只能告诉你,与 10 年前相比,我现在如何使用图像编辑应用程序。

曾经有一段时间,人们会在 Photoshop 中构建整个页面,将其切片,然后导出切片以便在 HTML 中重建它们。这是在 CSS2(尤其是 CSS3)被广泛支持之前。那时,这样做几乎是强制性的,因为您经常需要渐变、圆角或小阴影,否则这些都不容易创建。在支持 CSS2 之前,除了标准边框和背景颜色之外的任何东西都需要图像,通常是重复的图像拼贴。根本没有办法在不使用角落的图像的情况下对圆角进行编码,渐变和阴影也是如此。如果您今天查看网站,请注意使用了多少渐变阴影和圆角。这些都必须是 10 年前的图像。

今天,大部分过去的图像或切片都可以通过 CSS 处理。我不再需要圆角、渐变或阴影。因此,我不需要分割页面来生成那些微小的资产。我只需要图像编辑软件来创建无法通过 CSS 创建的东西,例如徽标、图案、照片、缩略图等,或者创建不应该使用 CSS 创建的资产,以确保跨浏览器正确显示 -一些按钮或特殊图像效果之类的东西。

实际上,几乎没有人不能再用 CSS3 创建了。唯一的障碍成为旧浏览器或实际照片/艺术品的后备。图像可能仍需要支持旧版浏览器(主要是 IE),但通常您可以允许 CSS 降级到可用状态。

10 年前,一个网站设计开始使用笔和纸来绘制想法,然后转移到 Photoshop/Illustrator 进行组合。然后留在 Photohop/Illustrator 以获得完整的设计批准,然后转移到施工以模仿图像布局。

今天,我的网站设计从笔和纸开始,然后直接转向 HTML/CSS 模型。我在适当的应用程序中打开徽标或图像并导出/保存到网络并将图像应用到 HTML/CSS 模型。有时,我会在图像编辑应用程序中创建模式和一些特定的页面区域,只是为了并排测试一些变化。但这些更多的是我的设计探索,而不是实际施工。直接在代码中模拟提供了许多优点。文本是实时 HTML 文本,不再有“该文本看起来与我批准的设计不同”评论的客户端。使用构造良好的 CSS 可以在几秒钟内创建颜色变化。如果回到 Photoshop、编辑、然后重新生成切片和代码,则布局更改需要数分钟而不是数小时。

图像编辑软件已经从构建工具转变为支持工具,这仅仅是因为标记语言的进步——主要是级联样式表和对它们的浏览器支持。HTML 通常仍然是 HTML。jQuery 等。人。增加了交互性,但并没有真正改变布局。CSS 已经走过了漫长的道路,减少了对完整图像模型的需求。

为了记录,我倾向于首先跳到 Illustrator 来获取资源。然后可以根据需要使用 Photoshop 或用于实际照片。

我想说:除非你是一个专注于 web 的平面设计师——但你提到你来自编程,所以情况并非如此——如果你要做 web开发,首先要了解你的代码。

我相信你必须这样做,因为你正在为此设计。我来自数字设计,可以这么说,所以我在代码(JS -.-)方面有点挣扎,但从一开始我必须学习 HTML 和 CSS 来设计它。您提到似乎无法开发的过于复杂的设计,嗯,这就是我想要避免的。一个好的模型也应该是可用性的一个例子(不一定是可用性线框,而是关于谁将访问该站点的知识的演示)。

话虽如此,我使用 Photoshop 处理与网络相关的各种事情。它总是在我的 Visual Studio 旁边打开。我用于图标,用于快速模型(我想改变一些结构,需要先看到它),用于照片编辑......我也用它来测量(截图,粘贴到 PS,使用切片测量,应用到CSS)。它对我来说是必不可少的工具,与 Chrome 代码检查器一样重要。在我看来,这是 Web 开发人员最好的朋友。您只需在检查器中添加和更改 css,它就会在站点中应用。

我认为,这只是我的观点,网页设计每天都更多地与开发有关。网站是响应式的、交互式的。您需要针对这种活力进行设计,而要做到这一点(在我看来),静态的 Photoshop 模型是不够的。

顺便说一句,欢迎来到GD!一个很好的问题。

你的假设大多是正确的。

有人会说 Photoshop 是 Web 设计的必经之路,而其他人可能会认为它只是达到目的的一种手段

事实上,在 Photoshop 中模拟网站比手动编写 HTML 和 CSS 快得多。使用 Photoshop 玩转和更改各种设计要容易得多。

有很多人喜欢设计网页,即使他们不知道如何自己构建网页。这些人可以有很多名字,但我称他们为网页设计师。

这并不是说所有的网页设计师都不会编码,而是强调设计。另一方面,您有 Web 开发人员。这些是编写代码但可能根本不接触设计的人。

在我的工作中,我们有一个人首先在 Photoshop 中设计所有东西。然后他进行设计迭代,直到他觉得设计已经完成。然后,他将模型转发给开发人员,然后他们使用 HTML 和 CSS 实现设计。

话虽这么说,有很多人都具备这两种能力。例如,我总是用 Photoshop 设计一个网站,但我会尽可能多地用 HTML 和 CSS 重新创建。从 Photoshop 到最终设计的唯一时间是它是否是图片(图像),例如照片或徽标,或者是否是其他任何复杂到不值得或不可能在 CSS 中完成的东西。

为了进一步阅读,最近有一篇关于 Smashing Magazine 的文章,涉及如何让 Photoshop 更易于用于网页设计,并稍微讨论了 Photoshop 和网页设计的历史。如果没有别的,这是一个有趣的阅读。

如果你仔细看看专业机构的服务流程,我认为你可以更好地了解平面设计软件在网页设计中的作用。首先,通常涉及多个专家。设计和代码的职责通常是分开的,每个专家都有自己的专用工具。

与客户合作时,重要的是定义流程里程碑并在继续工作之前征得客户的同意。因此,假设设计工作在第二个里程碑完成。如果您想在没有开始任何编码工作的情况下向客户展示已完成的工作(以避免不必要的成本),您必须完成图形设计软件中的所有内容。

如果您自己制作网站,那么同时使用图形设计软件和 html 编辑器会更有效,将设计工作转移到浏览器上。但这也取决于项目的复杂性。如果一个广泛而出色的设计对您的项目真的很重要,那么并行处理代码太分散注意力(效率较低)。那么最好专注于设计工作,并仅在图形设计软件上花费大量时间(几天,几周)。