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

2．1 工1．1 新媒體美工的定義．．．．．．．．．．．．．．．．．．．．．．．．．．．8
1．2 色彩讓界面更具魅力．．．．．．．．．．．．．．．．．．．．．．．．8
1．2．1 色調(diào)奠定主旋律．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．8
1．2．2 調(diào)和配色使畫(huà)面更和諧．．．．．．．．．．．．．．．．．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 熱門(mén)標(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)——打開(kāi)與關(guān)閉文檔．．．．．．．．．．．．．．．33
2．1．4 實(shí)戰(zhàn)——?jiǎng)?chuàng)建與刪除圖層．．．．．．．．．．．．．．．34
2．1．5 實(shí)戰(zhàn)——顯示與隱藏圖層．．．．．．．．．．．．．．．35
軟件入門(mén)：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 頁(yè)面切換．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．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)——使用“曲線(xià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 制作書(shū)籍介紹效果．．．．．．．．．．．．．．．．．．．．．．．．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)促銷(xiāo)H5頁(yè)面設(shè)計(jì)．162
6．1．1 制作金色微粒背景效果．．．．．．．．．．．．．．．．．162
6．1．2 制作金色漸變立體文字．．．．．．．．．．．．．．．．．166
6．1．3 制作發(fā)光文字與按鈕效果．．．．．．．．．．．．．168
6．2 實(shí)戰(zhàn)——新品上市活動(dòng)H5頁(yè)面設(shè)計(jì)．170
6．2．1 制作淺色條紋背景效果．．．．．．．．．．．．．．．．．171
6．2．2 制作書(shū)籍與裝飾效果．．．．．．．．．．．．．．．．．．．．172
6．2．3 制作新品上市文字效果．．．．．．．．．．．．．．．．．175
6．3 實(shí)戰(zhàn)——簡(jiǎn)約企業(yè)招聘H5頁(yè)面設(shè)計(jì)．179
6．3．1 運(yùn)用漸變合成背景效果．．．．．．．．．．．．．．．．．179
6．3．2 制作六邊形框架與文字效果．．．．．．．．．．182
6．3．3 制作招聘信息效果．．．．．．．．．．．．．．．．．．．．．．．．184
H5手機(jī)網(wǎng)頁(yè)界面設(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)——插畫(huà)版朋友圈設(shè)計(jì)．．．．．．．．．．．156
5．5．1 制作插畫(huà)背景效果．．．．．．．．．．．．．．．．．．．．．．．．157
5．5．2 制作文字信息效果．．．．．．．．．．．．．．．．．．．．．．．．159
5．5．3 制作插畫(huà)版朋友圈界面效果．．．．．．．．．．159
微信朋友圈界面設(shè)計(jì)
5
章
第
3．2 實(shí)戰(zhàn)——綠色視覺(jué)小程序圖標(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 制作功能菜單與首頁(yè)廣告效果．．．．．．．．．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 制作首頁(yè)廣告效果．．．．．．．．．．．．．．．．．．．．．．．．．．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頁(yè)面設(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頁(yè)面設(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 制作店招與首頁(yè)效果．．．．．．．．．．．．．．．．．．．．220
7．5．2 制作促銷(xiāo)方案效果．．．．．．．．．．．．．．．．．．．．．．．．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)頁(yè)設(shè)計(jì)．．．．．．．．．．．263
9．2．1 制作直播講師信息效果．．．．．．．．．．．．．．．．．263
9．2．2 制作講師簡(jiǎn)介與課程大綱效果．．．．．．．266
9．2．3 制作圖書(shū)推薦與求關(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