網店視覺營銷與美工設計從入門到精通

前言
如何獲取雲空間資料

第1部分 設計之道—理解視覺營銷
第1章 視覺營銷必知精髓
1.1 走進視覺營銷
1.1.1 視覺營銷的基本概念2
1.1.2 視覺營銷的運作流程3
1.1.3 視覺營銷的原則3
1.2 衡量視覺營銷成敗的三大數據指標
1.2.1 決定銷量高低的基礎—流量4
1.2.2 彰顯電商成交的關鍵數據—轉化率6
1.2.3 體現商品屬性和消費者屬性—客單價7
1.3 視覺營銷的四個關鍵點
1.3.1 「視」的關鍵：打造注意力8
1.3.2 「覺」的關鍵：喚醒記憶力9
1.3.3 「營」的關鍵：營造好感度9
1.3.4 「銷」的關鍵：激發想象力11
第2章 視覺營銷的表現形式
2.1 定義店鋪的品牌風格
2.1.1 便於識別的店鋪專屬VI13
2.1.2 色彩與風格的完美搭配15
2.1.3 商品圖片的視覺統一化處理17
2.2 用圖片和文字提升閱讀體驗
2.2.1 店鋪首頁的布局優化19
2.2.2 商品詳情頁面的內容安排20
2.2.3 網店商品文案的撰寫21
2.3 對店鋪進行全方位包裝和宣傳
2.3.1 促銷活動的策划與實施技巧23
2.3.2 商品分類要充分考慮商品屬性與消費者習慣24
2.3.3 利用輔助信息提升購物體驗25
第3章 商品攝影入門與進階
3.1 拍出符合網店裝修需要的照片
3.1.1 設置合適的照片格式28
3.1.2 具備真實色彩的照片風格29
3.1.3 從不同視角全方位展現商品31
3.2 准確對焦拍出清晰照片
3.2.1 廣泛應用的單次自動對焦32
3.2.2 適合拍攝體積較小商品的手動對焦32
3.3 正確曝光獲得理想畫面
3.3.1 影響畫面清晰范圍的光圈33
3.3.2 避免畫面模糊的安全快門34
3.3.3 盡量使用低感光度35
3.3.4 簡單易用的曝光補償36
3.4 商品拍攝進階技巧
3.4.1 商品的擺放37
3.4.2 點綴元素提升商品的檔次38
3.4.3 表現整體外觀的拍攝技巧39
3.4.4 表現細節的拍攝技巧41
第4章 視覺營銷常用工具
4.1 獲取滿意的配色方案
4.1.1 配色軟件ColorSchemer Studio43
4.1.2 基於網頁的配色工具Adobe Color CC45
4.1.3 配色網48
4.2 實用的網店裝修輔助工具
4.2.1 美圖秀秀49
4.2.2 淘 寶裝修助手50
4.2.3 淘美網店裝修助手51
4.2.4 淘幫手52

第2部分 核心技法—Photoshop設計必知
第5章 裁圖與摳圖
5.1 調整照片質量
5.1.1 改變商品照片的尺寸54
5.1.2 更改商品照片的分辨率55
5.1.3 巧用「另存為」命令減小文件占用空間56
5.2 裁剪圖像
5.2.1 對商品照片進行重新構圖57
5.2.2 拉直水平線讓商品端正展示58
5.3 摳取圖像
5.3.1 純色背景的摳取59
5.3.2 外形規則商品的摳取60
5.3.3 外形不規則商品的摳取61
5.3.4 精細摳取商品63
5.3.5 半透明商品的摳取64
5.3.6 特定顏色的摳取65
5.3.7 選區邊緣的處理66
第6章 調色與精修
6.1 商品照片的色彩調整
6.1.1 恢復商品的真實色彩68
6.1.2 讓商品照片擺脫「灰色陰影」69
6.1.3 突出玻璃制品晶瑩剔透質感的調色技巧70
6.1.4 調出炫目的金屬色71
6.1.5 增強商品溫暖感的調色方法72
6.1.6 提升商品照片色調的厚重感73
6.2 商品照片的精細修飾
6.2.1 去掉用於懸掛商品的掛鉤75
6.2.2 清除攝影棚的痕跡76
6.2.3 消除模特身上的瑕疵77
6.2.4 去除背景板上的瑕疵79
6.2.5 清除商品上的毛發、灰塵80
6.2.6 去除商品包裝上的瑕疵81
6.2.7 修補商品表面的缺陷82
第7章 文字編排與圖形繪制
7.1 文字的編排
7.1.1 字體與店鋪風格的完美搭配攻略85
7.1.2 文字的添加與設置86
7.1.3 文字的藝術化編排88
7.1.4 變形文字的制作89
7.2 修飾圖形的繪制
7.2.1 修飾圖形與視覺營銷之間的關系91
7.2.2 繪制規則形狀的修飾圖形91
7.2.3 添加自定義形狀讓畫面內容更豐富93
7.2.4 隨心所欲繪制所需的修飾圖形94
第 8章 合成與特效
8.1圖像合成
8.1.1 制作白底效果的商品圖97
8.1.2 合成材質圖像讓商品更顯檔次98
8.1.3 合成裝飾元素讓畫面更豐富99
8.1.4 添加半透明水印的技巧100
8.1.5 添加顏色邊框的三種方法101
8.2 特效制作
8.2.1 簡單幾步打造手繪設計圖103
8.2.2 構建景深突出商品形象105
8.2.3 讓商品照片細節變清晰的三種方法106
8.2.4 制作商品剪影108
8.3 圖層樣式
8.3.1 更改設計元素的填充和描邊樣式109
8.3.2 讓設計元素更立體的樣式111
8.3.3 發光樣式在店鋪裝修中的應用113

第3部分 實戰之道—案例解析
第9章 網店首頁各元素設計
9.1 店招與導航條
9.1.1 店招與導航條的設計規范115
9.1.2 店招中店鋪名稱的藝術化處理116
9.1.3 圖層樣式在導航條制作中的應用117
9.1.4 店招與導航條設計案例01117
9.1.5 店招與導航條設計案例02121
9.2 歡迎模塊與輪播圖
9.2.1 歡迎模塊與輪播圖的設計規范126
9.2.2 三大元素構建完美設計圖127
9.2.3 溶圖在歡迎模塊中的應用128
9.2.4 歡迎模塊設計案例01128
9.2.5 歡迎模塊設計案例02133
9.3 商品陳列區
9.3.1 商品陳列區的設計規范136
9.3.2 商品陳列區的布局方式137
9.3.3 商品陳列區設計案例01138
9.3.4 商品陳列區設計案例02144
9.4 客服區與店鋪收藏區
9.4.1 客服區與店鋪收藏區的設計規范148
9.4.2 聊天軟件頭像的多種創意表現149
9.4.3 客服區與店鋪收藏區設計案例01149
9.4.4 客服區與店鋪收藏區設計案例02154
第10章 網店首頁整體打造
10.1 化妝品店鋪首頁裝修設計
10.1.1 框架設計159
10.1.2 風格定位160
10.1.3 配色方案161
10.1.4 步驟詳解162
10.1.5 案例擴展170
10.2 家具店鋪首頁裝修設計
10.2.1 框架設計171
10.2.2 風格定位172
10.2.3 配色方案173
10.2.4 步驟詳解174
10.2.5 案例擴展181
10.3 婚慶商品店鋪首頁裝修設計
10.3.1 框架設計182
10.3.2 風格定位183
10.3.3 配色方案184
10.3.4 步驟詳解185
10.3.5 案例擴展193
第11章 商品詳情頁面各元素設計
11.1 商品主圖
11.1.1 商品主圖的設計規范195
11.1.2 添加輔助文案提高商品主圖點擊率196
11.1.3 商品主圖設計案例01197
11.1.4 商品主圖設計案例02201
11.2 商品搭配專區
11.2.1 商品搭配專區的兩種表現方式205
11.2.2 指示性符號在商品搭配專區中的妙用206
11.2.3 商品搭配專區設計案例01207
11.2.4 商品搭配專區設計案例02211
11.3 商品細節展示區
11.3.1 商品細節展示區的表現方式217
11.3.2 文字與素材在商品細節展示區中的作用218
11.3.3 商品細節展示區設計案例01220
11.3.4 商品細節展示區設計案例02225
11.4 商品功效簡介區
11.4.1 商品功效簡介區的設計規范230
11.4.2 修飾元素讓商品功效簡介區表現更生動230
11.4.3 商品功效簡介區設計案例01232
11.4.4 商品功效簡介區設計案例02236
11.5 其他輔助信息
11.5.1 信息視圖在流程圖設計中的應用242
11.5.2 利用品牌和公司簡介提升店鋪專業形象243
11.5.3 溫馨提示設計案例 244
11.5.4 購物須知設計案例247
11.5.5 售后承諾設計案例251
11.5.6 品牌簡介設計案例255
第12章 商品詳情頁面整體打造
12.1 運動鞋詳情頁面裝修設計
12.1.1 框架設計259
12.1.2 風格定位260
12.1.3 配色方案261
12.1.4 步驟詳解262
12.1.5 案例擴展 271
12.2 眼鏡框詳情頁面裝修設計
12.2.1 框架設計272
12.2.2 風格定位273
12.2.3 配色方案274
12.2.4 步驟詳解275
12.2.5 案例擴展281
12.3 茶具套裝詳情頁面裝修設計
12.3.1 框架設計282
12.3.2 風格定位283
12.3.3 配色方案284
12.3.4 步驟詳解285
12.3.5 案例擴展291

第4部分 高手之道—裝修進階
第13章 網頁制作入門與進階
13.1 設計圖的切片與優化
13.1.1 按功能對設計圖進行切片293
13.1.2 優化切片提升瀏覽體驗294
13.2 網頁制作入門
13.2.1 利用表格展示商品詳情信息295
13.2.2 在頁面中插入圖片298
13.2.3 利用表格實現圖文混排299
13.2.4 制作鏈接代碼301
13.3 網頁制作進階
13.3.1 制作輪播圖代碼302
13.3.2 制作客服區代碼303
13.3.3 制作店鋪收藏區代碼305
13.3.4 制作歡迎模塊代碼306
13.3.5 在店鋪頁面中添加視頻309