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

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