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

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