加载的结果……
教程预览
您可以点击下面的图片查看最终结果是全尺寸的。
教程资源
| 下载链接 | 类型 | 作者 |
| 960网格系统 | PSD | 内森•史密斯 |
| 源代码Sans Pro | 字体 | 保罗·d·亨特 |
| 印象派的图标 | 图标 | Designmodo |
| 尼维斯 | 字体 | 十乘二十 |
| 贝巴莱 | 字体 | 法的类型 |
步骤1:基本的Photoshop文档设置
对于这个登陆页，我们将依靠网格系统。我们可以使用流行的960网格系统。
这将帮助我们更容易地对齐网页设计的元素。
从项目官网下载960 Grid System ZIP文件，提取其内容，然后打开12列的Photoshop PSD文件。文件命名为960 _grid_12_col.psd。文件位于模板\ ps文件夹中。
让我们修改PSD画布的宽度和高度，这样我们就有更多的空间来工作。点击图像>画布大小，设置Width来1200px和H八个来1330 px。
离开了245 px从布局的顶部为我们的主标题图像。
使变成灰色# f0f0f0)到版面的剩余空间。
你可以用很多方法来做到这一点。我的方法是使用矩形工具。从工具面板中选择矩形工具。
在选项栏中，确保形状图层选项，并设置颜色选择所需的颜色:# f0f0f0．画一个矩形，覆盖整个画布除了顶部245px的画布。将图层重命名如下“基地”。
步骤2:标题图像
找到任何大的照片，你想用作为背景的标题，我们的登陆页。确保你选择的照片至少是1200 px宽,245 px高。也许你能找到一张免费库存照片网站。将图像放置在画布的顶部。
我们要把照片弄得模糊一些。
有几种方法可以做到这一点，但我们将坚持使用最简单的方法:Go to过滤器>模糊>高斯滤波器。设置半径选项4.0 px．
步骤3:顶部导航栏
使用矩形工具(M)在画布的最顶部边缘创建一个水平矩形条20.px在高度上，它横跨整个画布的宽度。
给图层命名为不透明度的25%这就是我们如何在顶部实现半透明条的方法。
切换到水平文字工具。
我们将使用源代码Sans Pro字体，可以在谷歌网页字体免费下载。
在选项栏中，你可以设置你的水平文字工具，这样:
- 字体：源代码Sans Pro
- 字体样式：大胆的
- 字体大小：16 px
- 文本颜色:# aed572(绿色)
使用水平文字工具写下电话号码和虚构的电子邮件地址，或任何您想要使用的文本。
我也将使用一些漂亮的图标，我从印象派UI图标集。您可能也更喜欢使用免费图标集所以去做你想做的吧。
我将图标的颜色设置为白色，# ffffff。
在文本和图标正确排列后，应用下降影子图层效果。
以下是我们目前工作的预览:
第四步:丝带形状的标志
打开960网格系统PSD文件中的ps参考线查看>显示>指南．这些参考线将帮助我们对齐画布上的东西，包括我们将在这一步中制作的绿色带状徽标。
为了创建一个类似的形状，你可以在你的画布上放置额外的参考线，然后使用钢笔工具(P)沿着参考线来实现这个形状。
给这个形状一个浅绿色(#79b02f)。
我们将样式我们的丝带形状的标志基础一点。我们用a来做图层样式- Photoshop中最强大和最受欢迎的功能之一。
首先添加一盏灯内阴影图层效果不透明度设定在35%。
我们还将添加一些深度的标志基础，通过应用一个斜面和浮雕层的效果。设置不透明度选项0%为突出显示模式选项(因为我们不需要高亮效果)并设置不透明度的选项阴影模式选项15％．
我们还会添加软的渐变叠加图层效果的形状。
我喜欢如何设置混合模式来柔和的灯光使用不透明度约50%寻找这个特殊的形状。
然后我们将使用图案叠加图层效果应用一个有趣的图案，以标志基础。我找到并安装了一个Photoshop图案用于我们的标志(阅读Design instruction的Photoshop)模式:终极指南(了解更多关于Photoshop图案)，但选择任何你喜欢的图案，只要它有一个有趣的形状，它是微妙的。
你可以在这个网站上找到很多免费的Photoshop图案:
我设置了不透明度选择权图案叠加图层效果为5%．
现在用水平文字工具在logo的顶部输入一些文字。我用了免费的尼维斯字体和字体样式设置为大胆的和字体大小设置为36个像素写下两个字母-“糖尿病”．
之后，我给文字图层a阴影层的效果。
步骤5:标题中的标题
我用的是Source Sans Pro字体字体样式设置为大胆的写头条新闻。
更大的标题使用24 pt字体大小大标题下面的小标题在18pt字体大小．
我给标题打了个a阴影层的效果。
第六步:圆圈图形
让我们创建位于标题下方的圆圈图形。它由两个相同大小的圆和一个较大的圆组成，它们都由一条5px线连接起来。
用椭圆工具创建圆，然后用直线工具重量选项设置为5 px来创建穿过它们的5px线。
使用贝巴莱字体，我放了一些随机文本，并在每个圆圈的中心。将中间圆圈的字体大小增加约+ 10 pt。
步骤7:主要的号召行动按钮
在我们的圆圈图形下，我们将创建一个行动呼吁网页按钮。
首先，使用圆角矩形工具创建号召按钮的形状。
在选项栏中，确保形状图层选项，则半径选项设置为3 px和颜色选项设置为浅绿色，# 96 c64f．
然后画一个大约的形状7px宽,35像素高。
给这个形状一个阴影层的效果。
也给形状一个内阴影层的效果。设置距离选项1px和不透明度选项30%。
添加斜面和浮雕动作召唤按钮的图层效果。它应该几乎不可见，以免过度使用这种流行的设计效果。
然而，我真的喜欢给网页按钮添加一些深度斜面和浮雕对这个有好处。要使效果几乎不可见和微妙，设置不透明度为突出显示模式选项0%然后设置不透明度为阴影模式选项7%。
让我们给按钮添加一个渐变叠加图层效果。设置混合模式来柔和的灯光和不透明度来60%。
接下来，让我们给按钮一个噪点纹理。
有各种各样的技术可以做到这一点，但我将坚持一个超级容易做到的:创建一个自定义的Photoshop模式。我在下面概述了这个过程:
- 新建一个Photoshop文档(任意大小)
- 创建一个新图层，删除默认的背景图层
- 去选择>全部(这将在画布周围放置一个选框)来选择整个画布
- 选择编辑>填充填充图层
- 取消选择您的选择，请转到选择>取消选择
- 在图层上添加一个非常明显的噪点滤镜，操作如下过滤器>杂色>添加杂色
- 再次选择整个画布(选择>全部）
- 去编辑> Define模式保存你的模式
现在您已经创建了一个自定义的Photoshop图案。
接下来，回到你的主Photoshop文档，给网页按钮一个图案叠加使用你刚刚创建的自定义Photoshop图案的图层效果。
让我们给这个web按钮一个中风层的效果。我们把它描成深绿色。由于背景的影响，我们的按钮周围的笔画的上半部分几乎是不可见的，但是你可以在中间和下半部分发现微妙的笔画。
现在我们将创建一个小形状，它将作为图标和按钮文本之间的分隔符。
要创建它，使用直线工具创建一条垂直线，约为10px在高度。应用梯度覆盖垂直线上的图层效果。
使用与标题文本相同的字体(尼维斯)在网页按钮上键入一些文本。我只是写下了这个短语，现在就下载。
将文本设置为深绿色(# 4 d7500)，并申请阴影的效果阴影的颜色设置为白色(# ffffff)及O使用在30%。
步骤8:云图标(用于主要的号召按钮)
好了，现在我们要创建一个云图标。
如果您想使用图标集中的预制图标，则可以跳过此步骤。
创建一个云图标相对容易，我们现在就这样做。
首先，使用椭圆工具创建4到5个圆。当你画圆圈的时候按住Shift键，这样你最终只得到一个形状和一个图层，而不是4到5个形状在4到5个图层中分开。
现在，设置填满选项的云图标层0%-你可以在图层面板中这样做。
之后，给图层命名为a中风图层效果:给云图标一个2px的深绿色描边。
步骤9:丝带形状旁边的主要呼吁行动按钮
遵循同样的技术，我们用来创建标志的基础，创建一个浅绿色的形状，并把它放在我们的按钮后面。
减少不透明度选择浅绿色的形状，使一些背景照片显示出来。
在上面键入一些文本。我输入“100%的自由”。
步骤10:“特色”部分
让我们来做“特色”部分。
用矩形工具创建一个矩形，宽度为220px和214px高度。
在矩形的底部，我还将添加一个绿色矩形(# 91 c04c)，高度约为5像素。
使用任何图标包中的一个图标，并将其放置在矩形形状的顶部中心。
使用水平文字工具(T)和Source Sans Pro字体给我们的标题一个深灰色(# 262626)和浅灰色的文字(# 9 c9c9c)。
将上面的组复制3次，这样我们就得到了4个组。
我们将在其他3个副本中做的唯一更改是使用的图标和标题文本。
使用Nevis字体字体样式设置为B老和字体大小的18 pt,然后写下一个句子。使用的灰色与前面步骤中的段落相同。绿色和底部的颜色是一样的。
把重点放在最后一部分(“联系我们”)，因为它将是一个超链接。
在角色面板(如果你找不到角色面板，转到窗口>字符)，使用下划线选择在“联系我们”文本下方放置下划线。
给课文一遍阴影层的效果。
使用相同的灰色，写下一段文字，并把它放在标题文字下面。从你选择的图标集中选择一个钱包图标(我从印象派UI中获得的)，并给它与我们使用的其他图标相同的颜色。那就给它一个阴影下图中绿色的图层效果。
步骤11:页脚
用矩形工具(U)创建一个矩形1200 px宽度和280 px在高度。
把它涂成浅灰色(# d0d0d0)。这将是我们页脚的背景。
使用水平文字工具(T)和之前一样的字体输入一些标题文字，如下图所示。我们将我们的页脚分成三个部分，每个部分将有一个标题。
如下所示，第一节的标题是”更多关于我们”。我们将申请阴影图层效果的标题文字不透明度设置为1%。
用同样的字体写一段虚拟文字。给这个文本一个浅一点的颜色(# 7 a7a7a)。
使用直线工具(U)创建一条简单的灰色线，作为每个部分的分隔线。
我们网页设计页脚的下一部分将是“通讯”部分。使用圆角矩形工具(U)创建新闻稿文本输入字段半径的3 px。将时事通讯的背景颜色设置为浅灰色(# f5f5f5)。
给它一个微妙的阴影的效果。让形状变得非常微妙1 px中风层的效果。使用水平文字工具(T)在形状中输入一些文字。
页脚的最后一部分是“与我们联系”部分。
这是非常简单的创建，特别是如果您一直遵循到现在为止。它与其他步骤非常相似，除了图标(我从印象派UI集获得)和电子邮件，位置和电话号码文本的文本颜色稍微深一点。
教程汇总
在这个网页设计教程中，我们使用Photoshop创建了一个简单易用的登陆页面布局。我们使用了各种流行的技术来创建设计的不同组件。
这是我们的最终结果:
与登陆页相关的其他资源
下载源文件
- landing_page_photoshop(ZIP, 2.07 mb)
WebFX职业
加入我们的使命，为全球各地的企业提供行业领先的数字营销服务-同时建立您的个人知识并成长为个人。
