第三章 ps网站首页设计详细教程 banner区域设计 一看就会

这里先讲解一下保存文件的方法，我们可以点击文件 -- 储存（快捷键ctrl+s）保存为psd格式就好；或者点击文件 -- 存储为（快捷键shift + ctrl +s ；这里的储存为可以在之前保存好的一样的文件情况下，再保存为相同的另外一个文件）；

可以用“存储为”保存格式为jpg或者png进行预览。还有一种简单的方法是直接使用快捷键ctrl + shift + alt + s保存为图片格式：

接下去接上一章继续设计网站界面：

我们先勾选自动选择，勾选之后，将“自动选择”后面的组改成图层，这样我们点击某个页面对象的时候，右侧图层就会相对应的进行选择，如图，我点击白色的矩形区域，右侧的图层便会自动选择到该图层。

改好之后，我们点击banner区域，选择到该图层，我们在网上找一张合心意的大图片，最好是大于等于1920px的，保存到本地之后，我们直接拖拽进ps里面，然后我们进行调整大小，这里要注意的是，我们调整大小的时候需要按住shift键，这样才能保证图片是按照原始比例缩小放大的，大小调整完之后，再松开shift键，调整好我们想呈现在页面上的内容区域之后，直接按Eenter键就可以了，然后我们会发现，图片的高度超出了我们之前所画的矩形，如图，红色框是我之前画的矩形大小。

莫慌张，我们不用去删除多余的部分，找到最右侧的图层，我们把鼠标移动到图片图层和banner矩形图层的中间，然后按住alt键，会出现一个折弯的下箭头，单击一下，图片就容纳到矩形里面了，超出矩形的区域就不显示了，按住alt键单击之后的样式如下。

图片嵌入好之后，我们还需对banner进行一系列的文字描述，不难发现，如果我们直接在banner上输入文字的话，文字并不明显，这时，我们需要一个蒙版遮一下图片亮度，我们可以直接用矩形工具进行绘画，也可以将banner矩形图层拖拉到最下方（倒数第二个小工具）复制一个，然后调整好图层顺序。banner亮度遮层我们将矩形颜色改成黑色（最黑色值#000000），将矩形的不透明度设置成60%。

然后我们就可以输入文字内容了，点击左侧工具栏T样式的文字工具，然后在页面上点击一下，就可直接输入文字了。

输入好自己想要的文字描述之后，我们对文字样式进行编辑，将文字大小改为56px；颜色改为白色；

可能大家页面上没有这个面板，我们可以单击窗口 -- 字符，面板就显示出来了。

文字设置好后，发现与页面并不居中，我们切换回选择工具，选中文字图层，然后按住shift键再点击banner，如图红色圈出位置，点击完成之后松开shift键。

然后用横向工具栏里的对齐按钮进行竖向居中按钮。

banner文字的样式可以根据自己的喜好进行调整，banner一般都会有三张切换，我们需要设计三个小按钮，代表这块区域是可以进行切换的。首先我们鼠标右击矩形工具，会弹出工具框，我们点击椭圆工具。

按住shift键，鼠标单击再进行拖拉，就能画出一个正圆，如果不按住shift，画出的便是椭圆，很难控制画出正圆，按住shift+alt键，再画出的正圆是以圆的中心点为定点，拖拉是以圆的半径放大缩小尺寸。我们画一个13px * 13px圆，填充色为白色，然后我们在最右侧的图层面板，选择该图层进行向下拖拉复制，我们切换回选择工具，并选中该图层，按shift + →进行10px移动，10px太多我们松开shift键，直接按→键进行1px移动，两个圆点距离为15px；距离banner底部20px，第三个圆点按照上述步骤操作。

拖拉进行复制

同样的问题，画好的内容跟页面不居中，一个图层我们可以根据上面的步骤操作，但是这里有三个图层，所以我们需要选中这三个图层，点击椭圆1图层，按住shift键，再点击椭圆3图层，这样三个图层就都选中了，然后我们按ctrl+g，给这个三个图层创建一个组，选中这个组，然后按住shift键，点击页面上的banner位置，上图红色圈出的位置，再进行竖向对齐即可。

因为不熟悉工具的使用，确实会感觉比较难，多用几次就顺手了。