Photoshop網站UI設計全程揭秘

《Photoshop網站UI設計全程揭秘》是2014年出版的圖書，作者是韓廣良、王明佳、武治國。

基本介紹

• 書名：Photoshop網站UI設計全程揭秘
• 作者：韓廣良、王明佳、武治國
• ISBN：9787302357964
• 頁數：319頁
• 定價：79.00元
• 出版社：清華大學出版社
• 出版時間：2014-10-1
• 裝幀：平裝
• 開本：16開

編輯推薦

《網頁設計殿堂之路》叢書是由來自一線的專業網頁設計人員集多年的技術與經驗傾力打造的一套體系最完整、技術最前沿、設計最精美的網頁設計系列叢書。

l 最完整的體系：針對網頁設計師的職業需求量身定做，市面上知識體系最完整的一套網頁設計叢書。

l 最前沿的技術：緊跟網頁技術發展的新潮流，市面上技術新的一套網頁設計叢書。

l 最精美的設計：來自實踐的精美案例和專業的裝幀設計，市面上最精美的一套網頁設計叢書。

作為勵志成為網頁設計精英的你，需要掌握哪些知識呢？下表給出了你明確的答案。


該套叢書具有以下的特點：

l 內容全面，緊貼實際：幫助你解決網頁設計中遇到的所有問題，幫助你搞定每一個網頁設計項目。

l 關注細節，量身打造：技術細節、設計細節，這些在工作中看似細微，但是往往決定成敗的關鍵點，全部為你一一道來。

l 海量資源，現場教學：提供了大量的來自於一線項目的案例資源，並通過視頻講解為你一一呈現。

內容簡介

本書以目前最受歡迎的圖像處理與合成軟體——Photoshop為設計工具，對主流網頁設計流程和製作技巧進行了全面、細緻的剖析。

本書首先從網站設計和建設的基礎知識進行介紹，對網站UI設計技巧進行了多方面的講解。然後介紹了Photoshop在網站UI設計中的實際套用，將最實用的技術、最快捷的操作方法、最豐富的內容呈現給讀者，使讀者在掌握軟體功能的同時，迅速提高網頁設計效率，並極大地提高從業素質。

本書附贈1張DVD光碟，其中提供了豐富的練習素材、源檔案，並為書中所有實例都錄製了多媒體教學視頻，方便讀者學習和參考。

本書結構清晰、由簡到難，實例精美實用、分解詳細，文字闡述通俗易懂，與實踐結合非常密切，具有很強的實用性，是一本網站UI設計的學習寶典。

目錄

1.1了解網站UI 1

1.1.1什麼是網頁界面 1

1.1.2網頁界面的分類 1

1.2網站建設流程 1

1.2.1域名註冊 2

1.2.2購買虛擬主機 2

1.2.3確定網頁設計 3

1.2.4網站建設 3

1.2.5網站測試 3

1.2.6網站維護 4

1.3網頁的設計原則 4

1.3.1視覺美觀 5

1.3.2主題明確 5

1.3.3內容與形式相統一 5

1.3.4快速下載 6

1.3.5為用戶考慮 6

1.4網頁的構成元素 7

1.4.1文字 7

1.4.2圖像 8

1.4.3色彩 8

1.4.4多媒體 8

1.5網頁設計命名規範 9

1.6本章小結 10

2.1Photoshop簡介 11

2.2Photoshop的安裝 11

實例01+視頻：Photoshop的安裝 11

2.3Photoshop的基本操作 12

2.3.1新建檔案 13

2.3.2打開檔案 14

2.3.3保存檔案 15

實例02+視頻：製作簡單的網頁圖示 15

2.3.4修改圖像大小 18

2.3.5修改畫布大小 19

實例03+視頻：製作藝術小網頁 19

2.4裁剪圖像 21

2.4.1裁剪固定尺寸 21

2.4.2透視裁剪 21

2.4.3裁剪獲得好的構圖 21

2.5圖像的複製和貼上 22

2.5.1複製文檔 22

實例04+視頻：製作網頁背景 22

2.5.2拷貝和貼上 24

實例05+視頻：製作網頁廣告插圖 24

2.5.3選擇性貼上 25

實例06+視頻：製作茶葉廣告 25

2.6變換圖像 26

2.6.1移動圖像 26

2.6.2縮放圖像 26

2.6.3旋轉圖像 27

2.6.4自由變換 27

實例07+視頻：製作網頁廣告 27

2.7還原與恢復操作 28

2.8本章小結 28

3.1網站圖示設計的準則 29

3.2網站圖示的設計流程 29

3.3規則選區創建標誌 30

3.3.1矩形選框工具 30

3.3.2橢圓選框工具 30

實例08+視頻：製作簡單的Logo 31

3.3.3單行選框工具和單列選框工具 32

實例09+視頻：製作精美的新浪圖示 32

3.4填充與描邊改變圖示風格 36

3.4.1油漆桶工具 36

實例10+視頻：製作絢麗彩塊圖示 37

3.4.2填充 39

實例11+視頻：製作簡單立體圖示 40

3.4.3描邊 42

實例12+視頻：製作美妙的音符圖示 43

3.5漸變工具增加圖示質感 45

3.5.1漸變的類型 45

3.5.2編輯類型 46

實例13+視頻：製作可愛的小鳥圖示 47

3.6形狀工具創建圖示 51

3.6.1關於形狀工具 51

3.6.2多邊形工具 51

實例14+視頻：製作質感圖示 52

3.6.3形狀的加減 55

實例15+視頻：製作時尚按鈕圖示 55

3.6.4自定義形狀 58

3.7使用Kuler設定圖示的顏色 59

實例16+視頻：製作簡單鐘錶圖示 59

3.8本章小結 62

4.1按鈕的設計要點 63

4.2按鈕的套用格式 63

4.3使用圖案增加按鈕的質感 64

實例17+視頻：製作水晶開關按鈕 64

4.4圖層的基本操作 68

4.4.1新建圖層 68

4.4.2複製圖層 69

4.4.3調整圖層順序 70

實例18+視頻：製作Twitter按鈕 71

4.4.4使用“不透明度”和“填充” 75

實例19+視頻：製作簡潔綠色按鈕 75

4.5使用圖層樣式 78

4.5.1調整圖層樣式 78

4.5.2使用“投影”製作陰影效果 79

4.5.3使用“描邊”為按鈕添加輪廓 79

實例20+視頻：製作簡單可愛的按鈕 79

4.5.4使用“斜面和浮雕”製作立體效果 82

實例21+視頻：製作數據統計按鈕 83

4.5.5使用“內陰影”增加層次 86

實例22+視頻：製作圓形立體按鈕 87

4.5.6使用“內發光”和“外發光”製作發光效果 93

實例23+視頻：製作逼真的皮革按鈕 93

4.6使用畫筆工具細化按鈕 97

4.6.1使用畫筆工具 97

實例24+視頻：製作蘋果套用商店按鈕 97

4.6.2設定畫筆預設 102

4.7圖像的變換操作 102

4.7.1圖像的翻轉 103

實例25+視頻：製作音量開關按鈕 103

4.7.2透視和扭曲 107

4.7.3變形 107

4.8本章小結 108

5.1導航和選單的作用 109

5.2導航的設計標準 109

5.3網頁設計的輔助操作 110

5.3.1使用標尺 110

5.3.2創建精確的參考線 110

實例26+視頻：製作簡潔導航選單 111

5.4修改選區 115

5.4.1羽化選區 116

5.4.2擴展/收縮選區 116

5.5加深和減淡修飾 116

5.5.1加深工具 117

5.5.2減淡工具 117

實例27+視頻：製作創意音樂網站選單 118

5.6使用鋼筆工具繪製精確的形狀 123

5.6.1使用鋼筆工具 123

實例28+視頻：製作復古導航條 124

5.6.2路徑與選區的轉換 128

5.6.3使用畫筆描邊路徑 128

實例29+視頻：製作帥氣遊戲網站導航 129

5.7使用文本工具 134

5.7.1輸入文本 134

5.7.2設定文本 135

實例30+視頻：製作時尚導航選單 136

5.8快速對齊對象 142

5.8.1對齊對象 142

5.8.2分布對象 143

實例31+視頻：製作漂亮的圖片式導航 144

5.9本章小結 148

6.1網站中的圖像簡介 149

6.2網站中適用的圖片格式 149

6.3網站中的圖像模式 149

6.4使用圖章工具為圖像添加效果 150

6.4.1使用仿製圖章工具去除圖像

中的水印 150

實例32+視頻：去除圖像中的瑕疵 150

6.4.2使用圖案圖章工具製作網站背景 152

6.5修復網頁中的圖像 152

6.5.1使用污點修復畫筆工具 152

實例33+視頻：去除臉部的裝飾 153

6.5.2使用修復畫筆工具 155

6.5.3使用內容感知移動工具 155

6.6自動調整圖像顏色 156

6.6.1自動色調增強圖像清晰度 156

6.6.2自動對比度增強照片對比度 156

6.6.3自動顏色校正圖像顏色 157

6.7自定義調整圖像色彩 157

6.7.1使用曲線調整圖像 157

實例34+視頻：使圖像更加鮮艷 158

6.7.2使用色階提高圖像清晰度 160

6.7.3使用亮度/對比度調整圖像 161

實例35+視頻：使圖像更清晰 161

6.7.4使用色相/飽和度調整圖像 164

6.7.5使用自然飽和度調整圖像 165

實例36+視頻：製作炫酷的圖片 166

6.7.6使用變化命令改變圖像的色調 168

實例37+視頻：製作唯美的圖片 169

6.7.7使用陰影/高光修整照片的逆光 170

實例38+視頻：修整逆光的照片 171

6.8使用填充和調整圖層 174

6.8.1純色填充圖層 174

6.8.2漸變填充圖層 175

6.8.3圖案填充圖層 175

實例39+視頻：製作炫彩網頁 175

6.8.4調整面板 178

實例40+視頻：製作黑白色圖像 178

6.9銳化提高圖像清晰度 181

6.10處理掃描圖像 181

6.11批處理圖像 181

6.11.1使用動作面板 181

6.11.2自定義動作 182

實例41+視頻：批處理圖像 182

6.12本章小結 184

7.1網站廣告條的類型 185

7.3如何設計好的 186

7.4完美摳圖合成 186

7.4.1磁性套索工具摳圖 186

實例42+視頻：製作果盤 186

7.4.2快速選擇 188

實例43+視頻：製作美食 188

7.4.3使用魔棒工具 189

7.4.4使用鋼筆工具 190

實例44+視頻：製作薯條 190

7.4.5快速蒙版選擇圖像 193

實例45+視頻：製作服裝廣告條 193

7.4.6調整邊緣和精確選區 195

實例46+視頻：製作精美夏裝 195

7.5使用修邊 197

7.5.1移除白邊和黑邊 197

7.5.2去邊實現更好的合成效果 197

實例47+視頻：製作時尚服裝 197

7.6使用畫筆工具 200

實例48+視頻：製作禮物宣傳 200

7.7使用蒙版合成圖像 203

7.7.1圖層蒙版替換圖層局部 203

7.7.2圖層蒙版融合圖像 204

實例49+視頻：製作快餐店 204

7.7.3使用剪貼蒙版 205

實例50+視頻：製作畫廊展覽 205

7.8本章小結 209

8.1色彩基礎知識 210

8.1.1光和色的三原色 210

8.1.2色種的不同 210

8.1.3色彩的構成要素 212

8.1.4色彩的混合 212

8.1.5色彩的分類 213

8.1.6不同的色系 214

8.2色彩的視覺心理感受 216

8.2.1色彩的輕重 216

8.2.2色彩的冷暖 217

8.2.3色彩的軟硬 217

8.2.4色彩的大小 218

8.2.5色彩的活潑和莊重感 218

8.2.6色彩的興奮和沉靜感 218

8.2.7色彩的華麗和樸素感 219

8.3網頁配色標準 219

8.3.1Web安全顏色 219

8.3.2使用Web安全色調色板 220

8.4網頁配色技巧 220

8.4.1色彩搭配的原則 221

8.4.2確定網頁的主題色 222

8.4.3正確選擇文字的顏色 222

8.5網頁風格與配色 223

8.5.1暖色調配色 223

8.5.2冷色調配色 223

8.5.3穩定、安靜風格的配色 224

8.5.4發揮白色效果的配色 224

8.5.5高彩度的配色 225

8.5.6低彩度的配色 225

8.6影響網站配色的因素 226

8.6.1根據行業特徵選擇網頁配色 226

8.6.2根據生命周期選擇網頁配色 226

8.6.3根據色彩聯想選擇網頁配色 228

8.6.4根據客群色彩偏好選擇網頁配色 229

8.7本章小結 231

9.1常見的網頁布局方式 232

9.1.1“國”字型 232

9.1.2拐角型 232

9.1.3標題正文型 233

9.1.4左右框架型 234

9.1.5上下框架型 234

9.1.6封面型 234

9.1.7Flash型 235

9.1.8變化型 235

9.2文字在網頁中的作用 235

9.2.1明確性 236

9.2.2易讀性 236

9.2.3美觀性 236

9.3網頁文字的設計原則 237

9.3.1可讀性 237

9.3.2藝術化 238

9.4網頁文字的排版設計 239

9.4.1文字排版規則 239

9.4.2文字排版的常用手法 241

9.5根據內容決定布局 242

9.5.1左側的頁面布局 242

9.5.2水平居中的頁面布局 243

9.5.3水平和垂直居中的頁面布局 243

9.5.4滿屏的頁面布局 244

9.6頁面分割方式 244

9.6.1橫向分割 244

9.6.2縱向分割 245

9.6.3橫向縱向複合分割 245

9.6.4運用固定區域 246

9.7頁面布局的連貫性和多樣性 246

9.8本章小結 247

10.1製作帥氣的遊戲網站 248

10.1.1行業分類 248

10.1.2色彩分析 248

10.1.3版式分析 248

實例51+視頻：帥氣遊戲網站——導航 249

實例52+視頻：帥氣遊戲網站——Logo 251

實例53+視頻：帥氣遊戲網站——主體 253

實例54+視頻：帥氣遊戲網站——切圖 257

10.2製作華麗的遊戲網站 259

10.2.1行業分類 259

10.2.2色彩分析 259

10.2.3版式分析 260

實例55+視頻：華麗遊戲網站——

背景與導航 260

實例56+視頻：華麗遊戲網站——

內容與裝飾 265

實例57+視頻：華麗遊戲網站——

切圖 272

10.3製作魔幻的遊戲網站 273

10.3.1行業分類 274

10.3.2色彩分析 274

10.3.3版式分析 274

實例58+視頻：魔幻遊戲網站——背景與框架 274

實例59+視頻：魔幻遊戲網站——導航與主體 278

實例60+視頻：魔幻遊戲網站——切圖 284

10.4本章小結 287

11.1製作兒童類網站 288

11.1.1行業分類 288

11.1.2色彩分析 288

11.1.3版式分析 288

實例61+視頻：兒童類網站——背景和導航 289

實例62+視頻：兒童類網站——主體和Logo 291

實例63+視頻：兒童類網站——切圖 295

11.2製作大氣專業的汽車網站 298

11.2.1行業分類 298

11.2.2色彩分析 298

11.2.3版式分析 298

實例64+視頻：大氣專業的汽車網站——導航與主體 299

實例65+視頻：大氣專業的汽車網站——版底與Logo 303

實例66+視頻：大氣專業的汽車網站——切圖 306

11.3製作電子產品網站 308

11.3.1行業分類 308

11.3.2色彩分析 309

11.3.3版式分析 309

實例67+視頻：電子產品網站——導航與背景 309

實例68+視頻：電子產品網站——Banner 312

實例69+視頻：電子產品網站——主體和版底 315

實例70+視頻：電子產品網站——切圖 317

11.4本章小結 319