在本教程中，您创建了一个网站的网页将显示在每一个步骤。目的是给你一个最终的设计，你可以自豪的，很容易适应你自己的项目。设计是由很多元素，但给人一种干净简洁的感觉。部分之间的空间，给我们的空间来呼吸和吸引用户的注意页面的重要组成部分。
步骤
该计划
希望与所有的设计，我们需要一个计划。以上的设计开始，因为这：
为了实现这个设计，所有你需要的是笔和纸。这是每一个设计，你会做;开始与笔和纸，得到的总体布局和组织准备之前，你甚至打开电脑。这是为了避免你设计师块，当面对一个明亮的白色空的Photoshop画布。
创建一个新的文件和优化您的工作区
首先，提取到您选择的文件夹教程文件。
火起来的Photoshop。 火起来的Photoshop。然后让我们得到我们的画布，并准备开放。选择File> New，我们需要一个帆布1024px和高度1200px宽度。
组织您的工作区。这样，您就可以快速访问你最需要的工具和面板。
从菜单栏中选择窗口>工作区>纲要（默认）。 从菜单栏中选择窗口>工作区>纲要（默认）。
查看信息面板选择“窗口>信息。
隐藏调整面板，双击“调整”选项卡上。 隐藏调整面板，双击“调整”选项卡上。
开启电网。 开启电网。布局和间距的东西出来，以帮助我们，我们将使用Photoshop中，请给我们的电网。选择视图>显示>电网。
设置背景
颜色选择器可能是在Photoshop中最常用的工具之一。现在我们要选择我们的背景颜色填充背景层，使用油漆桶工具（G）。
从工具栏选择前景色，选择颜色＃73ACBF。
从工具栏选择油漆桶工具。 从工具栏选择油漆桶工具。颜色填充背景层。
自定义塑造
对于大多数在设计的部分，我们将使用自定义形状工具。在这种情况下，这将是你会发现工具栏上的矩形工具。如果你没有看到广场上，单击并按住自定义形状的图标，并从子菜单中选择矩形工具（U）的。让我们开始的标志区。
标志旗
首先，我们要提请顶部的横幅，我们的标志，站点名称，并呼吁采取行动按钮会坐下。对于这部分，我们将在“网格”，这些都是对电网的个别盒。
画在画布的中心，从左侧和右侧的顶部和3盒2盒一箱。
框应该是一个总高8盒。
重命名层“标志旗”。
确保您重新命名所有的新图层，添加你不`吨迷路。 确保您重新命名所有的新图层，添加你不`吨迷路。要重命名只需双击图层面板内的名称。
要精确的框应该是935px的宽度和高度113px。 要精确的框应该是935px的宽度和高度113px。按CTRL + T，这会给你自由变换工具和“信息”面板，你可以发现这一点。会告诉你准确的测量。方便！
标志
文件>打开>网络课程logo.png。
全选并复制。
按Ctrl + A - Ctrl + C。
粘贴在你的新设计。
CTRL + P。
调整的标志。
按Ctrl + T - 调整大小。
点击工具栏上的移动工具，移动到左上角的标志旗帜。
重命名图层“标志”。 重命名图层“标志”。
捆扎线
我们的时间使用文字工具添加我们网站的标题和表带行文本。
网站标题“网络课程的曼谷”。的大小，字体和颜色的使用以下设置：宋体，黑体，15pt，＃FFFFFF的
绳线“的专业网站和平面设计课程”。使用下列内容：宋体，常规，15pt，＃FFFFFF的
这是它看起来应该像什么。 这是它应该看起来像：
呼吁采取行动
我们呼吁行动上的标识顶部的横幅是一个按钮，显示下开课。我们的想法是让尽可能邀请按钮。
我们将一个按钮弯曲矩形，然后添加一个渐变，阴影和最后一些文字。这里的如何：
按钮机构
选择矩形工具，并添加3px半径。
设置＃80b80d颜色。
绘制一个矩形右侧宽度170px高度50像素。
梯度
右键单击按钮层和混合选项。
单击渐变叠加。
点击中心的梯度。
改变颜色＃7fba06＃3e9204。 改变颜色＃7fba06＃3e9204。
点击逆向复选框。
阴影
右键单击“按钮”层和goto混合选项。 右键单击“按钮”层和goto混合选项。
单击“阴影”。
设置不透明度为46％。
Disance，并蔓延到0。
设置大小16。
操作文本
选择文字工具。
添加文本“开课”。
世纪的哥特式，13pt，定期，＃FFFFFF的
添加文本“9月9日”。
世纪的哥特式，16点，定期，＃FFFFFF的
你的头应该是这个样子的。 你的头应该是这个样子的。
保持景点整洁
现在我们已经完成了一节，让组中的所有层。
选择第一层
按住Shift并单击最后一层（没有背景）。
按Ctrl + G组选定图层。
重命名该组的标志酒吧。 重命名该组的标志酒吧。
导航栏
现在是我们的导航栏的时间去准备。要做到这一点，我们将先绘制一个矩形，然后使用文本框工具空间，我们同样的文本。
画一个三箱深徽标横幅下面的白色矩形。 画一个三箱深徽标横幅下面的白色矩形。
使用文字工具单击并按住绘制一个盒子，里面的白框
每个单词之间的单个空格输入导航标题。
“主页课程预订教师资源库联系”
改变字体为宋体，常规，14pt，＃518e00。
按Ctrl + T显示段落窗格（或到“窗口”>款）。
点击窗格PARAGRPH。
改变文本的对齐方式，单击“对齐图标理由。
最后，我们需要添加一个小灰框背后的导航项目之一，以显示这是我们的页面上。 最后，我们需要添加一个小灰框背后的导航项目之一，以显示这是我们的页面上。
集团资产净值组成的导航层。
头节
现在我们已经创建了现在是时候开始的头节上的标志横幅和导航。我们将有三个主要的层，背景，图片和文字。
创建一个白色的盒子931px X 311px。 创建一个白色的盒子931px X 311px。
打开图片72497169.jpg。
复制并粘贴到您的设计。
确保新层以上的形状图层
图层>创建剪贴蒙版。
微调
我们需要调整我们的图片，并为我们准备添加淡入添加文本。淡出是通过添加剪贴蒙一个黑到白的渐变。黑颜色的图片中看到的通过。
调整图像的大小，所以你可以看到所有的芒身上。 调整图像的大小，所以你可以看到所有的芒身上。
选择渐变工具。
选择黑 - 白的渐变。
开始在图像边缘的梯度和移动itonto的形象，所以你得到的淡入淡出效果。 开始在图像边缘的梯度和移动itonto的形象，所以你得到的淡入淡出效果。
标题文本
我们要做到这一点看：
“超过100名学生”
宋体，36pt，粗体，颜色＃736831
已利用我们的专业服务和照顾。“
宋体，22pt，定期，颜色＃736831
我们提供教师带头Web和图形Designcourses在曼谷。课程教授英语合格和experiened的教官。
宋体，14pt，定期，颜色＃464646
增长你的想法与水利局线上！
宋体，14pt，定期，颜色＃464646
中段
在这里，我们可以使用一段时间的节能技术，创造一个部分，复制它，改变它一点点。这是用了很多，网页设计，当你有很多相似的元素。
使头下面的白色矩形。
297px由310px。
添加另一个顶端的矩形。
297px由40px，颜色＃3e3e3e。
添加文本标题文本“网页设计课程”。
宋体。24pt，定期，＃FFFFF（白色）。
文件>打开>图标网络站点design.gif。
复制并粘贴到您的设计，并在该中心的地方。
添加文本“的初级，中级班和高级班的专业网站设计。”
宋体，12pt，定期，＃877943。
你可以添加下划线和大胆使用“段落”窗格。
多打几个电话到行动
添加一个矩形。
右键单击图层>混合选项>渐变叠加。
新增梯度从＃50dc81＃00b544。 新增梯度从＃50dc81＃00b544。
支票背面
添加文本“按一下这里所有的细节：”
宋体，12pt，加粗，＃877943
重复呼叫行动
本节中的选择层。
集团其中“1”。 集团其中“1”。
右键单击第1组和重复层。
移动新的小组，在画布的中心。
改变“一到训练”的称号。
删除图标。
更改图标“图标一到one.gif”。
更改文字，“你有一个具体的东西，你想了解吗？关于个人的课程，请联系我们的今天。“
右键按一下按钮层和改变渐变＃e3c768＃bc9202
最后改变按钮上的文字“联系我们您的要求”。
重命名组“复制”，只是“2”。 重命名组“复制”，只是“2”。
一个呼叫行动框
右键单击第2组和重复层。
移动新的小组，在画布的中心。
改变“公司”两课“的称号。
删除图标和更改“图标corporate.gif”。
更改文字，“你有一个具体的东西，你想了解吗？关于个人的课程，请联系我们的今天。“
右键按一下按钮层和改变渐变＃50a6db＃0275bd
最后更改按钮上的文字“点击这里，了解如何”。
重命名为“3”集团“复制”。
1,2,3组到所谓的“中段”的主要组。 1,2,3组到所谓的“中段”的主要组。
太棒了！顶部和中间部分都做，只是一个部分，页脚。
页脚
页脚中起着重要的作用，因为它是我们要求用户签署的通讯，发现社会上的各种网络，我们发现我们的办公室在我们的网站。发挥我们的拼图的最后一块。
在设计宽度935px 240px颜色的底部做一个大矩形：＃2c2c2c。
新增三个头相等距离“通讯”，“社会网络”和“联系”。
宋体，12pt，加粗，＃969696
使用直线工具，创建三行的标题下，使用相同颜色的标题＃969696。
通讯
列第一的是通讯。这将是一个简单的表格，并要求用户提供自己的姓名和电子邮件地址。
新增的“电子邮件”文本宋体，12pt，定期，＃FFFFFF的。
添加一个矩形的宽度256px，高度22px和颜色＃b9b9b9。
新增“名称”和最后的矩形。
作为按钮图像button.gif的使用。
集团所有的层，并称之为“通讯”组。 集团所有的层，并称之为“通讯”组。
社会网络
创建相同的标题，并强调作为通讯。
新增的社交网络;文件>打开然后复制并粘贴到设计。 新增的社交网络;文件>打开然后复制并粘贴到设计。
图标，facebook.gif
图标，twitter.gif
图标，audioboo.gif
图标，linkedin.gif
联系
添加联系方式是文本，使用宋体，12pt，定期，＃FFFFFF的。
插入以下内容：
“电子邮件。carl@wyiyada.com这个E-mail地址已受到防止垃圾邮件机器人的保护，您必须启用浏览器的”
