gratitude_用Photoshop设计一个优雅的“ Gratitude Log”登陆页面

最新推荐文章于 2024-09-27 10:11:28 发布

daique1908

最新推荐文章于 2024-09-27 10:11:28 发布

阅读量270

点赞数

文章标签： python java css 脚本语言交互设计

gratitude

在本教程中，我将指导您完成为虚构的“感谢日志”服务设计优雅的着陆页的过程。我们将完全从头开始，立即使用Adobe Photoshop绘制布局。我们将使用一些基本和中间技术来设计此设计，同时要考虑到转换。让我们开始吧！

教程资产

为了继续学习，您将需要一些（免费）资产：

在阳光下放松的照片来自Skitterphoto
PT Serif字体来自Font Squirrel
Playfair Dislay字体来自Font Squirrel
Font Squirrel的Source Sans Pro字体
从用户头像用户间面Kong

准备好文档

第1步

首先使用下面显示的设置创建一个新的Photoshop文档（“ 文件”>“新建” ... ）。您可以随意使用任意大小的画布-毕竟，网的宽度不是固定的。

第2步

让我们设置一些指南，以便我们的布局具有足够的空间并看上去平衡。我并不总是使用预定义的网格，但是设置一些准则可以确保整洁并有助于定义我们网站的宽度。转到查看>新指南…并设置一些指南。我通常选择1000px作为网站宽度，并从角落添加一些准则，以使它有足够的呼吸空间。

注意：本教程使用的准则：垂直为200px，500px，700px，900px和1200px。

提示：您还可以使用GuideGuide Photoshop插件使此过程更快。

第三步

坚持使用Photoshop礼节，我们可以使事情井井有条，因此易于浏览和编辑。让我们创建三个名为Header，Content和Footer的图层组。要创建组，请进入“ 图层”>“新建”>“组...”，并为每个组指定一个标题。要快速创建组，只需单击文件夹图标。

设计页眉区域

“首屈一指”的标题或区域（无论何时何地）在与用户互动并确保访问者留在网站上起着非常重要的作用。对于此着陆页布局，我将使用两个人坐在长椅上的镜头；其中之一举起手来描绘积极的情绪和幸福。

第1步

让我们首先创建博客的背景。在“页眉”组内，使用矩形工具（U）绘制一个黑色#000000彩色矩形形状。就我而言，我画了一个1400x728px大小的矩形并将其放在文档的顶部。

现在下载太阳照片中的Chillin' ，将其拖到Photoshop文档中，并将其放置在矩形层上方。将图像层重命名为以后可以识别的名称，就我而言，我使用了IMG 。之后，按住Alt键并将鼠标悬停在照片层上，直到看到一个向下的小箭头，然后松开它。您刚刚创建了一个Clipping Mask 。最后，将IMG图层的不透明度降低到70％，这样我们放在最上面的文本将更具可读性。

现在按CMD + T并调整照片大小以适合您的需求。

提示：按住Shift键可按比例进行变换。

第2步

现在，我们为着陆页创建一个全局导航，以便人们可以浏览该网站。

创建一个名为“ Navigation”的新组，将其放在“ Header”组中。之后，选择矩形工具（U），并在第一个和最后一个垂直辅助线之间绘制一个白色矩形。使其高度大约为60像素 ，这样导航项将有一些空间可以呼吸并看起来干净。最后，将其从顶部向下移动30px ，这样我们就可以拥有漂浮效果，并且可以很好地保留在图像上。

第三步

现在，让我们放置一个徽标和一些链接，使我们的导航栏看起来像人们可以使用的东西。对于徽标，我只是使用Playfair Display（粗体斜体）字体26px大小和深灰色#0e0e0e颜色编写了“ Grttd”。

对于导航链接，我使用了Source Sans Pro 14px，并在字母之间增加了间距。对于主要的号召性#96c218 “注册”，我使用了黑色和绿色#96c218 。我们已经完成了“导航”，因此请通过单击组名称旁边的小三角形图标将其最小化。

第4步

让我们写一篇鼓舞人心的消息，并附上网站的图像和整体构想。我将使用带有副标题的巨大粗体字体，更详细地说明该概念。

由于我们的上部区域背景很暗，因此明智的做法是使用浅色文本以产生高对比度并确保可读性。我使用了80px的白色#FFFFFF Source Sans Pro（黑色） ，行高为86px 。将其放置在导航栏下方约120像素处，以便使消息周围有足够的空间被认为是重要的。

现在，让我们放置小标题，以阐明整个概念并回答访问者可能遇到的一些问题。为了创建一个不错的印刷组合，让我们将主要的sans serif标题与我们之前用于徽标的优雅serif字体混合使用。

要获得更多启发性的字体组合，请查看： Google Web字体印刷项目和字体配对入门指南。

在本教程中，我使用白色#FFFFFF 26px Playfair Display（斜体）字体，并将其放在主标题下方40px处。

第5步

让我们添加一些更具吸引力的内容，以便访问者可以看到留在网站上的好处。感谢记录是基于记录您所感激的事物而建立的，因此，一些社交证据将是一个好主意，向人们展示实际使用它的人，并显示更理想的东西，例如条纹。

创建一个名为“ Example”的新组，然后选择“ 椭圆工具”（U），并在按住Shift的同时绘制一个圆。在我的情况下是60x60px 。之后，将某人的脸放在圆形图层的顶部，按住Alt键，将鼠标悬停在图层上，直到看到一个向下的小箭头，然后松开以创建剪贴蒙版 。现在，您可以根据需要通过单击CMD + T调整图像大小。

在本教程中，我使用User Inter Faces中的随机面Kong 。

提示：按住Shift键可绘制/调整比例形状。

现在，我们需要放置一个连续日志的指示器。让我们创建另一个较小的圆形，并在其中放置一个数字。简单但可以理解，并且可以完成工作。对于圆圈颜色，我重新使用了以前使用的绿色#96c218 。在我的情况下，其大小为30x30px，内部文本为白色#FFFFFF Source Sans Pro（粗体）14px 。

最后，让我们给我们的人起一个名字，并弄清楚这个数字代表什么。选择“ 水平字体工具”（T），然后输入名称和条纹长度。在我的情况下，我将PT Serif（粗体斜体）用作名称，将Source Sans Pro（常规）13px用于名称。确保使用足够大的线高，以便元素有呼吸的空间。

太好了，移到内容区域之前的最后一件事。我们需要强大的号召性用语（CTA），以便用户可以在观看视觉效果并阅读标题后做一些事情。创建一个名为“ CTA”的新组，将前景色设置为白色#FFFFFF并抓住Rectangle Tool（T） 。在那之后绘制一个矩形，在我的情况下，它的大小是280x60px 。注意先前用于导航栏的高度一致性。

之后，为按钮输入一些有说服力的副本。我使用的是“ START LIVING→”，其颜色与以前在导航栏上使用的深灰色#0e0e0e ，字体Source Sans Pro（Semibold）16px ，跟踪设置为140 。

第6步

现在我们完成了“标题”。让我们打开“内容”组，然后创建另一个名为“描述”的组。我们将为您提供醒目的标题，然后再对整个网站进行更详细的描述。重复号召性用语（CTA） ，这一点很重要，这样用户不必费力思考，但仍可以随时采取行动。

选择“ 水平字体工具”（T），然后为标题选择一个功能强大的字体。以我为例，我使用的是美观，优雅，但外观权威的Playfair Display（黑色）60px 。确保给此野兽足够的呼吸空间，我已将其从标头图像下移了100px 。

现在，使用相同的“ 水平字体工具（T）”，通过单击并拖动它来制作一个矩形。在我的情况下，这是一个600x140像素大小的框，我在其中放置了一些有说服力的副本，以供用户下定决心单击CTA 。为了建立清晰的视觉层次结构，描述文字应该更小而不要那么重。在我的示例中，我使用灰色#666666 PT衬线（常规）18px ，线高28px 。整个元素从标题向下移动了50px，以提供简洁，专业的外观。

阅读完副本后，我们可能会说服访问者尝试一下，因此明智的做法是再次重复执行号召性用语（CTA）按钮。打开“标题”组，找到“ CTA”组，然后按CMD + J进行复制。之后，将其移至“说明”组内，并将按钮颜色更改为我们先前使用的绿色en #96c218 ，对于文本，使用白色#FFFFFF 。将其从副本下移50像素以保持一致的间距。

到目前为止看起来很棒。让我们用一条简单的线在视觉上将描述块与下一个描述块分开。选取“ 线条工具（U）” ，将“权重”设置为1px，并在第一个和最后一个垂直参考线之间绘制一条水平线。就我而言，我使用的是浅灰色#e6e6e6 ，虽然颜色不太浓，但效果很好。

提示：按住Shift键可绘制完美的直线。

步骤7

现在，我们已经完成了“描述”块，是时候进入下一个了。创建一个名为“ Get Inspired”的新组。之后，复制“描述”组中的标题和描述层，并将其移至“获得灵感”组中。编辑图层并更改副本。以下是我的示例：

现在，导航到“页眉”组并找到“示例”组。单击CMD + J复制整个组，然后将其移至“获得灵感”组。我们将从顶部重用我们的示例，并显示一些用户故事，以激发访问者采取行动。

将组名称重命名为“ Story”，并摆脱绿色指示符。另外，您需要将文本颜色更改为深灰色#0e0e0e以便在白色背景上可读。化身使用其他图像，并用较浅的灰色写出该人的位置和位置#666666这样人们就可以与该人建立更多的联系。

之后，使用“ 水平字体 工具”（T）创建一个大小约为300x160px的文本框，并编写一个感谢记录更新示例。我已经使用PT Serif（斜体）16px大小的深灰色，如#666666之前所用。

现在复制“故事”组两次，并更改化身，名称和描述。将这两个组以水平顺序放置，在它们之间留有相等间隔的间隙，并像我们以前使用的那样在所有这些组之后放置一条线。

步骤8

现在，在完成“获得灵感”组的工作之后，让我们继续进行登录页面的最后一部分。最终的号召性用语 （还有更多详细信息）将鼓励访问者通过输入电子邮件地址进行注册。

创建一个名为“电子邮件”的新组，并导航到上一个组以找到标题层，然后通过单击CMD + J将其复制并将其移至新创建的组中。将标题更改为令人鼓舞的标题，并在该行下方移动100px以保持一致性。

大！现在将前景色设置为浅灰色#f5f5f5然后选择矩形工具（U）在电子邮件字段中绘制一个框。它的高度应该与我们的号召性用语（CTA）按钮的高度相同，尽管宽度无关紧要。就我而言，它是430x60px 。然后抓住水平打字工具（T）并输入“输入您的电子邮件”或类似内容，确保您使用深色以便于阅读。

现在转到图层面板中的“描述”组，然后找到“ CTA”组。点击CMD + J复制它，并将其移入“电子邮件”组。将按钮放在电子邮件字段旁边，并将整个元素居中。