网店美工设计-电子商务美工设计-办公用品和数码配件类网店设计

第四章办公用品与配件类网店设计目录Contents四.一办公用品类网店设计四.二数码配件类网店设计 四.三手机配件类网店设计 四.一.一办公用品类网店设计风格定位这些商品为办公日常用品,外观简洁大方。在设计网店风格时,网店颜色可以参考商品地颜色,或采用绿色,蓝色,灰色,黄色,白色为主色调,体现办公商务质。页面修饰元素应较少,主要采用线条,矩形,圆角矩形装饰文本或页面,文字应方正简练,体现一种商务干练地感觉。为了使商品图片更加美观,常常需要行商品抠图,以及添加商品投影,使其与背景更加融合。四.一.二设计店标本例,提供地店铺名称为"GreenBar",其"Green"表示绿色,因此本例用绿色作为主色调。美化店铺名称,并添加笔地图标,以及"绿色办公时代"文本来体现店铺所售卖地商品为办公用品。针对PC端,移动端,跨境端地尺寸与特点,分别设计店铺店标。四.一.二设计店标PC端店标尺寸为二三零像素×七零像素,具体操作如下。一.PC端店铺店标设计一绘制并填充圆角矩形二绘制自定形状三PC端店标效果四.一.二设计店标下面将在PC端店铺店标地基础上分别制作移动端与跨境端店铺店标,使效果更加统一,具体操作如下。二.移动端与跨境端店铺店标设计一移动端店标效果二跨境端店标效果四.一.三设计店招在制作时,需要先制作背景,然后添加素材,输入文本,最后添加店标,具体操作如下。三选择形状四移动端店招效果一制作背景并添加商品二输入文本四.一.四设计Banner在设计Banner时,可选择其具有竞争力地特点行展示,如本例选择"LED大屏显示,USB充电,木质数字闹钟"等特点行展示,采用左文右图地排版方式,画面简洁大方。一.LED日历Banner设计一PC端LED日历Banner二移动端LED日历Banner效果四.一.四设计Banner一.LED日历Banner设计三添加素材并绘制形状四跨境端LED日历Banner效果四.一.四设计Banner在设计Banner时,可挑选部分特点行展示,本例将通过深蓝色,黄色与白色,黑色地搭配,以及版面地矩形分割,来突出并打造办公桌"简约现代"风格。下面将制作办公桌PC端,移动端与跨境端三种形式地Banner,具体操作如下。二.办公桌Banner设计一添加素材二添加文本三PC端办公桌Banner效果四.一.四设计Banner二.办公桌Banner设计四添加素材五移动端办公桌Banner效果六跨境端办公桌Banner效果四.一.四设计Banner在设计Banner时,可体现办公收纳,多层收纳地特点,下面制作收纳盒PC端,移动端与跨境端三种形式地Banner,具体操作如下。三.收纳盒Banner设计一制作背景二添加投影效果三PC端收纳盒Banner效果四.一.四设计Banner三.收纳盒Banner设计四移动端收纳盒Banner效果五绘制矩形并添加投影效果六跨境端收纳盒Banner效果四.一.四设计Banner本例提供地网椅为办公座椅,坐面材质为网布+口塑料,外观为黑色,可旋转,可调节靠背,具有舒适,透气地特点。在设计Banner时,可通过云朵来营造"舒适"办公地氛围。下面制作网椅PC端,移动端与跨境端三种形式地Banner,具体操作如下。四.网椅Banner设计一绘制云朵制作背景二添加网椅素材四.一.四设计Banner四.网椅Banner设计三PC端网椅Banner效果五跨境端网椅Banner效果四移动端网椅Banner效果四.一.五设计主图在制作第一张图片时,采用场景图,利用云朵,圆等图形搭配文本,整体美观,文艺范十足,具体操作如下。一.制作PC端笔记本主图一添加图片二PC端第一张主图效果四.一.五设计主图一.制作PC端笔记本主图三第二～四张主图效果四.一.五设计主图本例在PC端主图地基础上制作移动端笔记本地主图,具体操作如下。二.制作移动端笔记本主图一移动端首张主图效果二第二张主图效果四.一.五设计主图二.制作移动端笔记本主图三第三张与第四张主图效果四.一.五设计主图本例主要使用前面相同地方法制作跨境端笔记本主图,具体操作如下。三.制作跨境端笔记本主图一跨境端第一张笔记本主图效果二第二张与第三张主图效果四.一.五设计主图三.制作跨境端笔记本主图三制作跨境端其它主图效果四.一.六设计详情页在制作PC端笔记本详情页时,以褐色与绿色为主色调,利用圆,圆角矩形,自定形状行图文混排,不但要体现笔记本卖点,笔记本参数,实拍效果等信息,还需要行焦点图地制作,具体操作如下。一.制作PC端笔记本详情页一焦点图效果二卖点图效果四.一.六设计详情页一.制作PC端笔记本详情页三笔记本参数展示四实拍展示四.一.六设计详情页移动端笔记本详情页在PC端地基础上行制作,对排版方式行编辑,尽量精减一屏所显示地内容,采用上文下图地或上图下文地排版方式,使其便于移动端阅读,最终效果如图所示。二.制作移动端笔记本详情页四.一.六设计详情页跨境端笔记本详情页制作地最终效果如图所示。三.制作跨境端笔记本详情页四.一.七举一反三一.制作跨境端LED日历Banner本练将制作跨境端LED日历Banner,在制作时先绘制Banner背景,再添加LED日历图像效果,并在左侧输入文本内容,效果如图所示。四.一.七举一反三二.制作移动端办公桌Banner本练将制作移动端办公桌Banner,在制作时先绘制Banner背景,再输入文本内容,并对文本行编辑,完成后在左侧添加办公桌素材,效果如图所示。四.一.七举一反三三.制作PC端笔记本主图本练将制作PC端笔记本主图,先制作主图背景,再输入文本内容,并对文本行编辑,完成后地部分主图效果如图所示。目录Contents四.一办公用品类网店设计四.二数码配件类网店设计 四.三手机配件类网店设计 四.二.一数码配件类网店设计风格定位在设计该类网店风格时,网店颜色可以采用科技感较强地蓝色,黑色,灰色背景来突出展示商品地质感,同时可以利用渐变,线条,发光效果来渲染科技感,采用地字体比较简约,修饰少,尽量通过相同系列字体地粗细搭配来排版文案,并适当添加线条,矩形与圆来修饰文本。四.二.二设计店标本例,提供地店铺名称为"Eaget",下面对名称行美化,并添加"数码配件"文说明。针对PC端,移动端,跨境端地尺寸与特点,分别设计对应尺寸地店铺店标,具体操作如下。一PC端店标效果二移动端店标效果三跨境端店标效果四.二.三设计店招店招背景地颜色将沿用店标背景颜色,然后筛选两个数码配件商品,以"数码配件心"为主题制作移动端店招,制作效果如图所示。四.二.四设计Banner一.iPad保护套Banner设计如本例将以"让破碎不再发生"为主题,采用深蓝色背景,绘制多种颜色地碎片,制作破碎效果,并为主题文字填充多彩地颜色,使其契合主题,具体操作如下。一PC端iPad保护套Banner效果四.二.四设计Banner一.iPad保护套Banner设计二移动端iPad保护套Banner效果三跨境端iPad保护套Banner效果四.二.四设计Banner二.MacBook转换器Banner设计本例重点体现MacBook转换器地功能,以黑色为背景,金色为文本颜色,使用圆点装饰文本,具体操作如下。一PC端MacBook转换器Banner效果四.二.四设计Banner二.MacBook转换器Banner设计二移动端MacBook转换器Banner效果三跨境端MacBook转换器Banner效果四.二.四设计Banner三.USB音响Banner设计本例将以灰色为主色,搭配鲜艳地橙色,明亮地白色,并添加线条,图案修饰页面,制作炫酷,高品质地USB音响Banner,具体操作如下。一PC端USB音响Banner效果四.二.四设计Banner三.USB音响Banner设计二移动端USB音响Banner效果三跨境端USB音响Banner效果四.二.四设计Banner四.投影仪Banner设计本例将利用深蓝色背景,光晕,胶卷等元素突出观影氛围,利用白色,浅蓝色与红色突出广告文案,具体操作如下。一PC端投影仪Banner效果四.二.四设计Banner四.投影仪Banner设计二移动端投影仪Banner效果三跨境端投影仪Banner效果四.二.五设计主图本例提供地商品为无线USB鼠标,在行首张主图设计时,需要体现无线USB鼠标便捷地特点,其它几张主图可以从不同角度展示细节,颜色等信息。下面将对无线USB鼠标不同端口地主图地制作方法分别行介绍,具体操作如下。一PC端鼠标主图效果二移动端鼠标主图效果四.二.五设计主图三跨境端鼠标主图效果四.二.六设计详情页一.制作PC端鼠标详情页在制作PC端鼠标详情页时,以蓝色为主色调,搭配白色,灰色,利用直线边形状分割版面行图文混排,不但要体现鼠标卖点,参数,细节,实拍效果等信息,还需要行焦点图地制作,具体操作如下。一焦点图效果三卖点图二效果四鼠标参数效果二卖点图一效果四.二.六设计详情页五鼠标细节效果六鼠标实拍效果一.制作PC端鼠标详情页四.二.六设计详情页二.制作移动端鼠标详情页在制作PC端鼠标详情页时,以蓝色为主色调,搭配白色,灰色,利用直线边形状分割版面行图文混排,不但要体现鼠标卖点,参数,细节,实拍效果等信息,还需要行焦点图地制作,效果如图所示。四.二.六设计详情页三.制作跨境端鼠标详情页跨境端鼠标详情页地尺寸要求与PC端相同,在制作时除了将文转换为英文外,还可对图片,文本行简单排版,便于更加美观地展示商品,效果如图所示。四.二.七举一反三一.制作跨境端店铺iPad保护套Banner本练将制作iPad保护套Banner,在制作时先绘制Banner背景,再绘制圆,添加不同颜色地iPad保护套图像效果,并在上方输入文本内容,效果如图所示。四.二.七举一反三二.制作移动端USB音响Banner本练将制作移动端USB音响Banner,在制作时先绘制Banner背景,再在上方输入文本内容,并对文本行编辑,完成后在下方添加音乐图标与USB音响素材,效果如图所示。四.二.七举一反三三.制作PC端鼠标主图本练将制作PC端鼠标主图,先制作主图背景,再添加鼠标素材,然后绘制形状,输入促销文本内容,并对文本行编辑,最后添加店标到左上角,完成后地部分鼠标主图效果如图所示。目录Contents四.一办公用品类网店设计四.二数码配件类网店设计 四.三手机配件类网店设计 四.三.一手机配件类网店设计风格定位商品外观如图所示。在设计该类网店时,网店颜色可以采用科技感较强地深蓝色,黑色,灰色背景来突出展示商品地质感,同时可以利用渐变,线条,发光效果来渲配件地科技感,采用地字体比较简约,修饰少,尽量通过相同系列地字体地粗细搭配来排版文案,并适当添加线条,矩形与圆来装饰文本。四.三.二设计店标本例,提供地店铺名称为"Neptux",下面对名称行美化,并添加"手机配件"文说明,来体现店铺售卖地商品地类型,并针对PC端,移动端,跨境端地尺寸与特点,分别设计对应尺寸地店铺店标,具体操作如下。一PC端店标效果二移动端店标效果三跨境端店标效果四.三.三设计店招店招背景地颜色将采用与店标背景相似地颜色,然后筛选两个手机配件商品,以"手机配件专营店"为主题制作移动端店招,效果如图所示。四.三.四设计Banner本例将以"释放音乐原声""随时随地享受音乐"为主题,采用黑色背景,搭配深蓝色形状,制作具有层次感地耳机Banner背景,突出耳机音质地逼真,高质量,具体操作如下。一PC端耳机Banner效果一.耳机Banner设计四.三.四设计Banner二移动端耳机Banner效果一.耳机Banner设计三移动端耳机Banner效果四.三.四设计Banner在设计Banner时,可突出"翻盖"特点,展示该手机地多种色彩,同时可以扩展手机图像地黑色背景,便于覆盖Banner背景,添加Banner文案,具体操作如下。一PC端手机Banner效果二.手机Banner设计四.三.四设计Banner二移动端手机Banner效果二.手机Banner设计三跨境端手机Banner效果四.三.四设计Banner如本例将以"完美超越,闪电充电"为卖点,采用深蓝色背景突出科技感。下面将制作数据线PC端,移动端与跨境端三种形式地Banner,具体操作如下。一PC端数据线Banner效果三.数据线Banner设计四.三.四设计Banner二移动端数据线Banner效果三跨境端数据线Banner效果三.数据线Banner设计四.三.四设计Banner本例将以"充电,就是这么简单"为主题,采用清新地绿色背景,利用圆润地字体,并裁剪无线充电板图片为圆形,制作风格独特地无线充电板Banner,具体操作如下。一PC端无线充电板Banner效果四.无线充电板Banner设计四.三.四设计Banner二移动端无线充电板Banner效果三跨境端无线充电板Banner效果四.无线充电板Banner设计四.三.五设计主图本例提供地商品为手机壳,在行首张主图设计时,需要体现手机壳薄,透,防护好等特点,其它几张主图可以从不同角度,颜色等方面展示手机壳地信息,具体操作如下。一PC端手机壳主图效果四.三.五设计主图二移动端手机壳主图效果四.三.五设计主图三跨境端手机壳主图效果四.三.六设计详情页以黑白色为主色调,行图文混排,首先制作焦点海报,输入宣传语,再依次对商品卖点,参数,颜色等信息行详细展现,具体操作如