《電腦美術》第17章網頁設計與ImageReady的應用.ppt

1,2,17.1 利用Photoshop設計網頁 17.2 ImageReady快速入門 17.3 網頁banner動畫制作,第17章 網頁設計與ImageReady的應用,3,網頁設計已經逐漸成為一個熱門的話題，而Photoshop又是設計頁面的重要工具。通過前面的學習，相信大家利用Photoshop來制作網頁的頁面已經不是什么問題了，本章的主要目標是講解如何切片和優(yōu)化網頁圖片，以及如何制作Web畫廊和GIF動畫等。,本章目標,第17章 網頁設計與ImageReady的應用,4,制作一個介紹圖形圖像的個人主頁。在實例中，主色調選用了藍色，藍色能給人一種平靜、理智、永恒、博大的感覺。同時，運用白色、藍色和其它顏色的搭配，使網頁顯得典雅、溫馨。,制作個人主頁,17.1 利用Photoshop制作個人主頁,5,創(chuàng)建新的圖像文件 啟動Photoshop，執(zhí)行【文件】【新建】命令，創(chuàng)建一個新的圖像文件，如圖所示。設置完后，單擊【好】按鈕。 創(chuàng)建參考線 執(zhí)行【圖層】【新建】【圖層組】命令，彈出【新圖層組】對話框，設置【名稱】為“title”,設計標題欄,17.1 利用Photoshop制作個人主頁,6,創(chuàng)建一個矩形選區(qū),創(chuàng)建參考線,設計標題欄,17.1 利用Photoshop制作個人主頁,新增【圖層1】，選擇工具箱中的【矩形選框工具】，在【選項】欄中設置【樣式】為【固定大小】，【寬度】為“770像素”，【高度】為“100像素”，在【圖層1】中創(chuàng)建一個選區(qū)，如圖所示。 按Ctrl+R鍵，打開標尺，用鼠標從橫向標尺上拉出一條參考線，如圖所示。,7,繪制出路徑1,繪制出路徑2,設計標題欄,17.1 利用Photoshop制作個人主頁,制作背景圖案 按Ctrl+R鍵，隱藏標尺，設置前景色為白色，按Alt+Delete鍵，用前景色填充選區(qū)。按Ctrl+D鍵，取消選擇，在【路徑】面板中新增【路徑1】，用【鋼筆工具】繪制出路徑，如圖所示。 在【路徑】面板中新增【路徑2】，用【鋼筆工具】繪制出路徑，如圖 。,8,設置漸變色,從上到下的漸變效果,設計標題欄,17.1 利用Photoshop制作個人主頁,在【圖層】面板中，新增【圖層2】。按住Ctrl鍵，單擊【路徑】面板中的【路徑1】，將路徑轉化為選區(qū)。選擇工具箱中的【漸變工具】，在【選項】欄中單擊【點按可編輯漸變】按鈕，彈出【漸變編輯器】對話框，在漸變色條下，設置左端色標的RGB值為（235，241，246），右端色標的RGB值為（135，185，248），其它參數(shù)設置如圖所示。 設置完后，單擊【好】按鈕。按住Shift鍵，用鼠標從選區(qū)的頂端拖拉到底端，創(chuàng)建漸變，按Ctrl+D鍵，取消選區(qū)，如圖所示。,9,漸變填充效果,設置【減淡工具】的參數(shù),潤飾圖像后的效果,設計標題欄,17.1 利用Photoshop制作個人主頁,新增【圖層3】，按住Ctrl鍵，在【路徑】面板中單擊【路徑2】，將路徑轉變?yōu)檫x區(qū)。選擇工具箱中的【漸變工具】，在【選項】欄中單擊【點按可編輯漸變】按鈕，打開【漸變編輯器】對話框，在漸變色條下，保持左端色標的顏色不變，設置右端色標顏色的RGB值為（170，204，248），單擊【好】按鈕。 按住Shift鍵，用鼠標從選區(qū)的上端拖拉到選區(qū)的下端，創(chuàng)建漸變效果。在【圖層】面板中，將【圖層3】調整到【圖層2】的下面，按Ctrl+D鍵，取消選擇，效果如圖 選擇工具箱中的【減淡工具】，在工具【選項】欄中，設置參數(shù)如圖所示。 用鼠標涂抹過渡不自然的區(qū)域，潤飾圖像，效果如圖所示。,10,輸入“圖像愛好者天堂”,設置漸變色,設計標題欄,17.1 利用Photoshop制作個人主頁,制作LOGO文字 選擇工具箱中的【橫排文字工具】，在【選項】欄中設置文字顏色為黑色，輸入文字，如圖所示。 執(zhí)行【圖層】【圖層樣式】【漸變疊加】命令，單擊【點按可編輯漸變】按鈕，打開【漸變編輯器】對話框，設置左端色標的RGB值為（20，91，210），右端色標的RGB值為（255，255，255），如圖所示。,11,設置描邊參數(shù),設置圖層樣式后的效果,設計標題欄,17.1 利用Photoshop制作個人主頁,選擇【描邊】選項，設置【大小】為“2像素”，【顏色】的RGB值為（187，214，247），其它參數(shù)設置如圖所示。 設置完后，單擊【好】，效果如圖所示。,12,單擊【橫排文字工具】，輸入網址，如圖所示。 制作圖標 打開“網頁圖標.psd”文件，如圖所示。 將打開的圖像復制到“個人主頁.psd”文件中，在【圖層】面板中自動創(chuàng)建了【圖層4】。在圖層組【title】中，把【圖層4】調整到【圖層2】的上方，調整圖形位置，效果如圖所示。,輸入網址,打開“網頁圖標.psd”,導入的圖片效果,設計標題欄,17.1 利用Photoshop制作個人主頁,13,在工具箱中選擇【橫排文字工具】，輸入文字，設置文字顏色為白色，如圖所示。 制作導航欄 在【圖層】面板中新增【圖層5】，選擇工具箱中的【矩形選框工具】，在【選項】欄中設置【樣式】為【固定大小】，【寬度】為“770像素”，【高度】為“25像素”，在參考線頂部創(chuàng)建一個選區(qū)，如圖所示。,輸入文字,創(chuàng)建一個選區(qū),設計標題欄,17.1 利用Photoshop制作個人主頁,14,執(zhí)行【視圖】【顯示】【參考線】命令，去掉【參考線】命令右邊的小勾，隱藏參考線。選擇工具箱中的【漸變工具】，在【選項】欄上單擊【點按可編輯漸變】按鈕，打開【漸變編輯器】對話框，在漸變條下方，添加兩個漸變色標，分別設置它們的【位置】為“45%”和“80%”，從左到右，分別設置四個色標的RGB值為（123，158，186）、（198，220，233）、（225，241，255）、（123，150，169），如圖所示。 設置完后，單擊【好】按鈕。 按住Shift鍵，用鼠標從選區(qū)的上端拖到下端，對選區(qū)進行漸變填充，按Ctrl+D鍵，取消選擇，效果如圖所示。,設置編輯色,對選區(qū)進行漸變填充,設計標題欄,17.1 利用Photoshop制作個人主頁,15,選擇【橫排文字工具】，輸入欄目名稱，如圖所示。 執(zhí)行【圖層】【圖層樣式】【描邊】命令，在彈出的【圖層樣式】對話框中設置【大小】為“1像素”，【顏色】為白色，如圖所示。,輸入欄目名稱,設置描邊參數(shù),設計標題欄,17.1 利用Photoshop制作個人主頁,16,設置完后，單擊【好】按鈕。 在【圖層】面板中選擇【圖層5】，選擇工具箱中的【矩形選框工具】，在【選項】欄中設置【樣式】為【固定大小】，【寬度】為“2像素”，【高度】為“18像素”，設置完成后創(chuàng)建一個選區(qū)，如圖所示。 執(zhí)行【圖像】【調整】【色階】命令，在彈出的【色階】對話框中設置參數(shù)如圖所示。,創(chuàng)建一個選區(qū),設置色階參數(shù),設計標題欄,17.1 利用Photoshop制作個人主頁,17,設置完后，單擊【好】按鈕。 執(zhí)行【濾鏡】【模糊】【高斯模糊】命令，在彈出的【高斯模糊】對話框中設置【半徑】為“1.0像素”，如圖所示。 單擊【好】，按Ctrl+D鍵，取消選擇，效果如圖所示。,設置高斯模糊參數(shù),設置高斯模糊后的效果,設計標題欄,17.1 利用Photoshop制作個人主頁,18,用同樣的方法，制作出其它分隔條，如圖所示。,分隔條效果,設計標題欄,17.1 利用Photoshop制作個人主頁,19,創(chuàng)建新圖層組 在【圖層】面板中，單擊圖層組【title】左邊的小三角箭頭，隱藏圖層組中的子圖層，執(zhí)行【圖層】【新建】【圖層組】命令，在【新圖層組】對話框中，輸入【名稱】為“body”，單擊【好】按鈕。 在圖層組【body】中，新增【圖層6】。選擇工具箱中的【矩形選框工具】，在【選項】欄中設置【樣式】為【固定大小】，【寬度】為“770像素”，【高度】為“420像素”，創(chuàng)建一個選區(qū)，如圖所示。,創(chuàng)建一個選區(qū),設計頁面,17.1 利用Photoshop制作個人主頁,20,執(zhí)行【視圖】【顯示】【參考線】命令，顯示參考線，用上面學過的方法，在選區(qū)的頂部和底部創(chuàng)建兩條參考線。 在工具箱中設置前景色為白色，按Alt+Delete鍵，用前景色填充選區(qū)。按Ctrl+D鍵，取消選擇，效果如圖11.32所示。 制作分隔線 接下來制作分隔線。在【圖層】面板中單擊圖層組【title】和圖層【背景】左面的眼睛圖標，將它們隱藏起來。 在【圖層】面板中，選擇圖層組【body】中的【圖層6】，按下【鎖定】中的【鎖定透明像素】按鈕，如圖所示。,創(chuàng)建參考線并填充選區(qū),設計頁面,17.1 利用Photoshop制作個人主頁,21,創(chuàng)建兩條垂直的參考線，如圖所示。 在工具箱中選擇【單列選框工具】，在左邊的垂直參考線上單擊，創(chuàng)建一個單列選區(qū)，如圖所示。 在【圖層】面板上新增【圖層7】，在工具箱中設置前景色的RGB值為（0，72，101），按Alt+Delete鍵，用前景色填充選區(qū)。 用同樣的方法，在右側的參考線上創(chuàng)建單列選區(qū)，再填充前景色，刪除透明區(qū)域中的填充色，效果如圖所示。實際操作中，由于參考線的遮擋，看不到單列填充效果，按Ctrl+H鍵，可將參考線隱藏起來，看完效果后，再按一下Ctrl+H鍵，顯示出參考線。 創(chuàng)建一條水平參考線，選擇工具箱中的【單行選框工具】，在水平參考線上創(chuàng)建一個水平單列選區(qū)，按Alt+Delete鍵，在選區(qū)中填充前景色，如圖所示。,創(chuàng)建兩條垂直的參考線,在參考線上創(chuàng)建單列選區(qū),填充單列選區(qū)后的效果,制作出單行選區(qū)并填充,設計頁面,17.1 利用Photoshop制作個人主頁,22,單擊工具箱中的【矩形選框工具】，在【選項】欄中，設置【樣式】為“正?！?，設置完后，創(chuàng)建一個選區(qū)，如圖所示，設置背景色為白色，按Ctrl+Delete鍵，用背景色填充選區(qū)。 用上述方法，細心地制作出其它分隔線，隱藏參考線后，效果如圖所示。 制作圖像特效 按Ctrl+H鍵，隱藏參考線，在【圖層】面板中，使圖層組【title】和圖層【背景】顯示出來。 選擇圖層組【body】中的【圖層7】，打開圖片“網頁圖片.jpg”，如圖所示。,創(chuàng)建選區(qū)并填充,創(chuàng)建其它分隔線,打開“網頁圖片.jpg”,設計頁面,17.1 利用Photoshop制作個人主頁,23,將打開的圖片復制到“個人主頁.psd”文件中，如圖所示。 執(zhí)行【編輯】【變換】【水平翻轉】命令，將圖片水平翻轉。按Ctrl+T鍵，調整圖片的大小和位置，效果如圖所示。,導入圖片,調整圖片的大小和位置,設計頁面,17.1 利用Photoshop制作個人主頁,24,按回車鍵，退出圖片變換操作。在圖層組【body】中新增【圖層9】，然后把【圖層9】調整到【圖層8】的下面，用【矩形選框工具】創(chuàng)建選區(qū)，如圖所示。 選擇工具箱中的【漸變工具】，在【選項】欄中，單擊【點按可編輯漸變】按鈕，打開【漸變編輯器】對話框，設置左邊色標顏色的RGB值為（135，185，248），右邊色標顏色的RGB值為（255，255，255），如圖所示。,創(chuàng)建選區(qū),漸變編輯器對話框,設計頁面,17.1 利用Photoshop制作個人主頁,25,設置完后，單擊【好】按鈕。 按住Shift鍵，用鼠標從選區(qū)的左端拖拉到右端，對選區(qū)進行漸變填充，如圖。 選擇【圖層8】，按住Ctrl鍵，單擊【圖層8】，執(zhí)行【圖層】【添加圖層蒙版】【顯示選區(qū)】命令。 選擇【漸變工具】，在【選項】欄中單擊【點按可編輯漸變】按鈕，打開【漸變編輯器】對話框，在【預置】中選擇【黑色、白色】漸變，如圖所示。,漸變填充后的效果,選擇【黑色、白色】漸變,設計頁面,17.1 利用Photoshop制作個人主頁,26,設置完后，單擊【好】按鈕。 回到【圖層8】，按住Shift鍵，用鼠標從圖像的右邊緣拖拉到左邊緣，如圖,圖像漸變后的效果,設計頁面,17.1 利用Photoshop制作個人主頁,27,制作抽線圖 執(zhí)行【文件】【新建】命令，創(chuàng)建一個新的圖像文件，如圖所示。設置完后，單擊【好】按鈕。 將新建的文件放大到最大。 選擇【矩形選框工具】，選中圖像的上半部分，按Ctrl+Delete鍵，在選區(qū)內填充白色。按Ctrl+D鍵，取消選擇，如圖所示。,設置新建的圖像文件,創(chuàng)建選區(qū)并填充白色,設計頁面,17.1 利用Photoshop制作個人主頁,28,執(zhí)行【編輯】【定義圖案】命令，將圖片定義為圖案。 切換到“個人主頁.psd”文件，在圖層組【body】中新增【圖層10】，按住Ctrl鍵，單擊【圖層9】，如圖所示。 執(zhí)行【編輯】【填充】命令，在【填充】對話框中，設置【使用】為【圖案】，在【自定圖案】中選擇剛剛建立的圖案，如圖所示。,載入選區(qū),選擇填充圖案,設計頁面,17.1 利用Photoshop制作個人主頁,29,單擊【好】按鈕，完成填充后的效果如圖所示。 設置【圖層10】的【不透明度】為“40%”，按Ctrl+D鍵，取消選擇，效果如圖所示。,填充后的效果,調節(jié)不透明度后的效果,設計頁面,17.1 利用Photoshop制作個人主頁,30,制作圖標 打開“圖標.psd”文件，如圖所示。 將兩個圖標分別復制到“個人主頁.psd”文件中，調整它們的大小和位置，如圖所示。,打開“圖標.psd”,調整圖片的大小和位置,完成最后的工作,17.1 利用Photoshop制作個人主頁,31,制作文字 在【圖層】面板中，單擊圖層組【body】左邊的三角箭頭，隱藏圖層組中的子圖層。執(zhí)行【圖層】【新建】【圖層組】命令，輸入【名稱】為“text”，單擊【好】按鈕。 在工具箱中設置前景色為黑色，選擇【橫排文字工具】，輸入“Photoshop新聞”。新建【圖層13】，用【直線工具】創(chuàng)建一條寬度為1像素的黑色直線。再輸入“News”，如圖所示。,輸入文本并繪制出直線,完成最后的工作,17.1 利用Photoshop制作個人主頁,32,用同樣的方法，再次輸入文本并繪制出直線，如圖所示。 選擇【橫排文字工具】，輸入文字，設置文本顏色的RGB值為（0，72，101），效果如圖所示。 這樣，一個簡潔、樸實的個人主頁就制作完成了。,輸入其它文本,輸入文字后的效果,完成最后的工作,17.1 利用Photoshop制作個人主頁,33,ImageReady簡介,17.2 ImageReady快速入門,ImageReady更提供了包含了大量網頁和動畫的設計制作工具，功能強大也非常實用。 ImageReady為網頁設計師提供了最佳解決方案，Adobe公司將它與Photoshop捆綁在一起，便于在photoshop中先進行編輯設計，然后再轉換到ImageReady中對圖形進行優(yōu)化，并且添加各種網頁元素，如切片、圖像映射、動畫和翻轉效果等。,34,啟動ImageReady,17.2 ImageReady快速入門,單擊“開始” “程序” “Adobe ImageReady CS2” PC中單擊工具箱上的“在ImageReady中編輯”圖標,35,ImageReady工作界面,17.2 ImageReady快速入門,ImageReady工作界面和PS基本相同。只是在PS的基礎上添加和刪除了一些功能。添加了優(yōu)化面板、切片面板、Web內容面板、圖像映射面板和圖像映射工具等。 在ImageReady中制作的圖像文件，可以不必關閉，只要單擊工具箱上的“在Photoshop中編輯”圖標，就可以返回到Photoshop中繼續(xù)進行圖像處理。,36,動畫控制面板,17.2 ImageReady快速入門,單擊“窗口” “動畫” ，顯示或隱藏動畫面板,37,動畫面板,17.2 ImageReady快速入門,單擊【過渡】按鈕，將彈出如圖所示的對話框。 過渡：設置插入幀的起始幀位置 要添加的幀：設置插入幀的數(shù)目,在動畫面板中，單擊每一圖像框的右下角的【選擇幀延時間】可以為每一幅設定好的