教程：如何使用 Adobe Photoshop 布局网页

有各种各样的工具可以设计网页并以完全简单和功能化的方式工作，而无需输入或触摸代码。它们无数，由应用程序提出（Adobe Dreamweaver中 是一个示例），也可以直接通过在线平台（例如Wix）访问。但是，对于Web设计人员而言，了解手动过程至关重要。 HTML5和CSS是网站和登陆页面布局的基本支柱。

但是，比您预期的更多，您将不得不转向Indesign或 Adobe公司的Photoshop 来补充您的布局工作并为他们提供完美的外观。今天，我们将在这个详尽的教程中看到如何使用Adobe Photoshop布局网页。在第一部分中，我们将继续使用Photoshop进行开发，尽管在以后的文章中，我们将看到我们如何直接在HTML代码中直接应用这项工作以使其正常运行。

从设计线框开始

首先，从网页的布局和设计开始，非常重要的一点是，我们首先定义基本要素，即基本要素。此结构将作为保存所有内容（文本或多媒体）的支持。通过定义构成我们页面的每个部分，我们将能够完全准确地对其进行处理，并提供尽可能成功的可视化设计。

非常重要的一点是，如果网站具有 盒装或全角。装箱的网页将在一个小容器内，因此在其周围将出现一个空格。相反，完整的网络将占据用于复制页面的设备的整个屏幕。在一种模式或另一种模式之间进行选择仅会回答样式问题，这还取决于我们正在从事的项目的需求。在本示例中，我们将使用盒装模式，因此它不会占用浏览器提供的所有空间。

要创建线框，我们必须做的第一件事是进入Adobe Photoshop应用程序，并包含我们希望页面具有的尺寸。在此示例中，我们的页面将为1280像素宽。但是，大小问题可能会因最终目标或我们要在其上复制页面的设备而异。毫无疑问，要使网站设计具有功能性和高效性，必须做到响应并且必须适应市场上的所有设备。但是，在这种情况下，我们将努力创建要在台式计算机上复制的原型。即便如此，我们稍后将要处理的自适应问题现在还是在此示例中要处理的屏幕尺寸层次结构。请记住，在这种情况下，我们将在Adobe Photoshop中对目标页面进行布局，然后将其迁移到HTML5和CSS3。这种小练习的目的是将在Photoshop中创建的设计转换为可响应用户移动的可用且交互式的网页设计。

手机尺寸

iPhone 4和4S：320 x 480

iPhone 5和5S：320 x 568

iPhone 6：375 x 667

iPhone 6+：414 x 736

Nexus 4：384 x 598

Nexus 5：360 x 598

Galaxy S3，S4，S5：360 x 640

HTC One：360 x 640

平板电脑尺寸

iPad所有型号以及iPad Mini：1024 x 768

Galaxy Tab 2和3（7.0英寸）：600 x 1024

Galaxy Tab 2和3（10.1英寸）：800 x 1280

Nexus 7：603 x 966

Nexus 10：800 x 1280

Microsoft Surface W8 RT：768 x 1366

Microsoft Surface W8 Pro：720 x 1280

台式计算机的测量

小屏幕（例如用于上网本）：1024 x 600

中型萤幕：1280 x 720/1280 x 800

大屏幕：宽度大于1400像素，例如1400 x 900或1600 x 1200。

要开始在我们的网络模型中分配元素并分配节，非常重要的一点是我们要考虑比例以确保可读性和旋律效果。使用在顶部菜单“视图”中找到的规则和指南选项至关重要。为了按比例准确地工作，最好是从百分比开始。我们将单击视图菜单，然后单击«新指南»选项以选择部门的形式。在这种情况下，我们将在25％处进行四个垂直分割，并以它们为参考，以将我们的图像放置在页脚中，并将徽标的图像放置在页眉中。

有一个代码来指定将占用我们每个区域的代码模型以及他们每个人将拥有的功能。例如，为了指示图像将要占据的区域，我们将创建带有某种十字的矩形。为了表明我们要在特定区域添加视频，我们将在容器内添加播放符号。在第一个示例中，我们仅处理图像，在上方的截图中，您可以看到标识从我们的网站。

这将是我们的最终结果线框。如我们所见，它被分为一个标题，该标题由图像组成，在该图像中将找到徽标，并且将用作首页的链接，并带有两个选项卡，一个搜索引擎和搜索框上的四个按钮。此外，我们已经在正文中添加了一个侧边栏，该侧边栏由分隔条和一系列类别组成，这些类别对将在我们网站上显示的内容类型进行分类。带有编号的另一部分包括将在我们的网站上存在的条目，最后是带有我们网站上最具代表性的元标记或标签的列表。

在内容区域中，将由包含以下内容的部分定义 自我管理的内容，我们将找到文章的内容。在这种情况下，面包屑或面包屑（表示我们网站的有机结构，文章的标题，元数据，作为文本主体的段落，其中包含图像）。

作为页脚，我们包含了四个图像，这些图像将用作页面其他区域的链接。在这里，我们可以包括徽标或其他有趣的部分。尽管实际上，该区域将更像 前页脚，因为页脚本身将在使用政策，法律声明和版权方面走得更远。

定义页面的基本结构或框架后，我们将进入下一个级别。这将包括我们网站每个区域的实际设计。换句话说，我们将开始使用最终将插入到我们网站中的内容来“填充”每个区域。建议不要在设计线框之前就开始设计这些元素，因为很有可能如果我们按此顺序进行操作，以后我们将需要修改它们的比例。 我们冒着扭曲图像的风险 并且必须重新设计每个元素的设计，这将浪费时间或降低质量。

在这种情况下，我们网站的设计将非常简单。我们将使用 材料设计规范，因为我们将使用Google徽标来举例说明这种做法。我必须澄清，本教程的目的是说明技术知识，因此在这种情况下，美学效果是无关紧要的。如您所见，我们已经逐渐用我们先前在方案中确定的所有区域填充了空间。但是，我们在最后一分钟做了一些小的修改。您可能已经注意到，我们已经大大减小了徽标的大小，并且在下部标题区域中包含了一条分隔线，该分隔线与上部菜单完美连接。在这种情况下，我们使用了资源库中的按钮和材料。作为设计师，我们可以自己设计（特别是如果我们希望它呈现出与品牌形象或徽标呈现出的滋补品非常相似的滋补品，则建议使用此选项）。

重要的是，我们要牢记要为这个示例进行布局，我们将在两个不同的层次上进行工作。一方面，我们将处理对象，另一方面，将对网站的外观进行处理。也就是说，一方面是我们网站的框架，另一方面是 该骨架将支持的浮动元素。您会注意到有些区域根本不会浮动，例如我们的侧边栏将占据的区域，前页脚或将页眉与正文分开的分隔条。

结构1、2、3和4将成为该结构的一部分背景，因此实际上我们没有必要从Adobe Photoshop中导出这样的内容，尽管我们可以做到，但没有必要。到那个时刻 平面颜色 （平面设计和材料设计的基本功能之一，可以使用CSS样式表通过代码完美地应用它们）。但是，必须保存其余元素，以便以后插入我们的HTML代码中。在这个小图中，我们还复制了属于页面背景的区域，以便我们对网站的最终外观有一个清晰的了解。

正如您将认识到的那样，在Adobe Photoshop中创建此方案的目的是获得每个元素的实际尺寸，并弄清每个元素的排列和结构。当然，文本内容在该过程的这个阶段没有位置，因为它必须 由我们的代码编辑器提供。我们还必须指出，在这种实践中，我们将使用按钮和静态元素，尽管通常它们通常是从Bootstrap等框架或直接从Jquery应用的。

一旦创建了构成网页的每个元素，就可以开始导出它们并将其保存在HTML项目文件夹中的images文件夹中了。习惯于从线框中导出非常重要，因为很有可能需要根据骨架配置修改一些原始元素。（例如，在这种情况下，我们更改了原始按钮，徽标和组成内容的大部分元素（包括下部区域中的图像）的大小）。

重要的是，我们学会独立存储任何项目，以精确地保存它们的尺寸。任何错误（无论多么微小）都会影响网页中的所有元素。请记住，它们将彼此相关并且必须具有完美的尺寸，以便可以在最终Web中从HTML输入它们。在这种情况下，我们将需要独立剪切并保存以下元素：

我们的徽标。
所有按钮（那些是主菜单的一部分，其余部分）。
所有图像。

我们可以通过多种方式做到这一点，也许您会找到对您更有效的替代方法。但是，如果这是您第一次进行这种布局，则建议您遵循以下提示。

首先，必须转到包含我们线框的PSD文件所在的文件夹，并将其复制与要导出的元素一样多的次数。在这种情况下，我们已经从原始文档中创建了12个副本，并将它们保存在同一文件夹中。接下来，您将重命名每个副本，并为每个副本分配其包含的元素的名称。我们的12个副本将被重命名：徽标，菜单按钮1，菜单按钮2，搜索栏，上按钮1，上按钮2，上按钮3和上按钮4。其余四个将重命名为：图像1，图像2，图3和图4。
完成此操作后，我们将打开带有徽标名称的文件。
我们将转到图层面板并找到包含徽标的图层。然后我们按 Ctrl / Cmd 当我们点击该图层的缩略图时这样，徽标将被自动选择。
下一步将告诉Photoshop，我们希望它以精确的方式裁剪出该徽标。为此，我们仅需通过键或命令调用裁剪工具 C.
完成此操作后，我们将单击“输入”按钮以确认切割。
现在，我们将转到顶部的“文件”菜单，单击“保存方式”。我们将选择名称，在本例中为“ Logo”，并将为其分配格式。 PNG，因为它是网络上提供最高质量的文件。
我们将对所有副本和元素重复此过程。修剪后，请确保调色板中的其余各层无形或被淘汰。这样，我们可以使用透明背景保存每个元素。