圖標設(shè)計與制作（全彩慕課版 第2版）

第 1章　初識圖標設(shè)計
1.1　圖標的基本概念　2
1.2　圖標的類型　3
1.2.1　產(chǎn)品圖標　3
1.2.2　功能圖標　3
1.2.3　裝飾圖標　4
1.3　圖標的風(fēng)格　5
1.3.1　擬物風(fēng)格　5
1.3.2　扁平風(fēng)格　5
1.3.3　3D風(fēng)格　6
1.3.4　2.5D風(fēng)格　6
1.4　圖標的性格表現(xiàn)　7
1.4.1　圓角的有無及大小　7
1.4.2　描邊的粗細　7
1.4.3　顏色的搭配　8
1.5　圖標的設(shè)計軟件　9
1.6　圖標的設(shè)計原則　9
1.6.1　可識別性　9
1.6.2　視覺統(tǒng)一　10
1.6.3　簡潔美觀　11
1.6.4　愉悅友好　12
1.7　圖標的設(shè)計流程　13
第　2章 圖標繪制方法
2.1　圖標標準尺寸系統(tǒng)　16
2.1.1　尺寸系統(tǒng)　16
2.1.2　圖標尺寸　16
2.1.3　圖標放大　16
2.1.4　圖標布局　16
2.2　圖標像素 　17
2.2.1　圖標像素 的概念　17
2.2.2　實現(xiàn)圖標像素 　17
2.2.3　課堂案例—用軟件實現(xiàn)圖標像素 　21
2.3　圖標的繪制思路　23
2.3.1　圖標結(jié)構(gòu)分解　23
2.3.2　圖標繪制工具　24
2.3.3　課堂案例—用紙、筆進行圖標結(jié)構(gòu)的分解　25
2.4　布爾運算　26
2.4.1　不同軟件的使用　26
2.4.2　不同顏色的使用　26
2.4.3　課堂案例—繪制基礎(chǔ)面性圖標　27
2.4.4　課堂案例—繪制基礎(chǔ)線性圖標　30
2.5　圖標等比例縮放　34
2.5.1　圖標等比例縮放問題　34
2.5.2　圖標等比例縮放方法　34
2.5.3　課堂案例—將圖標縮放后置入界面　34
2.6　圖標的網(wǎng)格系統(tǒng)　35
2.6.1　網(wǎng)格系統(tǒng)的 意義　35
2.6.2　網(wǎng)格系統(tǒng)的 規(guī)范　36
2.6.3　網(wǎng)格系統(tǒng)的使用方法　36
2.6.4　課堂案例—運用網(wǎng)格系統(tǒng)調(diào)整圖標　36
2.7　圖標的視覺調(diào)整　40
2.7.1　重心調(diào)整　40
2.7.2　線條調(diào)整　40
2.7.3　顏色調(diào)整　41
2.7.4　課堂案例—進行圖標的重心調(diào)整　41
2.7.5　課堂案例—進行圖標的線條調(diào)整　43
2.7.6　課堂案例—進行圖標的顏色調(diào)整　44
2.8　課堂練習(xí)—制作家居類面性圖標　45
2.9　課后習(xí)題—制作服飾類線性圖標　45
第3章　線性圖標設(shè)計
3.1　線性圖標的基礎(chǔ)知識　48
3.2　線性圖標的基礎(chǔ)設(shè)計　48
3.2.1　描邊設(shè)置　48
3.2.2　圓角設(shè)置　50
3.2.3　比例設(shè)置　51
3.3　線性圖標的創(chuàng)意設(shè)計　51
3.3.1　基礎(chǔ)線性　51
3.3.2　課堂案例—制作線性圓角 圖標　51
3.3.3　基礎(chǔ)線性延伸　56
3.3.4　線性斷點　57
3.3.5　課堂案例—制作線性斷點 圖標　58
3.3.6　課堂案例—制作線性疊加 圖標　63
3.4　課堂練習(xí)—制作線性雙色圖標　67
3.5　課后習(xí)題—制作線性漸變圖標　68
第4章　面性圖標設(shè)計
4.1　面性圖標的基礎(chǔ)知識　70
4.2　面性圖標的基礎(chǔ)設(shè)計　70
4.2.1　輪廓外形　70
4.2.2　底板　71
4.3　面性圖標的創(chuàng)意設(shè)計　72
4.3.1　單色面性圖標　72
4.3.2　課堂案例—制作單色面性圖標　72
4.3.3　基礎(chǔ)面性延伸　76
4.3.4　面性多色　77
4.3.5　面性漸變　78
4.3.6　面性疊加　79
4.3.7　課堂案例—制作面性疊加圖標　80
4.3.8　面性微質(zhì)感　86
4.3.9　課堂案例—制作面性微質(zhì)感圖標　86
4.4　課堂練習(xí)—制作面性透明度變化圖標　105
4.5　課后習(xí)題—制作面性漸變圖標　105
第5章　線面圖標設(shè)計
5.1　線面圖標的基礎(chǔ)知識　108
5.2　線面圖標的基礎(chǔ)設(shè)計　108
5.2.1　填充位置　108
5.2.2　填充比例　109
5.2.3　填充形狀　109
5.3　線面圖標的創(chuàng)意設(shè)計　109
5.3.1　內(nèi)部填充　109
5.3.2　課堂案例—制作扁平插畫圖標　111
5.3.3　錯位填充　117
5.3.4　課堂案例—制作線面錯位填充圖標　117
5.3.5　線面拼接　123
5.3.6　課堂案例—制作陰陽填充圖標　124
5.4　課堂練習(xí)—制作線面雙色圖標　128
5.5　課后習(xí)題—制作MBE線面圖標　129
第6章　2.5D圖標設(shè)計
6.1　2.5D圖標的基礎(chǔ)知識　131
6.2　2.5D圖標的基礎(chǔ)設(shè)計　131
6.2.1　空間結(jié)構(gòu)　131
6.2.2　確定光源　131
6.2.3　零件搭建　131
6.3　2.5D圖標的創(chuàng)意設(shè)計　132
6.3.1　2.5D描邊變化　132
6.3.2　2.5D色彩變化　133
6.3.3　2.5D不透明度　133
6.3.4　課堂案例—制作2.5D圖標　133
6.4　課堂練習(xí)—制作2.5D雪糕圖標　145
6.5　課后習(xí)題—制作2.5D收音機圖標　145
第7章　圖標項目設(shè)計
7.1　認識導(dǎo)航欄及其圖標　147
7.1.1　導(dǎo)航欄的概念　147
7.1.2　導(dǎo)航欄的類型　147
7.1.3　導(dǎo)航欄的規(guī)范　149
7.1.4　課堂案例—制作電商類導(dǎo)航欄圖標　152
7.2　認識標簽欄及其圖標　160
7.2.1　標簽欄的概念　160
7.2.2　標簽欄的類型　160
7.2.3　標簽欄的規(guī)范　162
7.2.4　課堂案例—制作旅游類標簽欄圖標　167
7.3　認識金剛區(qū)及其圖標　176
7.3.1　金剛區(qū)的概念　176
7.3.2　金剛區(qū)的類型　176
7.3.3　金剛區(qū)的規(guī)范　177
7.3.4　課堂案例—制作旅游類金剛區(qū)圖標　180
7.4　認識應(yīng)用圖標　190
7.4.1　應(yīng)用圖標的概念　190
7.4.2　應(yīng)用圖標的類型　190
7.4.3　應(yīng)用圖標的規(guī)范　191
7.4.4　課堂案例—制作娛樂類應(yīng)用圖標　191
7.5　課堂練習(xí)—制作美食類導(dǎo)航欄圖標　216
7.6　課后習(xí)題—制作美食類標簽欄圖標　216
第8章　圖標驗證輸出
8.1　圖標驗證方法　218
8.1.1　含義識別　218
8.1.2　顏色識別　218
8.1.3　風(fēng)格識別　218
8.1.4　色彩驗證　219
8.2　圖標切圖格式　219
8.3　PNG圖標切圖　219
8.3.1　切圖規(guī)范　219
8.3.2　切圖尺寸　220
8.3.3　輸出尺寸　220
8.3.4　切圖方法　221
8.3.5　大小優(yōu)化　224
8.4　SVG圖標切圖　224
8.4.1　上傳規(guī)范　224
8.4.2　上傳流程　225
8.5　圖標命名規(guī)范　225
8.5.1　制定規(guī)范的原因　225
8.5.2　命名規(guī)則　225
8.5.3　常用命名　226
8.5.4　課堂案例—為服飾類App圖標命名　226
8.6　課堂練習(xí)—為社交類App圖標命名　228
8.7　課后習(xí)題—為家居類App圖標命名　229