Photoshop創(chuàng)意設(shè)計項目實戰(zhàn)（Photoshop 2021）課件 項目3、4 形狀工具和圖層效果、圖標(biāo)創(chuàng)意設(shè)計

SP形狀工具和圖層效果第3章項目任務(wù)01規(guī)則形狀的繪制02任意形狀繪制和路徑編輯03圖層樣式和圖層的混合模式04【創(chuàng)意設(shè)計】紅色教育專題網(wǎng)站設(shè)計05【思維拓展】主題網(wǎng)站二級/三級頁設(shè)計知識目標(biāo)掌握形狀工具的應(yīng)用；掌握鋼筆工具的應(yīng)用；掌握圖層樣式的應(yīng)用；掌握圖層混合模式的應(yīng)用；了解網(wǎng)頁設(shè)計工作流程及要求。能力目標(biāo)能使用形狀、鋼筆等工具繪制簡單的圖形；能使用圖層樣式制作文本特效；能使用圖層混合模式編輯與美化圖像；能靈活運(yùn)用所學(xué)工具和命令制作網(wǎng)頁案例。素養(yǎng)目標(biāo)以【網(wǎng)頁設(shè)計-中華優(yōu)秀傳統(tǒng)文化專題網(wǎng)】為載體，傳承與創(chuàng)新中華優(yōu)秀傳統(tǒng)文化，培養(yǎng)學(xué)生文化自信。教學(xué)目標(biāo)教學(xué)重點矩形工具的應(yīng)用；橢圓形工具的應(yīng)用教學(xué)難點在運(yùn)用形狀工具制作欄目制作時，欄目內(nèi)容和層次結(jié)構(gòu)的設(shè)計重點難點本章主要介紹規(guī)則形狀的繪制、鋼筆工具的使用和圖層效果等方面的應(yīng)用和技巧。通過本章的學(xué)習(xí)可以根據(jù)設(shè)計任務(wù)需要，繪制出精美圖形，并能使用圖層混合模式編輯與美化圖像；能靈活運(yùn)用所學(xué)工具和命令，完成【網(wǎng)站項目設(shè)計】。傳統(tǒng)文化專題網(wǎng)站項目設(shè)計3.1規(guī)則形狀的繪制矩形工具、橢圓工具和直線工具等是最基本和最常用的形狀工具。在工具箱中選擇矩形工具等形狀工具繪制圖形時，默認(rèn)會新建一個形狀圖層，如圖所示。3.1規(guī)則形狀的繪制按住【空格】鍵，拖動鼠標(biāo)可進(jìn)行位置的移動。按住【Shift】鍵，可以繪制正方形/正圓形。按住【Alt】鍵，可以繪制從中心向四周擴(kuò)展的矩形/橢圓形。同時按住【Alt+Shift】組合鍵，可以繪制從中心向四周擴(kuò)展的正方形/正圓形。使用技巧在形狀繪制的過程中，需要熟記以下幾個小技巧：3.1規(guī)則形狀的繪制規(guī)則形狀工具很多屬性都是一樣的，下面以“矩形工具”的屬性欄為例進(jìn)行介紹：形狀：形狀有3個選項，形狀-創(chuàng)建路徑形狀、路徑-創(chuàng)建工作路徑、像素-創(chuàng)建填充區(qū)域。填充：用于設(shè)置形狀填充的狀態(tài)，有無顏色填充、純色填充、漸變填充、圖案填充4種設(shè)置。描邊：用于設(shè)置邊框的類型，有無顏色（無邊框）、純色邊框、漸變邊框、圖案邊框4種設(shè)置；還可以設(shè)置邊框的粗細(xì)、線型、對齊、端點、角點等。在菜單欄中，選擇【窗口】-【屬性】命令，可以打開單獨(dú)的屬性面板，通過外觀參數(shù)的設(shè)置，修改形狀圖形的外觀，還可以通過打開/關(guān)閉【關(guān)聯(lián)設(shè)置】鍵，把矩形的圓角半徑設(shè)置成全部相同的半徑，或者分別設(shè)置成兩兩相同或者四個都不相同的圓角半徑值，如圖所示。【任務(wù)1】規(guī)則形狀繪制-導(dǎo)航菜單任務(wù)1形狀繪制的過程中，可以按住空格鍵拖動鼠標(biāo)進(jìn)行位置的移動。矩形/橢圓形工具：

按住【Shift鍵】可以繪制正方形/正圓形；

按住【Alt鍵】可以繪制從中心向四周的矩形/橢圓形；

同時按住【Alt+Shift組合鍵】，可以繪制從中心向四周的正方形/正圓形。形狀工具屬性欄：

【形狀】-形狀、路徑、像素三個選項，用于創(chuàng)建路徑形狀或填充區(qū)域；

【填充】-無顏色、純色、漸變、圖案四個設(shè)置；

【描邊】-無顏色、純色、漸變、圖案四個設(shè)置，可以設(shè)置描邊粗細(xì)、線型、對齊、端點、角點等。描邊選項：

【對齊】即描邊的位置/描邊的樣式可設(shè)置為，居內(nèi)-沒有倒角、居中-有倒角、外部-有倒角；

【端點】閉合的路徑?jīng)]有端點，不封閉的路徑才有端點，如虛線、線段；

【角點】即倒角，無角點、圓弧角點、斜邊角點三個設(shè)置。圓角的半徑：矩形的圓角半徑可以設(shè)置相同的半徑，也可以分別設(shè)置成1-4個不同的圓角半徑，在菜單欄中選擇【窗口】—【屬性】命令打開屬性面板進(jìn)行設(shè)置。使用技巧【任務(wù)2】規(guī)則形狀繪制-欄目制作任務(wù)2網(wǎng)頁設(shè)計中首頁欄目設(shè)計原則：首頁代表企業(yè)的形象，是企業(yè)的門面和靈魂，是吸引用戶進(jìn)一步訪問網(wǎng)站的關(guān)鍵。

【欄目內(nèi)容】放置網(wǎng)站最重要、最有價值、觀注群體最想知道的信息點；

【欄目規(guī)劃】層次結(jié)構(gòu)和區(qū)域分割合理，如一整塊、左-右結(jié)構(gòu)、左-中-右結(jié)構(gòu)；

【欄目展示】考慮界面的美觀和易用性。使用技巧【任務(wù)3】任意形狀繪制-Banner制作任務(wù)2通過Banner制作，學(xué)習(xí)鋼筆工具的應(yīng)用。3.2任意形狀繪制和路徑編輯Photoshop的路徑功能可以繪制直線段；繪制曲線段;繪制復(fù)雜的圖像；路徑的描邊；路徑的選取；把圖像變成選區(qū)摳圖。小結(jié)錨點的種類：

【直線錨點】直接單擊的錨點是直線錨點，兩個直線錨點之間的路徑是直線；

【曲線錨點】按住鼠標(biāo)左鍵不放，拖動的錨點是曲線錨點，兩個曲線錨點之間的路徑是曲線，兩個獨(dú)立手柄可用小白工具調(diào)節(jié)；

【半曲半直】繪制曲線錨點后，按住Alt鍵將鼠標(biāo)放到曲線錨點上，單擊鼠標(biāo)左鍵可打斷控制手柄。結(jié)束路徑：

【方法1】按住【Ctrl】鍵，鋼筆工具臨時切換為小白工具，在文檔的其他地方單擊鼠標(biāo)左鍵；

【方法2】按【Esc】鍵。路徑的繼續(xù)繪制（接著繪制）：將鼠標(biāo)移動到路徑的端點上，鼠標(biāo)的右下角變成“空心+”標(biāo)記時,單擊鼠標(biāo)【左】鍵。使用技巧使用技巧3.3圖層樣式和圖層的混合模式圖層樣式和圖層的混合模式，用于為圖層添加不同的效果，使圖層中的圖像產(chǎn)生豐富的變化，常應(yīng)用于按鈕、圖標(biāo)和文字特效等方面的制作。【任務(wù)4】圖層樣式-按鈕制作任務(wù)2操作提示：設(shè)置圖層樣式-漸變疊加設(shè)置漸變編輯器三種方法打開【圖層樣式】控制面板【任務(wù)5】圖層樣式-立體圖形和文字特效Photoshop提供了多種圖層樣式可供選擇，可以單獨(dú)為圖像添加一種樣式，還可同時為圖像添加多種樣式。應(yīng)用圖層樣式命令可以為圖像添加斜面和浮雕、描邊、顏色疊加、投影等效果，制作特殊的圖形和文字效果。使用技巧任務(wù)5圖層的混合模式正常模式組：包括正常、溶解。變暗模式組：變暗組的混合模式，混合后一定是比正常模式暗。包括變暗、正片疊底、顏色加深、線性加深、深色。變亮模式組：變亮組的混合模式，混合后一定是比正常模式亮。包括變亮、濾色、顏色減淡、線性減淡、淺色。疊加模式組：疊加模式組，主要是為圖像去灰，讓暗的更暗，亮的更亮。包括疊加、柔光、強(qiáng)光、亮光、線性光、實色混合。差值模式組：包括差值、減去、排除、劃分。色彩模式組：包括色相、飽和度、顏色、明度。使用技巧圖層的混合模式至少需要有兩個圖層，用于為圖層添加不同的模式，使圖層產(chǎn)生豐富的視覺效果。圖層的混合模式包含有27種模式，選擇的模式?jīng)Q定了當(dāng)前圖層中的圖像與其下面圖層中的圖像以何種模式進(jìn)行混合。【任務(wù)6】圖層的混合模式-Banner制作任務(wù)6【項目3】網(wǎng)頁設(shè)計-傳統(tǒng)文化專題網(wǎng)站項目網(wǎng)站是信息傳播的媒體，也是企事業(yè)單位對外宣傳的形象窗口之一。根據(jù)企事業(yè)單位希望向用戶傳遞的信息，如文化、理念、服務(wù)、產(chǎn)品和銷售等內(nèi)容，網(wǎng)站規(guī)劃的目的不同，網(wǎng)頁設(shè)計的方案存在極大差異。要做好網(wǎng)頁設(shè)計，需求分析十分關(guān)鍵，以下是【紅色教育專題網(wǎng)站】的需求分析表?！卷椖?】網(wǎng)頁設(shè)計-傳統(tǒng)文化專題網(wǎng)站網(wǎng)站設(shè)計需求分析表傳統(tǒng)文化專題網(wǎng)站【趣說素養(yǎng)】傳統(tǒng)文化與傳承創(chuàng)新【趣說素養(yǎng)】傳統(tǒng)文化與傳承創(chuàng)新回顧我們經(jīng)歷過的傳統(tǒng)文化專題學(xué)習(xí)活動，談一談在該專題網(wǎng)站的欄目設(shè)置上，還可以增加哪些方面的內(nèi)容，如誦讀紅色經(jīng)典等。回顧中國愛國主義紅色經(jīng)典影片，為紅影紅典的Banner提煉電影的促銷主題，如《建國大業(yè)》、《建黨偉業(yè)》、《辛亥革命》等。Banner設(shè)計：用中國元素和革命戰(zhàn)爭元素的圖片，突出紅色教育專題網(wǎng)站主題。導(dǎo)航設(shè)計：在鼠標(biāo)經(jīng)過時的按鈕效果使用漸變色塊，能增加網(wǎng)站的靈動性和辨識度，也提升圖標(biāo)視覺美觀效果。欄目設(shè)計：板塊劃分明確、視覺豐富、層級清晰，頁面重點突出，有視覺重點?！緞?chuàng)想火花】項目010203【項目3】網(wǎng)頁設(shè)計-傳統(tǒng)文化專題網(wǎng)站網(wǎng)站頁面元素的設(shè)計包含以下幾個模塊：

LOGO和導(dǎo)航設(shè)計：任何類型的網(wǎng)站，都需要在網(wǎng)站明顯的位置放置LOGO和規(guī)劃導(dǎo)航。LOGO和網(wǎng)站導(dǎo)航可以極大的強(qiáng)化品牌文化和增強(qiáng)網(wǎng)頁的指引性，能讓用戶輕松快捷的找到頁面內(nèi)容。

廣告設(shè)計/banner：網(wǎng)頁上方或中間部位一般會留一個廣告位也叫“banner”，通過banner宣傳企事業(yè)單位的產(chǎn)品和活動，引起用戶注意，激發(fā)用戶的觀注和瀏覽欲望。banner的展示形式也是多樣的，可以是動畫、輪換圖片等。

位置標(biāo)示：明確告訴瀏覽者當(dāng)前的具體位置。

主體內(nèi)容：主體內(nèi)容基本都在網(wǎng)頁的中間部位，列出的欄目是網(wǎng)站中最重要、最有價值、觀注群體最想知道的信息點的內(nèi)容模塊。

頁腳設(shè)計:頁腳包含版權(quán)信息、企事業(yè)單位的詳細(xì)聯(lián)系方式、微信號及二維碼等，能快速滿足用戶的聯(lián)系需求，在用戶轉(zhuǎn)化方面有著非常顯著的作用，也是頁面平衡的重要元素，否則會讓頁面顯得頭重腳輕。使用技巧【項目3】網(wǎng)頁設(shè)計-傳統(tǒng)文化專題網(wǎng)站想一想1.網(wǎng)站的頁面設(shè)計一般包含哪幾類頁面，各類頁面設(shè)計有什么特點？2.怎么保持網(wǎng)站整體設(shè)計風(fēng)格的統(tǒng)一？專題網(wǎng)站二級頁面、三級頁面設(shè)計在保持中華優(yōu)秀傳統(tǒng)文化專題網(wǎng)首頁設(shè)計風(fēng)格的基礎(chǔ)上，用Photoshop完成該網(wǎng)站二級頁面（列表頁）和三級頁面（內(nèi)容頁）的設(shè)計。完成中華優(yōu)秀傳統(tǒng)文化專題網(wǎng)紅影經(jīng)典的Banner改版?！卷椖吭O(shè)計】學(xué)院網(wǎng)站設(shè)計對廣西機(jī)電職業(yè)技術(shù)學(xué)院“信息工程學(xué)院網(wǎng)站”或“藝術(shù)設(shè)計學(xué)院網(wǎng)站”進(jìn)行改版設(shè)計。在Photoshop課程結(jié)束前兩周，以項目小組為單位提交作業(yè)?！驹O(shè)計要求】1．參考同類網(wǎng)站，根據(jù)學(xué)院的專業(yè)設(shè)置等，重新規(guī)劃網(wǎng)站欄目、功能區(qū)布局等。（10分）2．要求網(wǎng)頁設(shè)計從易用性、主題配色、版面布局、欄目規(guī)劃和圖片運(yùn)用等方面，更好地突出網(wǎng)頁內(nèi)容的特點和學(xué)院特色，有效提高點擊率。（30分）3．用Photoshop完成3個頁面的設(shè)計：首頁（一級頁面）、列表頁（二級頁面）、內(nèi)容頁（三級頁面）。（40分）4．在Photoshop中做好網(wǎng)頁切片，提交3類文件：素材文件、PSD格式的源文件和切片文件。（15分）5．提交具體項目小組人員名單和分工，將文件命名為“班級項目小組-主題名稱”，如2104奮進(jìn)項目組-信息工程學(xué)院網(wǎng)站。（5分）圖像處理hotoshopP圖像處理TheEndSP圖標(biāo)創(chuàng)意設(shè)計第4章項目任務(wù)01圖標(biāo)的作用02圖標(biāo)創(chuàng)意三步曲03圖標(biāo)的用色04

圖標(biāo)的設(shè)計手法05

圖標(biāo)創(chuàng)意設(shè)計知識目標(biāo)了解圖標(biāo)的作用和設(shè)計原則；掌握圖標(biāo)創(chuàng)意設(shè)計三步曲；掌握形狀工具、顏色填充、圖層樣式的操作方法。能力目標(biāo)能使用形狀和顏色填充等工具繪制簡單的圖形；能使用圖層樣式制作圖形的立體效果；能獨(dú)立完成圖標(biāo)的設(shè)計和制作。素養(yǎng)目標(biāo)以【圖標(biāo)設(shè)計-中國元素圖標(biāo)設(shè)計】為載體，實施標(biāo)準(zhǔn)化和規(guī)范化的操作，有利于職業(yè)崗位的工作任務(wù)引領(lǐng)，精益求精。通過項目制作，培養(yǎng)學(xué)生的職業(yè)規(guī)范和精益求精的工匠精神，樹立嚴(yán)謹(jǐn)務(wù)實的學(xué)習(xí)態(tài)度。教學(xué)目標(biāo)教學(xué)重點圖標(biāo)創(chuàng)意設(shè)計三步曲圖標(biāo)的設(shè)計與制作教學(xué)難點如何運(yùn)用廣西壯鄉(xiāng)特色民族文化元素，融入圖標(biāo)的創(chuàng)意設(shè)計重點難點圖標(biāo)是界面中重要的信息傳播載體，精美的圖標(biāo)設(shè)計能起到畫龍點睛的作用，有效提高點擊率和推廣效果。本章主要介紹形狀工具、自由變換、顏色填充、圖層樣式等方面的應(yīng)用和技巧。通過本章的學(xué)習(xí)可以根據(jù)設(shè)計任務(wù)的需要，繪制具有中國元素的特色圖標(biāo)，并能為繪制的圖標(biāo)添加豐富的視覺效果，完成【圖標(biāo)設(shè)計】中國元素圖標(biāo)設(shè)計。圖標(biāo)設(shè)計項目設(shè)計項目引入圖標(biāo)的作用思考：路牌標(biāo)識有什么作用？

高辨識度-傳達(dá)事物特征

快速引導(dǎo)-提示行動圖標(biāo)的作用圖片+文字”的圖標(biāo)表現(xiàn)

高辨識度-更容易傳達(dá)事物的特征。

快速引導(dǎo)-有效提示行動指引。

功能引導(dǎo)-在有限的空間里可放置更多的內(nèi)容。

增強(qiáng)趣味性-美觀度和科學(xué)度都需同時具備。

指引用戶的行為切入點圖標(biāo)創(chuàng)意設(shè)計詳解一個完美的圖標(biāo)，應(yīng)該呈現(xiàn)該物體的主要特征元素，保持圖標(biāo)的精準(zhǔn)簡約。做圖標(biāo)設(shè)計時，要通過圖標(biāo)設(shè)計指引用戶的行為。圖標(biāo)造型色彩確定圖標(biāo)創(chuàng)意設(shè)計詳解相機(jī)圖標(biāo)是手機(jī)界面中最常見的圖標(biāo)，也是UI設(shè)計師入門級的基礎(chǔ)圖標(biāo)。觀察并分析相機(jī)結(jié)構(gòu)圖，設(shè)計一枚扁平化風(fēng)格的相機(jī)圖標(biāo)，要求圖標(biāo)具備醒目、簡潔、易辨識等圖標(biāo)基本特點。任務(wù)要求:相機(jī)結(jié)構(gòu)圖【圖標(biāo)創(chuàng)意·任務(wù)要求】

關(guān)鍵詞找圖片拍照、照片、相機(jī)、照相機(jī)、數(shù)碼相機(jī)【圖標(biāo)創(chuàng)意·三步曲】第一步：現(xiàn)實圖庫-提升圖標(biāo)設(shè)計辨識度。（關(guān)鍵詞找圖片）具象化名詞相機(jī)、照相機(jī)、數(shù)碼相機(jī)生活圖庫找百度搜圖、視覺中國、海洛創(chuàng)意【圖標(biāo)創(chuàng)意·三步曲】第二步，基礎(chǔ)造型圖庫-參考造型、優(yōu)化辨識度。（找基礎(chǔ)造型）

Iconfont網(wǎng)站阿里巴巴矢量圖標(biāo)庫有大量的圖標(biāo)造型高辨識度找出具有高辨識度的圖標(biāo)【圖標(biāo)創(chuàng)意·三步曲】第三步，視覺樣式圖庫-參考樣式圖標(biāo)，找趣味性。（找參考樣式）創(chuàng)意搜圖花瓣網(wǎng)、站酷、昵圖網(wǎng)等找參考樣式【圖標(biāo)創(chuàng)意·相機(jī)效果圖】通過找出的參考樣式圖標(biāo)設(shè)計圖，融入自己的創(chuàng)意想法，加入設(shè)計元素相機(jī)外殼鏡頭鏡頭光+=+=+=+【圖標(biāo)創(chuàng)意·相機(jī)分解圖】+【圖標(biāo)創(chuàng)意·相機(jī)設(shè)計圖】圖標(biāo)的用色圖標(biāo)進(jìn)行科學(xué)配色是成功設(shè)計的關(guān)鍵，配色影響圖標(biāo)的設(shè)計，甚至?xí)绊懞罄m(xù)設(shè)計的成敗，需要了解色彩的情緒和語言。通過色彩解讀，實現(xiàn)用色科學(xué)，從色彩情緒、業(yè)務(wù)聯(lián)系、鄰近色原則三個方面進(jìn)行考慮。橙色系-整租、合租；紅色系-品牌公寓；藍(lán)色系-地圖找房；綠色系-房屋委托。這樣配色的原因和理由是什么？思考：圖標(biāo)的用色-色彩情緒橙色系、紅色系-“活力、熱情、熱度高”,適合整租、合租、品牌公寓的營銷理念；藍(lán)色系-“科學(xué)、可靠、穩(wěn)重”,適合地圖找房；綠色系-“安心、放心、健康”,適合房屋委托。圖標(biāo)的用色-業(yè)務(wù)聯(lián)系整租、合租、品牌公寓三塊內(nèi)容，在產(chǎn)品業(yè)務(wù)功能上有共同特性，最好使用同一色系的鄰近色圖標(biāo)，內(nèi)容整體，能讓人更容易辨識業(yè)務(wù)聯(lián)系。圖標(biāo)的用色-鄰近色原則取色環(huán)上類似屬性間的60度以內(nèi)夾角的鄰近色搭配。圖標(biāo)的設(shè)計方法APP界面設(shè)計中常使用大量的圖標(biāo)，怎么讓APP的小小界面，發(fā)揮出圖標(biāo)的大作用？增強(qiáng)圖標(biāo)的功能引導(dǎo)和