新媒體美工設(shè)計全攻略：小程序+公眾號+朋友圈+H5界面+微商+微博+直播

2．1 工1．1 新媒體美工的定義．．．．．．．．．．．．．．．．．．．．．．．．．．．8
1．2 色彩讓界面更具魅力．．．．．．．．．．．．．．．．．．．．．．．．8
1．2．1 色調(diào)奠定主旋律．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．8
1．2．2 調(diào)和配色使畫面更和諧．．．．．．．．．．．．．．．．．10
1．2．3 色彩的使用要點．．．．．．．．．．．．．．．．．．．．．．．．．．．．13
1．3 字體賦予界面競爭力．．．．．．．．．．．．．．．．．．．．．．13
1．3．1 文字要易于識別．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．13
1．3．2 文字的層次感要強．．．．．．．．．．．．．．．．．．．．．．．．．．14
1．3．3 清晰地表達文字信息．．．．．．．．．．．．．．．．．．．．．．．15
1．3．4 握好文字之間的間距．．．．．．．．．．．．．．．．．．．．．．．16
1．3．5 適當(dāng)設(shè)置文字的色彩．．．．．．．．．．．．．．．．．．．．．．．17
1．4 版式布局讓界面有格調(diào)．．．．．．．．．．．．．．．．．．．18
1．4．1 豎排列表布局．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．18
1．4．2 橫排方塊布局．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．19
1．4．3 九宮格布局．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．19
1．4．4 彈出框布局．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．19
1．4．5 熱門標簽布局．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．20
1．4．6 抽屜式布局．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．20
1．4．7 分段菜單式布局．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．21
1．4．8 底部導(dǎo)航欄布局．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．22
1．4．9 掌握圖表信息布局設(shè)計方法．．．．．．．．．．．．22
1．4．10 掌握界面細節(jié)設(shè)計方法．．．．．．．．．．．．．．．．．23
1．4．11 新媒體界面的布局原則．．．．．．．．．．．．．．．．．24
1．5 新媒體設(shè)計注意事項．．．．．．．．．．．．．．．．．．．．．．25
1．5．1 良好的實用性．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．25
1．5．2 注重圖片的品質(zhì)美感．．．．．．．．．．．．．．．．．．．．．．．26
1．5．3 不要隨意拉伸圖片．．．．．．．．．．．．．．．．．．．．．．．．．．26作界面和基本操作．．．．．．．．．．．．．．．．．．．．．．29
2．1．1 認識Photoshop的界面．．．．．．．．．．．．．．．．．．29
2．1．2 實戰(zhàn)——新建與存儲文檔．．．．．．．．．．．．．．．31
2．1．3 實戰(zhàn)——打開與關(guān)閉文檔．．．．．．．．．．．．．．．33
2．1．4 實戰(zhàn)——創(chuàng)建與刪除圖層．．．．．．．．．．．．．．．34
2．1．5 實戰(zhàn)——顯示與隱藏圖層．．．．．．．．．．．．．．．35
軟件入門：PS基礎(chǔ)
2
章
第
3．1 微信小程序組件界面介紹．．．．．．．．．．．．．．．．68
3．1．1 常規(guī)按鈕．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．68
3．1．2 編輯輸入框．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．68
3．1．3 網(wǎng)格式瀏覽．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．69
3．1．4 文本標簽．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．70
3．1．5 導(dǎo)航欄．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．70
3．1．6 頁面切換．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．70
微信小程序界面設(shè)計
3
章
第
2．1．6 實戰(zhàn)——合并圖層對象．．．．．．．．．．．．．．．．．．．36
2．1．7 實戰(zhàn)——添加“斜面和浮雕”樣式．．37
2．1．8 實戰(zhàn)——添加“描邊”樣式．．．．．．．．．．．．38
2．1．9 實戰(zhàn)——添加“漸變疊加”樣式．．．．．39
2．1．10 實戰(zhàn)——添加“外發(fā)光”樣式．．．．．．41
2．1．11 實戰(zhàn)——添加“投影”樣式．．．．．．．．．．42
2．1．12 實戰(zhàn)——復(fù)制/粘貼圖層樣式．．．．．．．．．43
2．1．13 實戰(zhàn)——運用裁剪工具裁剪圖像．．．45
2．1．14 實戰(zhàn)——旋轉(zhuǎn)/縮放圖像．．．．．．．．．．．．．．．．46
2．2 摳圖技巧．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．47
2．2．1 實戰(zhàn)——用“反向”命令摳圖．．．．．．．．．47
2．2．2 實戰(zhàn)——用矩形選框工具摳圖．．．．．．．．．48
2．2．3 實戰(zhàn)——用多邊形套索工具填充圖像．．49
2．2．4 實戰(zhàn)——擴展選區(qū)圖像．．．．．．．．．．．．．．．．．．．50
2．2．5 實戰(zhàn)——將路徑轉(zhuǎn)換為選區(qū)．．．．．．．．．．．．52
2．2．6 實戰(zhàn)——應(yīng)用矢量蒙版摳圖．．．．．．．．．．．．54
2．2．7 實戰(zhàn)——應(yīng)用剪貼蒙版摳圖．．．．．．．．．．．．55
2．3 調(diào)色技巧．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．56
2．3．1 實戰(zhàn)——運用漸變工具填充漸變色．．56
2．3．2 實戰(zhàn)——使用“亮度/對比度”命令．57
2．3．3 實戰(zhàn)——使用“曲線”命令．．．．．．．．．．．．58
2．3．4 實戰(zhàn)——使用“自然飽和度”命令．．59
2．3．5 實戰(zhàn)——使用“色相/飽和度”命令．60
2．3．6 實戰(zhàn)——使用“黑白”命令．．．．．．．．．．．．61
2．4 字排版技巧．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．62
2．4．1 實戰(zhàn)——輸入橫排文字．．．．．．．．．．．．．．．．．．．62
2．4．2 實戰(zhàn)——輸入直排文字．．．．．．．．．．．．．．．．．．．64
2．4．3 實戰(zhàn)——輸入段落文字．．．．．．．．．．．．．．．．．．．65
2．4．4 實戰(zhàn)——輸入沿路徑排列文字．．．．．．．．．66
新媒體美工全攻略1-6．indd 4 2017/11/1 13：58：18
4．1 實戰(zhàn)——橫幅廣告Banner設(shè)計．．．．．．105
4．1．1 制作高飽和度的藍色背景．．．．．．．．．．．．．105
4．1．2 制作主題文字與裝飾圖案效果．．．．．．．107
4．1．3 制作橫幅廣告界面效果．．．．．．．．．．．．．．．．．109
4．2 實戰(zhàn)——公眾號封面設(shè)計．．．．．．．．．．．．．．．110
4．2．1 制作中心漸變紅色背景效果．．．．．．．．．．110
4．2．2 制作主題文字與裝飾效果．．．．．．．．．．．．．．111
4．2．3 制作公眾號封面的界面效果．．．．．．．．．．115
4．3 實戰(zhàn)——底部廣告設(shè)計．．．．．．．．．．．．．．．．．．116
4．3．1 制作背景框架效果．．．．．．．．．．．．．．．．．．．．．．．．116
4．3．2 制作書籍介紹效果．．．．．．．．．．．．．．．．．．．．．．．．118
4．3．3 制作底部廣告界面效果．．．．．．．．．．．．．．．．．119
4．4 實戰(zhàn)——公眾號求關(guān)注設(shè)計．．．．．．．．．．．120
4．4．1 制作人物頭像效果．．．．．．．．．．．．．．．．．．．．．．．．120
4．4．2 制作文字效果．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．123
4．4．3 制作公眾號求關(guān)注界面效果．．．．．．．．．．124
4．5 實戰(zhàn)——推薦公眾號設(shè)計．．．．．．．．．．．．．．125
4．5．1 制作主體效果．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．126
微信公眾號界面設(shè)計
4
章
第
6．1 實戰(zhàn)——七夕活動促銷H5頁面設(shè)計．162
6．1．1 制作金色微粒背景效果．．．．．．．．．．．．．．．．．162
6．1．2 制作金色漸變立體文字．．．．．．．．．．．．．．．．．166
6．1．3 制作發(fā)光文字與按鈕效果．．．．．．．．．．．．．168
6．2 實戰(zhàn)——新品上市活動H5頁面設(shè)計．170
6．2．1 制作淺色條紋背景效果．．．．．．．．．．．．．．．．．171
6．2．2 制作書籍與裝飾效果．．．．．．．．．．．．．．．．．．．．172
6．2．3 制作新品上市文字效果．．．．．．．．．．．．．．．．．175
6．3 實戰(zhàn)——簡約企業(yè)招聘H5頁面設(shè)計．179
6．3．1 運用漸變合成背景效果．．．．．．．．．．．．．．．．．179
6．3．2 制作六邊形框架與文字效果．．．．．．．．．．182
6．3．3 制作招聘信息效果．．．．．．．．．．．．．．．．．．．．．．．．184
H5手機網(wǎng)頁界面設(shè)計
6
章
第
5．1 實戰(zhàn)——名人版朋友圈設(shè)計．．．．．．．．．．．129
5．1．1 制作黑色背景與頭像效果．．．．．．．．．．．．．129
5．1．2 制作黑色背景與頭像效果．．．．．．．．．．．．．133
5．1．3 制作名人版朋友圈界面效果．．．．．．．．．．135
5．2 實戰(zhàn)——簡介版朋友圈設(shè)計．．．．．．．．．．．136
5．2．1 制作頭像與裝飾效果．．．．．．．．．．．．．．．．．．．．137
5．2．2 制作信息簡介效果．．．．．．．．．．．．．．．．．．．．．．．．140
5．2．3 制作簡介版朋友圈界面效果．．．．．．．．．．142
5．3 實戰(zhàn)——招代理朋友圈設(shè)計．．．．．．．．．．．143
5．3．1 制作金色粒子背景效果．．．．．．．．．．．．．．．．．144
5．3．2 制作頭像與文字效果．．．．．．．．．．．．．．．．．．．．145
5．3．3 制作招代理朋友圈界面效果．．．．．．．．．．149
5．4 實戰(zhàn)——店招版朋友圈設(shè)計．．．．．．．．．．．150
5．4．1 制作暗紅歐式花紋背景效果．．．．．．．．．．151
5．4．2 制作店招效果．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．153
5．4．3 制作店招版朋友圈界面效果．．．．．．．．．．155
5．5 實戰(zhàn)——插畫版朋友圈設(shè)計．．．．．．．．．．．156
5．5．1 制作插畫背景效果．．．．．．．．．．．．．．．．．．．．．．．．157
5．5．2 制作文字信息效果．．．．．．．．．．．．．．．．．．．．．．．．159
5．5．3 制作插畫版朋友圈界面效果．．．．．．．．．．159
微信朋友圈界面設(shè)計
5
章
第
3．2 實戰(zhàn)——綠色視覺小程序圖標設(shè)計．．．．71
3．2．1 制作漸變花朵標志．．．．．．．．．．．．．．．．．．．．．．．．．．72
3．2．2 制作文字與界面效果．．．．．．．．．．．．．．．．．．．．．．74
3．3 實戰(zhàn)——旅游小程序界面設(shè)計．．．．．．．．．．76
3．3．1 制作矩形搜索框效果．．．．．．．．．．．．．．．．．．．．．．77
3．3．2 制作功能菜單與首頁廣告效果．．．．．．．．．79
3．3．3 制作導(dǎo)航欄效果．．．．．．．．．．．．．．．．．．．．．．．．．．．．．82
3．4 實戰(zhàn)——星東小程序界面設(shè)計．．．．．．．．．．83
3．4．1 制作店招與搜索框效果．．．．．．．．．．．．．．．．．．．84
3．4．2 制作搶購倒計時效果．．．．．．．．．．．．．．．．．．．．．．86
3．4．3 制作商品展示效果．．．．．．．．．．．．．．．．．．．．．．．．．．88
3．5 實戰(zhàn)——婚紗攝影小程序界面設(shè)計．．．．90
3．5．1 制作首頁廣告效果．．．．．．．．．．．．．．．．．．．．．．．．．．91
3．5．2 制作服務(wù)中心效果．．．．．．．．．．．．．．．．．．．．．．．．．．93
3．5．3 制作彩色導(dǎo)航欄．．．．．．．．．．．．．．．．．．．．．．．．．．．．．95
3．6 實戰(zhàn)——食品小程序界面設(shè)計．．．．．．．．．．96
3．6．1 制作店招與搜索框效果．．．．．．．．．．．．．．．．．．．97
3．6．2 制作商品活動區(qū)效果．．．．．．．．．．．．．．．．．．．．．．99
3．6．3 制作商品詳情效果．．．．．．．．．．．．．．．．．．．．．．．．101
4．5．2 制作推薦公眾號界面效果．．．．．．．．．．．．．127
新媒體美工全攻略1-6．indd 5 2017/11/1 13：58：18
目 錄
6．4 實戰(zhàn)——微信口令紅包H5頁面設(shè)計．185
6．4．1 制作口令紅包效果．．．．．．．．．．．．．．．．．．．．．．．．186
6．4．2 制作多個按鈕效果．．．．．．．．．．．．．．．．．．．．．．．．188
6．4．3 制作口令紅包界面效果．．．．．．．．．．．．．．．．．191
6．5 實戰(zhàn)——企業(yè)邀請函H5頁面設(shè)計．．．．192
6．5．1 制作歐式邊框背景效果．．．．．．．．．．．．．．．．．193
6．5．2 制作標志與邀請信息效果．．．．．．．．．．．．．195
6．5．3 制作底部裝飾效果．．．．．．．．．．．．．．．．．．．．．．．．197
7．1 實戰(zhàn)——店招設(shè)計．．．．．．．．．．．．．．．．．．．．．．．201
7．1．1 制作扁平化風(fēng)格背景效果．．．．．．．．．．．．．201
7．1．2 制作文字與標志效果．．．．．．．．．．．．．．．．．．．．203
7．1．3 制作微店店招界面效果．．．．．．．．．．．．．．．．．205
7．2 實戰(zhàn)——店鋪公告設(shè)計．．．．．．．．．．．．．．．．．206
7．2．1 制作純凈藍色星空背景效果．．．．．．．．．．207
7．2．2 制作公告信息效果．．．．．．．．．．．．．．．．．．．．．．．．208
7．2．3 制作微店公告欄界面效果．．．．．．．．．．．．．209
7．3 實戰(zhàn)——商品簡介區(qū)設(shè)計．．．．．．．．．．．．．．210
7．3．1 制作趣味頂部廣告效果．．．．．．．．．．．．．．．．．．211
7．3．2 制作食品展示區(qū)效果．．．．．．．．．．．．．．．．．．．．213
7．3．3 制作微店展示區(qū)界面效果．．．．．．．．．．．．．215
7．4 實戰(zhàn)——店鋪收藏設(shè)計．．．．．．．．．．．．．．．．．216
7．4．1 制作夢幻紫色背景效果．．．．．．．．．．．．．．．．．217
7．4．2 制作主題文字效果．．．．．．．．．．．．．．．．．．．．．．．．217
7．4．3 制作界面效果．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．219
7．5 實戰(zhàn)——美妝微店界面設(shè)計．．．．．．．．．．．220
7．5．1 制作店招與首頁效果．．．．．．．．．．．．．．．．．．．．220
7．5．2 制作促銷方案效果．．．．．．．．．．．．．．．．．．．．．．．．223
7．5．3 制作商品展示區(qū)效果．．．．．．．．．．．．．．．．．．．．224
微商店鋪界面設(shè)計
7
章
第
8．1 實戰(zhàn)——微博LOGO設(shè)計．．．．．．．．．．．．．229
8．1．1 制作藍色球形標志．．．．．．．．．．．．．．．．．．．．．．．．229
8．1．2 制作文字及界面效果．．．．．．．．．．．．．．．．．．．．234
微博新媒體界面設(shè)計
8
章
第
9．1 實戰(zhàn)——主播招募令設(shè)計．．．．．．．．．．．．．．256
9．1．1 制作背景效果．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．256
9．1．2 制作人物與標題文字效果．．．．．．．．．．．．．258
9．1．3 制作招募信息效果．．．．．．．．．．．．．．．．．．．．．．．．260
9．2 實戰(zhàn)——直播宣傳長頁設(shè)計．．．．．．．．．．．263
9．2．1 制作直播講師信息效果．．．．．．．．．．．．．．．．．263
9．2．2 制作講師簡介與課程大綱效果．．．．．．．266
9．2．3 制作圖書推薦與求關(guān)注效果．．．．．．．．．．268
9．3 實戰(zhàn)——主播推薦海報設(shè)計．．．．．．．．．．．270
9．3．1 調(diào)整主播推薦海報背景顏色．．．．．．．．．．270
9．3．2 制作金色發(fā)光標題文字效果．．．．．．．．．．272
9．3．3 制作立體按鈕與標志效果．．．．．．．．．．．．．273
9．4 實戰(zhàn)——主播頂部展示設(shè)計．．．．．．．．．．．275
9．4．1 制作藍色條紋背景效果．．．．．．．．．．．．．．．．．276
9．4．2 制作裝飾圖案效果．．．．．．．．．．．．．．．．．．．．．．．．277
9．4．3 制作人物與彩色文字效果．．．．．．．．．．．．．278
9．5 實戰(zhàn)——游戲直播間設(shè)計．．．．．．．．．．．．．．281
9．5．1 制作紫色立體邊框效果．．．．．．．．．．．．．．．．．281
9．5．2 制作主播頭像邊框效果．．．．．．．．．．．．．．．．．283
9．5．3 制作裝飾與文字效果．．．．．．．．．．．．．．．．．．．．286