網(wǎng)店視覺營銷與美工設(shè)計(jì)從入門到精通

目錄
前言
如何獲取云空間資料
第1部分 設(shè)計(jì)之道—理解視覺營銷
第1章 視覺營銷必知精髓
1.1 走進(jìn)視覺營銷
1.1.1 視覺營銷的基本概念 2
1.1.2 視覺營銷的運(yùn)作流程 3
1.1.3 視覺營銷的原則 3
1.2 衡量視覺營銷成敗的三大數(shù)據(jù)指標(biāo)
1.2.1 決定銷量高低的基礎(chǔ)—流量 4
1.2.2 彰顯電商成交的關(guān)鍵數(shù)據(jù)—轉(zhuǎn)化率 6
1.2.3 體現(xiàn)商品屬性和消費(fèi)者屬性—客單價(jià) 7
1.3 視覺營銷的四個(gè)關(guān)鍵點(diǎn)
1.3.1 “視”的關(guān)鍵：打造注意力 8
1.3.2 “覺”的關(guān)鍵：喚醒記憶力 9
1.3.3 “營”的關(guān)鍵：營造好感度 9
1.3.4 “銷”的關(guān)鍵：激發(fā)想象力 11
第2章 視覺營銷的表現(xiàn)形式
2.1 定義店鋪的品牌風(fēng)格
2.1.1 便于識別的店鋪專屬VI 13
2.1.2 色彩與風(fēng)格的完美搭配 15
2.1.3 商品圖片的視覺統(tǒng)一化處理 17
2.2 用圖片和文字提升閱讀體驗(yàn)
2.2.1 店鋪首頁的布局優(yōu)化 19
2.2.2 商品詳情頁面的內(nèi)容安排 20
2.2.3 網(wǎng)店商品文案的撰寫 21
2.3 對店鋪進(jìn)行全方位包裝和宣傳
2.3.1 促銷活動(dòng)的策劃與實(shí)施技巧 23
2.3.2 商品分類要充分考慮商品屬性與消費(fèi)者習(xí)慣 24
2.3.3 利用輔助信息提升購物體驗(yàn) 25
第3章 商品攝影入門與進(jìn)階
3.1 拍出符合網(wǎng)店裝修需要的照片
3.1.1 設(shè)置合適的照片格式 28
3.1.2 具備真實(shí)色彩的照片風(fēng)格 29
3.1.3 從不同視角全方位展現(xiàn)商品 31
3.2 準(zhǔn)確對焦拍出清晰照片
3.2.1 廣泛應(yīng)用的單次自動(dòng)對焦 32
3.2.2 適合拍攝體積較小商品的手動(dòng)對焦 32
3.3 正確曝光獲得理想畫面
3.3.1 影響畫面清晰范圍的光圈 33
3.3.2 避免畫面模糊的安全快門 34
3.3.3 盡量使用低感光度 35
3.3.4 簡單易用的曝光補(bǔ)償 36
3.4 商品拍攝進(jìn)階技巧
3.4.1 商品的擺放 37
3.4.2 點(diǎn)綴元素提升商品的檔次 38
3.4.3 表現(xiàn)整體外觀的拍攝技巧 39
3.4.4 表現(xiàn)細(xì)節(jié)的拍攝技巧 41
第4章 視覺營銷常用工具
4.1 獲取滿意的配色方案
4.1.1 配色軟件ColorSchemer Studio 43
4.1.2 基于網(wǎng)頁的配色工具Adobe Color CC 45
4.1.3 配色網(wǎng) 48
4.2 實(shí)用的網(wǎng)店裝修輔助工具
4.2.1 美圖秀秀 49
4.2.2 淘寶裝修助手 50
4.2.3 淘美網(wǎng)店裝修助手 51
4.2.4 淘幫手 52
第2部分 核心技法—Photoshop設(shè)計(jì)必知
第5章 裁圖與摳圖
5.1 調(diào)整照片質(zhì)量
5.1.1 改變商品照片的尺寸 54
5.1.2 更改商品照片的分辨率 55
5.1.3 巧用“另存為”命令減小文件占用空間 56
5.2 裁剪圖像
5.2.1 對商品照片進(jìn)行重新構(gòu)圖 57
5.2.2 拉直水平線讓商品端正展示 58
5.3 摳取圖像
5.3.1 純色背景的摳取 59
5.3.2 外形規(guī)則商品的摳取 60
5.3.3 外形不規(guī)則商品的摳取 61
5.3.4 精細(xì)摳取商品 63
5.3.5 半透明商品的摳取 64
5.3.6 特定顏色的摳取 65
5.3.7 選區(qū)邊緣的處理 66
第6章 調(diào)色與精修
6.1 商品照片的色彩調(diào)整
6.1.1 恢復(fù)商品的真實(shí)色彩 68
6.1.2 讓商品照片擺脫“灰色陰影” 69
6.1.3 突出玻璃制品晶瑩剔透質(zhì)感的調(diào)色技巧 70
6.1.4 調(diào)出炫目的金屬色 71
6.1.5 增強(qiáng)商品溫暖感的調(diào)色方法 72
6.1.6 提升商品照片色調(diào)的厚重感 73
6.2 商品照片的精細(xì)修飾
6.2.1 去掉用于懸掛商品的掛鉤 75
6.2.2 清除攝影棚的痕跡 76
6.2.3 消除模特身上的瑕疵 77
6.2.4 去除背景板上的瑕疵 79
6.2.5 清除商品上的毛發(fā)、灰塵 80
6.2.6 去除商品包裝上的瑕疵 81
6.2.7 修補(bǔ)商品表面的缺陷 82
第 7章 文字編排與圖形繪制
7.1 文字的編排
7.1.1 字體與店鋪風(fēng)格的完美搭配攻略 85
7.1.2 文字的添加與設(shè)置 86
7.1.3 文字的藝術(shù)化編排 88
7.1.4 變形文字的制作 89
7.2 修飾圖形的繪制
7.2.1 修飾圖形與視覺營銷之間的關(guān)系 91
7.2.2 繪制規(guī)則形狀的修飾圖形 91
7.2.3 添加自定義形狀讓畫面內(nèi)容更豐富 93
7.2.4 隨心所欲繪制所需的修飾圖形 94
第 8章 合成與特效
8.1圖像合成
8.1.1 制作白底效果的商品圖 97
8.1.2 合成材質(zhì)圖像讓商品更顯檔次 98
8.1.3 合成裝飾元素讓畫面更豐富 99
8.1.4 添加半透明水印的技巧 100
8.1.5 添加顏色邊框的三種方法 101
8.2 特效制作
8.2.1 簡單幾步打造手繪設(shè)計(jì)圖 103
8.2.2 構(gòu)建景深突出商品形象 105
8.2.3 讓商品照片細(xì)節(jié)變清晰的三種方法 106
8.2.4 制作商品剪影 108
8.3 圖層樣式
8.3.1 更改設(shè)計(jì)元素的填充和描邊樣式 109
8.3.2 讓設(shè)計(jì)元素更立體的樣式 111
8.3.3 發(fā)光樣式在店鋪裝修中的應(yīng)用 113
第3部分 實(shí)戰(zhàn)之道—案例解析
第9章 網(wǎng)店首頁各元素設(shè)計(jì)
9.1 店招與導(dǎo)航條
9.1.1 店招與導(dǎo)航條的設(shè)計(jì)規(guī)范 115
9.1.2 店招中店鋪名稱的藝術(shù)化處理 116
9.1.3 圖層樣式在導(dǎo)航條制作中的應(yīng)用 117
9.1.4 店招與導(dǎo)航條設(shè)計(jì)案例01 117
9.1.5 店招與導(dǎo)航條設(shè)計(jì)案例02 121
9.2 歡迎模塊與輪播圖
9.2.1 歡迎模塊與輪播圖的設(shè)計(jì)規(guī)范 126
9.2.2 三大元素構(gòu)建完美設(shè)計(jì)圖 127
9.2.3 溶圖在歡迎模塊中的應(yīng)用 128
9.2.4 歡迎模塊設(shè)計(jì)案例01 128
9.2.5 歡迎模塊設(shè)計(jì)案例02 133
9.3 商品陳列區(qū)
9.3.1 商品陳列區(qū)的設(shè)計(jì)規(guī)范 136
9.3.2 商品陳列區(qū)的布局方式 137
9.3.3 商品陳列區(qū)設(shè)計(jì)案例01 138
9.3.4 商品陳列區(qū)設(shè)計(jì)案例02 144
9.4 客服區(qū)與店鋪收藏區(qū)
9.4.1 客服區(qū)與店鋪收藏區(qū)的設(shè)計(jì)規(guī)范 148
9.4.2 聊天軟件頭像的多種創(chuàng)意表現(xiàn) 149
9.4.3 客服區(qū)與店鋪收藏區(qū)設(shè)計(jì)案例01 149
9.4.4 客服區(qū)與店鋪收藏區(qū)設(shè)計(jì)案例02 154
第10章 網(wǎng)店首頁整體打造
10.1 化妝品店鋪首頁裝修設(shè)計(jì)
10.1.1 框架設(shè)計(jì) 159
10.1.2 風(fēng)格定位 160
10.1.3 配色方案 161
10.1.4 步驟詳解 162
10.1.5 案例擴(kuò)展 170
10.2 家具店鋪首頁裝修設(shè)計(jì)
10.2.1 框架設(shè)計(jì) 171
10.2.2 風(fēng)格定位 172
10.2.3 配色方案 173
10.2.4 步驟詳解 174
10.2.5 案例擴(kuò)展 181
10.3 婚慶商品店鋪首頁裝修設(shè)計(jì)
10.3.1 框架設(shè)計(jì) 182
10.3.2 風(fēng)格定位 183
10.3.3 配色方案 184
10.3.4 步驟詳解 185
10.3.5 案例擴(kuò)展 193
第11章 商品詳情頁面各元素設(shè)計(jì)
11.1 商品主圖
11.1.1 商品主圖的設(shè)計(jì)規(guī)范 195
11.1.2 添加輔助文案提高商品主圖點(diǎn)擊率 196
11.1.3 商品主圖設(shè)計(jì)案例01 197
11.1.4 商品主圖設(shè)計(jì)案例02 201
11.2 商品搭配專區(qū)
11.2.1 商品搭配專區(qū)的兩種表現(xiàn)方式 205
11.2.2 指示性符號在商品搭配專區(qū)中的妙用 206
11.2.3 商品搭配專區(qū)設(shè)計(jì)案例01 207
11.2.4 商品搭配專區(qū)設(shè)計(jì)案例02 211
11.3 商品細(xì)節(jié)展示區(qū)
11.3.1 商品細(xì)節(jié)展示區(qū)的表現(xiàn)方式 217
11.3.2 文字與素材在商品細(xì)節(jié)展示區(qū)中的作用 218
11.3.3 商品細(xì)節(jié)展示區(qū)設(shè)計(jì)案例01 220
11.3.4 商品細(xì)節(jié)展示區(qū)設(shè)計(jì)案例02 225
11.4 商品功效簡介區(qū)
11.4.1 商品功效簡介區(qū)的設(shè)計(jì)規(guī)范 230
11.4.2 修飾元素讓商品功效簡介區(qū)表現(xiàn)更生動(dòng) 230
11.4.3 商品功效簡介區(qū)設(shè)計(jì)案例01 232
11.4.4 商品功效簡介區(qū)設(shè)計(jì)案例02 236
11.5 其他輔助信息
11.5.1 信息視圖在流程圖設(shè)計(jì)中的應(yīng)用 242
11.5.2 利用品牌和公司簡介提升店鋪專業(yè)形象 243
11.5.3 溫馨提示設(shè)計(jì)案例 244
11.5.4 購物須知設(shè)計(jì)案例 247
11.5.5 售后承諾設(shè)計(jì)案例 251
11.5.6 品牌簡介設(shè)計(jì)案例 255
第12章 商品詳情頁面整體打造
12.1 運(yùn)動(dòng)鞋詳情頁面裝修設(shè)計(jì)
12.1.1 框架設(shè)計(jì) 259
12.1.2 風(fēng)格定位 260
12.1.3 配色方案 261
12.1.4 步驟詳解 262
12.1.5 案例擴(kuò)展 271
12.2 眼鏡框詳情頁面裝修設(shè)計(jì)
12.2.1 框架設(shè)計(jì) 272
12.2.2 風(fēng)格定位 273
12.2.3 配色方案 274
12.2.4 步驟詳解 275
12.2.5 案例擴(kuò)展 281
12.3 茶具套裝詳情頁面裝修設(shè)計(jì)
12.3.1 框架設(shè)計(jì) 282
12.3.2 風(fēng)格定位 283
12.3.3 配色方案 284
12.3.4 步驟詳解 285
12.3.5 案例擴(kuò)展 291
第4部分 高手之道—裝修進(jìn)階
第13章 網(wǎng)頁制作入門與進(jìn)階
13.1 設(shè)計(jì)圖的切片與優(yōu)化
13.1.1 按功能對設(shè)計(jì)圖進(jìn)行切片 293
13.1.2 優(yōu)化切片提升瀏覽體驗(yàn) 294
13.2 網(wǎng)頁制作入門
13.2.1 利用表格展示商品詳情信息 295
13.2.2 在頁面中插入圖片 298
13.2.3 利用表格實(shí)現(xiàn)圖文混排 299
13.2.4 制作鏈接代碼 301
13.3 網(wǎng)頁制作進(jìn)階
13.3.1 制作輪播圖代碼 302
13.3.2 制作客服區(qū)代碼 303
13.3.3 制作店鋪收藏區(qū)代碼 305
13.3.4 制作歡迎模塊代碼 306
13.3.5 在店鋪頁面中添加視頻 309