网页横幅排版怎么做?掌握三段式分区布局设计技巧
其实, 设计一个能够吸引人的网页主横幅这件事情, 可以做得非常简单, 而我们只需要思考的, 只是如何去合理地分配那些各个区域之间的位置而已。
点击上图看大图
在一个简单的网页里, 上方的横幅是最关键的视觉部分。在不少博客网站中, 它甚至是唯一的视觉元素, 那么其作用就不言而喻了。它需要和网站的风格相互契合, 传递出直观的视觉效果, 让人看一眼就能明白所属的网站类别及其整体风格, 同时还得提供直接清晰、一目了然的导航入口。
我们能够通过把横幅划分成三个部分来轻松达成这些目标。每个部分都负责不同的作用。同时, 我们还需要让这三个部分在视觉上面保持一致。这样做的目的是使这三者产生相似之处, 并且相互协调。下文所提供的示例可以帮助大家理解这一做法。
我们从开始对空间进行划分这个环节出发。
该网页横幅的宽度是横跨整个网页的, 而其高度则是相当窄的。把它分为名称、图片以及导航链接这三个区域, 随后分别对它们进行设计。
关于如何分配区域的问题, 通常情况下, 我们习惯把名称放置在左上方这个位置, 与此同时, 会把导航栏目安排在下方的位置。在这个过程中, 空间的分配是需要格外谨慎对待的。
至于空间比例的大小该如何确定, 这完全取决于具体的名称是长还是短以及图片的具体情况怎么样。所以说, really 很难明确指出说存在一个所谓的最佳比例标准。不过, 有一点是值得注意的, 那就是应该避免出现将上方的空间平均分成两等份这样的情况发生。
为什么? 因为一旦采取了这样的均分处理方式, 就容易让观看者的全部注意力都集中在版式布局上面去, 而不会集中在核心内容上去了。相对而言而言, 采用那种不对称的分布方式来进行设计的话效果会比较好一点。
我们需要去寻找, 并且要找到一张, 能够体现出那种表现力量的图片。
一张漂亮的图片是设计一个漂亮横幅的关键, 在找到照片之后, 我们还需要仔细研究一下截取照片的哪一部分能够最有效地传达相关信息, 其实通过在实践过程中你会发现, 要发现这一点并不困难。
在截取照片的时候你心里得有一个数, 那就是要尽可能地把能传达最多信息的那个部分给截取出来。针对上面这张看起来像田园风光的风景图片来说, 画面里面包含了树木, 也包含了草地, 还包含了山峦, 同样也包含了阳光。
请你仔细看一看我们选取的截取区域, 这几个主要的图像元素都被完整地带进去了, 这恰恰是我们所希望达成的效果。虽然截取出来的这张小图片的表面积比起原来的大图片来要小上很多, 但是这并不意味着它所想要表达的信息就减少了分毫, 相反的情况是, 在画面的层次感方面它还得到了进一步的加强。
图片里面存在大量明暗区域, 这一点你可以见一下那张黑白图片, 这些内容构成了近视觉、中视觉以及远视觉这三种不同效果的体验。
通过使用颜色来分配各个区域的。
操作方法是, 拿起吸管工具, 从图片里面挑出一个颜色比较深的色块, 随后把这种颜色的层次按照从暗淡往明亮的秩序排成一行, 接着我们就来判定图像的哪个部分适合涂抹哪种具体的色彩, 其中有个重点得格外留意, 就是一定要能够让画面产生出反差明显的视觉效果。
强对比会带来更具冲击力的效果: 上面提到的那些颜色, 其实都带着同一种色调。再说得更详细一点, 这些颜色在理论上都是从图片里提取出来的。这样一来, 基本上不管你怎么把这些颜色分到不同的区域里去, 通常都能搭配得很协调。
不过, 对比程度会因为你的分配方式不同而发生变化。采用强对比的话, 视觉效果会更强烈、更有冲击力；但如果用的是低对比色, 整体感觉会显得更平静一些。可是, 这种平静也会带来一个问题, 那就是给人的印象不够深刻。
把名称还有那个导航的文字, 给它放置好。
在颜色确定之后, 我们接下来需要着手处理文字相关的内容。文字的作用应该在于与图像内容形成一种互补的关系。
我们可以考虑这样一种情况, 那就是当图片中的元素显得比较繁杂的时候, 我们可以选择采用相对简洁一点的字体风格；而当图片所展现出来的风格是优雅的时候, 我们不妨去选用那些同样具备优雅特质的字体；如果画面传递出一种安静且平和的视觉感受, 那么使用装饰性较为强烈的字体往往能够起到很好的点缀作用。
首先, 请你仔细观察上面这张图, 看一看它的文字在颜色的选择上有什么变化。你会发现, 绿色的文字被用在了金黄色的背景上面, 相反的, 金黄色的字体也被用到了绿色的背景上面。这样把颜色互相换一换地来使用做法, 可以让整个页面的外观看起来得更加的整体一致和谐美好。
上图
对于一个非常长的名称, 需要将其分成两行或者多行进行展示。在换行的时候行与行之间的字号要保持整齐一致。要极力避免去使用那些笔画高低错落不平的字体, 也要避免使用那些尺寸偏小的字母,因为如果把这种混乱的字形放进狭窄的空间里, 就会产生视觉上的冲突。
在这个例子里选用大写字母是首要方案。整体选用的是一款风格平和且显得高级的字体, 目的是为了让这款字体和这张精美漂亮的图片形成很好的互补关系, 起到相得益彰的效果。
建议大家尽量避免采取这种属于装饰风格比较强的字体形式, 因为这样的字体看起来会显得过于特别了一些, 那么就会在这种情况之下出现喧宾夺主的作用。
这个字体本身很好看, 不过呢, 把它放到当前的图片或者网站里去看的时候, 会发现整体的风格好像不太对劲, 搭配起来显得不是很协调。
采用补色：
在这个例子中, 一张半抽象的图片传达出了 D&T 建筑设计公司的风格。如果我们按照上面的那个例子来选择颜色, 那么, 蓝色 / 灰色的颜色会对 LOGO 产生过于强烈的抑制作用, 因此, 我们使用了一种反色方式来进行处理。
点击上图看大图
补色能够构成一种视觉效果方面非常强烈的对比情形。整张页面内容都是由冷色调所构成的, 可是针对一家处于年轻阶段并且专门从事建筑设计业务的公司而言, 仅使用蓝色是无法充分传达出其内部那种充满冲劲以及具备活力的特点的。
解决问题的方法是, 我们决定选用蓝色在色彩理论中的相反颜色也就是补色, 来对 LOGO 所在的区域进行排版布局安排。
具体的操作步骤是, 我们先要在标准的色轮图形上精准定位蓝色所处的具体位置, 然后再从该色轮上挑选出与蓝色方向完全相对的一种其他颜色来进行搭配使用（这一过程可以参见图片上方所展示的配色原理示意图）。
两种颜色如果互为补色, 那么它们就不存在同一种基色, 这一点和别的颜色关系不一样, 举一个例子, 绿色和橙色这两种颜色里面都含有黄色成分, 正是因为这样的原因, 所以互为补色的两种颜色才能形成看起来非常强烈的对比效果, 在上面提到的这个色轮里面, 紫色和黄色之间具有最为明显的色度对比。
就是把这个东西和那个标志摆在一块儿用。
Fairweather Downs的标志已经有了长达五十年的使用历史, 在如此漫长的时间段里, 这个标志几乎没有发生过任何改变。这就是所谓经典的表现, 基于这一情况, 我们的设计工作应当将焦点转移到对标志本身的考量上, 而不是仅仅局限于图片。
点击上图看大图
绿色和米色都算作是二次色系, 所谓的二次色, 意思是说把三原色里面的任意两种颜色混在一块儿之后所得到那些中间调的颜色——这一部分是译者加的注脚。在这当中, 有一种颜色属于冷色调, 而另外一种颜色则属于暖色调。
我们可以把 LOGO 里原来存在的一些特点, 比如说双线框还有圆角这些东西借过来, 这样就能够让我们非常轻松地设计出其他种类的元素, 并且让整体的横幅都充满那种经典的韵味。因为 LOGO 对我们来说是处于最重要地位的元素, 所以图片在这一块就显得相对没有那么重要了。
要注意到 LOGO 中的情况, 这里需要留心那个叫做 Fairweather , 还有那个叫做 Downs 的两种字体。这两种字体的风格, 其实是有很大的差别的。一个是手写体风格的, 另一个是罗马体风格的, 区别非常大。
在尺寸上, 一个是小的, 一个是大的, 差别很明显。再看字母的形式, 一个小写字母, 一个大写字母, 完全不一样。但是线条的粗细程度来说, 两者却是非常相似的。因为这种组合在一起, 结果就形成了一种特别的感觉, 给人一种手工制作的那种漂亮的韵味和气息。
使用Indesign软件的时候, 如果想要制作出来这种带有圆角效果的外框的话, 其实是可以很方便就去完成这个操作的。
先画出一个矩形的形状, 接着再去调整构成这个矩形的那个线条的尺寸大小, 让它变成你自己所心里期望的那些尺度, 具体到我们的这个例子当中, 我们这里实际采用的是2pt这样一个数值。
打开线条这个标签, 接着点击类型那一栏的下拉菜单, 我们在里面挑了一个名叫 Thin-Thin 的样式, 这种样式就是那种双出的、特别细的线条组合, 然后就把原先的那一条单线变成了两条并列在一起。
打开对象对话框, 然后找到转角效果这个部分。在里面选出反转圆角这个选项。接着要确定一个线条的尺寸, 我们这儿选的是9pt。最后点击确认按钮。这样一来, 有一个带双线圆角的元素就做好了。
译文原文：
http://www.logosky.net/webpage/artreview/design_web_head_20061103.htm
请小编喝杯咖啡吧！