區(qū)塊鏈技術(shù)與電子商務(wù)應(yīng)用 課件 【ch03】Iustrator圖標(biāo)設(shè)計(jì)

Illustrator圖標(biāo)設(shè)計(jì)第五章新工科建設(shè)·應(yīng)用型本科規(guī)劃教材UI設(shè)計(jì)實(shí)戰(zhàn)Illustrator概述0101Illustrator概述Illustrator發(fā)展歷程Illustrator應(yīng)用領(lǐng)域llustrator是Adobe公司推出的基于矢量的圖形處理軟件。它是為蘋果公司麥金塔電腦而設(shè)計(jì)開發(fā)的，1987年1月發(fā)布。歷經(jīng)三十年的發(fā)展，目前最高版本為lustratorCC2018。Illustrator廣泛應(yīng)用于廣告設(shè)計(jì)、CI策劃、網(wǎng)頁(yè)設(shè)計(jì)、插圖創(chuàng)作、產(chǎn)品包裝設(shè)計(jì)、圖標(biāo)設(shè)計(jì)等領(lǐng)域。01Illustrator概述1.廣告設(shè)計(jì)在廣告設(shè)計(jì)中，llustrator起著非常重要的作用，無(wú)論是海報(bào)、招貼，還是書籍裝幀，都需要llustrator完成圖像豐富的平面印刷品。海報(bào)設(shè)計(jì)如圖3.1所示。01Illustrator概述2.Cl策劃Cl,也稱CIS,是英文CorporateldentitySystem的縮寫，一般譯為“企業(yè)視覺形象識(shí)別系統(tǒng)”。CI設(shè)計(jì)就是有關(guān)企業(yè)視覺形象識(shí)別的設(shè)計(jì)，包括企業(yè)名稱、標(biāo)志、標(biāo)準(zhǔn)字體、色彩、標(biāo)語(yǔ)等方面的設(shè)計(jì)，如圖3.2所示。01Illustrator概述3.網(wǎng)頁(yè)設(shè)計(jì)Illustrator在網(wǎng)頁(yè)設(shè)計(jì)中主要輔助設(shè)計(jì)Logo、網(wǎng)絡(luò)商標(biāo)，以及視覺上的排版，如圖3.3所示。01Illustrator概述4.插圖創(chuàng)作插圖設(shè)計(jì)是運(yùn)用圖案的表現(xiàn)形式，使用llustrator可以運(yùn)用分割、直線與色彩的反復(fù)創(chuàng)造出平面與單純化效果，能夠靈活、方便地進(jìn)行插圖創(chuàng)作，如圖3.4所示。01Illustrator概述5.產(chǎn)品包裝設(shè)計(jì)產(chǎn)品包裝設(shè)計(jì)是指選用合適的包裝材料，針對(duì)產(chǎn)品本身的特性及受眾的喜好等相關(guān)因素，運(yùn)用巧妙的工藝制作手段，為產(chǎn)品進(jìn)行的容器結(jié)構(gòu)造型和包裝的美化裝飾設(shè)計(jì)，如圖3.5所示。Illustrator可以將圖像轉(zhuǎn)換成可編輯的矢量圖案，設(shè)計(jì)師在應(yīng)用的過程中得心應(yīng)手，輕松滿足客戶對(duì)于產(chǎn)品的高要求。01Illustrator概述6.圖標(biāo)設(shè)計(jì)隨著移動(dòng)互聯(lián)網(wǎng)產(chǎn)品的普及，大量的圖標(biāo)設(shè)計(jì)需要設(shè)計(jì)師能夠快速產(chǎn)出和迭代，如圖3.6所示。而llustrator快速、準(zhǔn)確造型的優(yōu)勢(shì)，給設(shè)計(jì)師帶來(lái)了便利。Illustrator基礎(chǔ)操作0202Illustrator基礎(chǔ)操作工作區(qū)概覽熟悉llustrator的操作界面、工具箱、面板是深入學(xué)習(xí)軟件的重要基礎(chǔ)。通過本節(jié)課程的講解，讓大家了解工作區(qū)，快速掌握l(shuí)lustrator的工作環(huán)境。

菜單欄：包含用于操作的命令。單擊菜單欄的各種命令，是實(shí)現(xiàn)主要功能的最基本的操作方式。畫板：繪制和創(chuàng)意設(shè)計(jì)圖稿，可以根據(jù)需求調(diào)整畫板的大小和數(shù)量?！罟ぞ呦洌豪L制和修改圖形的工具。

面板：可以幫助監(jiān)控和修改圖稿和菜單。狀態(tài)欄：顯示當(dāng)前縮放級(jí)別和關(guān)于主題的信息，包括當(dāng)前使用的工具、日期和時(shí)間、還原和重做次數(shù)、文檔顏色配置文件的狀態(tài)。02Illustrator基礎(chǔ)操作新建Illustrator文檔在llustratorCC2018版本中有兩種新建文檔的方法。打開軟件后，自動(dòng)出現(xiàn)“開始”工作區(qū)，在該區(qū)域內(nèi)顯示最近使用或打開過的文件或素材，以及創(chuàng)建新文檔的按鈕，如圖3.11所示。可以通過“編輯”>“首選項(xiàng)”>“常規(guī)”操作進(jìn)行打開或關(guān)閉設(shè)置，如圖3.12所示。02Illustrator基礎(chǔ)操作保存lllustrator文檔文件進(jìn)行處理后，需要及時(shí)保存，以免出現(xiàn)意外造成文件丟失。在llustratorCC2018中可以使用不同的命令保存文件，包括“存儲(chǔ)”“存儲(chǔ)為”“存儲(chǔ)為模板”“存儲(chǔ)為Web所用格式”。1.“存儲(chǔ)”命令選擇“文件”>“存儲(chǔ)”命令，即可將文件以原有格式進(jìn)行存儲(chǔ)，且保存在原位置處。2.“存儲(chǔ)為”命令選擇“文件”>“存儲(chǔ)為”命令，可以將當(dāng)前文件保存為其他名稱和格式，或者將其存儲(chǔ)到其他位置。3.“存儲(chǔ)為模板”命令選擇“文件”>“存儲(chǔ)為模板”命令，可以將當(dāng)前文件保存為一個(gè)模板文件。4.“存儲(chǔ)為Web所用格式”命令選擇“文件”>“存儲(chǔ)為Web所用格式”命令，可以創(chuàng)建PNG、JPEG、GIF文件。02Illustrator基礎(chǔ)操作保存文件類型在llustratorCC2018版本中可以保存的文件類型如下。Al:llustrator的專用源文件格式，向下兼容低版本生成的文件，可以保留所有文件數(shù)據(jù)。PDF:支持跨平臺(tái)及多媒體集成的信息出版和發(fā)布。以PostScript語(yǔ)言圖像模型為基礎(chǔ)，無(wú)論在哪種打印機(jī)上都可保證精確的顏色和準(zhǔn)確的打印效果，即PDF會(huì)準(zhǔn)確再現(xiàn)原稿的每一個(gè)字符、顏色及圖像。EPS:EPS文件是目前桌面印刷系統(tǒng)普遍使用的通用交換格式中的一種綜合格式。它由一個(gè)PostSonpt語(yǔ)言的文本文件和一個(gè)(可選)低分辨率的由PICT或TFF格式描述的代表像素組成。EPS文件就是包括文件頭信息的PostScript文件，利用文件頭信息可使其他應(yīng)用程序?qū)⒋宋募度胛臋n。02Illustrator基礎(chǔ)操作保存文件類型AT:llustrator模板文件格式。SVG:一種開放標(biāo)準(zhǔn)的矢量圖形語(yǔ)言，用戶可以直接用代碼來(lái)描繪圖像，可以用任何文字處理工具打開SVG圖像，通過改變部分代碼來(lái)使圖像具有交互功能，并且可以隨時(shí)插入到HTML中通過瀏覽器來(lái)預(yù)覽。SVGZ:是SVG的壓縮版，但是兼容性偏差，不方便用代碼來(lái)描繪圖像。導(dǎo)出后可以直接用瀏覽器觀看。02Illustrator基礎(chǔ)操作導(dǎo)出文件類型在llustratorCC2018版本中可以導(dǎo)出的常用文件類型如下。DWG:DWG格式是由AutoCAD繪圖軟件繪制出來(lái)的圖形保存的文件格式，llustrator可以導(dǎo)出該格式，便于圖形文件跨平臺(tái)使用。BMP:Windows操作系統(tǒng)中的標(biāo)準(zhǔn)圖像文件格式。JPEG:JPEG(JointPhotographicExpertsGroup)是在國(guó)際標(biāo)準(zhǔn)化組織(ISO)領(lǐng)導(dǎo)下制定靜態(tài)圖像壓縮標(biāo)準(zhǔn)的委員會(huì)名稱的英文縮寫。JPEG(JPG)就是該委員會(huì)制定的。由于JPEG優(yōu)良的品質(zhì)，被廣泛應(yīng)用于互聯(lián)網(wǎng)和數(shù)碼相機(jī)領(lǐng)域，這些領(lǐng)域使用的大部分圖像都采用了JPEG壓縮標(biāo)準(zhǔn)。PSD:Photoshop的專用源文件格式。這種格式可以存儲(chǔ)Photoshop中所有的圖層、通道、參考線、注解和顏色模式等信息。02Illustrator基礎(chǔ)操作導(dǎo)出文件類型PNG:便攜式網(wǎng)絡(luò)圖形(PortableNetworkGraphics,PNG)是一種無(wú)損壓縮的位圖格式。其體積小、無(wú)損壓縮、索引彩色模式、更優(yōu)化的網(wǎng)絡(luò)傳輸顯示，支持透明效果，還支持真彩和灰度級(jí)圖像的Alpha通道透明度，最高支持24位真彩色圖像及8位灰度圖像。目前，它是移動(dòng)產(chǎn)品所用圖片的主流格式。TGA:TGA的結(jié)構(gòu)比較簡(jiǎn)單，屬于一種圖形、圖像數(shù)據(jù)的通用格式，TGA格式支持壓縮，使用不失真的壓縮算法。在多媒體領(lǐng)域有很大的影響力，是計(jì)算機(jī)生成圖像向電視轉(zhuǎn)換的一種首選格式。TFF:標(biāo)簽圖像文件格式，簡(jiǎn)寫為TIFF。它是一種用來(lái)存儲(chǔ)照片和藝術(shù)圖在內(nèi)的圖像文件格式。TFF文件格式適用于在應(yīng)用程序之間和計(jì)算機(jī)平臺(tái)之間交換文件，它的出現(xiàn)使圖像數(shù)據(jù)交換更加便利。02Illustrator基礎(chǔ)操作輔助工具的使用1.標(biāo)尺和零點(diǎn)標(biāo)尺可以幫助設(shè)計(jì)者在畫板中精確地放置和度量對(duì)象。啟動(dòng)標(biāo)尺后，移動(dòng)光標(biāo)時(shí)標(biāo)尺會(huì)顯示光標(biāo)的精確位置。選擇“視圖”>“顯示/隱藏標(biāo)尺”命令，或者按“Ctrl+R”組合鍵切換，可以顯示/隱藏標(biāo)尺。顯示“標(biāo)尺”如圖3.15所示。02Illustrator基礎(chǔ)操作選擇對(duì)象1.選擇工具【選擇工具】口是最常用的工具，可以選擇、移動(dòng)或調(diào)整對(duì)象，快捷鍵為“V”,縮放對(duì)象和復(fù)制對(duì)象如圖3.19和圖3.20所示。

按住“Shift”鍵，單擊對(duì)象可加選多個(gè)對(duì)象并激活其邊框，也可以拖曳出矩形框框選多個(gè)對(duì)象。

按住“Ctr}”鍵，單擊選取不同前后次序的對(duì)象。

按住“At”鍵，單擊并拖曳對(duì)象，可復(fù)制該對(duì)象。02Illustrator基礎(chǔ)操作選擇對(duì)象2.直接選擇工具【直接選擇工具】可以選擇對(duì)象上的錨點(diǎn)，選中的錨點(diǎn)以實(shí)心表示，未選中的錨點(diǎn)以空心表示，快捷鍵為“A”,直接選擇錨點(diǎn)如圖3.21所示。選取錨點(diǎn)后，按“Delete”鍵，可以刪除錨點(diǎn)；按方向鍵可以修改錨點(diǎn)位置。02Illustrator基礎(chǔ)操作選擇對(duì)象對(duì)象編組可以把多個(gè)對(duì)象編成一個(gè)組，統(tǒng)一進(jìn)行處理，使用【選擇工具】和【直接選擇工具】可以選擇編組中的不同級(jí)別的對(duì)象。1.選擇多個(gè)對(duì)象編組要選擇多個(gè)對(duì)象編組，可以選擇“對(duì)象”>“編組”命令，或者按“Cm+G”組合鍵，將選取的對(duì)象進(jìn)行編組。2.取消對(duì)象編組選擇要取消編組的對(duì)象，可以選擇“對(duì)象”>“取消編組”命令，或者按“Shift+Ctr+G”組合鍵，將選取的編組對(duì)象取消編組。02Illustrator基礎(chǔ)操作對(duì)象對(duì)齊和分布1.對(duì)齊對(duì)象選取的對(duì)象可以進(jìn)行對(duì)齊操作，執(zhí)行“窗口">“對(duì)齊"操作，打開對(duì)齊錨點(diǎn)面板，如圖3.25所示。2.分布對(duì)象選取的對(duì)象可以進(jìn)行分布操作，在分布錨點(diǎn)面板中執(zhí)行，如圖3.26所示。02Illustrator基礎(chǔ)操作對(duì)象對(duì)齊和分布3.分布間距進(jìn)行對(duì)象分布和對(duì)齊的操作時(shí)，還可以通過設(shè)置分布間距進(jìn)行，分布間距面板如圖3.27所示。對(duì)齊類型有三種：對(duì)齊所選對(duì)象、對(duì)齊關(guān)鍵對(duì)象、對(duì)齊畫板。

對(duì)齊所選對(duì)象，即以所選對(duì)象相互之間對(duì)齊。對(duì)齊關(guān)鍵對(duì)象，即以所選對(duì)象為參照物，與所選對(duì)象對(duì)齊。

對(duì)齊畫板，即所選對(duì)象以畫板為參照物，所選對(duì)象相互對(duì)齊。02Illustrator基礎(chǔ)操作基本繪圖工具在llustrator中，有兩組繪制基本圖形的工具，如圖3.28、圖3.29所示。組合對(duì)象0303組合對(duì)象復(fù)合形狀復(fù)合形狀可由簡(jiǎn)單路徑、復(fù)合路徑、文本框架、文本輪廓或其他形狀復(fù)合組成。復(fù)合形狀的外觀取決于產(chǎn)生復(fù)合的方法，常用的復(fù)合形狀在“路徑查找器”面板的“形狀模式”選項(xiàng)中，其中包括【聯(lián)集】、【減去頂層】、【交集】和【差集】。其他復(fù)合形狀其他復(fù)合形狀在“路徑查找器”面板的“路徑查找器”選項(xiàng)中，包括【分割】、【修邊】、【合并】、【裁剪】、【輪廓】和【減去后面】等復(fù)合形狀。03組合對(duì)象釋放與擴(kuò)展復(fù)合形狀使用“釋放復(fù)合形狀”命令可將復(fù)合對(duì)象拆分為原有的單獨(dú)對(duì)象，如圖3.94所示。03組合對(duì)象路徑查找器選項(xiàng)“精度”;控制繪制路徑的準(zhǔn)確度，值越小結(jié)果會(huì)越接近原始形狀，值越大結(jié)果越不準(zhǔn)確?！皠h除冗余點(diǎn)”:勾選它會(huì)刪除一些因?yàn)閳?zhí)行相關(guān)操作而生成的冗余點(diǎn)?！胺指詈洼喞獙h除未上色圖稿”:當(dāng)完成分割和輪廓操作時(shí)，可能會(huì)造成一些形狀沒有填充和輪廓，勾選它就會(huì)刪除這些形狀。“默認(rèn)值”:單擊該按鈕，系統(tǒng)將使用默認(rèn)設(shè)置。擴(kuò)展、擴(kuò)展外觀、輪廓化描邊、文字輪廓0404擴(kuò)展、擴(kuò)展外觀、輪廓化描邊、文字輪廓擴(kuò)展：選擇“對(duì)象”>“擴(kuò)展”命令。擴(kuò)展對(duì)象可用來(lái)將單一對(duì)象分割為若干個(gè)對(duì)象，這些對(duì)象共同組成其外觀，如圖3.100所示。另外，如果打印透明度效果、3D對(duì)象、圖案、漸變、描邊、混合、光暈、封套或符號(hào)時(shí)遇到困難，則可以擴(kuò)展后再打印。擴(kuò)展04擴(kuò)展、擴(kuò)展外觀、輪廓化描邊、文字輪廓擴(kuò)展外觀擴(kuò)展外觀：選擇“對(duì)象”>“擴(kuò)展外觀”命令。將圖形的外觀效果進(jìn)行分離，如圖3.101所示。其外觀效果類似Photoshop中的圖層樣式，如投影、內(nèi)陰影、內(nèi)發(fā)光等效果。04擴(kuò)展、擴(kuò)展外觀、輪廓化描邊、文字輪廓輪廓化描邊輪廓化描邊：選擇“對(duì)象”>“路徑”>“輪廓化描邊”命令。將描邊轉(zhuǎn)化為填充(形狀),如圖3.102所示。有時(shí)會(huì)和擴(kuò)展命令產(chǎn)生相似的效果，輪廓化描邊的對(duì)象只能是描邊，而擴(kuò)展的對(duì)象包括描邊和填充。04擴(kuò)展、擴(kuò)展外觀、輪廓化描邊、文字輪廓文字輪廓文字輪廓：選中文字，單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“創(chuàng)建輪廓”命令，如圖3.103所示。文字輪廓也稱為“文字轉(zhuǎn)曲”或“轉(zhuǎn)曲”。創(chuàng)建輪廓后文本將不再具備文字屬性，而成為圖形，以方便在不同輸出設(shè)備間使用。但它屬于不可逆的操作，所以一般做印刷處理時(shí)，都會(huì)提前備份一份，再將原文字做轉(zhuǎn)曲操作，同時(shí)將備份的文字進(jìn)行隱藏，以便于下次修改。圖標(biāo)設(shè)計(jì)技法0505圖標(biāo)設(shè)計(jì)技法使用【形狀工具】和【鋼筆工具】,繪制線性“image”圖標(biāo)，最終效果如圖3.104所示。繪制“image”圖標(biāo)05圖標(biāo)設(shè)計(jì)技法(1)打開llustratorCC2018,創(chuàng)建新文件，文件