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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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