响应式 Photoshop Web 模板不存在。通常，如果有人为响应式网站创建 Photoshop 模板，他们会基于CSS 媒体查询。如果您正在为每个媒体查询进行开发，如果您针对多达四种设备（移动设备、平板电脑、笔记本电脑、台式机，很快将成为 Mac 的 5k 的补充），这将是一场噩梦。

我建议基于媒体查询使用 Illustrator 画板制作模型/线框，并学习如何使用 Bootstrap 或 Foundation 来开发代码。有很多关于如何在 Bootstrap 中创建整页网站的教程和视频。根据您在问题中陈述的内容，您似乎正在 Photoshop 中设计和创建整个网站，然后将其发送以用代码编写。这是浪费时间。如果您要在网络市场中生存，您需要学习如何编码，并且应该在网站所在的环境中进行设计，那就是浏览器。

参考：

• 为什么使用 Photoshop 进行网页设计
• 设计网站的步骤是什么？
• HTML5 的 PSD 到 HTML 最佳实践是什么？

如果您要制作模板，请在 Illustrator 中制作并标记画板：

学习在 Illustrator 中使用字符和段落样式，然后您可以随时导航到Window -> CSS Properties样式并将其导出到 CSS 文档中：

简短的回答：没有 Photoshop 不能创建响应式模板。

长答案：要了解原因，您需要了解普通静态设计（就像您在 Photoshop 中所做的那样）与响应式设计所需的区别。

让我们以肖像格式 4✕6 拍摄某人的肖像。现在有人剪切了图像的上半部分，使其成为 4✕3（横向格式）。在物理绘画中，您显然会松开肖像的头部。在计算机上，您还可以做两件事，为您提供三个选项：

1. 裁剪它（与绘画一样，丢失部分图像）
2. 不成比例地缩放它（从而失去纵横比）
3. 按比例缩放（因此不满足整个图像的给定纵横比并在其周围创建边框（画布仍然存在））

除了改变实际图像之外，没有什么可以做的。虽然这听起来很明显且无法解决，但这正是响应式布局需要解决的问题：

设计一些东西，当你完成后，我会告诉你它应该是什么尺寸。

我实际上喜欢将响应式布局视为与分辨率无关的布局。将图像的大小和纵横比视为未知值。今天的用户拥有各种不同尺寸的设备（也可以转动/浏览器窗口可以调整大小），为最终输出尺寸提供了几乎无限的可能性。

传统绘画（或使用 Photoshop/Illustrator/InDesign 等创建的固定静态布局）无法解决此问题的原因是，它们不包含这些设计中的单个元素与图像大小的关系的信息。整个图像。

这是另一个示例：假设您有这个非常简单的图像：

现在，如果您保持此图像的高度但使其宽 10 倍，会发生什么情况。以下是可能发生的 6 种不同的事情：

1. 蓝色边框保持其宽度，改变红色区域的宽度和纵横比。
2. 蓝色边框和红色字段保持相对宽度，使两者都变宽并改变两者的纵横比
3. 红色区域保持其纵横比，使蓝色边框更宽
4. 最初的模式只是重复
5. 图像的其余部分只是充满了蓝色
6. 完全奇怪的东西

当从初始图像过渡到更广泛的版本时，所有这些都是合乎逻辑的变化。静态程序（如 Photoshop 或物理绘画）的问题在于：您无法从一张图像中分辨出不同尺寸的图像应该是什么样子，也无法指定它。

由于可以认为可能的屏幕尺寸几乎是无限的（不是真的，但仍然很多），仅提供两个或三个图像也不行。对于与您的三个设计不完全匹配的所有屏幕尺寸，仍然需要进行大量插值。

要创建响应式设计，您需要指定元素的大小是绝对的（例如 10px 宽）还是相对的（例如屏幕总宽度的 10%），或者最好是两者的混合（屏幕的 10% + 10px，但是最多500px或类似的东西）。所有普通的图形程序都以绝对值处理所有尺寸（像素、厘米、英寸等）。调整图像大小时，它们都被视为相对处理，没有区别（因为您无法指定。

与 Photostohp 不同，用于创建网站的技术（主要是 HTML、CSS、Javascript）允许您制定此类规范，从而允许设计响应。

对于作为设计师的你来说，这意味着：

1. 请注意您的设计（想法）与其需要转换为网站的媒介之间的差距。
2. 在您设计时，您不知道设计的最终输出大小
3. 请注意，您不仅需要选择正方形的颜色和大小，还需要选择它与图像大小的关系
4. 查看您的设计的大小会改变，因此您的设计必须以一种或另一种方式改变——问题只是：您会控制它如何改变还是只是随机的。
5. 甚至不要尝试做像素完美的布局

我诚实的建议是：至少学习 HTML、CSS 和 Javascript 的基本技能，并在以后查看它们的实际媒体中创建你的布局。在我看来，设计和技术之间的硬分离是站不住脚的。想象一个桌子设计师，他完全了解木材的结构和特性，并且从未在他的生活中做过木工。

如果这是不可能的，请尝试让您的布局的最终​​大小可以被视为未知的想法，并为您的程序员提供尽可能清晰的说明，无论您向他发送 HTML 模型还是几个带注释的 Photoshop/Illustrator /设计文件。

最重要的是：如果您想继续从事网页/屏幕设计业务，请注意响应式布局并不是一个很好的功能。他们将是要走的路。地球上没有办法，屏幕设计将回到您可以安全地假设每个人都使用相同的屏幕尺寸并且不会调整其浏览器窗口大小的状态。

您不能在 Photohop 中进行响应式设计。

您只能为两种（或更多）不同的屏幕尺寸设计两种（或更多）不同的布局。

问题是，除非您真的熟悉所使用的响应式框架，否则您更有可能设计一个编码噩梦，而不是一个易于构建的响应式布局。

理想情况下，我建议使用以下工作流程：

• 设计移动视图
• 让开发人员使用他们选择的框架进行工作
• 现在与他们一起为其他视口重排东西。
• 当您了解框架可以做什么和不能做什么时，您可能会为此跳回 Photoshop。

如果您真的熟悉该框架，那么这可以工作，但仍然很棘手。即使我是构建 HTML 的人，如果我不经常仔细考虑事情，我仍然可以将自己设计成一个角落。

通常，我使用 Illustrator 或 Sketch 进行响应式合成，但随着 Adob​​e CC 的最新更新，您可以考虑一些东西来让您的生活更轻松。如果您有 iPhone 或 iPad，这可能值得一试：

https://helpx.adobe.com/mobile-apps/how-to/app-prototyping-photoshop-preview.html

就个人而言，我使用 Android 设备，但我确实使用 CC。有许多不同的方法可以创建响应式组合。您可以使用 Illustrator、Photoshop、Sketch 以及任何您觉得舒服的工作方式。搜索 Dribbble 以获取免费的线框和响应式设备套件（矢量或 PSD） - 或在网络上搜索免费的线框套件。有大量的免费赠品可以帮助您朝着正确的方向前进！

添加到 Darth_Vader 所说的内容中，尝试将网格叠加层作为指南，并坚持少数布局。您最需要的可能是：台式机、平板电脑和手机。从那里，了解响应式设计的开发人员会明白这一点。

最后，请务必查看UXPin以获取他们的免费电子书。他们有很多关于设计 UI 和创建线框/模型的重要信息。