如何开发网站的设计用Photoshop

在本教程中,您创建了一个网站的网页将显示在每一个步骤。目的是给你一个最终的设计,你可以自豪的,很容易适应你自己的项目。设计是由很多元素,但给人一种干净简洁的感觉。部分之间的空间,给我们的空间来呼吸和吸引用户的注意页面的重要组成部分。

步骤

该计划

希望与所有的设计,我们需要一个计划。以上的设计开始,因为这:

为了实现这个设计,所有你需要的是笔和纸。这是每一个设计,你会做;开始与笔和纸,得到的总体布局和组织准备之前,你甚至打开电脑。这是为了避免你设计师块,当面对一个明亮的白色空的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地址已受到防止垃圾邮件机器人的保护,您必须启用浏览器的”