Logo和Banner的設(shè)計(jì)與制作PPT課件

1、14.1 網(wǎng)站Logo的制作標(biāo)志-用一種文字或圖形來(lái)代表另外一種事物的符號(hào)標(biāo)志的類(lèi)別:（1）從用途上分:紀(jì)念標(biāo)志：1979年國(guó)際兒童年城市標(biāo)志：德國(guó)基爾城城徽、羅馬城徽會(huì)議標(biāo)志：奧運(yùn)會(huì)標(biāo)志商業(yè)標(biāo)志：代表企業(yè)公司形象*代表企業(yè)產(chǎn)品品牌（簡(jiǎn)單介紹標(biāo)志設(shè)計(jì)及藝術(shù)設(shè)計(jì)對(duì)經(jīng)濟(jì)的促進(jìn)作用）公共圖形：貼近生活，服務(wù)社會(huì)，于人們的日常生活息息相關(guān)第1頁(yè)/共35頁(yè)（2）從造型特點(diǎn)上分： 具象型標(biāo)志（特點(diǎn)：形象自然、生動(dòng)活潑、有直觀趣味感) 抽象型標(biāo)志（特點(diǎn)：造型嚴(yán)謹(jǐn)、寓意深刻，是把無(wú)形的事物轉(zhuǎn)化為有形的可表意的形象 字圖型標(biāo)志（特點(diǎn)：運(yùn)用廣泛、傳播速度快。2第2頁(yè)/共35頁(yè)標(biāo)志設(shè)計(jì)的主要原則 簡(jiǎn)：簡(jiǎn)明易認(rèn)，一目

2、了然（采用美國(guó)百氏可樂(lè)飲料公司標(biāo)志的五次變革來(lái)說(shuō)明標(biāo)志設(shè)計(jì)從繁到簡(jiǎn)的過(guò)程） 準(zhǔn)：內(nèi)容準(zhǔn)確、形象直觀 奇：獨(dú)樹(shù)一幟、不能雷同 美：符合藝術(shù)美的規(guī)律、符合大眾普通的審美情感3第3頁(yè)/共35頁(yè)標(biāo)志設(shè)計(jì)的藝術(shù)表現(xiàn)方式 （1）形象高度夸張、概括、簡(jiǎn)潔、幾何形化（采用太陽(yáng)神口服液標(biāo)志和捷克音樂(lè)學(xué)院標(biāo)志說(shuō)明）* （2）運(yùn)用聯(lián)想、比喻的方式（采用阿根廷市政銀行和某人壽保險(xiǎn)公司標(biāo)志說(shuō)明（* （3）運(yùn)用象征的方式（波蘭和平委員會(huì)標(biāo)志）* （4）運(yùn)用民族藝術(shù)表現(xiàn)形式4第4頁(yè)/共35頁(yè)案例分析 中國(guó)民航標(biāo)志說(shuō)明：在創(chuàng)作構(gòu)思上，作者突出了標(biāo)志設(shè)計(jì)的民族性特點(diǎn)，它以中國(guó)固有民族圖騰形象之一“鳳凰”作為構(gòu)圖的主體，體現(xiàn)出中

3、國(guó)傳統(tǒng)文化的血脈滋潤(rùn)與獨(dú)特內(nèi)涵。 從造型特點(diǎn)上看，具有極強(qiáng)的現(xiàn)代設(shè)計(jì)意識(shí)，完全符合上述標(biāo)志的現(xiàn)代設(shè)計(jì)原則。是一幅傳統(tǒng)民族文化與現(xiàn)代美原則和諧統(tǒng)一的杰作。5第5頁(yè)/共35頁(yè)6第6頁(yè)/共35頁(yè) A中國(guó)鐵路標(biāo)志介紹：*“工人”點(diǎn)明鐵路行業(yè)之屬性，即鐵路是屬于工人階級(jí)的，而工人階級(jí)又是國(guó)家的主人，它洋溢著鐵路工人當(dāng)家作主的自豪感責(zé)任感。 “人工”：在建國(guó)初期，中國(guó)處于一窮二白的階級(jí)，而這一標(biāo)志的含義恰在說(shuō)明廣大鐵路工人乃至中國(guó)人民勇于戰(zhàn)天斗地，不畏艱難險(xiǎn)阻，誓與“天公”一比高的豪邁之氣，歌頌了“人”改造自然的力量和精神。 在具體形象上，“工”字取鐵軌橫截面之形，整個(gè)構(gòu)圖外形上組成了一個(gè)完整的火車(chē)頭形象

4、，它奪面而來(lái)，蘊(yùn)含了磅礴的氣勢(shì)，孕育著無(wú)窮的力量7第7頁(yè)/共35頁(yè)8第8頁(yè)/共35頁(yè) 一、標(biāo)識(shí)整體造型質(zhì)樸簡(jiǎn)約、靜動(dòng)相生、線條流暢，富有動(dòng)感。字母趨勢(shì)線的變化組合，具有強(qiáng)烈的時(shí)代感和視覺(jué)沖擊力，傳達(dá)出一個(gè)現(xiàn)代通信企業(yè)的嶄新形象。 二、整個(gè)標(biāo)識(shí)以字母C為主體元素，兩個(gè)C在明快的節(jié)奏中交織互動(dòng)，直接代表著“中國(guó)電信集團(tuán)公司”，同時(shí)共同組成了一個(gè)運(yùn)動(dòng)的“中”字。 三、兩個(gè)開(kāi)口的字母C向遠(yuǎn)方無(wú)限延伸，仿佛張開(kāi)的雙臂，又似地球的經(jīng)緯，傳遞著中國(guó)電信的自信和熱情，象征著闊達(dá)的胸襟、開(kāi)放的意識(shí)、長(zhǎng)遠(yuǎn)的目光、豪邁的氣勢(shì)，意味著四通八達(dá)，暢通、高效的電信網(wǎng)絡(luò)連接著世界的每一個(gè)角落，服務(wù)著更多的用戶(hù)。C作為英文“

5、用戶(hù)、企業(yè)、合作、競(jìng)爭(zhēng)”的第一個(gè)字母，9第9頁(yè)/共35頁(yè) 它的交融互動(dòng)，也強(qiáng)烈表達(dá)了中國(guó)電信“用戶(hù)至上，用心服務(wù)”的服務(wù)理念，體現(xiàn)了與用戶(hù)手拉手、心連心的美好情感。同時(shí)也蘊(yùn)含著中國(guó)電信全面創(chuàng)新，不斷超越自我，以更寬廣的胸懷與社會(huì)各界協(xié)手合作，共同促進(jìn)中國(guó)信息產(chǎn)業(yè)進(jìn)步和繁榮的良好心愿。 四、高高挑起的兩角，凸現(xiàn)出簡(jiǎn)潔而充滿活力的牛和振翅飛翔的和平鴿圖案。既表現(xiàn)了中國(guó)電信腳踏實(shí)地、求真務(wù)實(shí)、辛勤耕耘的精神，又展現(xiàn)了中國(guó)電信與時(shí)俱進(jìn)、蒸蒸日上、蓬勃發(fā)展的良好前景。 五、標(biāo)識(shí)以代表高科技、創(chuàng)新、進(jìn)步的藍(lán)色為主色調(diào)。文字采用書(shū)法體，顯得有生命力、感染力與親和力，與國(guó)際化的標(biāo)識(shí)相襯，使古典與現(xiàn)代融為一體、

6、傳統(tǒng)與時(shí)尚交相輝映。10第10頁(yè)/共35頁(yè) 標(biāo)志延伸雅客的品牌精神，以紅黃為主色調(diào)，傳達(dá)甜蜜的味覺(jué)感受，象征雅客熱情的服務(wù)。n標(biāo)志呈現(xiàn)抽象的“花”的造型，花象征新鮮、甜美，寓意產(chǎn)品屬性，以及企業(yè)從事甜蜜的事業(yè)。美麗的花朵代表甜絲絲的糖果帶給人們好心情，心花怒放，心滿意足。“幸福之花”代表事業(yè)的發(fā)展、家庭的和諧、生活的愜意，令人們喜笑顏開(kāi)。它也寓意濃濃的親情、真摯的友情、甜蜜的愛(ài)情，使每個(gè)人如沐春風(fēng)。正待開(kāi)放的花蕾象征人們對(duì)未來(lái)的期待，象征等待我們的美好明天：嶄新的一天，幸福之花將綻放出無(wú)盡的色彩。兩筆弧線構(gòu)成細(xì)致的花萼，小心托起花朵，代表企業(yè)兢兢業(yè)業(yè)，呵護(hù)消費(fèi)者的健康與愉悅。第11頁(yè)/共35頁(yè)

7、第12頁(yè)/共35頁(yè) 1.標(biāo)志的主體圖形取意于中國(guó)古代祈求豐年的天壇，表明北京銀行在北京誕生、成長(zhǎng)，未來(lái)將以北京為中心走向全國(guó)、邁向世界。 2.標(biāo)志設(shè)計(jì)體現(xiàn)了中國(guó)傳統(tǒng)文化與現(xiàn)代社會(huì)發(fā)展的和諧統(tǒng)一。代表誠(chéng)信的圓形紅色印章造型蘊(yùn)含了中國(guó)傳統(tǒng)文化中重視信用、遵守承諾的良好品德。源于中國(guó)古代錢(qián)幣的設(shè)計(jì)理念，與中國(guó)悠遠(yuǎn)金融文化一脈相承。標(biāo)志設(shè)計(jì)還加入現(xiàn)代社會(huì)發(fā)展的元素，酷似造型，體現(xiàn)了北京銀行在網(wǎng)絡(luò)信息化時(shí)代的嶄新形象。3. 整個(gè)標(biāo)志設(shè)計(jì)動(dòng)靜結(jié)合，內(nèi)外兼顧，有如中國(guó)書(shū)法般流暢、遒勁，寓意著北京銀行順暢的管理體制與運(yùn)行機(jī)制，象征京行人執(zhí)行有力，氣魄非凡。4. 標(biāo)志中B的造型體現(xiàn)了北京銀行英文名稱(chēng)Bank o

8、f Beijing的縮寫(xiě)要素。火紅的顏色預(yù)示著北京銀行充滿希望的未來(lái)。 第13頁(yè)/共35頁(yè)144.1.1 Logo的特點(diǎn)與設(shè)計(jì)原則 Logo的特點(diǎn)（1）功用性 （2）識(shí)別性 （3）顯著性 （4）多樣性 （5）藝術(shù)性（6）準(zhǔn)確性 （7）持久性 第14頁(yè)/共35頁(yè)154.1.1 Logo的特點(diǎn)與設(shè)計(jì)原則 Logo的設(shè)計(jì)原則（1）設(shè)計(jì)應(yīng)在詳盡明了設(shè)計(jì)對(duì)象的使用目的、適用范疇及有關(guān)法規(guī)等有關(guān)情況和深刻領(lǐng)會(huì)其功能性要求的前提下進(jìn)行（2）設(shè)計(jì)須充分考慮其實(shí)現(xiàn)的可行性，針對(duì)其應(yīng)用型式、材料和制作條件采取相應(yīng)的設(shè)計(jì)手段。（3）設(shè)計(jì)要符合作用對(duì)象的直觀接受能力、審美意識(shí)、社會(huì)心理和禁忌。 （4）構(gòu)思須慎重推調(diào)皮

9、，力求深刻、巧妙、新穎、獨(dú)特，表意準(zhǔn)確，能經(jīng)受住時(shí)間的考驗(yàn)。 （5）構(gòu)圖要凝練、美觀、適形（適應(yīng)其應(yīng)用物的形態(tài)）。 （6）圖形、符號(hào)既要簡(jiǎn)練、概括，又要講究藝術(shù)性。 （7）色彩要單純、強(qiáng)烈、醒目。第15頁(yè)/共35頁(yè)164.1.1 Logo的特點(diǎn)與設(shè)計(jì)原則（8）遵循標(biāo)志藝術(shù)規(guī)律，創(chuàng)造性的探求恰切的藝術(shù)表現(xiàn)形式和手法，錘煉出精當(dāng)?shù)乃囆g(shù)語(yǔ)言使設(shè)計(jì)的標(biāo)志具有高度整體美感、獲得最佳視覺(jué)效果，是標(biāo)志設(shè)計(jì)藝術(shù)追求的準(zhǔn)則。 符號(hào)美 特征美 凝練美 第16頁(yè)/共35頁(yè)174.1.2 Logo設(shè)計(jì)實(shí)例 如圖所示是清華同方Logo。 第17頁(yè)/共35頁(yè)184.2 網(wǎng)站Banner的制作 4.2.1 Banner的標(biāo)

10、準(zhǔn)與設(shè)計(jì)原則當(dāng)用戶(hù)訪問(wèn)一個(gè)網(wǎng)站的時(shí)候，第一屏的信息展示是非常重要的，很大程度上影響了用戶(hù)是否決定停留，然而光靠文字大面積的堆積，很難直觀而迅速的告訴用戶(hù)來(lái)到這里會(huì)得到什么有用的信息，因此網(wǎng)頁(yè)Banner設(shè)計(jì)在這里起到了至關(guān)重要的展示作用，特別是對(duì)于首頁(yè)Banner，有效的信息傳達(dá)讓用戶(hù)和文字之間的互動(dòng)變得生動(dòng)而有趣，。第18頁(yè)/共35頁(yè)一、Banner的構(gòu)成與設(shè)計(jì)形態(tài) 自然界的萬(wàn)物形態(tài)構(gòu)成都離不開(kāi)點(diǎn)、線、面。它們是視覺(jué)構(gòu)成的基本元素，具有不同的情感特征，因此要善于采用不同的組合去體現(xiàn)不同Banner的情感訴求 a.點(diǎn)的聚合 點(diǎn)的排列所引起的視覺(jué)流動(dòng)，引入了時(shí)間的因素,利用點(diǎn)的大小、形狀與距離的

11、變化，可以設(shè)計(jì)出富于節(jié)奏韻律的畫(huà)面。點(diǎn)的連續(xù)排列構(gòu)成線，點(diǎn)與點(diǎn)之間的距離越近，線的特性就越顯著。點(diǎn)的密集排列構(gòu)成面，同樣，點(diǎn)的距離越近，面的特性就越顯著。 第19頁(yè)/共35頁(yè)第20頁(yè)/共35頁(yè)b.線的流動(dòng) 線分為四類(lèi)：直線、曲線、折線以及三者的混合。直線又有水平線、垂直線、斜線三種形式。其中，水平線給人平靜、開(kāi)闊、安逸的感受；垂直線給人崇高、挺拔、嚴(yán)肅的感受；曲、折、弧線具有強(qiáng)烈的動(dòng)感，更容易引起視線的前進(jìn)、后退或擺動(dòng)。 第21頁(yè)/共35頁(yè)c.面的分割 面在設(shè)計(jì)中的概念，可以理解為點(diǎn)的放大，點(diǎn)的密集或線的重復(fù)。Banner元素在不同大小色塊元素的風(fēng)格對(duì)比下，能獲得清晰、條理的秩序，同時(shí)在整體上

12、也顯得和諧統(tǒng)一 第22頁(yè)/共35頁(yè)二.Banner設(shè)計(jì)的形式美法則 a.有機(jī)形的柔和與美有機(jī)形是由一定數(shù)量的曲線組合而成，是自然物外力與內(nèi)力相抗衡而形成的形態(tài)。有機(jī)形富有內(nèi)在的張力，給人以純樸、溫暖而富有生命力的感覺(jué)。曲線與個(gè)性化的插圖形成強(qiáng)烈的對(duì)比。第23頁(yè)/共35頁(yè)b.偶然形的獨(dú)特魅力 偶然形是力的作用下隨機(jī)形成的圖形，它具有天然成趣的效果，利用偶然因素提煉美的方法，讓Banner設(shè)計(jì)更加與眾不同 第24頁(yè)/共35頁(yè) 三.有效的設(shè)計(jì)創(chuàng)意方法a.預(yù)留大面積的Banner空間創(chuàng)作 Banner設(shè)計(jì)占用很大的空間，且占用的空間是重要而有價(jià)值的面積，那么你需要萬(wàn)分小心的去處理，但是如果處理的好的話

13、，它將會(huì)事倍功半，而且信息傳達(dá)非常有效。 第25頁(yè)/共35頁(yè)b.有效的措辭與行為導(dǎo)向按鈕 在banner設(shè)計(jì)中通過(guò)真實(shí)產(chǎn)品的展示，并配以鼓動(dòng)人心的措辭口號(hào)及醒目的可以直接誘導(dǎo)用戶(hù)點(diǎn)擊的行為導(dǎo)向按鈕，讓網(wǎng)頁(yè)獲得更多的用戶(hù)點(diǎn)擊和關(guān)注目光。 第26頁(yè)/共35頁(yè)c.插圖及清新手繪讓頁(yè)面倍感親切d.引入肢體語(yǔ)言讓畫(huà)面變得生動(dòng)第27頁(yè)/共35頁(yè)e.豐富的產(chǎn)品展示組合效果 用堆積這種效布局特效來(lái)展示不同的作品示例，并附上一條介紹性質(zhì)的口號(hào)，網(wǎng)頁(yè)變得更有說(shuō)服力，豐富而富有層次感。第28頁(yè)/共35頁(yè)f.特殊肌理的組合 適當(dāng)?shù)倪\(yùn)用肌理以及拼貼效果，讓畫(huà)面變得有質(zhì)感且意味深長(zhǎng)，是讓Banner與眾不同的好辦法之一。

14、 第29頁(yè)/共35頁(yè)g.讓資訊循環(huán)動(dòng)起來(lái) 使用滑動(dòng)效果來(lái)將更多信息填進(jìn)到Banner區(qū)域。這對(duì)于有很多特性和豐富產(chǎn)品線的網(wǎng)站很有用，通過(guò)一些很有用的Javascript庫(kù)及其插件，讓這類(lèi)效果更加活靈活現(xiàn)。第30頁(yè)/共35頁(yè)314.2.1 Banner的標(biāo)準(zhǔn)與設(shè)計(jì)原則 1997年第一次標(biāo)準(zhǔn)公布規(guī)格（像素）名稱(chēng)46860 全尺寸banner39272 全尺寸帶導(dǎo)航條banner23460 半尺寸banner125125 方形按鈕12090 按鈕1或小圖標(biāo)12060 按鈕2或小圖標(biāo)8831 小按鈕或banner120240 垂直banner第31頁(yè)/共35頁(yè)324.2.1 Banner的標(biāo)準(zhǔn)與設(shè)計(jì)原

15、則 2001年第二次標(biāo)準(zhǔn)公布規(guī)格（像素）名稱(chēng)120600 “摩天大樓”形160600 寬摩天大樓形180150 長(zhǎng)方形300250 中級(jí)長(zhǎng)方形336280 大長(zhǎng)方形240400 豎長(zhǎng)方形250250“正方形彈出式”廣告12060，這種廣告規(guī)格主要用于做LOGO使用。 12090，主要應(yīng)用于產(chǎn)品演示或大型LOGO。 125125，這種規(guī)格適于表現(xiàn)照片效果的圖像廣告。 23460，這種規(guī)格適用于框架或左右形式主頁(yè)的廣告鏈接。 39272，主要用于有較多圖片展示的廣告條，用于頁(yè)眉或頁(yè)腳。46860，應(yīng)用最為廣泛的廣告條尺寸，用于頁(yè)眉或頁(yè)腳。 8831，主要用于網(wǎng)頁(yè)鏈接，或網(wǎng)站小型LOGO第32頁(yè)/共35頁(yè)334.2.1 Banner的標(biāo)準(zhǔn)與設(shè)計(jì)原則 廣告條盡量選擇國(guó)際標(biāo)準(zhǔn)尺寸。如果不是用來(lái)進(jìn)行交換，或僅僅針對(duì)單獨(dú)的頁(yè)面 一個(gè)頁(yè)面內(nèi)不宜有超出兩個(gè)46860像素的全尺寸Banner 大尺寸Banner要注意配合頁(yè)