从头开始设计网站– Illustrator还是Photoshop？

11

如果我是从头开始设计网站，并且打算稍后对其进行切片并在Adobe Dreamweaver中进行编码，那么是否应该在Illustrator或Photoshop中创建网站的设计？为什么？

— 联合会
source

1

我建议使用Photoshop以获得更广泛的用途和更多的教程。

— Jichao

6

首先，您不应该使用旧的“切片图像”方法来设计网站。理想情况下，您将开始使用HTML / CSS并使用图像应用程序。

— 2011年

@Jichao：您的评论应该变成答案。

— 菲利普·里根

2

@ DA01“不应该”对于这样的主观问题可能太必要了。没有适合所有人的最佳实践。

— 贾里·凯纳嫩（JariKeinänen）2011年

2

@koiyu非常正确。就是说，如今，切片正切骰子已不再是最佳实践。我会详细说明。

— 2011年

26

快速的字面答案：在Illustrator和Photoshop之间，PhotoShop和它的网站一样，都是栅格。

稍微详细一点的答案：您会同时使用两者。

替代答案：考虑使用Adobe Fireworks。一旦掌握了Fireworks来制作Web图形，Fireworks就变得非常容易使用。

长时间无聊的演讲答案：

“ Slice-n-Dice”方法有点陈旧。它在十年前很流行，但是如今，它实际上并不是推荐的方法。我建议：

使用任何应用程序（AI / PSD）来“素描”网站。随意进行高保真处理，但仅将其视为模型。
一旦建立，就开始构建站点。深入了解HTML / CSS / JS。
根据需要，跳入PhotoShop以创建所需的单个图形元素。

为什么？嗯，在photoshop中进行设计并不能说明您使用的媒体。它是固定的画布，网络不是固定的画布，甚至不是标准的画布。它使团队朝着像素完美的想法发展，而网络根本不是像素完美的。

— DA01
source

也许，我们可以固定画布的宽度，因为有很多著名的固定宽度网站。欲了解更多信息，请参阅960.gs。

— Jichao

那会让你半途而废。对于某些屏幕。

— 2011年

那应该是个问题。但是，我没有大型LCD，因此没有机会进行测试。

— Jichao

1

抱歉，如果我很钝。我的意思是，有很多更给它没有比它是否是一个固定宽度的网站...内容，移动设备，辅助技术，搜索引擎优化，浏览器的差异等固定帆布

— DA01

2

+1可在您的答案中推荐Fireworks。一个非常低调但功能强大的Web设计应用程序。

— Dwayne Charrington

7

使用Fireworks或Illustrator创建徽标和图标。对于照片编辑，请使用Photoshop。对于其他所有事情，它都无关紧要。我知道关于使用哪种图形软件一直存在争论，但这实际上是个人喜好。

但是，请记住：

不过，Fireworks更适合PNG压缩。文件大小通常比Photoshop小20％-30％。
如果您知道将来会为网站设计其他非Web内容（T恤，海报，传单等），则最好从基于矢量的程序开始。

— 斤
source

实际上，对于“如果您知道这条路...”，您可以+1，我认为最好以其他格式需要关键的视觉元素来工作。客户几乎永远都不会知道自己想要使用什么东西，直到他们看到它，再也不会理解使RGB Web图像用于打印工作并不像他们期望的那么容易。。。偶尔出现“看起来很棒，您能采用这种风格并将其应用于我们在下周二为大型会议打印的这些A0墙海报吗？这很容易做到，对吧？”

— user56reinstatemonica8'4

关于有效的图像压缩，我不依赖任何Adobe应用程序。试试Mac应用程序之类的ImageOptim。还有其他本地和基于Web的解决方案。在某些情况下，您将获得更小的图形。

— 便衣

6

我不同意DA01。

Web文档不是静态图像这一事实与图形编辑器用于布局和设计网站的有用性无关。您的设计模型不需要（也不应该）成为网站的工作原型。设计模型是一个文档，可以帮助您可视化和雕刻网站的美观设计。

仅仅因为一张纸或白板不具备Web文档的所有即时质量，并不意味着它不能用于对网站进行线框构建。同样，可以扩展浏览器窗口并调整其大小的事实与设计模型的价值无关。任何有经验的Web设计人员都会知道将布局的某些部分规划为弹性的，并说明了Web技术的局限性。布局的所有视觉元素仍然可以在平面图像中表示（毕竟这是在屏幕上呈现的方式）。

其次，零星的设计方法不利于质量结果。您正在设计一个Web布局，而不是一百个孤立的小部件。如果没有完整布局的模型，那么您基本上只是在打招呼，而对最终结果应该是什么样子一无所知。逐步添加单个图形元素而没有完整构成的概述与良好的设计习惯背道而驰。当您要删除的东西用完时，而不是当您要添加的东西用完时，设计就完成了。

最后，在代码中进行设计更改所需的时间要比调整模型图像所需的时间长得多。这就是为什么在提交代码之前应该始终在模型中计划设计的原因。是否使用矢量图形程序（如Fireworks或Illustrator）或光栅程序（如Photoshop）由您决定。但是，在开始编码之前，应始终在图形编辑器中完善设计。

— 黄
source

2

我认为我们没有意见分歧。基于“经验丰富的网页设计师”变量，我完全同意您的看法。问题是负责PSD样机的人员通常没有 Web设计师的经验，随着项目的进行，这会引起各种麻烦。至于“完整布局的模型”，我也同意。不过，我不会说这应该始终是或始终需要是高保真PSD文件。线框通常就足够了。

— 2011年

3

不过，我不同意你的最后一段。您需要使用代码来全面设计用户体验。而且，这通常是设计过程的关键部分，实际上很容易在适当的环境中进行更改（敏捷是一个很好的起点）。

— 2011年

我会坚持你的两个意见，而且可能还取决于项目。我可以理解这两点，但是如果我首先在PS中设计整个页面，我不得不说我经常不够耐心或感到迷失在细节上。另外，CSS中的设计看起来与PS不同。此外，我发现如果您习惯于编码，至少对我而言，它比在PS中更改它要快。最后但并非最不重要的一点是，事情可能会发生变化（即使在仔细计划了每个细节之后），并且在编码时，我仍然经常会遇到设计方面的挑战（例如CSS等），而我不得不做出改变-在PS中很少见。。

— 克里斯-

1

这是一篇很好的帖子，以有趣的方式对此进行了解释：) http://www.gomediazine.com/tutorials/photoshop-vs-illustrator-part-1/

这是来自非常可靠的来源“ http://99designs.com/help/whats-the-difference-between-photoshop-and-illustrator”的更好解释。

“最终，比赛的使用者应决定使用哪种工具，但是一般来说，Illustrator用于徽标和印刷作品，而Photoshop应该用于网页设计和仅在计算机上可以看到的任何设计屏幕。”

— Ved
source

4

99designs并不是任何东西的可靠来源。

— 2011年

您有什么特别的理由要说吗？只是为了澄清起见，我不与他们合作或以任何方式绑定他们，但是在过去，我发现他们的文章和博客非常有用。他们也被许多大型媒体所认可，例如msnbc，纽约时报等等。所以我在这里错过了什么吗？请分享。

— Ved

2

而只是为了证明我的观点堆栈溢出流标志被设计在99设计99designs.com/users/245023

— 维德

2

@ DA01：请始终解释为什么有些东西不可靠，否则您的评论中没有任何建设性的内容。

— 2011年

1

通过众包进行的设计竞赛对我来说从来没有好处，并且不应由专业设计师来推动。（另外，在我的国家/地区这是非法的：D）

— Shikiryu 2011年

1

如果需要“切片”，则可以直接使用Photoshop，而无需访问Dreamweaver。

通过选择所需的图形部分并将其保存在网络上，photoshop中有2种自动和手动切片的方式，一次可以一次。

每当您通过生成HTML进行“自动切片”时，您都决定失去对代码的控制。在您的职业生涯开始时，您可以学习，但是会到达一个必须知道代码的地步，因为为了进行优化，最好使用高级文本编辑器（例如，Ultraedit软件）进行手动代码编写自己的HTML和CSS。

我发现自动切片更有用的唯一时刻是在设计电子邮件时必须生成表代码。

— 小疯子
source

0

Photoshop以准备好图像。即是关于网站的内容。客户没有为您的投资组合增加付费。吉隆坡

— 肯·拉克斯
source

2

欢迎使用GD。我想我了解您的意思，但是请您能对此有所补充吗？

— Farray 2012年

0

很明显，您应该使用photoshop进行全面的Web设计样机。

与photoshop设计相比，Illustrator设计的处理速度往往仍然较慢。

如果要设计图标和Web元素，建议您在illustrator中进行设计，然后将这些元素放入Photoshop。

如果您在photoshop中创建模型，则可以轻松地将这些文档传输到Fireworks以进行快速原型制作。

— 火星人
source

-1

Photoshop会更好。这将帮助用户切分。

— 拉希鲁（Lahiru Chathuranga）
source

4

这个答案有点短。您能解释一下您的意思吗？

— Mensch 2013年

2

谁切片了？

— 斯科特，