歡迎來到合肥浪訊網(wǎng)絡(luò)科技有限公司官網(wǎng)
  咨詢服務(wù)熱線:400-099-8848

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

發(fā)布時(shí)間:2019-12-13 文章來源:本站  瀏覽次數(shù):3148

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

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

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

在一個(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)性?匆幌略蹅冊诒疚闹兴榻B的比如。

從劃分空間開端:

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

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

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

怎么分配區(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)并不難。

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

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

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

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

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

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

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

強(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)的字體。

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

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

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

上圖

  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)用一種反色。

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

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

    補(bǔ)色構(gòu)成激烈的比照作用:整張圖片都是由冷色構(gòu)成,而關(guān)于一間年青的建筑規(guī)劃公司來說,藍(lán)色不能傳達(dá)它那種沖勁及活力。解決辦法:咱們用藍(lán)色的反色或補(bǔ)色來安排 LOGO 區(qū)域。咱們首先在色輪上確認(rèn)藍(lán)色的位置,然后挑選與其相對的另一種色彩(見上方色輪);檠a(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)志而不是圖片。

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

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

    綠色及米色均屬二次色( 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)作這些圓角邊框能夠很容易做到:

    怎么規(guī)劃網(wǎ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ù)值如下:

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

上一條:音樂主題構(gòu)思Logo標(biāo)志...

下一條:國外華美風(fēng)格網(wǎng)頁規(guī)劃作品...