《圖形圖像處理項目化教程》教案授課內容項目三圖標設計制作任務1太極圖案圖標教學時數4學時教學目的與要求理解選區的概念、類型及選區的功能掌握規則選區和不規則選區的添加、編輯及運算技法了解圖層的概念及管理教學重點熟練應用選區工具組的用法及運算技法教學難點選區的編輯和應用教學方法講授法、演示法、課堂討論法教學內容教學方法及課程思政一、課程導入圖標是一種圖形化的標識，有一定的指代意義，并有較強的標識性質。它既是一種圖形，也是一種標識，具有高度濃縮并快捷傳達信息、便于記憶的特性。太極是中國古代哲學用以說明世界本原的范疇，包含著清醒睿智的哲思。太極圖也被稱為“中華第一圖”。本任務將制作“陰陽魚圖”，在體會傳統文化的同時，掌握圖形圖像處理中的選區技術。案例分析：利用矩形選框工具和橢圓選框工具，通過選區運算制作不規則形狀。使用工具：矩形選框工具、橢圓選框工具組、圖層。二、技術講解（一）矩形選框工具1.屬性欄詳解【選區運算】按鈕組：用于控制選區的創建方式。【羽化】按鈕：可使創建的選區邊緣變得平滑，填色后產生柔和的邊緣效果。【消除鋸齒】：即可通過淡化邊緣來產生與背景顏色之間的過渡，使鋸齒邊緣得到平滑。【樣式】選項：在屬性欄的樣式下拉列表中，有【正常】、【固定比例】和【固定大小】3個選項。【調整邊緣】按鈕：該功能能得到較為精準的選區邊緣，橢圓選框工具【橢圓選框工具】的操作方法、屬性欄與矩形選框工具的是相同的，使用【

Shift

】鍵輔助可以繪制出正圓形選區。（三）單行、單列選框工具在

Photoshop

中繪制多條平行線或制作網格線時，使用單行選框工具和單列選框工具會十分方便。使用【單行選框工具】，將繪制1像素高、與畫布同寬的選區；使用【單列選框工具】，將繪制1像素寬、與畫布同高的選區。案例應用套索工具1.屬性欄【套索工具】的屬性欄可以看出除工具圖標有所變化，其余參數與選框工具組的參數是相同的。2.案例應用多邊形套索工具1.屬性欄使用【多邊形套索】工具可以在圖像和圖層中選取不規則的多邊形圖像。其屬性欄中的有關內容與套索工具屬性欄的內容相同。2.案例應用磁性套索工具【寬度】用于設定檢測范圍，磁性套索工具將在這個范圍內選取反差最大的邊緣；【對比度】用于設定選取邊緣的靈敏度，數值越大，則要求邊緣與背景的反差越大；【頻率】用于設定選區點的速率，數值越大，標記速率越快，標記點越多。魔棒工具組屬性欄講解：快速選擇工具屬性欄講解：①②③【新選區】按鈕、【添加到選區】按鈕、【從選區減去】按鈕：用于控制選區的創建方式。【畫筆】選項：快速選擇狀態下的鼠標呈現為畫筆形態，該選項用于設置畫筆的筆尖大小，數值越大，筆尖越大，可選擇的范圍也就越大。【對所有圖層取樣】選項：勾選此復選框，在繪制選區時，將應用到所有可見圖層中。若不勾選此復選框，則只能選擇當前圖層中與單擊處顏色相近的部分。【自動增強】選項：設置此選項，添加的選區邊緣會減少鋸齒的粗糙程度。案例練習：2.魔棒工具屬性欄講解：【容差】：即可以“容忍”的顏色差別程度，用來控制魔棒工具在識別各像素色值差異時的范圍，【連續】：勾選此復選框，只能選擇圖像中與鼠標單擊處顏色相近且相連的部分；【對所有圖層取樣】：勾選此復選框，可以選擇所有可見圖層中與鼠標指針單擊處顏色相近的部分；案例練習：（七）色彩范圍標號為①的吸管工具，在圖案上吸取顏色，吸取的顏色會以白色呈現在【色彩范圍】面板的縮略圖中，未被選中的的顏色呈現黑色；當一次吸取沒有達到理想范圍時，使用標號為②的帶有小加號的吸管，繼續在圖案上吸取其他顏色，這樣【色彩范圍】面板縮略圖中的白色范圍就會擴大；當顏色吸取的范圍太大時，可使用標號為③帶有減號的吸管工具在超出的部分吸取顏色，減去不需要的顏色范圍。（八）選區的編輯和應用1.編輯選區移動選區全選、反選、取消選擇及重新選擇修改選區邊界：設置選區向內或向外擴展。平滑：該命令用于將選區的邊緣進行平滑設置，擴展：選區將在原來的基礎上擴展。收縮：可收縮原選區。羽化：該命令用于將選區進行羽化處理。變換選區移動、縮放、旋轉、斜切、粗曲、透視、變形、翻轉旋轉變形 旋轉變形自由變換（Ctrl）斜切（Ctrl+shift）變形透視（Ctrl+shift+Alt）放大旋轉存儲選區如果某個選區需要重復使用，可執行【選擇】/【存儲選區】命令。圖3-51存儲選區載入選區載入選區有兩種方式。一種是執行【選擇】/【載入選區】命令，能夠將已儲存的選區載入到畫面中；另一種是將圖層的形狀載入選區，方法是按住【Ctrl】鍵的同時，單擊圖層的縮略圖。裁剪工具組1、裁剪工具屬性欄講解：在裁剪工具屬性欄中，單擊按鈕，彈出其下拉菜單：【不受約束】選項可以自由調整裁剪框的大小。【原始比例】選項可以保持圖像原始的長寬比例調整裁切框。【預設長寬比】選項是Photoshop提供的預設長寬比，如果自定長寬比，可在選項右側的文本中定義長度和寬度。【大小和分辨率】選項可以設置圖像的寬度、高度和分辨率，這樣可按照設置的尺寸裁剪圖像，“存儲/刪除預設”選項可以將當前創建的長寬比保存或刪除。單擊工具屬性欄中的“設置其他裁剪選項”按鈕，彈出其下拉菜單。“使用經典模式”選項可以使用低版本的裁剪工具模式來編輯。“啟用裁剪屏蔽”選項用于設置裁剪框外的區域顏色和不透明度。案例練習：2.透視裁剪工具屬性欄講解：【W/H】選項：設置透視裁剪區域的寬度和高度。【分辨率】選項：設置裁剪圖像的分辨率。【前面的圖像】按鈕：在寬度、高度和分辨率文本框中顯示當前文檔的尺寸和分辨率，如果同時打開兩個文檔，則會顯示另外一個文檔的尺寸和分辨率。【清除】按鈕：清除寬度、高度和分辨率文本框中的數值。【顯示網格】選項：可以顯示或隱藏網格線。案例練習：圖3-63圖3-64圖3-65(未替換圖)（十）吸管工具組吸管工具屬性欄講解：圖3-68吸管工具屬性欄【取樣大小】：設置吸管工具的取色范圍。【樣本】：用來設置吸取顏色的圖層范圍。【顯示取樣環】：勾選該選項，則吸取顏色時會顯示取樣環，并在取樣環上顯示上一步吸取的顏色和當前吸取的顏色2.顏色取樣器工具【顏色取樣器】工具可以在畫面上創建一個吸取點，然后在信息面板（【窗口】/【信息】或按【F8】）中，顯示RGB和CMYK的相應數值，一個文件里可以創建出4個顏色吸取的信息點。如果想清除顏色吸取點的話，在選項欄中，點擊“清除”按鈕即可。圖3-71顏色取樣器示例3.標尺工具【標尺工具】可以測量圖像對象的位置和角度。先按住【Shift】繪制水平標尺，再按住【Alt】鍵從端點拖拽出另一條標尺，在屬性欄中將顯示L1和L2及夾角A的度數。注釋工具切換【注釋工具】后在圖像中某處單擊鼠標左鍵，會自動彈出【注釋】面板，可以對該處圖像進行標注解釋操作。（十一）圖層【圖層】面板講解：【選取濾鏡類型】：任意選擇一種濾鏡類型，可以篩選出所選擇類型的圖層。【像素圖層濾鏡】：可以使【圖層】面板中只顯示像素圖層。【調整圖層濾鏡】：可以使【圖層】面板中只顯示調整圖層。【文字圖層濾鏡】：可以使【圖層】面板中只顯示文字圖層。【形狀圖層濾鏡】：可以使【圖層】面板中只顯示形狀圖層。【智能對象濾鏡】：單擊該按鈕，可以使【圖層】面板中只顯示智能對象圖層。【打開或關閉圖層濾鏡】：當選擇使用圖層濾鏡進行篩選顯示時，該開關自動打開；當關閉該按鈕時，【圖層】面板將顯示所有圖層。【設置圖層混合模式】：在該下拉列表中，可以選擇一種圖層混合模式，使當前圖層與下面的圖層混合，以產生不同的圖像效果。【設置圖層透明度】：在該選項的文本框中輸入參數或者直接拖動滑塊，可以設置當前圖層的透明度，使之呈現透明狀態。0為完全透明，100%為完全不透明。【圖層鎖定】：單擊即可對當前圖層做相應的鎖定，使其不可修改透明度、像素、位置或全部不可修改。【圖層可見】：“眼睛”睜開表示該圖層可見；點擊“眼睛”使其消失，則該圖層被隱藏。【圖層縮略圖】：圖層上內容的縮小顯示。按住【Ctrl】鍵的同時單擊【圖層縮略圖】，即可載入該圖層的選區。【圖層組】：圖層組將方便圖層的管理。如果該組中含有若干圖層，單擊組名稱，可對組中的圖層進行統一移動、縮放等操作。【組中的圖層】：該圖層有一定的縮進，表示被包含在了圖層組中。組中圖層的操作與其它圖層完全相同。【文字圖層】：文字圖層的縮略圖為T。若想將文字圖層轉換為普通圖層，需在其右擊菜單中選擇【柵格化圖層】。【普通圖層】：即單擊【創建新圖層】按鈕創建的圖層，它是完全透明的。【背景圖層】：新建文檔進會自動產生【背景圖層】，背景層默認為“鎖定位置”，因此背景層上的內容不可移動。【被鏈接的圖層】：該圖層上顯示鏈接圖標。【被鎖定的圖層】：該圖層上顯示鎖定圖標。【鏈接圖層按鈕】：同時選中多個圖層，單擊該按鈕，這些圖層即被鏈接在一起，鏈接后的圖層，可同時進行旋轉、移動等操作。【添加圖層樣式】：在彈出的下拉列表中選擇需要的圖層樣式，可為當前圖層添加樣式。在后面的項目中，圖層樣式將被經常使用。【添加圖層蒙版】：用于遮蓋圖像，但不會將其破壞。【創建新的填充或調整圖層】：可以添加填充圖層或調整圖層。【創建圖層組】：創建一個新組，即圖層文件夾。【創建新圖層】：創建一個新圖層。【刪除圖層】：將刪除當前選中的圖層。（二）圖層的種類1.背景圖層新建的圖像或不包含其他圖層信息的圖像，通常只有一個圖層，即背景圖層。普通圖層普通圖層是指包含位圖圖像的圖層。它是Photoshop中最常見的圖層，透明、獨立，可在其中做任意操作。調整圖層調整圖層的作用是針對其下方圖層中圖像進行色階、曲線等方面的調節。形狀圖層利用形狀工具創建的圖層即形狀圖層。（十二）圖層管理1.新建圖層（5種方法）2.選擇圖層（5種方法）3.鏈接圖層鏈接圖層可以將兩個以上的圖層鏈接到一起。鏈接圖層可以一同移動或變換。4.顯示和隱藏圖層：單擊“眼睛”按鈕來進行顯示和隱藏的切換5.刪除圖層:刪除圖層指的是將選擇的圖層從【圖層】調板中清除。6.復制圖層(三種方法)7.合并圖層【合并圖層】：表示將當前圖層與其下方圖層合并。【合并可見圖層】：合并所有“眼睛”為“睜開”狀態的圖層。【拼合圖像】：合并所有圖層，并在合并過程中丟棄隱藏的圖層。重命名圖層對齊圖層頂對齊、垂直居中、底對齊、左對齊、水平居中、右對齊10分鐘案例導入法課程思政點：弘揚我國傳統文化，培養民族自豪感演示教學法演示教學法演示教學法演示教學法學中做做中學學中做做中學課堂實操：完成任務1案例的設計與制作分組協作法講座教學法《圖形圖像處理項目化教程》教案授課內容項目三圖標設計制作任務2手機圖案圖標教學時數2學時教學目的與要求理解并掌握形狀工具組的使用方法學會形狀圖層的相關操作教學重點熟練應用形狀工具組的用法及運算技法教學難點陰影與背景圓的形狀貼合方法教學方法講授法、演示法、課堂討論法教學內容教學方法及課程思政一、課程導入扁平化是平面設計領域的一種非常流行的設計風格。扁平化的意思是在作品中去除透視、紋理、羽化、漸變及其他冗余、繁雜的裝飾，每一個元素的邊界都干凈俐落，讓“信息”本身被凸顯出來，強調抽象、極簡和符號化。由于這種風格的圖形圖像表達信息更加簡單直觀，同時體積小、傳輸速度快、能有效降低設備能耗，同時更少的按鈕和選項使得界面干凈整潔、操作簡單、能有效地提升用戶體驗，因此被廣泛的運用在移動設備的系統美化和軟件界面的設計領域。本次任務以智能手機的形象為例，制作一款扁平化圖標。案例分析：利用形狀工具組制作扁平化圖標。使用工具：形狀工具組、圖層。二、技術講解形狀工具組（一）矩形工具1、屬性欄講解：圖3-112矩形工具的屬性欄【填充】選項用于設置矩形形狀的填充色；【描邊】選項用于設置矩形形狀的輪廓色；【點數】選項用于設置輪廓的像素值，也就是輪廓線的粗細；【線型】選項用于設置輪廓線為實線還是虛線等；案例練習（二）圓角矩形工具1、屬性欄講解：2．案例練習圓角半徑為10像素、50像素和80像素的效果，在長寬值不變的情況下，圓角半徑越大，矩形越接近于圓形。（三）橢圓工具橢圓工具的屬性欄與矩形的屬性欄是相同的，操作方法也一樣，利用shift鍵輔助同樣可以得到正圓形。（四）多邊形工具多邊形工具的屬性欄比矩形工具多了【設置】選項和【邊】選項。1、屬性欄講解：在【設置】選項卡中，勾選【平滑拐角】，能夠讓多邊形的頂點變平滑，勾選【星形】選項，繪制的圖形為星形；【邊】用于設置多邊形的邊數；圖3-125是不同設置的多邊形。案例練習直線工具1、屬性欄講解：案例練習（六）自定義形狀工具自定義形狀是一個形狀庫，庫中默認的形狀數量比較少，點開右上角的擴展接鈕，選擇【全部】來替換當前形狀庫，就能看到Photoshop軟件自帶的所有形狀。這些形狀對于矢量圖形繪制有很大的幫助，十分便捷。10分鐘案例導入法課程思政點：弘揚我國傳統文化，培養民族自豪感演示教學法學中做做中學課堂實操：任務2手機圖案圖標制作分組協作法講座教學法《圖形圖像處理項目化教程》教案授課內容項目三圖標設計制作任務3金屬效果圖標教學時數2學時教學目的與要求理解并掌握漸變工具的使用方法熟悉圖層常用的圖層樣式并能靈活應用。教學重點漸變工具的使用、圖層樣式的應用教學難點五種漸變類型的應用教學方法講授法、演示法、課堂討論法教學內容教學方法及課程思政一、課程導入近幾年，圖形圖像處理領域正在流行一種叫做擬物的設計風格。它與扁平化風格的區別在于，扁平化圖標要去除透視、紋理、羽化、漸變等冗余裝飾，而擬物化圖標是描繪生活中原有的物體形象，同時在圖標設計中加入色彩、陰影、透視等細節。因此，擬物化風格也稱為寫實風格。但是要注意，寫實不是原始表達，而是一種近似表達，例如齒輪狀的圖形不一定代表“齒輪”，可能是“設置”，房屋的形狀不一定代表“房屋”，可能是“主頁”等。本次任務將通過寫實電腦的開機鍵，來制作一款擬物風格的金屬效果圖標。案例分析：利用形狀工具組、漸變工具、圖層樣式在制作金屬效果圖標。使用工具：圓角矩形工具、橢圓選框工具、漸變工具。二、技術講解漸變工具（一）漸變工具1、屬性欄講解：【漸變條】：在以前景色和背景色為基準顯示或者保存漸變顏色的漸變樣式中，顯示選定的漸變顏色。單擊其右側的下拉三角按鈕，可以顯示一些系統預置的漸變樣式，系統提供了16種預設漸變樣式供用戶選擇。單擊右上角的小齒輪按鈕，將彈出如圖3-161所示的下拉菜單，從中可載入更多的漸變樣式。Photoshop中提供的基本漸變樣式，可以添加到漸變樣式列表中替換載入保存的漸變保存當前的漸變設置載入保存的漸變返回漸變的初始值以小列表或大列表Photoshop中提供的基本漸變樣式，可以添加到漸變樣式列表中替換載入保存的漸變保存當前的漸變設置載入保存的漸變返回漸變的初始值以小列表或大列表顯示漸變樣式以小圖標或大圖標顯示漸變樣式以名稱顯示漸變樣式更改或刪除所選漸變的名稱將當前顏色更改為新的漸變可以改變畫筆、工具、樣式等多種信息的設置------------------------------------------------------------------------------②漸變效果的類型漸變共分五種類型：線性漸變，徑向漸變，角度漸變，對稱漸變和菱形漸變。線性漸變：以直線從起點漸變到終點。徑向漸變：以圓形圖案從起點漸變到終點。角度漸變：圍繞起點以逆時針掃過的方式漸變。對稱漸變：在起點的兩側進行對稱的線性漸變。菱形漸變：以菱形圖案從中心向外側漸變到角。【模式】：設置填充的漸變顏色與其下面原圖像的背景顏色如何進行混合，各選項與圖層混合模式的作用相同。【不透明度】：設置填充漸變顏色的透明程度。【反向】：勾選后，可使現有的漸變顏色逆轉方向。【仿色】：勾選后，可以使漸變