怎么規(guī)劃網(wǎng)頁橫幅

規(guī)劃一個(gè)吸引人的網(wǎng)頁主橫幅其實(shí)能夠很簡略，咱們思考的只是怎么分配區(qū)域。

在一個(gè)簡略的網(wǎng)頁中，上方的橫幅是最重要的視覺元素。在許多博客網(wǎng)頁中，它甚至是僅有的視覺元素。所以它的作用能夠說是適當(dāng)大的。它有必要能夠與網(wǎng)站的風(fēng)格合作，并能傳達(dá)視覺上的信息。它有必要讓人看上一眼就讓人知道這個(gè)網(wǎng)站是屬于什么類型，風(fēng)格是什么。這個(gè)橫幅還有必要能夠供給簡略明了的導(dǎo)航鏈接。一切這些，咱們都能夠通過將橫幅分紅三個(gè)區(qū)域而輕松實(shí)現(xiàn)：每一個(gè)區(qū)域都具有自己的功用，而咱們還要將這三個(gè)區(qū)域在視覺上一致，使三者具有相似性及協(xié)調(diào)性�？匆幌略蹅冊诒疚闹兴�介紹的比如。

從劃分空間開端：

一個(gè)網(wǎng)頁橫幅的寬度橫跨整個(gè)網(wǎng)頁，而高度又適當(dāng)窄。將其分紅三個(gè)區(qū)域：稱號，圖片及導(dǎo)航鏈接。然后咱們分別對其進(jìn)行規(guī)劃。

怎么分配區(qū)域：一般來說，咱們都是將稱號放在左上方，而導(dǎo)航欄目放在下方。其空間的分配應(yīng)該穩(wěn)重�？臻g的比例巨細(xì)是根據(jù)詳細(xì)的稱號（長或短）和圖片而定的，很難說有什么最佳的比例。但是，應(yīng)該防止將上方空間分紅兩等份，因?yàn)榉旨t兩等份會讓人的注意力都放在版式上，而不是放在內(nèi)容上。選用不對稱的分布作用會更好。

尋覓一張具表現(xiàn)力的圖片：

一張美麗的圖片是規(guī)劃一個(gè)美麗橫幅的要害。在找到相片后，咱們還要細(xì)心研究一下截取相片的哪一部分能夠最有效傳達(dá)相關(guān)的信息。其實(shí)在實(shí)踐中你會發(fā)現(xiàn)，要開掘這一點(diǎn)并不難。

截取相片時(shí)應(yīng)記住一點(diǎn)：盡可能截取能夠傳達(dá)最多信息的那一部分。在上圖這張?zhí)飯@式的風(fēng)景圖片中，有樹，有草，有山，有陽光——看一下咱們截取的部分，都將這幾個(gè)主要的圖片元素都包含了，這正是咱們所需求的，面積雖比原圖小許多，但截取后的圖片所要傳達(dá)的信息不光沒有減少，并且在層次感上還加強(qiáng)了。圖片上有豐富的明暗區(qū)域（見黑白圖片），構(gòu)成近、中、遠(yuǎn)三種視覺作用。

用色彩分配區(qū)域：

用吸管工具從圖片選取一種較深的色彩，將這種色彩的色階由暗到亮擺放，然后咱們再來決議哪一個(gè)區(qū)域用哪一種色彩。特別要注意的是能發(fā)生比照。

強(qiáng)比照更具沖擊力：上述一切的色彩都具有同一種色調(diào)。并且這些色彩理論上都是來自于圖片，能夠說，無論你怎么將色彩分配到區(qū)域中，一般來說，都能夠構(gòu)成協(xié)調(diào)的調(diào)配。但比照度卻會因你的不同分配而有所區(qū)別。強(qiáng)比照具有沖擊力，而低比照顯得更安靜（但也因而給人的形象不深）。

放置稱號及導(dǎo)航文字：

確認(rèn)色彩后，咱們要抵擋文字。文字應(yīng)該能夠與圖片發(fā)生互補(bǔ)：冗雜的圖片 / 簡略的字體；高雅的圖片 / 高雅的字體；安靜的圖片 / 裝飾性強(qiáng)的字體。

首先留心上圖中，文字在色彩運(yùn)用上的交換。綠色的文字用在金黃色布景上，反之，金黃色的字體用在綠色布景上——這樣的交換運(yùn)用能夠使整個(gè)版面顯得更加一致協(xié)調(diào)。

上圖

1. 一個(gè)十分長的稱號應(yīng)該分紅兩行或多行，行與行之間的字體應(yīng)該是整齊的，防止運(yùn)用某些高低不平的字體或小字字母，這樣會在如此狹窄的小空間中造成抵觸。大寫字母是咱們這個(gè)比如中的榜首挑選。咱們選用一種安靜高雅的字體，與這幅美麗的圖片發(fā)生互補(bǔ)。
2. 防止運(yùn)用這種裝飾性較強(qiáng)的字體，它顯得過于奇特了，只會在這里喧賓奪主。

3. 這種字體雖然很美麗，但與這個(gè)比如中的圖片或網(wǎng)站風(fēng)格不調(diào)配

   選用補(bǔ)色：

   在這個(gè)比如中，一張半籠統(tǒng)的圖片傳達(dá)出 D&T 建筑規(guī)劃公司的風(fēng)格，假如咱們按上面的那個(gè)比如來挑選色彩，那藍(lán) / 灰的色彩會對 LOGO 發(fā)生過于按捺的影響，所以咱們運(yùn)用一種反色。

   

   

   補(bǔ)色構(gòu)成激烈的比照作用：整張圖片都是由冷色構(gòu)成，而關(guān)于一間年青的建筑規(guī)劃公司來說，藍(lán)色不能傳達(dá)它那種沖勁及活力。解決辦法：咱們用藍(lán)色的反色或補(bǔ)色來安排 LOGO 區(qū)域。咱們首先在色輪上確認(rèn)藍(lán)色的位置，然后挑選與其相對的另一種色彩（見上方色輪）�；�為補(bǔ)色的兩種色彩并不具有同一種基色（不象其它色彩聯(lián)系，比如，綠色及橙色，這兩種色彩都有黃色在里面），這便是為什么互為補(bǔ)色的兩種色彩能夠構(gòu)成十分激烈的比照。在上方這個(gè)色輪中，紫色與黃色具有最高的色度比照。

   與 LOGO 合作：

   Fairweather Downs 的標(biāo)志已經(jīng)有五十年的運(yùn)用前史了，在這么長的歲月中，這個(gè)標(biāo)志幾乎沒有改變過。這便是經(jīng)典！在這種情況下，咱們的規(guī)劃重點(diǎn)應(yīng)該是考慮標(biāo)志而不是圖片。

   

   

   綠色及米色均屬二次色（ secondary colors ，指三原色中任兩色混合而成的中間色——譯注） ，其中一種是冷色，一種是曖色。

   咱們借用 LOGO 本來的一些特征——雙線框及圓角等元素，能夠讓咱們?nèi)菀滓?guī)劃其它的一些元素，并且使整個(gè)橫幅都同樣顯得經(jīng)典味十足。由于這個(gè) LOGO 是咱們最垂青的元素，圖片相對來說則較為非必須。留心 LOGO 中， Fairweather 與 Downs 這兩種字體的風(fēng)格相去甚遠(yuǎn)：手寫體 / 羅馬體，尺度小 / 尺度大，小寫字母 / 大寫字母，而線條的粗細(xì)則很相似，兩者結(jié)合，構(gòu)成一種具有手工感的美麗氣味。

   在 Indesign 軟件中，要?jiǎng)?chuàng)作這些圓角邊框能夠很容易做到：

   

   1. 畫一個(gè)矩形，然后將線條尺度調(diào)整你希望的巨細(xì)，這里咱們是用 2pt ；
   2. 打開線條（ Stroke ） ＞ 類型（ Type ）的下拉菜單中，咱們挑選了一種“ Thin-Thin ”的雙幼細(xì)線條類型，然后將這條單線轉(zhuǎn)換成兩線，
   3. 打開對象 (Objict) ＞轉(zhuǎn)角作用（ Corner Effects ）對話框，挑選反轉(zhuǎn)圓（ Inverse Round ），并確認(rèn)一個(gè)線條尺度（咱們挑選的是 9pt ），然后按 OK ，一個(gè)雙線圓角的元素就完成了。

   本文所用色彩數(shù)值如下：