Illustrator平面設(shè)計(jì)立體化教程（Illustrator 2021）（微課版）課件 項(xiàng)目2 繪制簡(jiǎn)單圖形

Illustrator平面設(shè)計(jì)立體化教程（微課版）新形態(tài)立體化精品系列教材項(xiàng)目2繪制簡(jiǎn)單圖形目錄Contents任務(wù)2.1設(shè)計(jì)“綠色能源”圖標(biāo)任務(wù)2.2

設(shè)計(jì)沃柑主圖綜合實(shí)戰(zhàn)

設(shè)計(jì)粽子主圖某汽車品牌研發(fā)一款以太陽(yáng)能為動(dòng)力的電動(dòng)汽車，需要設(shè)計(jì)一款名為“綠色能源”的新能源圖標(biāo)，米拉與老洪一起分析了品牌資料，根據(jù)客戶對(duì)新能源圖標(biāo)的要求收集新能源相關(guān)素材，準(zhǔn)備將新能源的概念和創(chuàng)意融入到新能源圖標(biāo)設(shè)計(jì)中。本任務(wù)的參考效果如圖所示。任務(wù)2.1

設(shè)計(jì)“綠色能源”圖標(biāo)`

任務(wù)描述任務(wù)背景圖標(biāo)是一種圖形標(biāo)識(shí)，又稱icon，具有簡(jiǎn)潔、易識(shí)別的特點(diǎn)，是VI、UI設(shè)計(jì)中常見且非常重要的要素。本例客戶要求設(shè)計(jì)的“綠色能源”圖標(biāo)，需要結(jié)合綠色環(huán)保理念，以綠色為主題色，融入“太陽(yáng)”特征。任務(wù)描述任務(wù)目標(biāo)知識(shí)要點(diǎn)填充色與描邊色、直線段工具、極坐標(biāo)網(wǎng)格工具、螺紋線工具。①運(yùn)用多種線性繪圖工具進(jìn)行圖標(biāo)的繪制，設(shè)置圖標(biāo)填充色和描邊色，設(shè)置線條寬度樣式，增強(qiáng)圖標(biāo)藝術(shù)性，使圖標(biāo)更具吸引力。②制作尺寸為500px×500px，分辨率為72像素/英寸的新能源圖標(biāo)。③圖標(biāo)設(shè)計(jì)簡(jiǎn)潔大氣，便于應(yīng)用和傳播。知識(shí)準(zhǔn)備1．簡(jiǎn)單圖形的繪圖方式Illustrator中，可以將常見的線性圖形和基本形狀，如直線、弧線、螺旋線、網(wǎng)格、圓、正方形、三角形、五角形等歸納為簡(jiǎn)單圖形。而繪制這些圖形的工具分布在直線段工具組和形狀工具組中，使用這些工具的繪制圖形有以下兩種方法。拖曳鼠標(biāo)繪制圖形：選擇直線段工具組或形狀工具組中的工具，在畫板中圖形起始位置單擊并按住鼠標(biāo)左鍵不放，拖曳鼠標(biāo)指針到需要結(jié)束的位置，釋放鼠標(biāo)左鍵，繪制出繪圖工具對(duì)應(yīng)的圖形。通過(guò)參數(shù)對(duì)話框精確繪制圖形：選擇直線段工具組或形狀工具組中的工具，單擊畫板，在打開的對(duì)話框中可以對(duì)圖形的詳細(xì)參數(shù)進(jìn)行設(shè)置，不同工具的具體參數(shù)設(shè)置也有所不同。知識(shí)準(zhǔn)備2．填充色與描邊色通常情況下，繪制的圖形需要賦予描邊色或填充色才能被肉眼所見，如圖所示。1填充色與描邊色2設(shè)置填充色知識(shí)準(zhǔn)備3．繪圖工具控制欄除了通過(guò)工具箱設(shè)置繪制圖形的填充色和描邊色以外，在繪圖工具控制欄還可以設(shè)置繪制圖形的屬性。知識(shí)準(zhǔn)備3．繪圖工具控制欄繪圖工具控制欄的設(shè)置是相似的，這里以“直線段工具”為例，如上圖所示，具體參數(shù)介紹如下。填充色01描邊色02描邊03變量寬度配置文件04畫筆定義05不透明度06樣式07圖稿重新著色08對(duì)齊畫板09對(duì)齊按鈕組10隔離選中的對(duì)象11選擇類似的對(duì)象12知識(shí)準(zhǔn)備4．直線段工具組（1）直線段工具“直線段工具”可用來(lái)繪制各種方向的直線。繪制直線時(shí)，按住【Shift】鍵可繪制出水平、垂直或45°角及45°角倍數(shù)的直線；按住【A1t】鍵，可以繪制由鼠標(biāo)單擊點(diǎn)為中心向兩邊延伸的線段。如圖所示?！爸本€段工具選項(xiàng)”對(duì)話框具體參數(shù)介紹如下。長(zhǎng)度：用于設(shè)置直線段的長(zhǎng)度。角度：用于設(shè)置直線段的角度。線段填色：默認(rèn)直線段僅有描邊色，單擊選中該復(fù)選框，可為直線段設(shè)置填充色。知識(shí)準(zhǔn)備4．直線段工具組（2）弧形工具“弧形工具”可用來(lái)繪制不同弧度的弧線。繪制弧線時(shí)，按【C】鍵，可以在開放的弧線與閉合的弧線之間切換；按住【Shift】鍵，可以鎖定對(duì)角線方向；按【↑】【↓】【←】【→】鍵，可以調(diào)整弧線的斜率。如圖所示。X軸長(zhǎng)度：用于設(shè)置弧線另一端點(diǎn)在x軸的距離。Y軸長(zhǎng)度：用于設(shè)置弧線另一端點(diǎn)在y軸的距離。參考點(diǎn)定位器：用于設(shè)置弧線端點(diǎn)的位置。類型：用于設(shè)置弧線為開放弧線或閉合的弧線圖形?；€軸：用于設(shè)置弧線的基線軸為x軸或y軸。斜率：用于設(shè)置弧線的弧度。知識(shí)準(zhǔn)備4．直線段工具組（3）螺旋線工具“螺旋線工具”可用來(lái)繪制螺旋線。繪制螺旋線時(shí)，按【R】鍵，可以調(diào)整螺旋的方向；按住【Ctrl】鍵，可以調(diào)整螺旋的疏密度，使螺旋密度由密變疏；按【↑】鍵，可以增加螺旋線的圈數(shù)，按【↓】鍵，可減少螺旋線的圈數(shù)。如圖所示。半徑：用于設(shè)置螺旋線的半徑尺寸。衰減：用于設(shè)置螺旋線之間相差的比例，百分比越小，螺旋線之間的差距越小。段數(shù)：用于設(shè)置螺旋線的段數(shù)，數(shù)值越大，螺旋線越長(zhǎng)，數(shù)值越小螺旋線越短。樣式：用于設(shè)置螺旋線旋轉(zhuǎn)的方向?yàn)轫槙r(shí)針還是逆時(shí)針。知識(shí)準(zhǔn)備4．直線段工具組（4）矩形網(wǎng)格工具“矩形網(wǎng)格工具”可輕松地創(chuàng)建矩形網(wǎng)格，從而制作表格，如員工信息表、作息時(shí)間表等。如左圖所示。垂直分隔線：“數(shù)量”數(shù)值框用于設(shè)置垂直分隔線的數(shù)量，“傾斜”值設(shè)置垂直分隔線的間距變化。使用外部矩形作為框架：?jiǎn)螕暨x中該復(fù)選框，將采用一個(gè)矩形作為外框架。填色網(wǎng)格：?jiǎn)螕暨x中該復(fù)選框，可使用當(dāng)前顏色填充網(wǎng)格。默認(rèn)大?。河糜谠O(shè)置圖形寬度、高度。水平分隔線：“數(shù)量”數(shù)值框用于設(shè)置水平分隔線數(shù)量。知識(shí)準(zhǔn)備4．直線段工具組（5）極坐標(biāo)網(wǎng)格工具“極坐標(biāo)網(wǎng)格工具”也稱為雷達(dá)網(wǎng)格，用于繪制具有同心圓的放射線網(wǎng)格。同心圓分隔線：“數(shù)量”數(shù)值框用于設(shè)置極坐標(biāo)網(wǎng)格同心圓的數(shù)量。“傾斜”值決定了同心圓傾向于網(wǎng)格內(nèi)側(cè)或外側(cè)。用當(dāng)前顏色填充網(wǎng)格。徑向分隔線：“數(shù)量”數(shù)值框用于設(shè)置極坐標(biāo)網(wǎng)格放射線的數(shù)量。從橢圓形創(chuàng)建復(fù)合路徑：?jiǎn)螕暨x中該復(fù)選框，將同心圓創(chuàng)建為獨(dú)立的復(fù)合路徑。選擇“極坐標(biāo)網(wǎng)格工具”，單擊畫板，打開“極坐標(biāo)網(wǎng)格工具選項(xiàng)”對(duì)話框，設(shè)置參數(shù)，單擊“確定”按鈕，可以繪制精確的極坐標(biāo)網(wǎng)格。如左圖所示。任務(wù)實(shí)施1．繪制圖標(biāo)底圖米拉繪制的“綠色能源”圖標(biāo)草圖的底圖由螺旋線和射線組成，而利用“極坐標(biāo)網(wǎng)格工具”繪制的圖形由規(guī)則射線和圓組合而成，恰好能滿足設(shè)計(jì)需求。1創(chuàng)建極坐標(biāo)網(wǎng)格2設(shè)置網(wǎng)格填充色于是她決定使用該工具繪制圖標(biāo)的底圖，具體操作如下。任務(wù)實(shí)施2．繪制圖標(biāo)主體圖標(biāo)主體的繪制需要用到“直線段工具”、“螺旋線工具”，為了增強(qiáng)吸引力，米拉準(zhǔn)備設(shè)置螺旋線、直線段外觀，并通過(guò)取消描邊的方式隱藏極坐標(biāo)網(wǎng)格線，然后將提供的素材添加文字，具體操作如下。1精確繪制螺旋線2設(shè)置螺旋線3調(diào)整螺旋線任務(wù)實(shí)施2．繪制圖標(biāo)主體4繪制與編輯射線5取消極坐標(biāo)網(wǎng)格描邊色6添加文本目錄Contents任務(wù)2.1

設(shè)計(jì)“綠色能源”圖標(biāo)任務(wù)2.2

設(shè)計(jì)沃柑主圖綜合實(shí)戰(zhàn)

設(shè)計(jì)粽子主圖老洪對(duì)米拉設(shè)計(jì)的“綠色能源”圖標(biāo)效果很滿意，便放心地將沃柑主圖的任務(wù)資料交給米拉。米拉拿出提供的沃柑圖片，開始仔細(xì)瀏覽、分析圖片，從中挑選高清、視覺獨(dú)特、細(xì)節(jié)精美、紋理清晰的沃柑圖片作為主圖，然后根據(jù)客戶提供的信息，構(gòu)思主圖需要展示的文案，并收集所需素材。本任務(wù)的參考效果如圖所示。任務(wù)2.2

設(shè)計(jì)沃柑主圖任務(wù)描述任務(wù)背景在各類購(gòu)物平臺(tái)搜索商品時(shí)常常會(huì)出現(xiàn)相應(yīng)商品的主圖，主圖往往是消費(fèi)者對(duì)商品的第一印象，其設(shè)計(jì)效果影響點(diǎn)擊率，點(diǎn)擊率又影響了商品銷量。入駐淘寶平臺(tái)的“甜果之家”店鋪預(yù)計(jì)下月上新沃柑，需要設(shè)計(jì)沃柑主圖，目前已完成商品拍攝，擬定好商品柑促銷信息，需要設(shè)計(jì)師運(yùn)用提供的素材設(shè)計(jì)沃柑主圖。任務(wù)描述任務(wù)目標(biāo)知識(shí)要點(diǎn)矩形工具、圓角矩形工具、橢圓工具、星形工具、虛線設(shè)置。①制作尺寸為800px×800px，分辨率為72像素/英寸的主圖。②運(yùn)用形狀工具繪制主圖邊框、主圖標(biāo)簽、文案裝飾底紋，豐富畫面元素。③突出商品特性、商品賣點(diǎn)，簡(jiǎn)潔美觀，能夠有效提高點(diǎn)擊率。知識(shí)準(zhǔn)備1．形狀工具組（1）矩形工具“矩形工具”可以繪制矩形或正方形。選擇“矩形工具”，單擊畫板，打開“矩形”對(duì)話框，設(shè)置寬度和高度，單擊按鈕可得到精確尺寸的矩形，如右圖所示。（2）圓角矩形工具“圓角矩形工具”可以繪制圓角矩形。選擇“圓角矩形工具”，單擊畫板，打開“圓角矩形”對(duì)話框，如右圖所示。知識(shí)準(zhǔn)備1．形狀工具組（3）橢圓工具“橢圓工具”可繪制橢圓、圓或餅圖。選擇“橢圓工具”，單擊畫板，打開“橢圓”對(duì)話框，設(shè)置寬度、高度，單擊“確定”按鈕，可得到尺寸精確的橢圓，如左圖所示。（4）多邊形工具“多邊形工具”可以繪制三角形、四邊形、五邊形等3邊以上的形狀。如果在繪制時(shí)按【↑】鍵，可增加多邊形邊數(shù)，按【↓】鍵，可減少多邊形邊數(shù)。選擇“多邊形工具”，單擊畫板，打開“多邊形”對(duì)話框，如右圖所示。知識(shí)準(zhǔn)備1．形狀工具組（5）星形工具“星形工具”可以繪制三角形和各類星形，選擇“星形工具”，單擊畫板，打開“星形”對(duì)話框，設(shè)置星形參數(shù)，單擊”確定“按鈕，如下圖所示?！靶切巍睂?duì)話框具體參數(shù)介紹如下。半徑1：設(shè)置從星形中心點(diǎn)到各外部角的頂點(diǎn)的距離。半徑2：設(shè)置從星形中心點(diǎn)到各內(nèi)部角的端點(diǎn)的距離。角點(diǎn)數(shù)：設(shè)置星形中的邊角數(shù)量。知識(shí)準(zhǔn)備1．形狀工具組（6）光暈工具“光暈工具”雖然位于形狀工具組中，卻與其他形狀工具有所不同，主要用于繪制日光和鏡頭光暈等效果。打開一幅圖像，選擇“光暈工具”，在圖像上拖動(dòng)鼠標(biāo)繪制光暈，或在圖像上需要添加光暈的位置單擊鼠標(biāo)左鍵，如左圖所示。居中：“直徑”數(shù)值框用于控制光暈的大小。光暈：用于設(shè)置光暈向外增大和模糊度的百分比，低的模糊度可得到干凈明快的光暈效果。射線：用于設(shè)置射線的數(shù)量、最長(zhǎng)的射線長(zhǎng)度和射線的模糊度。環(huán)形：用于設(shè)置光暈中心距離最大環(huán)中心的路徑值，以及環(huán)的數(shù)量、最大環(huán)的大小和環(huán)的方向。預(yù)覽：?jiǎn)螕暨x中該復(fù)選框，可在不關(guān)閉“光暈工具選項(xiàng)”對(duì)話框的情況下，查看參數(shù)設(shè)置效果。知識(shí)準(zhǔn)備2．調(diào)整形狀邊角選擇“直接選擇工具”，選擇繪制好的形狀，若形狀上出現(xiàn)邊角構(gòu)件圖標(biāo)，表示可以編輯形狀邊角，以更改形狀外觀。調(diào)整全部邊角：向內(nèi)拖曳其中任意一個(gè)邊角構(gòu)件，可變形全部的邊角，松開鼠標(biāo)完成變形。單獨(dú)調(diào)整邊角：當(dāng)鼠標(biāo)指針移動(dòng)到任意一個(gè)邊角構(gòu)件上。交替轉(zhuǎn)換邊角樣式：按住【Alt】鍵不放，單擊選中任意一個(gè)邊角構(gòu)件，可在“圓角”“反向圓角”和“倒角”3種邊角樣式中交替轉(zhuǎn)換。邊角”對(duì)話框：按住【Ctrl】鍵不放，同時(shí)雙擊選中其中一個(gè)邊角構(gòu)件，可打開“邊角”對(duì)話框，在其中可以設(shè)置邊角樣式、邊角半徑和圓角類型，設(shè)置完成后單擊按鈕，完成調(diào)整?！白儞Q”面板中的形狀屬性設(shè)置：選擇“選擇工具”，選擇繪制的形狀，選擇【窗口】/【變換】命令，或按【Shift+F8】鍵打開“變換”面板。知識(shí)準(zhǔn)備3．“描邊”面板選擇【窗口】/【描邊】命令，或按【Ctrl+F10】鍵，都可打開“描邊”面板，設(shè)置描邊屬性。右圖所示為運(yùn)用“描邊”面板設(shè)置描邊前后的對(duì)比效果。粗細(xì)：用于設(shè)置描邊的寬度，與控制欄“描邊”數(shù)值框的作用一致。端點(diǎn)：設(shè)置描邊各線段的首端和尾端的形狀樣式。邊角：設(shè)置描邊的拐角接合形式，分別為斜接連接、圓角連接和斜角連接。對(duì)齊描邊：設(shè)置描邊與路徑的對(duì)齊方式。虛線：?jiǎn)螕暨x中“虛線”復(fù)選框，將默認(rèn)選中“保留虛線和間隙的精確長(zhǎng)度”按鈕，用于在不對(duì)齊的情況下保留虛線外觀。箭頭：選中添加箭頭的線條，在“起點(diǎn)的箭頭”“終點(diǎn)的箭頭”下拉列表選擇線條起點(diǎn)箭頭樣式。任務(wù)實(shí)施1．設(shè)計(jì)主圖邊框米拉覺得直接將沃柑圖片制作為白底主圖太過(guò)單調(diào)，為豐富和美化主圖版面，米拉考慮繪制矩形、圓角矩形充當(dāng)主圖的邊框效果，并添加店鋪Logo圖形到左上角，具體操作如下。1繪制矩形2設(shè)置描邊色和填充色任務(wù)實(shí)施1．設(shè)計(jì)主圖邊框3繪制圓角矩形4添加Logo任務(wù)實(shí)施2．排版主圖文案和商品圖片合理排版主圖的文案和圖片?？梢杂行M(fèi)者點(diǎn)擊瀏覽，進(jìn)而提升產(chǎn)品的轉(zhuǎn)化率，米拉瀏覽了大量主圖模板，分析其排版方式，考慮綜合采用左文右圖、文案沉底式排版的方式，在主圖左側(cè)標(biāo)注廣告信息，在主圖下方展示特惠價(jià)格、折扣等關(guān)鍵促銷信息，這樣文案不僅不會(huì)影響主圖的展示效果，還符合消費(fèi)者的瀏覽習(xí)慣，具體操作如下。1排版左邊文案2繪制正圓、建立剪切蒙版任務(wù)實(shí)施2．排版主圖文案和商品圖片3輸入價(jià)格文案4繪制星形任務(wù)實(shí)施2．排版主圖文案和商品圖片5在底部矩形上輸入促銷文案6添加商品素材任務(wù)實(shí)施3．設(shè)計(jì)主圖標(biāo)簽米拉觀察當(dāng)前的沃柑主圖，發(fā)現(xiàn)主圖右上角比較空，便又去瀏覽主圖模板，發(fā)現(xiàn)一些主圖模板采用了包含半價(jià)、折扣、包郵、新品、熱銷等內(nèi)容的標(biāo)簽，米拉分析商品信息后，考慮在沃柑主圖中加入“整箱發(fā)貨、5斤裝”標(biāo)簽，讓消費(fèi)者對(duì)商品數(shù)量、包裝信息有所了解。1繪制星形2編輯邊角進(jìn)行變形為了使標(biāo)簽更加精美，她考慮采用星形工具設(shè)計(jì)外觀，采用“描邊”對(duì)話框設(shè)置虛線效果，具體操作如下。任務(wù)實(shí)施3．設(shè)計(jì)主圖標(biāo)簽3設(shè)置虛線和端點(diǎn)4標(biāo)簽效果目錄Contents任務(wù)2.1

設(shè)計(jì)“綠色能源”圖標(biāo)任務(wù)2.2

設(shè)計(jì)沃柑主圖綜合實(shí)戰(zhàn)

設(shè)計(jì)粽子主圖老洪將米拉完成的獼猴桃主圖交給客戶后，客戶很滿意，米拉知道這個(gè)消息后十分開心，自己的設(shè)計(jì)作品能得到客戶的肯定。臨近端午，“久粽食品”店鋪即將出售粽子，需要設(shè)計(jì)師制作主圖，老洪交給米拉來(lái)制作。鑒于之前設(shè)計(jì)主圖的經(jīng)驗(yàn)，米拉更是信心十足，便斗志昂揚(yáng)地開始研究粽子主圖的任務(wù)資料。本實(shí)戰(zhàn)的參考效果如右圖所示。綜合實(shí)戰(zhàn)

設(shè)計(jì)粽子主圖端午食粽是節(jié)日習(xí)俗之一，粽子更是在端午節(jié)被各企業(yè)作為員工福利、客戶福利發(fā)放?！熬敏帐称贰钡赇仦楦髌髽I(yè)提供端午節(jié)粽子訂購(gòu)服務(wù)，在端午節(jié)前兩個(gè)月開始接單，現(xiàn)需要設(shè)計(jì)師根據(jù)提供的相關(guān)素材，制作粽子主圖，并突出訂購(gòu)價(jià)格、粽子優(yōu)勢(shì)、優(yōu)惠券等信息。實(shí)戰(zhàn)背景實(shí)戰(zhàn)描述①分析粽子圖片，選擇構(gòu)圖美觀、細(xì)節(jié)精美、紋理清晰的粽子圖片為素材。②制作尺寸為800px×800px，分辨率為72像素/英寸的主圖。③靈活運(yùn)用形狀工具繪制主圖邊框、主圖標(biāo)