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

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