#004 – Photoshop 画布

从上一个视频中，我们知道在开始设计这个网站时，我们需要考虑五个主要方面。在前进的过程中，我们要始终牢记这些方面。

当然，我们首先要从“移动优先”开始，并使用 Photoshop 来确定设计。我们不会在那里停留太久，但 Photoshop 的创意工具非常适合在设计项目开始时进行创意思考。

我们打开 Mac 上 XCode 免费提供的 iOS 模拟器。它用于在台式机/笔记本电脑上测试 Web 和原生应用程序。我们只需要快速使用它，以便可以截取它的屏幕截图，以便在 Photoshop 中为我们提供一个上下文画布。

需要说明的是，我们并不是首先从“iPhone”开始，它只是一个方便我们设计的小屏幕。我们不会设计任何过度特定于 iPhone 大小或功能的东西。

为了给自己一个更高的画布来工作（无需将网站限制在“折叠”之上），我们切掉了手机的底部并将其拖到更低的位置。然后，我们取下 iPhone 边缘的一小部分并将其向下拖动，因此本质上我们拥有这个超高（但完整的）iPhone。

我们在原始屏幕结束的位置留下了指导，以提醒我们它有多大。是的，每个人都会滚动。尤其是在移动设备上。但是，了解第一个屏幕的样子仍然很好。