访问者很快就会形成对网站的初步（有时是持久的）意见。当您停下来考虑网站主页上的英雄形象是他们遇到的第一件事时，很明显，如果图像不是特别有趣，他们的期望可能不会很高。
信息是这样的：您需要花时间确保您的英雄形象得到妥善规划和正确实施。必须给访问者留下您富有创造力、才华横溢的印象，并且值得他们进一步了解。
您如何为您的在线投资组合制作理想的图像？
我们将通过关注 6 个元素以及 BeTheme 附带的 100 多个预建投资组合网站中的一些，以及展示将所有内容组合在一起的各种路径的其他品牌，向您展示如何做到这一点。
为你的投资组合设计一个优秀的英雄形象
这 6 个要素涉及 –
- 选择一个与你的工作性质直接相关的英雄形象
- 使用支持性图像背景
- 选择合适的字体方案
- 选择合适的配色方案
- 使用互动来活跃英雄形象
- 指定或暗示下一步的号召性用语
有多种方法可以巧妙地将这 6 个元素结合在一起。在这篇文章中，我们将更深入地研究每个元素并提供每个元素的示例，这将帮助您将所有这些元素整合到一个旨在吸引即使是最怀疑的访问者的英雄形象中。
让我们开始吧。
1. 选择与您的工作性质直接相关的图像
您为英雄形象选择的图像必须与您作品集中的材料明确相关。
室内设计精品店Lauren Waldorf Interiors的英雄形象展示了完成项目的滑动画廊：
摄影师、摄像师、网页设计师和视觉艺术家很可能会发现这种方法很有吸引力。
如果您的作品涉及具有潜在挑战性的媒体视觉表现，例如让您的脸成为英雄部分的主要图像，您可能需要采用不同的策略，如BeDJ 2 英雄图像所示：
例如，如果您是一名 DJ，您的面部图像会将您这个真实的人与您所做的工作联系起来。它也是一种比一堆与音乐相关的彩色图形更强大的方法。
无论采取何种方法，您都需要仔细考虑：
- 英雄部分的主题是谁或什么？
- 图片应该放在背景还是前景？
- 图像是否应该保持原样或更改以使其看起来更具艺术性？
第四种可能性是您可能根本不需要图像，只需让文字来说话！
2. 使用背景添加更多关于您的工作的信息。
在为英雄部分选择背景时，您可以采用多种不同的方法。例如：
- 背景可以专门介绍您正在做的工作。
- 它可以提供一个关于访问者将体验什么的小“戏弄”。
- 它可以使用图形或抽象方法识别您的工作。
可以使用视频或幻灯片来简要预览您的作品，这种方法也可以为您的网站带来生动的感觉。
这个来自BeInterior 6预建网站的示例演示了如何使用您的英雄部分来让访问者对您的作品有一个小小的了解。
虽然照片库只占主图的不到四分之一，但它完成了工作，而且它提供了一种创造性的方式来提供有关访问者可以期待的额外上下文。
关于背景，可以有利地使用像上面这样的有纹理的照片或舒适的配色方案。
以Mindgrub的方式使用纯色或渐变是另一种有效的方法：
这可能是数字创意的一个很好的选择，而不是使用产品的屏幕截图，为什么不构建自己的数字宝石来吸引观众呢？
如果您正在为客户构建网站，这种方法让您有机会充分展示您的设计创意。
3. 清晰地设计字体样式。
如果您选择使用哥特式字体，您将不会吸引很多人来查看您最先进的产品线。这当然是一个可笑的例子，但您对一种或多种字体的选择可能会产生影响。
美学很重要；有时和文字本身一样多。
您使用的字体类型是为英雄信息添加声音的一种方式。例如， BeDetailing 4预建网站使用名为 Italiana 的 Google 字体：
这家汽车美容公司预先表达了对经典老爷车的喜爱。虽然措辞和图像说明了很多，但优雅的、受书法启发的字体使它更加完美。
句子的样式也会影响消息传递的方式。 Get Em Tiger网站做了几件事来改变他们的英雄形象文本在阅读者头脑中的解释方式。
所有大写的标题通常被解释为在头脑中听起来响亮或大胆。
橙色的 STAND OUT 正是这样做的。它以与粗体或斜体通常相同的方式创建重点，但在这里更是如此。
构成副标题的句子通过创造一种更友好、更健谈的语气，使头脑中的温度稍微降低一点。
4. 计算配色方案的作用。
当需要为你的英雄部分确定一个调色板时，你可能已经知道你的品牌颜色是什么，并且已经制定了一个配色方案来为你的网站设计按钮和重点。
您还可以在创建英雄部分时使用您的品牌颜色，如G Sharp Design在以下示例中所做的那样：
这个英雄版块的配色简单明了，却格外吸睛耐看。
尽管这种方法很吸引眼球，但它可能不适用于其他创意类型。例如，像BePhoto 2这样的摄影网站可能更喜欢使用深色主题：
这张主打图片的中央有一个照片滑块。由于整个网站采用无声的深灰色设计，带有灰白色文字，因此每张照片中显示的中央明亮的流行色立即引起人们的注意。
为了帮助决定您自己的调色板，您可能会问自己以下问题：
- 你需要多少种颜色？
- 您打算使用品牌调色板中的哪些特定颜色？
- 您可能还想考虑其他颜色吗？
- 每种颜色将起到什么作用来设定情绪、激发行动等。
您的颜色选择不一定要起主导作用。他们只需要满足您需要他们为您做的事情。
5. 设计更具互动性
滑块和背景移动可能会有所不同，但如果没有动画，您的主页仍然只不过是一个静态广告牌。
这并不是说广告牌不能吸引人，但在小屏幕上很难做到这一点。
Awesome Inc是一家从事动画和设计项目的工作室。如果他们的顶级动画作品从一开始就没有在他们的网站上展示，至少可以说是令人惊讶的：
如果您不从事自动化业务，您仍然可以利用它，尽管可能不会达到上述极端
例如， BeModel 3采用了这种动态英雄形象设计方法：
图像滑块是动画的，但让这张主图特别讨人喜欢的是调色板会随着照片滑块的变化而同步变化。
在自动化方面，您可以随心所欲地狂野或微妙。这只是什么能打动您的观众的问题，无论是悬停变换、过渡动画还是其他任何内容。
6. 选择一个合乎逻辑的动作来引导访问者进入下一步
它可能是号召性用语按钮或让访问者向下滚动页面的微妙方式。
大多数访问者在看到他们需要看到的内容后自然会向下滚动。
第三种选择是邀请他们访问您网站上的特定页面。在投资组合网站上，它可能是投资组合页面本身、服务页面或您的关于我们页面。
BePhotography 2选择第三种策略，将潜在客户发送到 Portfolio 页面。
或者，如果您的英雄形象特别吸引人和有趣，您可以鼓励您的访问者在邀请他们转到另一个页面之前停留一下
Perky Bros通过使用游标完美地完成了这一点：
当光标四处移动时，会出现各种建议或号召性用语。在“查看项目”示例中，访问者在单击时被传送到案例研究项目页面。
目标是制作一个英雄形象，展示您的创意作品的真正价值
如果您的网站是一个作品集，那么您的主图设计就显得尤为重要。它必须展示您的创造力和技能，以及您网站的访问者可以在那里找到什么。
在这种情况下，一个很好的选择是 BeTheme——世界上最受欢迎的 WordPress 主题之一（265,000+ 销量和 4.83/5 星评级）。
使用 Be，您可以访问 100 多个完全可定制的预建投资组合网站，每个网站都有一个手工制作的英雄图片设计，可以简单地更改以包含您刚刚研究的六个关键元素。