網(wǎng)頁圖片與移動界面(Web/App)的UI設(shè)計(高等職業(yè)教育藝術(shù)設(shè)計專業(yè)精品系列教材、“互聯(lián)網(wǎng)+”新形態(tài)立體化
定 價:49.8 元
- 作者:張婭,黃欣彬
- 出版時間:2020/10/1
- ISBN:9787518430680
- 出 版 社:中國輕工業(yè)出版社
- 中圖法分類:TP311.1
- 頁碼:208
- 紙張:
- 版次:1
- 開本:
本書從基礎(chǔ)的 Photoshop CC界面布局開始講起,以循序漸進(jìn)的方式詳細(xì)講解了圖像基本操作、選區(qū)、圖層、繪畫、顏色調(diào)整、照片修飾、路徑、文字、濾鏡等功能,內(nèi)容基本涵蓋了 Photoshop CC相關(guān)工具和命令,同時在進(jìn)一步學(xué)習(xí)網(wǎng)頁UI以、手機UI設(shè)計以及手機系統(tǒng)功能界面。本書既有基本理論,又有實踐操作的指導(dǎo)書。書中精心安排了具有針對性的實例,不僅可以幫動讀者輕松掌握軟件使用方法,更能應(yīng)對數(shù)碼照片處理、平面設(shè)計、UI等實際工作。還能幫助讀者掌握從產(chǎn)生設(shè)計理念到實現(xiàn)制作設(shè)計的全過程。
全書按照 Photos hop CC的不同應(yīng)用領(lǐng)域劃分知識點,每個項目先進(jìn)行知識引入闡述,再引入多個任行,以及進(jìn)行任務(wù)分析,最后完成任務(wù)的實現(xiàn)。讀者需要多上機實踐,掌握多種設(shè)計技巧。教師在使用本書時,可以結(jié)合數(shù)學(xué)設(shè)計,采用任務(wù)式的教學(xué)模式,通過不同類型的任務(wù)案例,提升讀者軟件操作的熟練程度和對知識點的掌握與理解。
張婭,宜賓職業(yè)技術(shù)學(xué)院,宜賓技術(shù)技能培訓(xùn)中心主任。黃欣彬,宜賓職業(yè)技術(shù)學(xué)院,教師,任教于藝術(shù)設(shè)計專業(yè)。
目 錄
項目一 PhototShop CC的基礎(chǔ)知識 1
1.1 Photoshop CC的基本知識 1
1.1.1 Photoshop的發(fā)展 1
1.1.2平面設(shè)計 1
1.2 圖像處理基礎(chǔ)知識 2
1.2.1 位圖與矢量圖 2
1.2.2 像素與分辨率 4
1.2.3 圖像的色彩模式 4
1.2.4 常用的圖像格式 5
1.3 Photoshop界面及基本操作 6
1.3.1 任務(wù)引入 6
1.3.2 知識引入 6
1.Photoshop菜單欄與工具箱 6
2.控制面板 7
3.圖像畫板編輯區(qū) 8
4.Photoshop的文件基本操作 8
5.常用工具操作 10
1.3.3 任務(wù)實現(xiàn)---圖像的繪制 12
1. 任務(wù)分析 12
2. 任務(wù)操作 12
項目二 圖層與圖層樣式 14
2.1 圖層 14
2.1.1任務(wù)引入 14
2.1.2知識引入 14
1.圖層及類型 14
2.圖層的基本操作 15
2.1.3 任務(wù)實現(xiàn) ---網(wǎng)頁頁面及導(dǎo)航條設(shè)計 17
1.任務(wù)分析 17
2.任務(wù)操作 18
2.2圖層模式 21
2.2.1任務(wù)引入 21
2.2.2知識引入 21
1.概述 21
2.圖層樣式操作 21
3.圖層模式類型 21
2.2.3 任務(wù)實現(xiàn) ---卡通圖標(biāo) 25
1.任務(wù)分析 25
2. 任務(wù)操作 25
2.3圖層樣式的應(yīng)用---異型邊框的設(shè)計 29
1.任務(wù)引入 29
2.任務(wù)知識分析 29
3.任務(wù)操作 29
項目三 繪制與修飾工具的使用 32
3.1 繪圖工具 32
3.1.1任務(wù)引入 32
3.1.2知識引入 32
1. 畫筆工具 32
2. 鉛筆工具 34
3. 顏色替換工具 35
4. 橡皮擦的使用 36
5. 修圖工具的使用 37
6. 修補工具的使用 38
3.1.3 任務(wù)實現(xiàn) ---漂亮畫筆的創(chuàng)建及應(yīng)用 40
1.任務(wù)分析 40
2.任務(wù)操作 40
3.2 修飾工具 41
3.2.1任務(wù)引入 41
3.2.2知識引入 41
1.漸變工具的使用 41
2.油漆桶工具的使用 43
3. 減淡/加深和海綿工具的使用 43
4.填充命令的使用 44
3.2.3 任務(wù)實現(xiàn) --- QQ卡通圖案的繪制 45
1.任務(wù)分析 45
2.任務(wù)實現(xiàn) 46
項目四 Photoshop CC的選區(qū)與路徑 52
4.1 選區(qū) 52
4.1.1任務(wù)引入 52
4.1.2知識引入 52
1. 選區(qū)的概念與作用 52
2. 幾何選區(qū)的創(chuàng)建 52
3. 不規(guī)則選區(qū)的創(chuàng)建 53
4. 創(chuàng)建顏色選區(qū) 54
5. 隨意選區(qū)的創(chuàng)建 54
6. 選區(qū)的編輯 54
4.1.3 任務(wù)實現(xiàn) ---機器人模型的制作 55
1. 任務(wù)分析 55
2. 任務(wù)操作 55
4.2 路徑的使用 56
4.2.1任務(wù)引入 56
4.2.2 知識引入 56
1.路徑的概念 56
2.基本元素 57
3.鋼筆工具的使用 57
4. 路徑的編輯工具 58
4.2.3 任務(wù)實現(xiàn) ---“音樂”網(wǎng)站標(biāo)志的制作 59
1. 任務(wù)分析 59
2. 任務(wù)操作 59
4.3 選區(qū)與路徑的應(yīng)用 60
4.3.1任務(wù)引入 60
4.3.2 知識引入” 60
1. 路徑的編輯操作 60
2. 選區(qū)與路徑的互轉(zhuǎn)操作 61
4.3.3 任務(wù)實現(xiàn) ---流線字的制作 62
1.任務(wù)分析 62
2.任務(wù)操作 62
項目五 Photoshop CC色彩及圖像調(diào)整 64
5.1色彩調(diào)整 64
5.1.1任務(wù)引入 64
5.1.2知識引入 64
1.色彩的元素組成 64
2.色彩模式 64
3.網(wǎng)頁配色 65
4.圖像“調(diào)整”命令 66
5.1.3 任務(wù)實現(xiàn) ---色彩調(diào)整命令的使用 69
1. 任務(wù)分析 69
2. 任務(wù)操作 69
5.2 圖片色階及曲線 71
5.2.1任務(wù)引入 71
5.2.2 知識引入 72
1.解析“色階” 72
2.解析“曲線” 73
5.2.3 任務(wù)實現(xiàn) ---綠水青山及撥云見日的制作 75
1. 任務(wù)分析 75
2. 任務(wù)操作 75
5.3調(diào)整命令的?用---相冊圖像的設(shè)計 77
1.任務(wù)引入 77
2.任務(wù)分析 77
3.任務(wù)實現(xiàn) 78
項目六 通道的應(yīng)用 81
6.1通道 81
6.1.1任務(wù)引入 81
6.1.2知識引入 81
1. 通道的概念 81
2. 通道的分類及功能 81
3. 選擇與編輯通道 82
4.復(fù)制和刪除通道 83
5.分離和合并通道 84
6.1.3 任務(wù)實現(xiàn) ---利用通道實現(xiàn)頭發(fā)的摳圖 84
1.任務(wù)分析 84
2.任務(wù)操作 84
6.2 通道計算 89
6.2.1任務(wù)引入 89
6.2.2 知識引入 89
1.計算”命令的使用 89
2.“應(yīng)用圖像”命令的使用 90
6.2.3 任務(wù)實現(xiàn) ---計算命令摳圖換背景 90
1.任務(wù)分析 90
2.任務(wù)操作 91
6.3 通道的使用 --- 化妝品廣告的設(shè)計 96
1.任務(wù)引入 96
2.任務(wù)分析 96
3.任務(wù)實現(xiàn) 97
項目七 蒙版的使用 107
7.1蒙版及蒙版的分類 107
7.1.1任務(wù)引入 107
7.1.2知識引入 107
1.蒙版的概念 107
2.蒙版的作用 107
3. 蒙版的類型 107
7.1.3 任務(wù)實現(xiàn)--人樹合體 110
1.任務(wù)分析 110
2.任務(wù)操作 110
7.2圖層蒙版的使用 ---燈泡的創(chuàng)意合成 112
7.2.1任務(wù)引入 112
7.2.2 任務(wù)分析 112
7.2.3 任務(wù)實現(xiàn) 112
7.3 蒙版的使用--茶葉包裝盒的制作 115
7.3.1任務(wù)引入 115
7.3.2 任務(wù)分析 116
7.3.3 任務(wù)實現(xiàn) 116
項目八 濾鏡的操作 121
8.1濾鏡的概述 121
8.1.1任務(wù)引入 121
8.1.2知識引入 121
1.濾鏡的概念及作用 121
2.濾鏡的特點? 121
3.濾鏡的使用方法及規(guī)則 122
8.1.3任務(wù)實現(xiàn) ------汽車飛馳效果 122
1.任務(wù)分析 122
2.任務(wù)操作 122
8.2濾鏡的類型 123
8.2.1任務(wù)引入 123
8.2.2 知識引入 124
1.獨立濾鏡 124
2.濾鏡庫 124
2. 特效濾鏡 127
8.2.3 任務(wù)實現(xiàn)------大理石效果 130
1.任務(wù)分析 130
2.任務(wù)操作 130
8.3濾鏡的操作 132
8.3.1任務(wù)引入 132
8.3.2 任務(wù)分析 132
8.3.3 任務(wù)實現(xiàn)---星空效果制作 132
1.任務(wù)分析 132
2.任務(wù)操作 132
項目九 網(wǎng)頁UI的規(guī)劃與設(shè)計 135
9.1 網(wǎng)頁UI基礎(chǔ)知識 135
9.1.1 虛擬界面 135
9.1.2 網(wǎng)頁界面的設(shè)計要求 135
9.1.3網(wǎng)頁版面典型風(fēng)格 136
9.1.4網(wǎng)頁結(jié)構(gòu)布局 136
1.“國”字型 136
2.拐角型 136
3.上下框架型 136
4.左右框架型 136
5.封面型 137
9.1.5網(wǎng)頁設(shè)計的組成元素 137
1. Logo 137
2.導(dǎo)航條 137
3. Banner 137
4.內(nèi)容版塊 138
5.版尾版塊 138
9.2網(wǎng)站UI的制作 138
9.2.1任務(wù)引入 138
9.2.2知識引入 138
1.餐飲門戶網(wǎng)站 138
2.餐飲網(wǎng)站分類 139
9.2.3 任務(wù)實現(xiàn)---美食網(wǎng)站設(shè)計 140
1. 任務(wù)知識分析 140
2. 任務(wù)操作 140
項目十 手機UI的質(zhì)感表現(xiàn) 153
10.1 金屬 153
10.1.1任務(wù)引入 153
10.1.2知識引入 153
1. UI設(shè)計的概念 153
2. UI設(shè)計原則 153
10.1.3 任務(wù)實現(xiàn) ---金屬按鈕的制作 154
1. 任務(wù)分析 154
2. 任務(wù)操作 154
10.2 玻璃 162
10.2.1任務(wù)引入 162
10.2.2 知識引入 162
1.內(nèi)發(fā)光圖層樣式 162
2.內(nèi)陰影圖層樣式 162
10.2.3 任務(wù)實現(xiàn) ---玻離質(zhì)感的制作 162
1. 任務(wù)分析 162
2. 任務(wù)操作 162
10.3 手機光滑表面 172
10.3.1任務(wù)引入 172
10.3.2 知識引入 172
1. 圖層面板 172
2. 漸變工具 172
10.3.3 任務(wù)實現(xiàn) ---手機表面的制作 173
1.任務(wù)分析 173
2.任務(wù)操作 173
項目十一 手機APP界面元素設(shè)計 183
11.1 按鈕 183
11.1.1任務(wù)引入 183
11.1.2知識引入 183
1. 按鈕的表現(xiàn)形式 183
2. 按鈕的狀態(tài) 183
11.1.3 任務(wù)實現(xiàn) --- 立體化按鈕的設(shè)計 184
1.任務(wù)知識分析 184
2. 任務(wù)操作 184
11.2 開關(guān) 192
11.2.1任務(wù)引入 192
11.2.2 知識引入 193
1.復(fù)選框 193
2.單選按鈕 193
3.ON/OFF開關(guān) 193
4.2.3 任務(wù)實現(xiàn) ---立體開關(guān)的設(shè)計 194
1.任務(wù)分析 194
2.任務(wù)實現(xiàn) 194
11.3 進(jìn)度條 199
11.3.1任務(wù)引入 199
11.3.2 知識引入 199
1. 線性進(jìn)度指示器 199
2. 圓形進(jìn)度指示器 200
11.3.3 任務(wù)實現(xiàn) ---扁平化和立體化進(jìn)度條的設(shè)計 200
1.任務(wù)分析 200
2.任務(wù)操作 201
11.4 搜索欄 208
11.4.1任務(wù)引入 208
11.4.2 知識引入 208
1.搜索欄的用途 208
2.搜索欄的組成結(jié)構(gòu) 208
11.4.3 任務(wù)實現(xiàn) ---立體化搜索框的設(shè)計 208
1.任務(wù)分析 208
2.任務(wù)操作 208
11.5 列表框 213
11.5.1任務(wù)引入 213
11.5.2 知識引入 213
1.列表框的組成結(jié)構(gòu) 213
2.列表數(shù)據(jù)規(guī)范 213
11.5.3 任務(wù)實現(xiàn) ---立體化列表框的設(shè)計 213
1.任務(wù)分析 213
2.任務(wù)操作 213
項目十二 手機APP整體界面UI設(shè)計 219
12.1 網(wǎng)站APP設(shè)計 219
12.1.1任務(wù)引入 219
12.1.2知識引入 219
1. 界面布局規(guī)劃 219
2. 創(chuàng)意思路剖析 220
3. 確定配色方案 220
4. 定義組件風(fēng)格 221
12.1.3 任務(wù)實現(xiàn) ---美食網(wǎng)站APP設(shè)計 221
1. 任務(wù)分析 221
2. 任務(wù)操作 221
12.2網(wǎng)站APP制作 ---流量銀行APP設(shè)計 226
12.2.1任務(wù)引入 226
12.2.2知識引入 227
1. 界面布局規(guī)劃 227
2. 創(chuàng)意思路剖析 228
3. 確定配色方案 228
4. 定義組件風(fēng)格 229
12.2.3 任務(wù)實現(xiàn) 229
1. 任務(wù)分析 229
2. 任務(wù)操作 229