項目九網站頁面設計

計算機圖形圖像處理

ByTLYJ主講人：***TEXT07項目一項目二項目三項目四項目五項目六項目七項目八項目九知識點1.Photoshop中動畫的制作、保存；2.Photoshop制作網頁切片；3.Photoshop中批處理操作。技能1.網站首頁效果的設計制作；2.網站登陸界面的設計制作；3.網站后臺界面的設計制作。內容簡述項目九網站頁面設計知識點：1.了解Photoshop的動畫制作功能、切片制作及利用動作記錄操作的功能。2.掌握Photoshop中逐幀動畫的制作，掌握將動畫保存為web格式的方法。3.掌握利用Photoshop制作網頁切片的方法。4.掌握Photoshop中動作的記錄、編輯等操作，能夠利用動作進行批處理操作。技能目標：1.掌握網站首頁效果的設計制作。2.掌握網站登陸界面的設計制作。3.掌握網站后臺界面的設計制作。9.1動畫、切片及動作9.1.1動畫9.1.1動畫新建一個125像素*30像素的文件，“背景內容”設置為“透明”。將背景圖層轉化為普通圖層。顯示標尺，拖出垂直參考線到右側適當位置。9.1動畫、切片及動作4.使用“橢圓選框工具

”，按Shift鍵在“圖層1”中創(chuàng)建一個圓形選區(qū)，并填充顏色（#88c943）。5.新建圖層2，使用“縮放工具

”放大到合適比率，使用“選框工具”或“鉛筆工具”繪制機器人。9.1動畫、切片及動作6.輸入“智能收費系統(tǒng)”字樣，設置字體大小：15點，字體顏色（#133bbc）。7.復制文字所在圖層，并修改各“副本文字圖層”的內容，指定要顯示或隱藏的圖層。9.1動畫、切片及動作打開“時間軸”面板。在“圖層”面板中選擇要顯示的圖層，單擊“創(chuàng)建幀動畫”按鈕，創(chuàng)建第1幀動畫。10.復制幀，使用“圖層”面板對幀進行更改。選擇要顯示的圖層，按住Shift鍵選擇機器人所在“圖層1”和“圖層2”，移到合適的位置。9.1動畫、切片及動作11.同理，創(chuàng)建其他幀。9.1動畫、切片及動作12.選擇所有動畫幀，設置“延遲”時間。設置循環(huán)選項。

執(zhí)行菜單“文件>存儲為Web和設備所用格式”命令，存儲為動畫GIF格式。9.1動畫、切片及動作9.1.2切片1）

使用切片工具創(chuàng)建切片在工具箱中的“裁剪工具”上右鍵單擊，選擇“切片工具

”。9.1動畫、切片及動作2）基于參考線創(chuàng)建切片執(zhí)行菜單“視圖>標尺”命令，在標尺處使用鼠標拖動，向圖像中添加參考線。選擇“切片工具”，在需要切割圖片處進行拖動，創(chuàng)建切片。3）其他方法：

基于圖層創(chuàng)建切片9.1動畫、切片及動作4）指定切片內容類型選擇一個切片。使用“切片選擇工具”雙擊該切片，彈出對話框。設置切片“類型”，如果想要在網頁中，鼠標單擊此切片時訪問淘寶網址，則需在“URL”處輸入“”。9.1動畫、切片及動作9.1.3動作

動作是指在單個文件或一批文件上執(zhí)行的一系列任務，如菜單命令、面板選項、工具動作等。動作組B.動作C.已記錄的命令D.包含的命令E.模態(tài)控制（打開或關閉）9.1動畫、切片及動作例子——通過“創(chuàng)建新動作”來繪制圖案1.打開文件或新建文件。2.創(chuàng)建新動作時，所用的命令和工具都將添加到動作中，直到停止記錄。3.新建組。4.單擊“創(chuàng)建新動作

”按鈕，或從“動作”面板菜單中選擇“新建動作”，輸入一個動作名稱，選擇一個動作集，然后設置附加選項，單擊“記錄”按鈕。9.1動畫、切片及動作新建圖層，繪制橢圓選區(qū)，并描邊。然后，旋轉10度。

根據實際需求，按Ctrl+ALT+Shift+T組合鍵多次，復制對象并按同比例變換。7.按“停止/播放記錄

”按鈕，結束錄制。9.2網站首頁效果設計效果圖9.2網站首頁效果設計設計思路網站首頁最首要的目的是告訴用戶我們是干什么的，我們的產品、我們的服務有哪些種類？受眾人群是哪些？我們可以幫助你做些什么？

作為設計師需要做的是強調企業(yè)優(yōu)勢，規(guī)避企業(yè)弱勢。因此，展現(xiàn)企業(yè)實力，是擺在首位的問題。9.2網站首頁效果設計制作步驟——LOGO設計新建文件，設置前景色為（#2858a8），創(chuàng)建新組

，名為“LOGO設計”，并創(chuàng)建新圖層。繪制直徑150像素的橢圓選區(qū)，填充前景色。調至合適位置。載入選區(qū)后，按Delete鍵刪除選區(qū)內容。同理，刪除“圖層2副本”選區(qū)內容內容。9.2網站首頁效果設計3.新建“圖層3”，繪制矩形選區(qū)，并填充前景色；繪制矩形選區(qū)，也填充前景色。4.調整圖案角度。設置參照點位置為“右下角”，逆時針旋轉小角度。同理，設置參照點位置為左下角，順時針旋轉。9.2網站首頁效果設計5.隱藏“背景”圖層，蓋印可見圖層，命名為“蓋印”。按Alt鍵的同時，單擊“蓋印”圖層的“指示圖層可見性”

，隱藏其他可見圖層。9.2網站首頁效果設計6.選中“蓋印”圖層中的圖像，填充白色。在“蓋印”圖層下方新建圖層，創(chuàng)建橢圓選區(qū)，填充顏色（#2858a8）。7.輸入

“慧眼設計”，設置字體“華文楷體”，顏色（#035e41）。9.2網站首頁效果設計制作步驟——正文設計1.執(zhí)行“文件>腳本>將文件載入堆?！泵?，批量導入素材。9.2網站首頁效果設計返回“網站首頁設計”文檔，創(chuàng)建參考線。創(chuàng)建新組

，命名為“正文設計”。組內，新建一個圖層。從新文檔中拖動素材（planning.jpg）到“網站首頁設計”文檔中。9.2網站首頁效果設計輸入文字等內容，創(chuàng)建新組

，命名為“01”，將“素材圖片”圖層及相關文字圖層移到該組中。

同理，復制“01”組，命名為“02”。將內容移動到適當位置，并修改“02”組中相關圖層內容。同樣方法，制作“03組”、“04組”。9.2網站首頁效果設計制作步驟——其他信息1.創(chuàng)建新組

，命名為“其他信息”，并創(chuàng)建新圖層。繪制矩形選區(qū)，填充顏色（#b7b7b7）。輸入“版權信息”等，顏色（#252525）。9.3網站登錄界面設計效果圖9.3網站登錄界面設計設計思路

本例網站后臺的設計，在布局上就采用常規(guī)模式，不再獨創(chuàng)新意。

上方放置系統(tǒng)的名稱，左側放置菜單欄，其余為內容編輯區(qū)。

界面主色調采用沉穩(wěn)的灰色，9.3網站登錄界面設計制作步驟——制作背景新建一個900像素*630像素的文件。設置前景色（#797879），背景色（#4f504f）。在頂部創(chuàng)建矩形選區(qū)。利用“漸變工具”，采用“徑向漸變”樣式，從上到下填充“前景色到背景色的漸變。設置圖層樣式，選擇“描邊”效果，“大小”為“2”，顏色為黑色。9.3網站登錄界面設計2.新建圖層，緊貼上面繪制較細的矩形條選區(qū)，填充顏色（#bbbbbb）。3.新建圖層，繼續(xù)繪制一個矩形選區(qū)。設置前景色（#eeeeee），背景色（#cfcfcf）。填充從上到下的“徑向漸變。9.3網站登錄界面設計制作底部：將最上方的矩形復制，“垂直翻轉”，移到底部。制作分割線：在“背景”圖層上方新建一個圖層，分別在頂部灰色漸變的矩形下面和底部黑白漸變的矩形上面，添加顏色為（#aaaaaa）的直線。并制作左右分割線。9.3網站登錄界面設計制作步驟——輸入文字輸入文字“網站后臺管理系統(tǒng)v2.0”，宋體、30。在“字符”面板中設置字符的“字距”為180；選擇文字“v2.0”，設置為“上標”，字符的字距為“-40”。9.3網站登錄界面設計2.為文字圖層設置圖層樣式。9.3網站登錄界面設計3.同樣，在下方創(chuàng)建文字“POWEREDBYJM?2013-2018AllRightsReserved.”，添加“投影”效果。9.3網站登錄界面設計制作步驟——制作按鈕

創(chuàng)建一個圓角矩形，并設置圖層樣式，選擇“描邊”效果：

1像素、黑色、外部；選擇“漸變疊加”效果：顏色1（#bbbbbb）、顏色2（白色）。9.3網站登錄界面設計2.輸入文字“用戶管理”。同樣方法，制作其他按鈕。3.接下來制作“常規(guī)管理”的按鈕。復制其他按鈕圖層，設置圖層樣式，“漸變疊加”效果：左邊顏色（#3a3a3a），右邊顏色（#bbbbbb）。9.3網站登錄界面設計4.繼續(xù)添加“內發(fā)光”效果，內發(fā)光“顏色”設置為白色，“大小”設置為1像素。5.輸入文字“常規(guī)管理”，白色。9.3網站登錄界面設計制作步驟——制作左側菜單欄

導入素材，添加文字（現(xiàn)在時間：2014年12月17日星期五17:48:51）。2.制作左側導航欄按鈕。9.3網站登錄界面設計3.制作表格內容：設置前景色（#b7b7b7），使用“鉛筆工具”按住Shift鍵繪制表格，在表格單元格內創(chuàng)建文字，顏色為黑色。并添加其他文字。完成。8.6課外拓展1.制作郵票下載外掛濾鏡“郵票齒輪邊框制作濾鏡”，將壓縮文件夾解壓之后，放到Photoshop的安裝目錄下“AdobePhotoshopCS6/Plug-ins”，重啟Photoshop。打開素材圖片“照片.jpg”，利用該濾鏡制作郵票。9.5課外拓展1.制作轉動的鐘表打開素材圖片“cloud.jpg”和“clock.jpg”，打開“時間軸”面板，利用Photoshop的動畫制作功能，制作時鐘指針及云彩運