內容簡介
本書由一線講師和設計師傾力編寫,系統地講解了在淘寶店面設計、淘寶店面運營、視覺行銷、網店界面設計工作中的一些設計技巧和套用技巧。
本書共分3部分。基礎知識部分(第 1~2章)主要介紹淘寶店面設計中的一些基礎知識,包括淘寶界面設計之前如何從瀏覽者的角度思考頁面的布局構成、如何洞察瀏覽者的需求、如何明確網站的設計焦點及Photoshop CC軟體新添加的一些主要功能等;重點技巧套用部分(第3~11章)重點講解了淘寶店面設計中的各個組成要素的製作技巧、表現技巧和套用技巧,主要包括色彩的搭配、色彩的情感心理、網店店招、網店LOGO、網店促銷海報、網店視覺藝術字、商品詳情頁的設計技巧及Photoshop核心知識點在套用中的設計技巧;綜合實戰部分(第 12~13章)以淘寶店面設計中常用的表現技巧和套用技巧為著陸點,重點與讀者分享了女鞋店鋪界面的詳細思索過程和設計過程。
附贈87個約600分鐘多媒體語音教學視頻,詳細講解了核心知識點和主要案例的設計製作過程。還收錄了所有案例的素材檔案,可提高讀者的學習效率。
本書適合於在校學生、廣告設計愛好者閱讀學習,也適合作為相關專業畢業生實訓、社會培訓班、相關培訓機構的教材。
圖書目錄
第01章 Photoshop CC設計淘寶店面的4項基本常識
1.1 設計師必知的Photoshop CC軟體7項新功能 016
1.1.1 無損縮放讓大圖、小圖都清晰 016
1.1.2 消除抖動,讓寶貝更靚麗 017
1.1.3 圓角矩形及CSS複製 018
1.1.4 形狀和路徑的套用更簡單 019
1.1.5 智慧型移除,讓頁面寶貝更突出 020
1.1.6 徑向濾波器,讓寶貝盡顯魅力 020
1.1.7 更智慧型化的切圖功能 021
1.2 確定店面尺寸的3個重要事項 022
1.2.1 淘寶界面設計的兩個重要概念要知曉 022
1.2.2 靈活改變畫布的大小 022
1.2.3 淘寶店面設計中常用的圖像尺寸 023
1.3 淘寶店面圖像設計應知的3項常識 023
1.3.1 新建檔案,你真的了解嗎 024
1.3.2 了解圖像的保存格式很重要 024
1.3.3 Web圖像最佳化的3個關鍵點 025
1.4 裁剪圖像的3種方法 025
1.4.1 圖像裁切的3個技巧 025
1.4.2 基本裁切 026
1.4.3 透視裁剪 027
1.4.4 標尺與參考線的套用 027
第02章 淘寶店面設計必知的6件事情
2.1 淘寶店面設計中的4種視覺設計元素 030
2.1.1 點元素 030
2.1.2 線元素 030
2.1.3 面元素 031
2.1.4 花紋和圖案 031
2.2 淘寶店面設計應該遵循的4種創意原則 032
2.2.1 給瀏覽者一個好的印象:界面布局要美觀 032
2.2.2 主題明確 主體突出 033
2.2.3 統一性 034
2.2.4 直觀簡潔 034
2.3 用戶體驗設計兩個要點 035
2.3.1 產品圖片設計需要注意的6個問題 035
2.3.2 產品詳情頁面設計的3項要點 037
2.4 人氣店面設計的5條秘籍 037
2.4.1 店招,不得不說的秘密 038
2.4.2 橫幅海報,不可替代的視覺表現區 038
2.4.3 導航與分類設計的要點:清晰、簡單 039
2.4.4 提升單擊量的隱形推手:正確的選用素材 039
2.4.5 細節展示的技巧要知道:排順序 040
2.5 設計師必須知道的8 種設計構圖 040
2.5.1 中心構圖 040
2.5.2 三角形構圖 041
2.5.3 黃金分割構圖 041
2.5.4 九宮格構圖 041
2.5.5 框架式構圖 042
2.5.6 放射式構圖 042
2.5.7 並置式構圖 043
2.5.8 對稱式構圖 043
2.6 淘寶店面設計中常用的3 種基本構圖技巧 043
2.6.1 對比 043
2.6.2 對稱 044
2.6.3 反覆 044
第03章 淘寶店面中的7種主要元素
3.1 淘寶店面中的7 種主要元素 046
3.1.1 店鋪標誌 046
3.1.2 店招 046
3.1.3 導航 047
3.1.4 公告 048
3.1.5 促銷欄 048
3.1.6 寶貝展示 048
3.1.7 寶貝描述 048
3.2 淘寶店面元素設計的11個重要知識點提煉 049
3.2.1 修復圖像 049
3.2.2 修補圖像 050
3.2.3 內容感知 051
3.2.4 圖層的原理在店面設計中的3個套用技巧 052
3.2.5 圖層的不透明度 055
3.2.6 圖層蒙版 056
3.2.7 合併圖層與蓋印圖層 057
3.2.8 文字字元的柵格化 057
3.2.9 形狀工具在網店界面設計中的4點套用技巧 058
3.2.10 形狀圖層的高級套用技巧 059
3.2.11 選框工具的使用 060
第04章 淘寶店面設計的7大設計誤區
4.1 淘寶店面設計的7大設計誤區 062
4.1.1 雜亂 062
4.1.2 過多的說明文字 062
4.1.3 關聯推薦商品太多 063
4.1.4 主體海報設計缺乏創意和吸引力 063
4.1.5 主要推薦商品沒有“跳”出來 064
4.1.6 商品陳列的無序 064
4.1.7 信息傳遞的不明確性 065
4.2 設計優秀界面的入門必修課:摳圖常用的4種方法 066
4.2.1 磁性套索摳圖 066
4.2.2 鋼筆工具摳圖 066
4.2.3 使用通道和蒙版摳圖 067
4.2.4 使用其他外掛程式摳圖 068
4.3 重要知識點索引:創建精準選區的5個重要知識點 069
4.3.1 創建選區一定要精準 069
4.3.2 基於色調差異創建選區:魔棒與快速選擇工具 071
4.3.3 選區操作中的加減運算 071
4.3.4 “調整邊緣”不得不提的重點技巧 072
4.3.5 通道與蒙版:不得不說的黑白灰 072
4.4 創建商品倒影的4種常用技巧 074
4.4.1 平面水平類商品的倒影 074
4.4.2 酒飲類商品的倒影 074
4.4.3 45°放置的商品的倒影 075
4.4.4 重疊放置的商品的倒影 075
第05章 淘寶店面中常見的5種裝飾性元素
5.1 淘寶店面中常見的5種裝飾性元素 078
5.1.1 書法與文化元素 078
5.1.2 線框 078
5.1.3 按鈕 079
5.1.4 標籤 079
5.1.5 指引標示 079
5.2 5 則裝飾性元素的設計案例 080
5.2.1 書法與文化 080
5.2.2 線框 081
5.2.3 按鈕 082
5.2.4 標籤 083
5.2.5 指引標示 083
5.3 重要知識點提煉:常用形狀工具的另類講解 084
5.3.1 巧用形狀讓頁面信息更有邏輯 084
5.3.2 巧用圖形讓頁面信息更有說服力 085
5.3.3 圖形與色彩“結親” 085
5.3.4 圖形之間的“1+1” 086
第06章 淘寶店面中“吸引眼球”的7種形式
6.1 淘寶店面中“吸引眼球”的7種形式 088
6.1.1 視覺層次 088
6.1.2 色彩的妙用 088
6.1.3 文字 088
6.1.4 標示 089
6.1.5 光影效果 089
6.1.6 框線 089
6.1.7 留白 090
6.2 增強店面視覺行銷效果的4種策略 090
6.2.1 減少畫面中需要瀏覽者記憶的材料數量 090
6.2.2 遵循基本的視覺瀏覽習慣 091
6.2.3 增加視覺刺激的維度 091
6.2.4 選擇**直觀、**直接的表現形式 091
6.3 5 則商品促銷廣告的設計 092
6.3.1 用色彩吸引注意力:男士手錶促銷廣告 092
6.3.2 用文字吸引注意力:“雙11”商城促銷廣告 094
6.3.3 用框線來聚焦注意力:戶外鞋促銷廣告 095
6.3.4 用小巧的標籤吸引注意力:手機打折廣告 097
6.3.5 用色彩漸變吸引注意力:羽絨服促銷廣告 098
6.4 常用工具另類講解:10個重要知識點 100
6.4.1 模糊與銳化 100
6.4.2 加深與減淡 101
6.4.3 源與目標對象 100
6.4.4 圖像的智慧型修復 101
6.4.5 紋理與圖案 102
6.4.6 複製與貼上 103
6.4.7 選區變換與對象變化的區別 105
6.4.8 遮蓋與擦除有差異嗎 105
6.4.9 版面規劃的兩個重要工具 106
6.4.10 頁面元素的管理:圖層分組 107
第07章 淘寶店面設計中的色彩知識
7.1 色彩在店面設計中的3個作用 110
7.1.1 渲染店面的特定氛圍 110
7.1.2 字型與色彩相互配合 110
7.1.3 引導主次關係 110
7.2 常見的5類行業配色方案 112
7.2.1 休閒款女裝店 112
7.2.2 美容化妝品店 112
7.2.3 家居電器店 112
7.2.4 男性商品店 113
7.2.5 童裝店 113
7.3 店面設計的3種配色秘籍 113
7.3.1 “偷學”皇冠店鋪的配色技巧 113
7.3.2 “偷學”產品的標誌用色 114
7.3.3 儲備2個常用的配色網站 115
7.4 色彩調和的4種常用方法 115
7.4.1 同種色調和 115
7.4.2 鄰近色調和 116
7.4.3 對比色調和 116
7.4.4 漸變色調和 116
7.5 重要知識點提煉:Photoshop CC色彩的7種套用技巧 117
7.5.1 巧妙設定色彩的明度 117
7.5.2 巧妙設定色彩的飽和度的兩種方法 117
7.5.3 高效調整色彩的方法 118
7.5.4 掌握漸變填充的技巧 119
7.5.5 快速確定配色方案的利器:Kuler工具 120
7.6 店招設計的5則案例 121
7.6.1 店招設計的5個注意事項 121
7.6.2 借用“點”的魅力設計男鞋店鋪的店招 121
7.6.3 凸顯店鋪主題的女鞋店招設計 122
7.6.4 色彩與活動主題呼應的衛浴店鋪的店招設計 124
7.6.5 突出促銷功能的包包店鋪的店招設計 125
7.6.6 高品質品牌男裝店鋪的店招設計 127
第08章 淘寶店面的LOGO設計
8.1 認識網店LOGO:視覺行銷的核心點 132
8.1.1 網店LOGO承擔的兩個主要作用 132
8.1.2 網店LOGO的3種常見類型 133
8.1.3 網店LOGO設計常見的3種誤區 134
8.2 LOGO設計常用的6種方法 135
8.2.1 將筆畫轉換為曲線 135
8.2.2 字與形共存 136
8.2.3 直接使用店鋪的名稱 136
8.2.4 借用七巧板 136
8.2.5 修減 136
8.2.6 巧用字母和數字 137
8.3 LOGO設計的5個步驟 137
8.3.1 店鋪的經營思路不同,設計效果有區別 137
8.3.2 提煉網店LOGO的創意很重要 138
8.3.3 草稿的繪製與改進 138
8.3.4 色彩的套用 139
8.3.5 正稿的設計 139
8.4 網店LOGO設計案例5則 139
8.4.1 簡單圖形的妙用:餐飲(休閒食品)店鋪LOGO設計 139
8.4.2 首寫字母的魅力:男士領帶店鋪LOGO設計 140
8.4.3 文字的局部變形:母嬰用品店LOGO設計 142
8.4.4 刪減與統一:皮具用品店LOGO設計 144
8.4.5 蒙版的奧妙:女式服飾店動態LOGO的設計 145
8.5 網店LOGO設計的5個重要知識點提煉 147
8.5.1 翻轉 147
8.5.2 旋轉 148
8.5.3 複製與縮放 148
8.5.4 斜切與扭曲 149
8.5.5 透視 149
第09章 淘寶店面中情感文字的設計
9.1 淘寶店面中文字設計的4條基本原則 152
9.1.1 頁面文字的易讀是必須的 152
9.1.2 文字編排的美感很關鍵 152
9.1.3 文字設計的鮮明風格很重要 153
9.1.4 文字設計要有一定的創造性 153
9.2 淘寶店面中的3種文字類型 154
9.2.1 分類導航文字 154
9.2.2 標題文字 154
9.2.3 促銷文字 155
9.3 文案設計的4種重要技巧 156
9.3.1 深度關注商品的特徵 156
9.3.2 整合優點 156
9.3.3 利益,吸引客戶的法寶 156
9.3.4 信任,成單的通行證 157
9.3.5 行銷文案,我們應該這樣寫 157
9.4 5 種情感文字的設計案例 157
9.4.1 提升視覺衝擊力:背景圖案的襯托 157
9.4.2 光影的運用:質感的標題藝術字 160
9.4.3 氛圍清晰的促銷字 163
9.4.4 運用構圖原理製作促銷文案 166
9.4.5 運用圖層原理快速設計促銷立體字 168
9.5 文字、文案設計的6個重要知識點提煉 169
9.5.1 你真的會用“字元”嗎 169
9.5.2 你真的會用“段落”嗎 172
9.5.3 風格化濾鏡組 174
9.5.4 渲染濾鏡組 175
9.5.5 圖層蒙版 176
9.5.6 剪貼蒙版 177
第 10章 店鋪促銷海報設計與導航設計
10.1 首先需要明白促銷海報設計的內容是什麼 180
10.2 促銷海報經常使用的5個版式 181
10.3 設計促銷海報必須知道的7個細節 182
10.3.1 設計的主體必須要突出 182
10.3.2 信息的編排層次要清晰 183
10.3.3 目標消費對象的視覺審美特點要知曉 183
10.3.4 標籤和按鈕不可少 183
10.3.5 掌握色彩搭配的“631”很重要 184
10.3.6 更有吸引力產品需要怎樣調整色彩和色調 184
10.3.7 如何設計恰當的背景更有影響力 185
10.4 促銷海報設計6則實例 185
10.4.1 光影營造氛圍:一則家用電器的海報設計 185
10.4.2 整合素材的技巧:一則沐浴露產品的海報設計 188
10.4.3 凸顯產品的質感:一款男士皮鞋海報設計 191
10.4.4 借用背景色與產品色: 化妝品海報設計 193
10.4.5 為產品注入個性:皮草促銷海報設計 196
10.4.6 借用光影提升產品質感:男士皮帶海報設計 199
10.5 重要知識點提煉:關於海報設計的9個重要知識點索引 201
10.5.1 外部圖像的置入 201
10.5.2 網店圖像色彩的明度解析 202
10.5.3 曲線的奧妙:圖像色彩3屬性的調節 203
10.5.4 還原寶貝的真實色彩:色彩平衡 204
10.5.5 調節網頁圖像色調和通透度的技巧 206
10.5.6 銳化:寶貝圖像輸出不可或缺的細節 208
10.5.7 快速提取圖像的白場和黑場 209
10.5.8 透視變形:圖像的透視校正 210
10.5.9 鏡頭模糊濾鏡:讓商品的主體更突出 210
10.6 掌握寶貝色調調整的5種技巧 212
10.6.1 讓“寶貝”的色調更通透:電飯鍋調色 212
10.6.2 讓美味更有味:食品調色 213
10.6.3 還原商品的原貌:皮包(箱)色彩調整 215
10.6.4 色彩的多變:校正服飾的顏色 216
10.6.5 飾品調色:色彩疊加的技巧 218
10.7 導航的設計 220
10.7.1 導航設計要注意4個基本要求 220
10.7.2 必須知道淘寶店面的4種導航要素 221
10.7.3 從瀏覽者角度設計導航,我們必須注意兩點 222
10.7.4 導航設計需要掌握的4點技巧 222
第 11章 淘寶店面設計常用的5個拓展工具
11.1 設計師的網頁配色利器:Color Scheme Designer 226
11.2 Xara 3D:輕鬆製作三維立體字 226
11.3 Flame_Painter:快速製作網頁中的光影 227
11.4 Photoshop 精密摳圖外掛程式:Vertus Fluid Mask 229
11.5 支持矢量圖瀏覽的軟體:ST Thumbnails Explorer 230
第 12章 女鞋店鋪首頁設計的完全案例
12.1 創造瀏覽者的第 1眼印象 232
12.1.1 設計“情調”,提升購物的欲望 232
12.1.2 導航設計,給出消費的原因 233
12.1.3 作為設計師,應該知曉3種常見的店鋪布局 234
12.1.4 首屏設計的5種類型很重要 235
12.2 恰當地分割頁面的5個區域 237
12.2.1 頂部形象區 237
12.2.2 首屏吸引區 238
12.2.3 營造氛圍的促銷區 238
12.2.4 建立情感的互動區 240
12.2.5 不可忽略的頁腳區 240
12.3 素材圖像管理的3個技巧 240
12.3.1 制定素材圖像設計的標準 241
12.3.2 素材的管理 241
12.3.3 框線的添加 242
12.4 女鞋店面設計案例 242
12.4.1 店鋪的店招設計 243
12.4.2 店鋪的導航設計 244
12.4.3 主體促銷海報設計 244
12.4.4 熱賣專區設計 246
12.4.5 特色產品區的設計 248
12.4.6 短鞋區的設計 251
12.4.7 別致蕾絲&長鞋區的設計 251
12.4.8 店鋪的頁腳設計 251
第 13章 商品描述頁的設計
13.1 詳情頁設計的5個W 254
13.1.1 產品是什麼 254
13.1.2 好在哪裡 254
13.1.3 為什麼要買 255
13.1.4 “我”為什麼要在這裡買 255
13.1.5 為什麼現在就要買 255
13.2 詳情頁設計的3個關鍵點 255
13.2.1 瀏覽者關注的部位一定要注意 255
13.2.2 用對比展現產品的品質 256
13.2.3 產品細節與主要原料相關聯 256
13.3 商品描述頁需要關注的4個編排要點 256
13.3.1 版面的層次設計 256
13.3.2 文案排版的條理性 258
13.3.3 重點辭彙的突出性 258
13.3.4 色彩選擇的連貫性 258
13.4 設計過程 258
13.4.1 商品的基本信息區域設計 259
13.4.2 賣點解析 261
13.4.3 產品主要賣點展示 263
13.4.4 設計手稿 264
13.4.5 產品展示部分的設計 265
13.4.6 模特穿試 266
13.4.7 產品參數及細節展示 267
13.4.8 尺碼設計 267
13.4.9 關聯商品區域的設計 268