随着CSS3的发明，网页设计师应该使用Photoshop吗？

13

我看到许多设计师在Photoshop中创建了精美的Web设计作品，但是现在随着CSS3的到来，当他们想要将其更改为HTML和CSS时，他们只是从头开始，并使用CSS3创作了大约80％的最终设计。

例如，他们使用边界半径，不透明度，背景渐变，框阴影和文本阴影以及其他CSS3规则来获取在Photoshop中创建的内容。很多时候，他们只从Photoshop导入图像，这更像是笔刷或徽标，或类似的东西。

我的问题是，网页设计师是否仍应使用Photoshop来创建内容，而其中只有20％对他们有用？

网页设计师是否可以直接在HTML和CSS中创建整个设计，而无需在Photoshop中添加创建设计的另一个中间层，然后在其中简单地创建其余元素？

adobe-photoshop website-design css

设计网站界面与设计外观是两个不同的主题。Photoshop制作了一个可怕的线框工具；但是，诸如MockFlow之类的产品却是一个糟糕的视觉工具。我99％的客户无法准确地解释线框关于阴影效果或配色方案如何一起工作（或无数其他与视觉有关的情况）。

— 道森

这应该是聊天中或至少是meta。它没有一个有限的答案。

— B01

17

要不同意所有人。Photoshop不是用于设计网站的工具。它是草绘网站的工具。该网站仍应以其所使用的媒介进行设计-通常是CSS，HTML和JS。

这并不意味着您不使用Photoshop。但是您当然不必。

我是一个巨大的风扇不会永远呈现给客户在Photoshop网站设计。它不是网站的生存媒介。Photoshopcomps无法交流互动，设备差异，浏览器特性，可点击性，响应能力等。

诚然，实际上，很多时候您仍然需要显示JPG模型。精细。为此使用Photoshop。但是不要再将PSD文件切成薄片并切成一个网站。这在1999年是合理的。今天没有那么多。取而代之的是，采用该PSD，并将其用作指导。这大概是网站的外观，但要考虑到它是使用CSS / HTML / JS构建并根据需要进行容纳的事实。

所以，要回答这个问题：

网页设计师是否可以直接在HTML和CSS中创建整个设计，而无需在Photoshop中添加创建设计的另一个中间层，然后在其中简单地创建其余元素？

是。当然可以做到这一点。我已经看到了与PSD设计器并行完成的工作。PSD方法的最大问题是在敏捷团队中工作时。用于文档的沉重文件（例如PhotoShop）已成为敏捷流程的沉重负担，最终增加了许多无法解决的问题。然后，我们倾向于反向工作...根据需要在PS中进行绘制，然后在HTML / CSS / JS中进行设计和构建。然后，当我们需要对会议进行快速的视觉更新时，我们只需截屏工作的演示层标记，然后将其拍在PhotoShop中并快速调整即可。

— DA01
source

我和你在一起@ DA01。+1。

— Saeed Neamati 2011年

1

+1篇很棒的文章（好吧，也许这不是一篇文章），但您确实总结得很好！我完全同意你所说的一切。我个人非常重视为客户提供具有完整设计功能的实时HTML和CSS原型，以便他们可以“体验”设计！

— Web_Designer 2011年

2

+1表示“对工作的演示层标记进行屏幕快照”。直到我读这个答案，我想在说我自己的答案是这样的，但我不会有太大的增加，因此只要我给予好评这个，而不是...

— Aᵂᴱ

+1我开始每年使用css3在浏览器中进行大部分设计工作，甚至很少再打开Photoshop。

— Chris_O

1

+1！Photoshop主要是位图操纵程序。对于轻量级且控制良好的代码，没有比直接HTML和CSS更好的方法了。从PS到网络，总会有一些东西需要改变，正如我所看到的；PS仅为客户端添加了一个复杂层。

— benteh

7

**编辑**

新客户？

绝对-如果您要为新客户/网站推销设计。外行人通常很难看到您的头脑。线框，工程图等也不总是切割-刮擦-他们也不切割。当客户拥有的是WF或草图时，我听到的消息比向客户提供带有徽标，照片，公司字体和UI的模型时要多得多，“我认为这将是X的事情”。

任何其他情况：

也许不是-如果可以使用符合工作要求的现有HTML / CSS / JS，或者您正在编辑现有客户端的内容，那么最好只使用代码即可。如果不是这样，您可能会在Photoshop中浪费大量时间，而获得的回报却很少。在某些情况下（例如提到的@ DAO1），屏幕快照和通过Photoshop进行调整可以真正加快审批过程，或加快构想，甚至三个。

** 结束 **

我说是 -

即使是经过简化的设计，也可以通过视觉来销售您的设计（并且可以更快地制作伴奏），这要容易得多。那是PS对我的工作最有帮助的地方。

我还将图层与网格系统合并在一起，因此我可以看到事物的布局方式，并将它们快速拖到需要的地方。再次，这有助于压缩和客户端请求的更改。

如果您保留常用元素的Photoshop库：基于矢量的圆角输入框，网格，“徽标在此处”框...全部位于单个文件或多个文件层中（您可以选择）-您只需花费很少的时间即可构建主页和内部页面。

保持通用的CSS文件（具有流行的设置）在进行编码时也将有所帮助，但我看不出从工作流程中消除PS的价值-无论CSS变得多么强大。

— 道森
source

实际上，“仅花一小部分时间即可对它们进行编码”就取决于很多事情，包括设计者的技能。我发现直接在CSS / HTML / JS中进行客户端更改/调整通常比返回Photoshop更快。但这取决于很多因素。

— 2011年

DA01-绝对。随着项目的成熟，我的工作流程会发生变化。发射后，PSD不受影响。

— 道森

3

您是否可以保证100％的用户使用的浏览器能够完全按照您（或更重要的是客户）所希望的方式浏览您的网站？没有？那是什么百分比 90％？80％？

您是否可以确定它的降级效果很好，以便可以接受其余10％（20％？40％？）看到的替代版本？

如果这些问题中的一个或两个都是问题，则需要一些Photoshop。

— Lauren-Clear-Monica-Ipsum
source

抱歉; 这是为什么？你能解释你的意思吗？

— benteh

@boblet请具体说明您的问题。解释什么？

— Lauren-Clear-Monica-Ipsum

啊，对不起；我想知道为什么您说由于缺乏浏览器一致性而需要一些PS？不知何故对我来说毫无意义。

— benteh

@boblet我的意思是说，可以通过一些效果（例如圆角）在CSS或Photoshop中创建它。但是较旧的浏览器无法处理CSS圆角；它们像普通的盒子角一样出来。因此，如果圆角确实很重要，则必须使用Photoshop将其创建为图形，以便所有浏览器都可以看到。

— Lauren-Clear-Monica-Ipsum

啊哈！这更有意义。不过，我现在看到的是这是一个过时的帖子，如今，CSS的圆角，阴影等已不再是真正的问题。我只关心在PS中创建令人愉悦的模型，然后遇到将其转换为明智代码的问题。客户通常很难接受这一点。因为他们通常不了解需要缩小位图和代码之间差距的桥梁。感谢您的解释。

— benteh

2

要考虑的事情：

将那些精美的设计发布到网络上有很多事情要做。至少对于更复杂的。Photoshop帮助您更快地看到最终结果。
对于从事他的工作的设计师来说，在Photoshop中进行模型制作通常会更快，更合理，因为您不会花一整天时间来研究html和CSS3。
正如您所提到的，他们可以在CSS3中完成80％的工作，但是最终他们将需要Photoshop形式的一部分。
我会争辩说，如果您是设计师和开发人员，那么您将放弃在Photoshop中进行模型化，这样可以节省时间，否则始终在Photoshop中进行模型化。

— 01
source