《UI設(shè)計(jì)》課件-5.4 項(xiàng)目實(shí)訓(xùn)

項(xiàng)目實(shí)訓(xùn)項(xiàng)目實(shí)訓(xùn)——設(shè)計(jì)“多肉”登錄頁界面項(xiàng)目目的本例將設(shè)計(jì)“多肉”登錄頁界面，完成后的參考效果如圖所示。項(xiàng)目實(shí)訓(xùn)——設(shè)計(jì)“多肉”登錄頁界面設(shè)計(jì)思路（1）新建一個(gè)名稱為“多肉微觀世界登錄頁面”，大小為“1920像素×1060像素”、分辨率為“72像素/英寸”的圖像文件，在圖像的上方拖出3條水平參考線，在圖像最上方輸入文字，并在“字符”面板中設(shè)置字體、文本顏色分別為“思源黑體CN、#515c52”，調(diào)整大小和位置，使用“直線工具”在文字下方繪制一條直線。（2）打開“多肉微觀世界導(dǎo)航欄.psd”素材文件（配套資源:\素材\第5章\多肉微觀世界登錄頁面\多肉微觀世界導(dǎo)航欄.psd），將Logo和搜索文字拖動(dòng)到直線的下方，調(diào)整Logo的擺放位置。繪制顏色為“#515c52”、大小為“1370像素×500像素”的矩形，將其拖動(dòng)到Logo的下方。（3）打開“多肉2.psd”素材文件（配套資源:\素材\第5章\多肉微觀世界登錄頁面\多肉2.psd），將其拖動(dòng)到繪制的矩形上方，按【Ctrl+T】組合鍵變形，并在其上單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“水平翻轉(zhuǎn)”命令。項(xiàng)目實(shí)訓(xùn)——設(shè)計(jì)“多肉”登錄頁界面（4）在“圖層”面板中單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“創(chuàng)建剪貼蒙版”命令，將圖像置入到矩形中，使其形成一個(gè)整體。（5）在右側(cè)的矩形中繪制填充顏色為“ffffff”、大小為“460像素×390像素”的矩形。打開“登錄素材.psd”素材文件（配套資源:\素材\第5章\多肉微觀世界登錄頁面\登錄素材.psd），將其中的登錄框拖動(dòng)到白色矩形的中上方。（6）在登錄窗口中輸入文字，并設(shè)置字體分別為“思源黑體CN”，調(diào)整字體大小和位置，并從打開的“登錄素材.psd”素材文件中將復(fù)選框拖動(dòng)到“自動(dòng)登錄”文字的左側(cè)。（7）使用“圓角矩形工具”在文字的下方繪制顏色為“#fdb900”、大小為“375像素×48像素”的圓角矩形，選擇【圖層】/【圖層樣式】/【描邊】命令，打開“圖層樣式”對(duì)話框，設(shè)置大小、位置、混合模式、顏色分別為“3、外部、正常、#fda700”。設(shè)計(jì)思路項(xiàng)目實(shí)訓(xùn)——設(shè)計(jì)“多肉”登錄頁界面（8）在“圖層樣式”對(duì)話框左側(cè)列表中單擊選中“內(nèi)陰影”復(fù)選框，設(shè)置混合模式、顏色、不透明度、角度、距離、阻塞、大小分別為“正片疊底、#fda805、75、-42、5、25、40”。（9）在“圖層樣式”對(duì)話框左側(cè)列表中單擊選中“漸變疊加”復(fù)選框，在右側(cè)設(shè)置混合模式、不透明度、漸變、樣式、角度、縮放分別為“正常、100、#fd7815~#fdad00、線性、90、100”。（10）在“圖層樣式”對(duì)話框左側(cè)列表中單擊選中“投影”復(fù)選框，設(shè)置投影的混合模式、不透明度、角度、距離、擴(kuò)展、大小分別為“正片疊底、60、-40、8、0、3”，單擊“確定”按鈕。設(shè)計(jì)思路項(xiàng)目實(shí)訓(xùn)——設(shè)計(jì)“多肉”登錄頁界面（11）查看制作的登錄按鈕效果，并在其上輸入“登錄”文字，設(shè)置字體為“思源黑體CN”，調(diào)整字體大小和位置。使用相同的方法，在上方輸入“用戶登錄”，并調(diào)整字體位置。（12）在頁面的下方繪制填充顏色為“#eeeeee”、大小為“1370像素×90像素”的矩形，并在其上輸入文字和