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)——創(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)——使用“曲線”命令............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