在上一课中，我们将学习如何使用Photoshop从头开始布局和模拟网页设计。

如果有一个Photoshop课程需要视频组件，那就是这个。在本课中，我们将介绍如何使用形状和文本工具从头开始创建网站设计。这些概念没有一个能真正写出，所以这节课几乎没有附带的课文。在前面的课程中，您已经学习了大多数工具，因此本课程将向您展示如何使用这些工具创建站点。不过，还有一些新的问题需要讨论，下面将讨论这些问题。

如果你想跟随视频或者在Photoshop中看到最终产品的样子，你可以在这里下载网站设计文件和资源。这是一个很好的方式来探索和了解事情是如何运作的。这些文件是在Photoshop CS5中创建的，所以您需要它来查看它们。

使用辅助线

辅助线是Photoshop中的蓝色水平线和垂直线，可以帮助您对齐画布上的内容。您可以通过打开标尺（Mac上的Command+R或Windows上的Control+R），单击标尺，然后将该行向下拖动到页面上来创建它们。若要稍后调整创建的任何辅助线，请使用工具栏顶部的移动工具（键盘上的V）。

创建形状

我们之前已经研究过创建形状，但在这里您会发现形状对布局特别重要。因为它们是矢量图像（而不是光栅图像），所以可以在不进行像素化的情况下调整大小。当你在布置东西的时候，这真的很有帮助，但是你以后可能想做些改变。你几乎总是更好地保持一切在你的模型矢量为基础，除非它是不能矢量为基础的东西（如照片）。

组织

组织你的网站模型是非常非常重要的。您将发现自己创建了大量的层，因此您希望继续命名这些层并尽可能频繁地将它们分组在一起。在组织层上投入的精力越多，以后在设计中导航就越容易。这对以后可能获得您的设计的开发人员尤其有用。如果他们必须通过和寻找元素，你会使他们的生活更加困难。愤怒的开发人员是令人不快的（我曾经是其中之一，并与几个）。通过提供一个组织良好的文档，以良好的方式开始这种关系。这也是为了你自己，所以大家都赢了。

为web保存

不管你是不是开发人员，都有人需要为你的设计中使用的图片创建一个网络友好的版本。现在很多效果和样式都可以用CSS和JavaScript创建，所以你不需要担心太多的事情。例如，如果你有一个持久的logo，你就需要把它保存到web上。虽然有很多方法可以做到这一点，但最简单的方法是复制保存图形的图层，将其粘贴到新文档中，然后启动“保存为web”过程。您可以在“文件”菜单中找到“为Web设备保存…”。当你打开这个窗口时，你会看到一个新的大窗口，上面显示了你的图形在使用你提供的设置压缩后的样子。一般来说，“JPEG高”或“PNG 24”是好的选择，取决于图形。如果图形的颜色和色调非常简单，或者需要透明的背景，那么24位PNG文件就是您想要的格式。如果你有一个更复杂的图形，“JPEG高”通常是最好的设置。你可以在压缩量和其他设置上游手好闲，直到你得到你想要的，但是只要坚持这个预设，你就会得到足够好的服务。单击“保存”后，就可以命名文件了。您不必担心为web安全命名。Photoshop为您做的一件好事是在空格处添加连字符，这样在完成后就有了一个安全的文件名。

这就结束了我们的Photoshop系列的基础知识。明天我们将做一个小的回顾，然后提供一些额外的资源，但你都完成了你的课程恭喜！希望现在你可以开始使用Photoshop来改善你的照片，画一些很酷的图片，并**一个网站来展示你的作品。

你可以联系亚当·达奇斯，这篇文章的作者[email protected]. 你也可以在Twitter和Facebook上关注他。