網(wǎng)店美工設(shè)計(jì)-電子商務(wù)美工設(shè)計(jì)-辦公用品和數(shù)碼配件類網(wǎng)店設(shè)計(jì)

第四章辦公用品與配件類網(wǎng)店設(shè)計(jì)目錄Contents四.一辦公用品類網(wǎng)店設(shè)計(jì)四.二數(shù)碼配件類網(wǎng)店設(shè)計(jì)?四.三手機(jī)配件類網(wǎng)店設(shè)計(jì)?四.一.一辦公用品類網(wǎng)店設(shè)計(jì)風(fēng)格定位這些商品為辦公日常用品,外觀簡潔大方。在設(shè)計(jì)網(wǎng)店風(fēng)格時(shí),網(wǎng)店顏色可以參考商品地顏色,或采用綠色,藍(lán)色,灰色,黃色,白色為主色調(diào),體現(xiàn)辦公商務(wù)質(zhì)。頁面修飾元素應(yīng)較少,主要采用線條,矩形,圓角矩形裝飾文本或頁面,文字應(yīng)方正簡練,體現(xiàn)一種商務(wù)干練地感覺。為了使商品圖片更加美觀,常常需要行商品摳圖,以及添加商品投影,使其與背景更加融合。四.一.二設(shè)計(jì)店標(biāo)本例,提供地店鋪名稱為"GreenBar",其"Green"表示綠色,因此本例用綠色作為主色調(diào)。美化店鋪名稱,并添加筆地圖標(biāo),以及"綠色辦公時(shí)代"文本來體現(xiàn)店鋪所售賣地商品為辦公用品。針對PC端,移動(dòng)端,跨境端地尺寸與特點(diǎn),分別設(shè)計(jì)店鋪店標(biāo)。四.一.二設(shè)計(jì)店標(biāo)PC端店標(biāo)尺寸為二三零像素×七零像素,具體操作如下。一.PC端店鋪店標(biāo)設(shè)計(jì)一繪制并填充圓角矩形二繪制自定形狀三PC端店標(biāo)效果四.一.二設(shè)計(jì)店標(biāo)下面將在PC端店鋪店標(biāo)地基礎(chǔ)上分別制作移動(dòng)端與跨境端店鋪店標(biāo),使效果更加統(tǒng)一,具體操作如下。二.移動(dòng)端與跨境端店鋪店標(biāo)設(shè)計(jì)一移動(dòng)端店標(biāo)效果二跨境端店標(biāo)效果四.一.三設(shè)計(jì)店招在制作時(shí),需要先制作背景,然后添加素材,輸入文本,最后添加店標(biāo),具體操作如下。三選擇形狀四移動(dòng)端店招效果一制作背景并添加商品二輸入文本四.一.四設(shè)計(jì)Banner在設(shè)計(jì)Banner時(shí),可選擇其具有競爭力地特點(diǎn)行展示,如本例選擇"LED大屏顯示,USB充電,木質(zhì)數(shù)字鬧鐘"等特點(diǎn)行展示,采用左文右圖地排版方式,畫面簡潔大方。一.LED日歷Banner設(shè)計(jì)一PC端LED日歷Banner二移動(dòng)端LED日歷Banner效果四.一.四設(shè)計(jì)Banner一.LED日歷Banner設(shè)計(jì)三添加素材并繪制形狀四跨境端LED日歷Banner效果四.一.四設(shè)計(jì)Banner在設(shè)計(jì)Banner時(shí),可挑選部分特點(diǎn)行展示,本例將通過深藍(lán)色,黃色與白色,黑色地搭配,以及版面地矩形分割,來突出并打造辦公桌"簡約現(xiàn)代"風(fēng)格。下面將制作辦公桌PC端,移動(dòng)端與跨境端三種形式地Banner,具體操作如下。二.辦公桌Banner設(shè)計(jì)一添加素材二添加文本三PC端辦公桌Banner效果四.一.四設(shè)計(jì)Banner二.辦公桌Banner設(shè)計(jì)四添加素材五移動(dòng)端辦公桌Banner效果六跨境端辦公桌Banner效果四.一.四設(shè)計(jì)Banner在設(shè)計(jì)Banner時(shí),可體現(xiàn)辦公收納,多層收納地特點(diǎn),下面制作收納盒PC端,移動(dòng)端與跨境端三種形式地Banner,具體操作如下。三.收納盒Banner設(shè)計(jì)一制作背景二添加投影效果三PC端收納盒Banner效果四.一.四設(shè)計(jì)Banner三.收納盒Banner設(shè)計(jì)四移動(dòng)端收納盒Banner效果五繪制矩形并添加投影效果六跨境端收納盒Banner效果四.一.四設(shè)計(jì)Banner本例提供地網(wǎng)椅為辦公座椅,坐面材質(zhì)為網(wǎng)布+口塑料,外觀為黑色,可旋轉(zhuǎn),可調(diào)節(jié)靠背,具有舒適,透氣地特點(diǎn)。在設(shè)計(jì)Banner時(shí),可通過云朵來營造"舒適"辦公地氛圍。下面制作網(wǎng)椅PC端,移動(dòng)端與跨境端三種形式地Banner,具體操作如下。四.網(wǎng)椅Banner設(shè)計(jì)一繪制云朵制作背景二添加網(wǎng)椅素材四.一.四設(shè)計(jì)Banner四.網(wǎng)椅Banner設(shè)計(jì)三PC端網(wǎng)椅Banner效果五跨境端網(wǎng)椅Banner效果四移動(dòng)端網(wǎng)椅Banner效果四.一.五設(shè)計(jì)主圖在制作第一張圖片時(shí),采用場景圖,利用云朵,圓等圖形搭配文本,整體美觀,文藝范十足,具體操作如下。一.制作PC端筆記本主圖一添加圖片二PC端第一張主圖效果四.一.五設(shè)計(jì)主圖一.制作PC端筆記本主圖三第二～四張主圖效果四.一.五設(shè)計(jì)主圖本例在PC端主圖地基礎(chǔ)上制作移動(dòng)端筆記本地主圖,具體操作如下。二.制作移動(dòng)端筆記本主圖一移動(dòng)端首張主圖效果二第二張主圖效果四.一.五設(shè)計(jì)主圖二.制作移動(dòng)端筆記本主圖三第三張與第四張主圖效果四.一.五設(shè)計(jì)主圖本例主要使用前面相同地方法制作跨境端筆記本主圖,具體操作如下。三.制作跨境端筆記本主圖一跨境端第一張筆記本主圖效果二第二張與第三張主圖效果四.一.五設(shè)計(jì)主圖三.制作跨境端筆記本主圖三制作跨境端其它主圖效果四.一.六設(shè)計(jì)詳情頁在制作PC端筆記本詳情頁時(shí),以褐色與綠色為主色調(diào),利用圓,圓角矩形,自定形狀行圖文混排,不但要體現(xiàn)筆記本賣點(diǎn),筆記本參數(shù),實(shí)拍效果等信息,還需要行焦點(diǎn)圖地制作,具體操作如下。一.制作PC端筆記本詳情頁一焦點(diǎn)圖效果二賣點(diǎn)圖效果四.一.六設(shè)計(jì)詳情頁一.制作PC端筆記本詳情頁三筆記本參數(shù)展示四實(shí)拍展示四.一.六設(shè)計(jì)詳情頁移動(dòng)端筆記本詳情頁在PC端地基礎(chǔ)上行制作,對排版方式行編輯,盡量精減一屏所顯示地內(nèi)容,采用上文下圖地或上圖下文地排版方式,使其便于移動(dòng)端閱讀,最終效果如圖所示。二.制作移動(dòng)端筆記本詳情頁四.一.六設(shè)計(jì)詳情頁跨境端筆記本詳情頁制作地最終效果如圖所示。三.制作跨境端筆記本詳情頁四.一.七舉一反三一.制作跨境端LED日歷Banner本練將制作跨境端LED日歷Banner,在制作時(shí)先繪制Banner背景,再添加LED日歷圖像效果,并在左側(cè)輸入文本內(nèi)容,效果如圖所示。四.一.七舉一反三二.制作移動(dòng)端辦公桌Banner本練將制作移動(dòng)端辦公桌Banner,在制作時(shí)先繪制Banner背景,再輸入文本內(nèi)容,并對文本行編輯,完成后在左側(cè)添加辦公桌素材,效果如圖所示。四.一.七舉一反三三.制作PC端筆記本主圖本練將制作PC端筆記本主圖,先制作主圖背景,再輸入文本內(nèi)容,并對文本行編輯,完成后地部分主圖效果如圖所示。目錄Contents四.一辦公用品類網(wǎng)店設(shè)計(jì)四.二數(shù)碼配件類網(wǎng)店設(shè)計(jì)?四.三手機(jī)配件類網(wǎng)店設(shè)計(jì)?四.二.一數(shù)碼配件類網(wǎng)店設(shè)計(jì)風(fēng)格定位在設(shè)計(jì)該類網(wǎng)店風(fēng)格時(shí),網(wǎng)店顏色可以采用科技感較強(qiáng)地藍(lán)色,黑色,灰色背景來突出展示商品地質(zhì)感,同時(shí)可以利用漸變,線條,發(fā)光效果來渲染科技感,采用地字體比較簡約,修飾少,盡量通過相同系列字體地粗細(xì)搭配來排版文案,并適當(dāng)添加線條,矩形與圓來修飾文本。四.二.二設(shè)計(jì)店標(biāo)本例,提供地店鋪名稱為"Eaget",下面對名稱行美化,并添加"數(shù)碼配件"文說明。針對PC端,移動(dòng)端,跨境端地尺寸與特點(diǎn),分別設(shè)計(jì)對應(yīng)尺寸地店鋪店標(biāo),具體操作如下。一PC端店標(biāo)效果二移動(dòng)端店標(biāo)效果三跨境端店標(biāo)效果四.二.三設(shè)計(jì)店招店招背景地顏色將沿用店標(biāo)背景顏色,然后篩選兩個(gè)數(shù)碼配件商品,以"數(shù)碼配件心"為主題制作移動(dòng)端店招,制作效果如圖所示。四.二.四設(shè)計(jì)Banner一.iPad保護(hù)套Banner設(shè)計(jì)如本例將以"讓破碎不再發(fā)生"為主題,采用深藍(lán)色背景,繪制多種顏色地碎片,制作破碎效果,并為主題文字填充多彩地顏色,使其契合主題,具體操作如下。一PC端iPad保護(hù)套Banner效果四.二.四設(shè)計(jì)Banner一.iPad保護(hù)套Banner設(shè)計(jì)二移動(dòng)端iPad保護(hù)套Banner效果三跨境端iPad保護(hù)套Banner效果四.二.四設(shè)計(jì)Banner二.MacBook轉(zhuǎn)換器Banner設(shè)計(jì)本例重點(diǎn)體現(xiàn)MacBook轉(zhuǎn)換器地功能,以黑色為背景,金色為文本顏色,使用圓點(diǎn)裝飾文本,具體操作如下。一PC端MacBook轉(zhuǎn)換器Banner效果四.二.四設(shè)計(jì)Banner二.MacBook轉(zhuǎn)換器Banner設(shè)計(jì)二移動(dòng)端MacBook轉(zhuǎn)換器Banner效果三跨境端MacBook轉(zhuǎn)換器Banner效果四.二.四設(shè)計(jì)Banner三.USB音響B(tài)anner設(shè)計(jì)本例將以灰色為主色,搭配鮮艷地橙色,明亮地白色,并添加線條,圖案修飾頁面,制作炫酷,高品質(zhì)地USB音響B(tài)anner,具體操作如下。一PC端USB音響B(tài)anner效果四.二.四設(shè)計(jì)Banner三.USB音響B(tài)anner設(shè)計(jì)二移動(dòng)端USB音響B(tài)anner效果三跨境端USB音響B(tài)anner效果四.二.四設(shè)計(jì)Banner四.投影儀Banner設(shè)計(jì)本例將利用深藍(lán)色背景,光暈,膠卷等元素突出觀影氛圍,利用白色,淺藍(lán)色與紅色突出廣告文案,具體操作如下。一PC端投影儀Banner效果四.二.四設(shè)計(jì)Banner四.投影儀Banner設(shè)計(jì)二移動(dòng)端投影儀Banner效果三跨境端投影儀Banner效果四.二.五設(shè)計(jì)主圖本例提供地商品為無線USB鼠標(biāo),在行首張主圖設(shè)計(jì)時(shí),需要體現(xiàn)無線USB鼠標(biāo)便捷地特點(diǎn),其它幾張主圖可以從不同角度展示細(xì)節(jié),顏色等信息。下面將對無線USB鼠標(biāo)不同端口地主圖地制作方法分別行介紹,具體操作如下。一PC端鼠標(biāo)主圖效果二移動(dòng)端鼠標(biāo)主圖效果四.二.五設(shè)計(jì)主圖三跨境端鼠標(biāo)主圖效果四.二.六設(shè)計(jì)詳情頁一.制作PC端鼠標(biāo)詳情頁在制作PC端鼠標(biāo)詳情頁時(shí),以藍(lán)色為主色調(diào),搭配白色,灰色,利用直線邊形狀分割版面行圖文混排,不但要體現(xiàn)鼠標(biāo)賣點(diǎn),參數(shù),細(xì)節(jié),實(shí)拍效果等信息,還需要行焦點(diǎn)圖地制作,具體操作如下。一焦點(diǎn)圖效果三賣點(diǎn)圖二效果四鼠標(biāo)參數(shù)效果二賣點(diǎn)圖一效果四.二.六設(shè)計(jì)詳情頁五鼠標(biāo)細(xì)節(jié)效果六鼠標(biāo)實(shí)拍效果一.制作PC端鼠標(biāo)詳情頁四.二.六設(shè)計(jì)詳情頁二.制作移動(dòng)端鼠標(biāo)詳情頁在制作PC端鼠標(biāo)詳情頁時(shí),以藍(lán)色為主色調(diào),搭配白色,灰色,利用直線邊形狀分割版面行圖文混排,不但要體現(xiàn)鼠標(biāo)賣點(diǎn),參數(shù),細(xì)節(jié),實(shí)拍效果等信息,還需要行焦點(diǎn)圖地制作,效果如圖所示。四.二.六設(shè)計(jì)詳情頁三.制作跨境端鼠標(biāo)詳情頁跨境端鼠標(biāo)詳情頁地尺寸要求與PC端相同,在制作時(shí)除了將文轉(zhuǎn)換為英文外,還可對圖片,文本行簡單排版,便于更加美觀地展示商品,效果如圖所示。四.二.七舉一反三一.制作跨境端店鋪iPad保護(hù)套Banner本練將制作iPad保護(hù)套Banner,在制作時(shí)先繪制Banner背景,再繪制圓,添加不同顏色地iPad保護(hù)套圖像效果,并在上方輸入文本內(nèi)容,效果如圖所示。四.二.七舉一反三二.制作移動(dòng)端USB音響B(tài)anner本練將制作移動(dòng)端USB音響B(tài)anner,在制作時(shí)先繪制Banner背景,再在上方輸入文本內(nèi)容,并對文本行編輯,完成后在下方添加音樂圖標(biāo)與USB音響素材,效果如圖所示。四.二.七舉一反三三.制作PC端鼠標(biāo)主圖本練將制作PC端鼠標(biāo)主圖,先制作主圖背景,再添加鼠標(biāo)素材,然后繪制形狀,輸入促銷文本內(nèi)容,并對文本行編輯,最后添加店標(biāo)到左上角,完成后地部分鼠標(biāo)主圖效果如圖所示。目錄Contents四.一辦公用品類網(wǎng)店設(shè)計(jì)四.二數(shù)碼配件類網(wǎng)店設(shè)計(jì)?四.三手機(jī)配件類網(wǎng)店設(shè)計(jì)?四.三.一手機(jī)配件類網(wǎng)店設(shè)計(jì)風(fēng)格定位商品外觀如圖所示。在設(shè)計(jì)該類網(wǎng)店時(shí),網(wǎng)店顏色可以采用科技感較強(qiáng)地深藍(lán)色,黑色,灰色背景來突出展示商品地質(zhì)感,同時(shí)可以利用漸變,線條,發(fā)光效果來渲配件地科技感,采用地字體比較簡約,修飾少,盡量通過相同系列地字體地粗細(xì)搭配來排版文案,并適當(dāng)添加線條,矩形與圓來裝飾文本。四.三.二設(shè)計(jì)店標(biāo)本例,提供地店鋪名稱為"Neptux",下面對名稱行美化,并添加"手機(jī)配件"文說明,來體現(xiàn)店鋪售賣地商品地類型,并針對PC端,移動(dòng)端,跨境端地尺寸與特點(diǎn),分別設(shè)計(jì)對應(yīng)尺寸地店鋪店標(biāo),具體操作如下。一PC端店標(biāo)效果二移動(dòng)端店標(biāo)效果三跨境端店標(biāo)效果四.三.三設(shè)計(jì)店招店招背景地顏色將采用與店標(biāo)背景相似地顏色,然后篩選兩個(gè)手機(jī)配件商品,以"手機(jī)配件專營店"為主題制作移動(dòng)端店招,效果如圖所示。四.三.四設(shè)計(jì)Banner本例將以"釋放音樂原聲""隨時(shí)隨地享受音樂"為主題,采用黑色背景,搭配深藍(lán)色形狀,制作具有層次感地耳機(jī)Banner背景,突出耳機(jī)音質(zhì)地逼真,高質(zhì)量,具體操作如下。一PC端耳機(jī)Banner效果一.耳機(jī)Banner設(shè)計(jì)四.三.四設(shè)計(jì)Banner二移動(dòng)端耳機(jī)Banner效果一.耳機(jī)Banner設(shè)計(jì)三移動(dòng)端耳機(jī)Banner效果四.三.四設(shè)計(jì)Banner在設(shè)計(jì)Banner時(shí),可突出"翻蓋"特點(diǎn),展示該手機(jī)地多種色彩,同時(shí)可以擴(kuò)展手機(jī)圖像地黑色背景,便于覆蓋Banner背景,添加Banner文案,具體操作如下。一PC端手機(jī)Banner效果二.手機(jī)Banner設(shè)計(jì)四.三.四設(shè)計(jì)Banner二移動(dòng)端手機(jī)Banner效果二.手機(jī)Banner設(shè)計(jì)三跨境端手機(jī)Banner效果四.三.四設(shè)計(jì)Banner如本例將以"完美超越,閃電充電"為賣點(diǎn),采用深藍(lán)色背景突出科技感。下面將制作數(shù)據(jù)線PC端,移動(dòng)端與跨境端三種形式地Banner,具體操作如下。一PC端數(shù)據(jù)線Banner效果三.數(shù)據(jù)線Banner設(shè)計(jì)四.三.四設(shè)計(jì)Banner二移動(dòng)端數(shù)據(jù)線Banner效果三跨境端數(shù)據(jù)線Banner效果三.數(shù)據(jù)線Banner設(shè)計(jì)四.三.四設(shè)計(jì)Banner本例將以"充電,就是這么簡單"為主題,采用清新地綠色背景,利用圓潤地字體,并裁剪無線充電板圖片為圓形,制作風(fēng)格獨(dú)特地?zé)o線充電板Banner,具體操作如下。一PC端無線充電板Banner效果四.無線充電板Banner設(shè)計(jì)四.三.四設(shè)計(jì)Banner二移動(dòng)端無線充電板Banner效果三跨境端無線充電板Banner效果四.無線充電板Banner設(shè)計(jì)四.三.五設(shè)計(jì)主圖本例提供地商品為手機(jī)殼,在行首張主圖設(shè)計(jì)時(shí),需要體現(xiàn)手機(jī)殼薄,透,防護(hù)好等特點(diǎn),其它幾張主圖可以從不同角度,顏色等方面展示手機(jī)殼地信息,具體操作如下。一PC端手機(jī)殼主圖效果四.三.五設(shè)計(jì)主圖二移動(dòng)端手機(jī)殼主圖效果四.三.五設(shè)計(jì)主圖三跨境端手機(jī)殼主圖效果四.三.六設(shè)計(jì)詳情頁以黑白色為主色調(diào),行圖文混排,首先制作焦點(diǎn)海報(bào),輸入宣傳語,再依次對商品賣點(diǎn),參數(shù),顏色等信息行詳細(xì)展現(xiàn),具體操作如