使用辅助工具划分出网站的布局

上节中，我们参考了一些常见网站的布局，并且也在纸上把我们要做的网站布局画了出来，那这节课中，我们就开始把在纸上画出来的布局放进photoshop软件中去。

我们现在打开photoshop软件，还记得我们在1.1中就介绍过如何创建画布，我们现在又需要来新建一个画布。

我们打开ps新建一个的画布：“文件→新建”，按照我们上节中定下的标准，我们把宽度设置为1920像素 ，高度设置暂且先设为为1080像素。

红框所标注的分辨率为什么设置为72我们在第一章制作logo的那一节里面也有讲过，分辨率设置为72已经可以满足我们日常的设计需求了。分辨率越高，文件则也会越大。

那么颜色模式为什么选择RGB呢，RGB是一种加色混合模式，它通过红、绿、蓝3种原色光混合的方式来显示颜色。而计算机显示器、扫描仪、数码相机、电视、幻灯片、网络和多媒体等大多都采用这种模式。在PS中除非有特殊的要求而采用特定的颜色模式，我们一般都采用RGB模式。在这种模式下我们可以使用PS的所有工具和命令，而其他模式下则会受到限制。

创建好画布后，展现在我们面前的就是一张空荡荡的白纸，你试想一下如果在现实世界中，你要在一张白纸上作图，绘图，是否需要尺子来辅助绘图。一个儿童在练习书法的时候，常常会在“田字格”“米字格”中进行练习，无论是尺子，田字格，这些其实都属于“辅助工具”。

那同样，我们在photoshop的画布上比较精准的编辑、绘制图像时，我们也需要辅助工具。在photo shop中常见的辅助工具有例如：标尺，参考线，网格，注释工具等。

这些辅助工具不能用来编辑图像，但却可以帮助我们更好的完成选择，定位图像。我们今天要用到的辅助工具有：标尺,参考线。这也是photo shop中最常用且重要的辅助工具。

学习使用标尺工具

“标尺工具”是Photoshop中的重要工具之一，标尺可以帮助用户确定图像或元素的位置：

我们想要在PS里画参考线则先需要先打开PS标尺；

使用快捷键【Ctrl】+【R】或 菜单栏“视图→标尺”，打开PS标尺，这时候就会在PS软件里出现标尺状态画布，反之取消标尺的显示也是通过同样的方法。

当你看到你的软件界面中出现了上图中两个红色框选中的尺型界面以后，说明你已经打开了标尺工具。

修改标尺的单位

PS的标尺单位有很多种，例如像素、英寸、厘米等，我们可以根据自己的需要修改标尺的单位。

“首选项→性能→单位与标尺”，找到 “单位与标尺”修改单位，我们可选择常用的标尺单位：像素，确定即可。

使用参考线

标尺工具出来以后，我们就可以使用参考线工具，参考线只是用于我们绘图中参考的标记，不会对图片有真正的修改。

我们可以尝试一下从标尺上随意拖出参考线，将光标放在横标尺或竖标尺处，单击并向下拖动鼠标便可以拖出参考线。创建或是移动参考线时如果按住Shift键，可以使参考线与标尺上的刻度对齐。

在拖动过程中按Alt键可以临时切换横竖参考线，如下图所示例淡蓝色的线条即为参考线。

当我们需要锁定特定参考线的位置，以防止其不小心移动时，可执行“视图→锁定参考线”操作。同理，取消锁定只需要将命令前的勾选去掉即可。

修改参考线的颜色

讲到这里，或许有的近视的同学会觉得参考线的颜色太淡了不清楚，因为我本身就有些近视，为了让参考线更清楚地显示，我们可以将参考线颜色修改掉。PS里的每个工具都是比较灵活的，都有待我们去挖掘。

选择移动工具，鼠标移到标尺上方出现双向箭头时双击参考线。这时候会出来一个设置框，我们就可以将参考线的颜色改成洋红或者自己看着方便的颜色。

使用智能参考线

智能参考线是一种智能化的参考线，它只在需要的时候出现，提示我们的操作。如我们在使用移动工具进行移动操作时，可以通过智能参考线对齐形状、切片和选区。

打开“视图→显示”，在弹出的子菜单中点击“智能参考线”命令，即可启用智能参考线。同理，关闭智能参考线只需在“视图→显示”，去掉“智能参考线”前面的小勾即可关闭。

下图所示即为移动矩形对象时显示的智能参考线：

创建精准参考线

我们在拖出参考线时往往后面会出现一串单位数字，那是我们的拖拽距离。假如我们需要拖拽一个从画布左侧64px的边距时，你会发现拖拽的时候总是有小数点显示，很难一下拖拽到我们想要到距离。

那么下面关于如何快速拖出精准距离的参考线我教大家一个技巧：

讲之前我们需要先清理下刚刚画布上所有练习的参考线，将鼠标放在参考线上，光标会变成双向箭头，按住鼠标将参考线拖到标尺区域内即可将其删除。

这样操作处理一两条参考线还行，多了的话就比较浪费时间了。我还有一个快速去掉画布所有参考线的办法：“视图→清除参考线”

完成这个操作后我们的PS画布上所有的参考线都没有了，不得不说Adobe公司在设计软件的时候考虑地很全面，我们做任何事情也是要全面考虑问题。

画布清理干净后，点击 “视图→新建参考线”，“取向”选项中选择“创建水平参考线”，“位置”选项中输入80像素，最后点击确定即可。此外，当你执行上面的操作时，“取向”可根据你的需求来设置，“位置”选项中的单位与当前的标尺单位一致，如果想要修改则需要手动输入其他标尺中的单位。

这样我们header区域的参考线就划分出来了。大家现在可以在PS里操作感觉下，你不跟着实践操作而只是靠文字理解会出现很多理解上的偏差。

快速划分网站区域

学习了如何添加精准参考线并划分出header区域后，举一反一，我们利用这个技巧分别划分出body主区域和footer页尾区域。主区域的宽度1300px，高度暂定为790px，左右两边空白区宽度都为310px，页尾宽度和header一样为1920px，高度暂定为150px。

现在不要纠结高度，因为制作内容的时候肯定还要调整，我们这边一步是只为了快速划分网站区域。

首先划分中间主要区域：

“视图→新建参考线”，“取向”选项中选择创建垂直参考线，“位置”选项中输入310像素，创建出了主区左侧的参考线。

相同的，“视图→新建参考线”，“取向”选项中选择创建垂直参考线，“位置”选项中输入1610像素（左侧310px+主区域1300px），创建出了主区右侧的参考线，如下图所示：

接着划分页尾区域，“视图→新建参考线”，“取向”选项中选择创建水平参考线，“位置”选项中输入870px（header区域80px+主区790px），创建出了页尾footer区域的参考线，如下图所示：

这样，我们就借助参考线划分出我们网站整体的区域布局了。

知识点总结：

这节课我们学习了PS中参考线的相关知识，并且利用参考线划分并构建了网站的基本框架。那么下面的课程我们会一步步为网站增加工具，丰富网站的功能。第一次的实践课程大家一定要跟着教程做起来，在做的时候可能还会遇到一些其它问题，多做多实践自然就懂了。