前言 第1章網(wǎng)站UI概論 1.1初識(shí)網(wǎng)站UI 1.1.1什么是網(wǎng)頁(yè)界面 1.1.2網(wǎng)頁(yè)界面的分類 1.1.3網(wǎng)頁(yè)界面的設(shè)計(jì)特點(diǎn) 1.2網(wǎng)站UI設(shè)計(jì)原則 1.2.1視覺美觀 1.2.2突出主題 1.2.3整體性 1.2.4為用戶考慮 1.2.5快速加載 1.3網(wǎng)頁(yè)的構(gòu)成元素 1.3.1文字 1.3.2圖像 1.3.3超鏈接 1.3.4多媒體 1.4網(wǎng)頁(yè)UI中的扁平化 1.4.1圖標(biāo) 1.4.2折角 1.4.3圓角 1.4.4徽章 1.4.5條紋 1.4.6標(biāo)簽 1.4.7裝飾元素 1.4.8裝飾背景 1.5移動(dòng)端與計(jì)算機(jī)端網(wǎng)頁(yè)UI區(qū)別 1.5.1界面不同 1.5.2位置不同 1.5.3操作習(xí)慣不同 1.5.4按鈕狀態(tài)不同 1.5.5信息布局不同 1.6網(wǎng)頁(yè)設(shè)計(jì)命名規(guī)范 1.7專家支招 1.7.1網(wǎng)站建設(shè)流程 1.7.2什么是虛擬主機(jī) 1.8總結(jié)擴(kuò)展 1.8.1本章小結(jié) 1.8.2舉一反三——查看手機(jī)UI界面 第2章Photoshop基本操作 2.1什么是Photoshop 2.2Photoshop的安裝和啟動(dòng)界面 實(shí)例Photoshop的安裝和啟動(dòng) 2.3Photoshop的基本操作 2.3.1新建文檔 2.3.2打開文件 2.3.3保存文件 實(shí)例制作精美的網(wǎng)頁(yè)圖標(biāo) 2.3.4文件的置入和導(dǎo)入 2.3.5修改圖像大小 2.3.6修改畫布大小 實(shí)例調(diào)整網(wǎng)頁(yè)尺寸 2.4圖像的復(fù)制與粘貼 2.4.1圖像的復(fù)制 實(shí)例制作精美的網(wǎng)頁(yè)界面 2.4.2圖像的拷貝與粘貼 實(shí)例制作網(wǎng)頁(yè)插圖 2.4.3選擇性粘貼 實(shí)例制作網(wǎng)頁(yè)展板 2.5圖像的裁剪 2.5.1固定尺寸裁剪 2.5.2利用輔助線裁剪 2.5.3透視裁剪 2.6圖像的變換 2.6.1移動(dòng)圖像 2.6.2縮放圖像 2.6.3旋轉(zhuǎn)圖像 2.6.4變形和透視 2.6.5自由變換 實(shí)例為網(wǎng)頁(yè)制作廣告插圖 2.7還原與恢復(fù)操作 2.7.1還原與重做 2.7.2前進(jìn)一步與后退一步 2.7.3恢復(fù)文件 2.8專家支招 2.8.1什么是矢量圖像和位圖圖像 2.8.2分辨率 2.9總結(jié)擴(kuò)展 2.9.1本章小結(jié) 2.9.2舉一反三——制作簡(jiǎn)單的網(wǎng)頁(yè)按鈕 第3章網(wǎng)站頁(yè)面UI配色 3.1色彩的基礎(chǔ)知識(shí) 3.1.1三原色 3.1.2色彩視覺 3.1.3色彩三要素 3.1.4色彩的種類 3.1.5色系 3.2色彩在網(wǎng)頁(yè)視覺設(shè)計(jì)中的作用 3.2.1突出網(wǎng)頁(yè)主題 3.2.2劃分視覺區(qū)域 3.2.3吸引瀏覽者目光 3.2.4增強(qiáng)網(wǎng)頁(yè)藝術(shù)性 3.3色彩的聯(lián)想作用與心理效果 3.3.1色彩的冷暖 3.3.2色彩的軟硬 3.3.3色彩的大小 3.3.4色彩的輕重 3.3.5色彩的活潑和端莊 3.3.6色彩的興奮和沉穩(wěn)感 3.3.7色彩的華麗和樸素感 3.4網(wǎng)頁(yè)配色標(biāo)準(zhǔn) 3.4.1Web安全色 3.4.2使用Web安全色調(diào)色板 3.5色彩中的功能角色 3.5.1主色 3.5.2背景色 3.5.3輔助色 3.5.4點(diǎn)綴色 3.6網(wǎng)頁(yè)配色技巧 3.6.1配色原則 實(shí)例制作簡(jiǎn)約網(wǎng)站主頁(yè) 3.6.2確定網(wǎng)頁(yè)主題色 3.6.3確定網(wǎng)頁(yè)文本配色 實(shí)例制作公司宣傳主頁(yè) 3.7網(wǎng)頁(yè)風(fēng)格影響配色 3.7.1冷暖配色 3.7.2白色的應(yīng)用 3.7.3飽和度影響配色 3.8影響配色的元素 3.8.1根據(jù)行業(yè)特征選擇網(wǎng)頁(yè)配色 3.8.2根據(jù)色彩聯(lián)想選擇網(wǎng)頁(yè)配色 3.8.3根據(jù)受眾色彩偏好選擇網(wǎng)頁(yè)配色 3.8.4根據(jù)生命周期選擇網(wǎng)頁(yè)配色 3.9專家支招 3.9.1怎樣提高對(duì)色彩的敏感度 3.9.2什么是色立體 3.10總結(jié)擴(kuò)展 3.10.1本章小結(jié) 3.10.2舉一反三——制作水族館網(wǎng)站主頁(yè) 第4章網(wǎng)站頁(yè)面布局與版式設(shè)計(jì) 4.1了解網(wǎng)頁(yè)布局 4.1.1網(wǎng)頁(yè)布局的目的 4.1.2網(wǎng)頁(yè)布局的操作順序 4.2計(jì)算機(jī)端常見的網(wǎng)頁(yè)布局方式 4.2.1“國(guó)”字形 4.2.2“T”字形 4.2.3標(biāo)題正文型 4.2.4左右分割型 4.2.5上下分割型 4.2.6POP型 4.2.7封面型 實(shí)例制作完整豎屏網(wǎng)頁(yè) 4.2.8Flash型 4.3移動(dòng)端網(wǎng)頁(yè)布局方式 4.3.1布局的類型 4.3.2布局的實(shí)現(xiàn)方式 4.3.3響應(yīng)式布局 4.3.4響應(yīng)式布局優(yōu)缺點(diǎn) 4.4網(wǎng)頁(yè)布局方法 4.4.1網(wǎng)頁(yè)布局設(shè)計(jì) 4.4.2網(wǎng)頁(yè)布局特征 4.4.3網(wǎng)頁(yè)布局原則 實(shí)例制作蛋糕店主頁(yè)——頂部 實(shí)例制作蛋糕店主頁(yè)——主體 4.5根據(jù)整體內(nèi)容決定網(wǎng)頁(yè)布局 4.5.1左側(cè)的網(wǎng)頁(yè)布局 4.5.2水平居中的頁(yè)面布局 4.5.3水平和居中的頁(yè)面布局 4.5.4滿屏的網(wǎng)頁(yè)布局 4.6頁(yè)面分割方式 4.6.1橫向分割 4.6.2縱向分割 4.6.3復(fù)合分割 4.7運(yùn)用固定區(qū)域的設(shè)置 4.8網(wǎng)頁(yè)布局設(shè)計(jì)的連貫性和多樣性 4.9專家支招 4.9.1網(wǎng)頁(yè)界面設(shè)計(jì)的設(shè)計(jì)誤區(qū) 4.9.2網(wǎng)頁(yè)界面設(shè)計(jì)的設(shè)計(jì)理念 4.10總結(jié)擴(kuò)展 4.10.1本章小結(jié) 4.10.2舉一反三——制作簡(jiǎn)潔網(wǎng)頁(yè)登陸界面 第5章網(wǎng)站頁(yè)面圖像的優(yōu)化與調(diào)整 5.1網(wǎng)站中的圖像 5.1.1網(wǎng)站中使用的圖片格式 5.1.2網(wǎng)站中的顏色模式 5.2圖章工具的使用 5.2.1仿制圖章的應(yīng)用 實(shí)例去除網(wǎng)頁(yè)中的水印效果 5.2.2圖案圖章工具的應(yīng)用 5.3修復(fù)網(wǎng)頁(yè)中的圖像 5.3.1污點(diǎn)修復(fù)畫筆工具 實(shí)例修復(fù)圖像瑕疵 5.3.2修復(fù)畫筆工具 5.3.3修補(bǔ)工具 5.3.4內(nèi)容感知移動(dòng)工具 5.3.5紅眼工具 5.4自動(dòng)調(diào)整圖像色彩 5.4.1自動(dòng)色調(diào) 5.4.2自動(dòng)對(duì)比度 5.4.3自動(dòng)顏色 5.5手動(dòng)調(diào)整圖像色彩 5.5.1亮度/對(duì)比度 實(shí)例調(diào)整網(wǎng)頁(yè)中的圖像亮度 5.5.2色階 5.5.3曲線 實(shí)例執(zhí)行“曲線”命令調(diào)整圖像 5.5.4自然飽和度 實(shí)例制作炫彩展示圖 5.5.5色相/飽和度 5.5.6陰影/高光 實(shí)例調(diào)整網(wǎng)頁(yè)中的逆光圖片 5.6填充和調(diào)整圖層 5.6.1純色填充圖層 5.6.2漸變填充圖層 5.6.3圖案填充圖層 5.7批處理 5.7.1動(dòng)作 5.7.2自定義動(dòng)作 5.8專家支招 5.8.1如何提高圖像清晰度 5.8.2如何處理掃描圖像 5.9總結(jié)擴(kuò)展 5.9.1本章小結(jié) 5.9.2舉一反三——批處理圖像 第6章網(wǎng)站頁(yè)基本元素設(shè)計(jì) 6.1圖標(biāo)概述 6.1.1什么是圖標(biāo) 6.1.2圖標(biāo)在網(wǎng)頁(yè)中的作用 6.1.3網(wǎng)頁(yè)圖標(biāo)應(yīng)用 6.2使用形狀工具繪制圖標(biāo) 6.2.1矩形工具 實(shí)例繪制時(shí)鐘圖標(biāo) 6.2.2多邊形工具 6.2.3形狀的路徑操作 實(shí)例制作常用網(wǎng)頁(yè)小圖標(biāo) 6.2.4自定義形狀工具 實(shí)例繪制天氣圖標(biāo) 6.3按鈕概述 6.3.1網(wǎng)頁(yè)中按鈕的常見類型 6.3.2網(wǎng)頁(yè)中按鈕的特點(diǎn) 6.3.3按鈕的設(shè)計(jì)要點(diǎn) 實(shí)例繪制質(zhì)感網(wǎng)頁(yè)圖標(biāo) 6.4圖層樣式的應(yīng)用 6.4.1添加圖層樣式的方法 6.4.2斜面和浮雕 實(shí)例繪制網(wǎng)頁(yè)下載圖標(biāo) 6.4.3描邊 6.4.4內(nèi)陰影和投影 6.4.5內(nèi)發(fā)光和外發(fā)光 6.4.6光澤 6.4.7顏色疊加、漸變疊加和圖案疊加 實(shí)例制作手游開始按鈕 6.5LOGO概述 6.5.1LOGO作用 6.5.2LOGO特性 6.5.3網(wǎng)站LOGO表現(xiàn)形式 實(shí)例繪制影視網(wǎng)站LOGO 6.6專家支招 6.6.1圖標(biāo)的文件格式是什么 6.6.2LOGO的設(shè)計(jì)流程是什么 6.7總結(jié)擴(kuò)展 6.7.1本章小結(jié) 6.7.2舉一反三——簡(jiǎn)約網(wǎng)頁(yè)按鈕 第7章網(wǎng)站導(dǎo)航設(shè)計(jì) 7.1網(wǎng)站導(dǎo)航概述 7.2網(wǎng)站導(dǎo)航的作用 7.3網(wǎng)站導(dǎo)航的設(shè)計(jì)標(biāo)準(zhǔn) 7.4網(wǎng)站導(dǎo)航形式 7.4.1標(biāo)簽形式 7.4.2按鈕形式 7.4.3彈出菜單形式 7.4.4無邊框形式 7.4.5Flash形式 7.4.6多導(dǎo)航系統(tǒng)形式 實(shí)例繪制漢堡包網(wǎng)站導(dǎo)航條 7.5網(wǎng)站導(dǎo)航位置 7.5.1頂部導(dǎo)航 7.5.2底部導(dǎo)航 7.5.3左側(cè)導(dǎo)航 實(shí)例繪制網(wǎng)站左側(cè)導(dǎo)航 7.5.4右側(cè)導(dǎo)航 7.5.5中心導(dǎo)航 7.6網(wǎng)站設(shè)計(jì)的輔助操作 7.6.1標(biāo)尺的使用 7.6.2創(chuàng)建精確參考線 實(shí)例繪制精致導(dǎo)航條 7.7專家支招 7.7.1導(dǎo)航條的設(shè)計(jì)原則是什么 7.7.2交互式導(dǎo)航的優(yōu)勢(shì)和劣勢(shì) 7.8總結(jié)擴(kuò)展 7.8.1本章小結(jié) 7.8.2舉一反三——制作游戲網(wǎng)站導(dǎo)航欄 第8章網(wǎng)站廣告設(shè)計(jì) 8.1網(wǎng)頁(yè)廣告條概述 8.1.1計(jì)算機(jī)端網(wǎng)頁(yè)廣告種類 8.1.2移動(dòng)端網(wǎng)頁(yè)廣告種類 8.1.3廣告條常見尺寸 8.1.4網(wǎng)站廣告特點(diǎn) 實(shí)例招聘網(wǎng)站廣告條制作 8.2使用摳圖工具合成廣告條 8.2.1磁性套索工具 實(shí)例制作萬圣節(jié)廣告 8.2.2快速選擇工具 8.2.3魔棒工具 8.2.4鋼筆工具 8.2.5快速蒙版工具 8.2.6調(diào)整邊緣和精確選區(qū) 8.3修邊 8.3.1移除白邊和黑邊 8.3.2“去邊”命令 8.4畫筆工具 8.5圖層蒙版 8.5.1使用圖層蒙版替換局部圖像 8.5.2使用圖層蒙版融合圖像 8.5.3使用剪貼蒙版 8.6專家支招 8.6.1如何設(shè)計(jì)好廣告條 8.6.2網(wǎng)站廣告的表現(xiàn)形式有哪些 8.7總結(jié)擴(kuò)展 8.7.1本章小結(jié) 8.7.2舉一反三——制作面膜網(wǎng)站廣告條 第9章移動(dòng)端網(wǎng)站UI設(shè)計(jì) 9.1移動(dòng)端城市App界面 9.1.1界面分析 9.1.2色彩分析 實(shí)例移動(dòng)端城市App——廣告條 實(shí)例移動(dòng)端城市App——主體 實(shí)例移動(dòng)端城市App——底部 9.2移動(dòng)端企業(yè)網(wǎng)站界面 9.2.1界面分析 9.2.2色彩分析 實(shí)例移動(dòng)端企業(yè)網(wǎng)站界面——廣告條 實(shí)例移動(dòng)端企業(yè)網(wǎng)站界面——主體 9.3專家支招 9.3.1響應(yīng)式設(shè)計(jì)是否適合于專題設(shè)計(jì) 9.3.2先做計(jì)算機(jī)端頁(yè)面還是手機(jī)端頁(yè)面 9.4總結(jié)擴(kuò)展 9.4.1本章小結(jié) 9.4.2舉一反三——移動(dòng)端網(wǎng)頁(yè)宣傳窗 第10章計(jì)算機(jī)端網(wǎng)站UI設(shè)計(jì) 10.1計(jì)算機(jī)端視頻類網(wǎng)站界面 10.1.1界面分析 10.1.2色彩分析 實(shí)例計(jì)算機(jī)端設(shè)計(jì)類網(wǎng)站界面——頂部 實(shí)例計(jì)算機(jī)端設(shè)計(jì)類網(wǎng)站界面——主體 實(shí)例計(jì)算機(jī)端設(shè)計(jì)類網(wǎng)站界面——底部 10.2計(jì)算機(jī)端帥氣游戲網(wǎng)站 10.2.1界面分析 10.2.2色彩分析 實(shí)例計(jì)算機(jī)端帥氣游戲網(wǎng)站——頂部 實(shí)例計(jì)算機(jī)端帥氣游戲網(wǎng)站——底部 10.3專家支招 10.3.1設(shè)計(jì)網(wǎng)頁(yè)之前需要做什么 10.3.2網(wǎng)頁(yè)設(shè)計(jì)的發(fā)展趨勢(shì)是什么 10.4總結(jié)擴(kuò)展 10.4.1本章小結(jié) 10.4.2舉一反三——制作電腦端網(wǎng)頁(yè)宣傳欄