用微課學(xué) 圖形圖像處理（Photoshop CS6）課件 任務(wù)六：Photoshop切片操作

任務(wù)六：Photoshop切片操作主講人：時間：目錄CONTENTS01課程導(dǎo)入02任務(wù)實(shí)施03任務(wù)拓展04學(xué)習(xí)任務(wù)單05總結(jié)與回顧課程導(dǎo)入PART0104020103在網(wǎng)頁設(shè)計中，切片操作是將設(shè)計稿轉(zhuǎn)化為實(shí)際網(wǎng)頁的關(guān)鍵步驟。通過切片，能把復(fù)雜的網(wǎng)頁效果圖分割成多個小圖片，便于在網(wǎng)頁排版軟件中進(jìn)行布局和展示。網(wǎng)頁設(shè)計基礎(chǔ)合理的切片可以減小網(wǎng)頁體積，提高網(wǎng)頁的加載速度。將網(wǎng)頁元素切成小圖片，尤其是1像素寬的切片，能有效優(yōu)化網(wǎng)頁性能，提升用戶體驗(yàn)。提高網(wǎng)頁性能便于后期維護(hù)切片后的圖片便于單獨(dú)修改和更新，當(dāng)網(wǎng)頁需要調(diào)整某個部分時，只需修改對應(yīng)的切片圖片，而不需要重新設(shè)計整個網(wǎng)頁。與其他軟件協(xié)作切片操作是Photoshop與Dreamweaver等網(wǎng)頁排版軟件協(xié)作的橋梁。切片生成的圖片可以直接導(dǎo)入到網(wǎng)頁排版軟件中進(jìn)行封裝，實(shí)現(xiàn)前后端的有效銜接。切片操作的重要性學(xué)生需了解網(wǎng)頁的前后臺構(gòu)成，以及Photoshop切片在網(wǎng)頁制作中的作用；掌握切片工具的使用方法，包括繪制切片、查看切片大小等；熟悉切片導(dǎo)出的格式和設(shè)置。知識目標(biāo)能夠熟練使用切片工具對網(wǎng)頁效果圖進(jìn)行切片，準(zhǔn)確繪制Banner切片、導(dǎo)航欄切片和欄目標(biāo)題切片；掌握切片導(dǎo)出為不同格式（如JPEG、GIF、HTML）的操作流程；學(xué)會檢驗(yàn)和調(diào)整切片的尺寸大小。技能目標(biāo)重點(diǎn)掌握1像素寬切片的應(yīng)用，理解其在網(wǎng)頁排版中提高瀏覽速度和實(shí)現(xiàn)漸變填充效果的原理；熟練掌握將切片導(dǎo)出為HTML網(wǎng)頁文件的操作步驟。重點(diǎn)掌握內(nèi)容通過本課程的學(xué)習(xí)，學(xué)生能夠獨(dú)立完成網(wǎng)頁效果圖的切片操作，將切片導(dǎo)出為合適的格式，并在瀏覽器或網(wǎng)頁排版軟件中進(jìn)行查看和編輯，為網(wǎng)頁制作打下堅實(shí)的基礎(chǔ)。學(xué)習(xí)成果預(yù)期課程目標(biāo)與重點(diǎn)任務(wù)實(shí)施PART02操作步驟啟動Photoshop軟件，單擊“文件→打開”菜單命令，在彈出的對話框中選擇已設(shè)計好的網(wǎng)頁效果圖文件，然后單擊“打開”按鈕，將文件導(dǎo)入到Photoshop中。實(shí)踐操作體驗(yàn)讓學(xué)生自己打開一個網(wǎng)頁效果圖文件，熟悉打開文件的操作流程，觀察圖像的基本信息和布局。文件格式與要求介紹適合用于切片操作的網(wǎng)頁效果圖文件格式，如PSD、JPEG等。強(qiáng)調(diào)文件的分辨率和色彩模式應(yīng)符合網(wǎng)頁制作的要求，一般分辨率為72dpi，色彩模式為RGB。圖像檢查與調(diào)整提醒學(xué)生在打開文件后，檢查圖像的整體布局和元素分布，確保圖像清晰、完整。如有需要，可以對圖像進(jìn)行簡單的調(diào)整，如裁剪、調(diào)色等。打開文件講解如何在工具箱中選擇切片工具，以及切片工具的圖標(biāo)和快捷鍵（通常為C）。切片工具的選擇詳細(xì)演示使用切片工具在Banner圖片上繪制切片的操作步驟，確保切片的尺寸大小與Banner圖片相當(dāng)。強(qiáng)調(diào)繪制時要準(zhǔn)確對齊圖片邊緣，保證切片的準(zhǔn)確性。繪制Banner切片介紹如何對繪制好的Banner切片進(jìn)行調(diào)整和優(yōu)化，如移動切片位置、調(diào)整切片大小等?？梢酝ㄟ^切片工具的選項(xiàng)欄進(jìn)行操作，也可以使用鼠標(biāo)拖動切片邊緣進(jìn)行微調(diào)。切片的調(diào)整與優(yōu)化讓學(xué)生使用切片工具在打開的網(wǎng)頁效果圖上繪制Banner切片，并進(jìn)行調(diào)整和優(yōu)化，感受切片繪制的過程和效果。實(shí)踐操作練習(xí)建立Banner切片查看切片大小的方法演示使用切片工具，在切片上雙擊，打開“切片選項(xiàng)”對話框的操作步驟。在對話框中，可以查看切片的寬度、高度尺寸大小等詳細(xì)信息。根據(jù)需求調(diào)整切片尺寸講解如何根據(jù)網(wǎng)頁設(shè)計的需求，對切片尺寸進(jìn)行調(diào)整。如果切片尺寸不合適，可以通過“切片選項(xiàng)”對話框或直接在圖像上拖動切片邊緣進(jìn)行修改。切片尺寸的重要性強(qiáng)調(diào)切片尺寸在網(wǎng)頁排版中的重要性，準(zhǔn)確的切片尺寸可以確保網(wǎng)頁元素的布局和顯示效果符合設(shè)計要求。提醒學(xué)生在切片過程中要注意控制切片的尺寸。實(shí)踐操作體驗(yàn)讓學(xué)生查看自己繪制的Banner切片的尺寸大小，并根據(jù)需求進(jìn)行適當(dāng)調(diào)整，熟悉查看和調(diào)整切片尺寸的操作。查看“切片”大小深入講解1像素寬切片在網(wǎng)頁排版中的應(yīng)用原理，它可以沿縱向或橫向平鋪，實(shí)現(xiàn)完整的一行或一整列圖片的切片效果，大大提高網(wǎng)頁的瀏覽速度。1像素寬切片的應(yīng)用原理介紹如何對繪制好的導(dǎo)航欄切片進(jìn)行排列和布局，使其在網(wǎng)頁中呈現(xiàn)出整齊、美觀的效果?？梢酝ㄟ^切片工具的選項(xiàng)欄進(jìn)行對齊和分布操作。切片的排列與布局演示使用切片工具在導(dǎo)航欄上繪制1像素寬切片的操作步驟，確保切片的位置和寬度符合設(shè)計要求。提醒學(xué)生在繪制時要注意切片的連續(xù)性和準(zhǔn)確性。繪制導(dǎo)航欄切片讓學(xué)生使用切片工具在網(wǎng)頁效果圖的導(dǎo)航欄上繪制1像素寬切片，并進(jìn)行排列和布局，體驗(yàn)1像素寬切片的應(yīng)用效果。實(shí)踐操作練習(xí)建立導(dǎo)航欄切片實(shí)現(xiàn)漸變填充效果的原理講解使用1像素寬切片實(shí)現(xiàn)標(biāo)題欄上漸變填充效果的原理，通過在Dreamweaver中將1像素圖片作為單元格背景圖片進(jìn)行平鋪，可以模擬出漸變效果。切片的顏色與漸變設(shè)置介紹如何在Photoshop中對欄目標(biāo)題切片的顏色和漸變進(jìn)行設(shè)置，以達(dá)到理想的漸變填充效果。可以通過漸變工具或調(diào)整圖層樣式來實(shí)現(xiàn)。繪制欄目標(biāo)題切片演示使用切片工具在欄目標(biāo)題上繪制1像素寬切片的操作步驟，確保切片的位置和寬度能夠準(zhǔn)確覆蓋標(biāo)題欄區(qū)域。提醒學(xué)生注意切片的顏色和漸變方向應(yīng)與設(shè)計一致。實(shí)踐操作體驗(yàn)讓學(xué)生使用切片工具在網(wǎng)頁效果圖的欄目標(biāo)題上繪制1像素寬切片，并設(shè)置顏色和漸變，觀察漸變填充效果的實(shí)現(xiàn)。建立欄目標(biāo)題切片詳細(xì)講解單擊“文件→存儲為Web和設(shè)備所用格式”菜單命令的操作步驟，打開相應(yīng)的對話框。介紹對話框中各個選項(xiàng)的含義和作用。演示在對話框中將“預(yù)設(shè)”設(shè)置為“JPEG高”的操作，解釋這樣設(shè)置的原因和優(yōu)點(diǎn)。同時，介紹其他可以進(jìn)行優(yōu)化的參數(shù)，如圖像質(zhì)量、顏色模式等。導(dǎo)出切片的菜單命令預(yù)設(shè)設(shè)置與優(yōu)化介紹常見的切片導(dǎo)出格式，如JPEG、GIF、PNG等，比較它們的優(yōu)缺點(diǎn)和適用場景。強(qiáng)調(diào)在本任務(wù)中選擇JPEG高格式的原因。讓學(xué)生按照步驟將繪制好的切片導(dǎo)出，選擇“JPEG高”預(yù)設(shè)，觀察導(dǎo)出文件的效果和大小。實(shí)踐操作體驗(yàn)切片導(dǎo)出的格式選擇導(dǎo)出切片講解在“將優(yōu)化結(jié)果存儲為”對話框中進(jìn)行格式和切片設(shè)置的操作步驟，將格式設(shè)置為“僅限圖像”，切片設(shè)置為“所有用戶切片”，然后單擊“保存”按鈕。提醒學(xué)生選擇合適的存儲路徑，并注意文件名的命名規(guī)范，以便于后續(xù)的管理和使用。介紹存儲后文件的查看方法，打開切片所導(dǎo)出的“images”文件夾，可以看到導(dǎo)出的圖片文件，其名稱采用了自動編號，尺寸大小與在Photoshop中設(shè)定的一致。讓學(xué)生完成切片的存儲操作，查看導(dǎo)出的圖片文件，確認(rèn)文件的格式、名稱和尺寸是否符合要求。存儲對話框的設(shè)置存儲路徑與文件名存儲后的文件查看實(shí)踐操作練習(xí)存儲切片強(qiáng)調(diào)檢驗(yàn)切片的目的是確保導(dǎo)出的圖片文件符合設(shè)計要求，尺寸和效果與在Photoshop中一致。介紹檢驗(yàn)的方法，如在圖像查看器中打開圖片，檢查圖片的清晰度、顏色和尺寸等。發(fā)現(xiàn)問題與解決方法講解在檢驗(yàn)過程中可能發(fā)現(xiàn)的問題，如切片尺寸不準(zhǔn)確、顏色偏差、圖片模糊等，并提供相應(yīng)的解決方法。例如，如果切片尺寸不準(zhǔn)確，可以返回Photoshop中重新調(diào)整切片；如果顏色偏差，可以檢查導(dǎo)出設(shè)置或調(diào)整圖像顏色。提醒學(xué)生進(jìn)行多次檢驗(yàn)和優(yōu)化，確保切片的質(zhì)量達(dá)到最佳。可以在不同的設(shè)備和瀏覽器中查看切片效果，以保證兼容性。多次檢驗(yàn)與優(yōu)化讓學(xué)生對導(dǎo)出的切片進(jìn)行檢驗(yàn)，發(fā)現(xiàn)問題并嘗試解決，熟悉檢驗(yàn)和優(yōu)化切片的流程。實(shí)踐操作體驗(yàn)檢驗(yàn)切片的目的和方法檢驗(yàn)切片任務(wù)拓展PART03講解在Photoshop中利用切片生成HTML格式網(wǎng)頁文件的原理和優(yōu)勢，通過切片將網(wǎng)頁效果圖分割成多個小圖片，再結(jié)合HTML代碼進(jìn)行封裝，可以快速生成網(wǎng)頁。切片操作與網(wǎng)頁生成詳細(xì)演示在Photoshop中打開要生成網(wǎng)頁的圖片，使用切片工具對Banner、導(dǎo)航欄、欄目頭部、背景等進(jìn)行切片的操作步驟。除了Banner圖片，其他盡量切為1像素寬的圖片，以減小網(wǎng)頁體積。然后單擊“文件→存儲為Web和設(shè)備所用格式”菜單命令，在“預(yù)設(shè)”中設(shè)定“JPEG高”，在“將優(yōu)化結(jié)果存儲為”對話框中設(shè)定格式為“HTML和圖像”，切片為“所有用戶切片”，單擊“保存”按鈕，完成HTML網(wǎng)頁文件的導(dǎo)出。生成HTML網(wǎng)頁文件的步驟介紹切片與HTML代碼的關(guān)聯(lián)方式，切片生成的圖片在HTML代碼中以圖片標(biāo)簽的形式引用，通過設(shè)置圖片的位置、大小和布局，可以實(shí)現(xiàn)網(wǎng)頁的排版。切片與HTML代碼的關(guān)聯(lián)讓學(xué)生選擇一張網(wǎng)頁效果圖，按照步驟進(jìn)行切片并生成HTML網(wǎng)頁文件，觀察生成的網(wǎng)頁文件在瀏覽器中的顯示效果。實(shí)踐操作練習(xí)生成HTML網(wǎng)頁文件電商頁面切片優(yōu)化講解切片在電商頁面設(shè)計中的應(yīng)用和優(yōu)化方法，通過合理的切片可以提高電商頁面的加載速度和用戶體驗(yàn)。例如，將商品圖片、促銷信息等進(jìn)行切片，使用1像素寬切片實(shí)現(xiàn)頁面布局和漸變效果。切片與響應(yīng)式設(shè)計探討切片與響應(yīng)式設(shè)計的結(jié)合，在響應(yīng)式網(wǎng)頁設(shè)計中，切片可以根據(jù)不同的設(shè)備屏幕尺寸進(jìn)行自適應(yīng)調(diào)整。介紹如何通過CSS代碼實(shí)現(xiàn)切片圖片的響應(yīng)式布局。實(shí)踐操作挑戰(zhàn)布置實(shí)踐任務(wù)，要求學(xué)生選擇一個移動應(yīng)用界面或電商頁面設(shè)計稿，進(jìn)行切片操作并考慮響應(yīng)式設(shè)計的需求，嘗試生成適應(yīng)不同設(shè)備的網(wǎng)頁文件。移動應(yīng)用界面切片介紹切片在移動應(yīng)用界面設(shè)計中的應(yīng)用，將移動應(yīng)用的界面設(shè)計稿進(jìn)行切片，生成的圖片可以用于開發(fā)移動應(yīng)用的前端界面。講解移動應(yīng)用界面切片的特點(diǎn)和注意事項(xiàng)，如分辨率適配、切片布局等。切片在不同場景的應(yīng)用學(xué)習(xí)任務(wù)單PART04觀看微課學(xué)習(xí)建議學(xué)生先觀看與切片操作和HTML網(wǎng)頁生成相關(guān)的微課視頻，了解每個操作步驟和技巧。微課視頻具有直觀、詳細(xì)的特點(diǎn)，能幫助學(xué)生快速掌握知識點(diǎn)。預(yù)操作練習(xí)在聽課之前，學(xué)生可以自己打開Photoshop軟件，嘗試使用切片工具對簡單的圖像進(jìn)行切片操作，熟悉操作流程，發(fā)現(xiàn)自己的問題和困惑。聽課與實(shí)踐結(jié)合在老師講解和示范的過程中，學(xué)生要認(rèn)真聽講，同時積極進(jìn)行實(shí)踐操作，及時鞏固所學(xué)的知識。通過邊聽邊練的方式，加深對切片操作和HTML網(wǎng)頁生成的理解和記憶?？偨Y(jié)與復(fù)習(xí)學(xué)習(xí)完成后，學(xué)生要對所學(xué)的內(nèi)容進(jìn)行總結(jié)和復(fù)習(xí)，整理自己的學(xué)習(xí)筆記，將重要的知識點(diǎn)和操作技巧記錄下來。定期復(fù)習(xí)可以幫助學(xué)生鞏固記憶，提高操作的熟練度。學(xué)習(xí)方法建議基礎(chǔ)任務(wù)要求學(xué)生完成繪制網(wǎng)頁效果圖并進(jìn)行圖層合并、切片等基礎(chǔ)任務(wù)。每個任務(wù)都要達(dá)到一定的操作準(zhǔn)確性和熟練度，確保能夠熟練使用切片工具進(jìn)行切片操作。任務(wù)完成標(biāo)準(zhǔn)明確每個任務(wù)的完成標(biāo)準(zhǔn)，如操作的準(zhǔn)確性、完成時間、切片的質(zhì)量、網(wǎng)頁文件的兼容性等方面的要求。學(xué)生要按照標(biāo)準(zhǔn)認(rèn)真完成任務(wù)，確保學(xué)習(xí)效果。提高任務(wù)完成檢驗(yàn)并調(diào)整切片的尺寸大小、導(dǎo)出切片為GIF透明圖片和JPEG圖片等提高任務(wù)。在完成這些任務(wù)的過程中，要注重操作的準(zhǔn)確性和細(xì)節(jié)，確保切片的質(zhì)量和效果。拓展任務(wù)挑戰(zhàn)導(dǎo)出切片為HTML網(wǎng)頁文件的拓展任務(wù)。鼓勵學(xué)生發(fā)揮自己的主觀能動性，嘗試不同的切片方式和導(dǎo)出設(shè)置，掌握生成HTML網(wǎng)頁文件的操作流程。學(xué)習(xí)任務(wù)建議收集與處理鼓勵學(xué)生提出關(guān)于教學(xué)方法、學(xué)習(xí)資源、任務(wù)難度等方面的建議。老師要及時收集和處理這些建議，根據(jù)學(xué)生的反饋調(diào)整教學(xué)內(nèi)容和方法，提高教學(xué)質(zhì)量。學(xué)習(xí)經(jīng)驗(yàn)分享組織學(xué)生進(jìn)行學(xué)習(xí)經(jīng)驗(yàn)分享活動，讓學(xué)生互相交流學(xué)習(xí)心得和技巧。通過分享經(jīng)驗(yàn)，學(xué)生可以從他人的學(xué)習(xí)方法中獲得啟發(fā)，提高自己的學(xué)習(xí)效率。持續(xù)改進(jìn)機(jī)制建立持續(xù)改進(jìn)機(jī)制，不斷優(yōu)化學(xué)習(xí)任務(wù)單的內(nèi)容和形式。根據(jù)學(xué)生的學(xué)習(xí)情況和反饋，及時調(diào)整任務(wù)的難度和要求，確保學(xué)習(xí)任務(wù)單能夠更好地滿足學(xué)生的學(xué)習(xí)需求。問題反饋渠道提供多種問題反饋渠道，如向老師提問、在班級群里討論、在學(xué)習(xí)平臺上留言等。讓學(xué)生能夠及時反饋?zhàn)约涸趯W(xué)習(xí)過程中遇到的問題和困惑。困惑與建議總結(jié)與回顧PART0501回顧本任務(wù)中學(xué)習(xí)的切片工具的使用方法、切片尺寸的查看和調(diào)整、切片導(dǎo)出的格式和設(shè)置等知識，強(qiáng)調(diào)每個知識點(diǎn)的重點(diǎn)和難點(diǎn)。切片操作知識回顧02總結(jié)學(xué)生在實(shí)踐操作中掌握的技能，如網(wǎng)頁效果圖的切片操作、切片導(dǎo)出為不同格式、生成HTML網(wǎng)頁文件等。分析學(xué)生在操作過程中存在的問題和不足之處，并提出改進(jìn)的建議。操作技能總結(jié)03展示學(xué)生在學(xué)習(xí)過程中完成的作品，包括基礎(chǔ)任務(wù)、提高任務(wù)和拓展任務(wù)的成果。通過展示作品，讓學(xué)生看到自己的進(jìn)步和成長，增強(qiáng)學(xué)習(xí)的自信心。學(xué)習(xí)成果展示04對學(xué)生的學(xué)習(xí)效果進(jìn)行評價，采用自我評價、相互評價和老師評價相結(jié)合的方式。評價內(nèi)容包括知識掌握程度、操作技能水平、學(xué)習(xí)態(tài)度和創(chuàng)意設(shè)計能力等方面。學(xué)習(xí)效果評價知識與技能總結(jié)后續(xù)任務(wù)介紹簡要介紹后續(xù)任務(wù)的內(nèi)容和目標(biāo)，如圖像特效處理、合成與設(shè)計等。讓學(xué)生對后續(xù)學(xué)習(xí)有一個清晰的了解，激發(fā)他們的學(xué)習(xí)興趣。學(xué)習(xí)建議與期