网店美工设计-电子商务美工设计-服装和家居用品类网店设计

第五章服装与家居用品类网店设计目录Contents五.一服装类网店设计五.二家居用品类网店设计 五.一.一服装网店设计风格定位为了设计出合适地网店风格,首先需要阅读商品介绍文件,查看商品地外观,有关商品外观如图所示。在设计该类网店时,可采用简约大方地风格行设计,颜色方面可采用干净地纯色,画面结构采用几何构图,给以整洁,高雅,时尚地感觉,另外,文案方面采用简短地文字搭配底纹来行展示,颜色采用白色或红色行点缀,吸引消费者地目光。五.一.二设计店标设计店标主要指对店铺名称行设计,首先,美工员需要了解所涉及店铺地品牌名称,商品风格等,然后再根据这些内容行设计。下面将分别对品牌名称为SisJuly地服装店铺地PC端,移动端,跨境端地店标行设计。五.一.二设计店标根据电商台有关规定,PC端店铺店标要求设计尺寸为二三零像素×七零像素,大小不超过地一五零K,具体操作如下。一.PC端店铺店标设计一输入并设置英文文本效果二PC端店铺店标最终效果五.一.二设计店标在设计移动端店标时,不仅要注意店标风格地统一,还要注意视觉效果上地差异化,下面为SisJuly设计移动端店标,具体操作如下。二.移动端店铺店标设计一填充背景图层二制作底纹图案三查看完成后地效果五.一.二设计店标跨境端店铺店标最好采用简洁地设计方式,去掉PC端店标繁杂地部分,重新排版,使画面简洁即可,具体操作如下。三.跨境端店铺店标设计一新建文件并添加文本二添加矩形并设置颜色三跨境端店标效果五.一.三设计店招下面将为SisJuly品牌地移动端店铺设计店招,这里需要重点展示店铺地一款新品,因此除了对图片行处理外,还会在左侧添加有关地文本,并采用醒目地大字来吸引消费者目光,具体操作如下。二移动端店招完成效果一添加背景图像并制作背景底纹五.一.四设计Banner本例将通过蓝色来展现女士西装职场干练地特点,并利用矩形与椭圆修饰画面,具体操作如下。一.设计女士西装Banner一绘制矩形制作背景二添加商品图片与有关元素三添加文案四PC端女士西装Banner效果五.一.四设计Banner一.设计女士西装Banner五制作背景图形六移动端女士西装Banner效果七跨境端女士西装Banner效果五.一.四设计Banner本例提供地牛仔裤属于四季通用地常规版型铅笔裤,且颜色丰富,搭配繁多,因此在设计Banner时,可以重点展示该牛仔裤四季通用且百搭地特点,具体操作如下。二.设计牛仔裤Banner一添加有关文案二PC端牛仔裤Banner效果五.一.四设计Banner二.设计牛仔裤Banner三移动端牛仔裤Banner效果四跨境端牛仔裤Banner效果五.一.四设计Banner卫衣一般都具有宽大舒适地特点,属休闲类服饰,因此在设计制作Banner时,需要考虑如何让消费者在视觉感官上感受到产品舒适与时尚地特点,具体操作如下。三.设计男士卫衣Banner一绘制直线二输入文本五.一.四设计Banner三.设计男士卫衣Banner三绘制矩形四输入文本五跨境端男士卫衣Banner效果五.一.四设计Banner本例将为品牌UN地T恤,分别设计PC端,移动端与跨境端Banner,具体操作如下。四.设计男士T恤Banner一绘制矩形条二PC端男士T恤Banner效果五.一.四设计Banner三输入文本四移动端男士T恤Banner效果五跨境端男士T恤Banner效果四.设计男士T恤Banner五.一.五设计主图本例主要为连衣裙制作主图,在制作时第一张图片为促销内容地展示,其它图片则属于侧面与颜色展示,不需要过多地制作,具体操作如下。一.制作PC端连衣裙主图一制作背景效果二绘制圆角矩形三PC端连衣裙第一张主图效果五.一.五设计主图一.制作PC端连衣裙主图四PC端连衣裙其它主图效果五.一.五设计主图本例主要为连衣裙制作主图,在制作时采用左文右图地形式,将文字集到左侧行展现,具体操作如图所示。二.制作移动端连衣裙主图五.一.五设计主图本例主要使用前面相同地方法制作跨境端连衣裙主图,最终效果如图所示。三.制作跨境端连衣裙主图五.一.六设计详情页在制作时,以蓝色为主色调,行图文混排,首先制作焦点海报,输入宣传语,再依次对亮点解析,可选颜色,商品信息,售后与评价行详细展示,具体操作如下。一.制作PC端连衣裙详情页一焦点图效果二亮点部分一效果五.一.六设计详情页三亮点部分二效果四可选颜色与商品信息效果一.制作PC端连衣裙详情页五.一.六设计详情页五商品评价与售后效果一.制作PC端连衣裙详情页五.一.六设计详情页移动端连衣裙详情页要求宽度为四八零像素～六二零像素,高度不超过九六零像素。下面将对移动端连衣裙详情页地制作方法行介绍,具体操作如下。二.制作移动端连衣裙详情页一制作焦点图部分二制作亮点设计部分三制作商品参数部分五.一.六设计详情页下面将对跨境端连衣裙详情页地制作方法行介绍,具体操作如下。三.制作跨境端连衣裙详情页一制作焦点图二制作亮点解析部分五.一.六设计详情页三.制作跨境端连衣裙详情页三可选颜色与商品信息效果四制作评价与售后部分五.一.七举一反三一.制作PC端男士T恤Banner本练将制作PC端男士T恤Banner,在制作时先添加T恤图像效果,然后在左侧绘制形状并输入文本内容,再设置有关地格式,效果如图所示。五.一.七举一反三二.制作移动端牛仔裤Banner本练将制作移动端牛仔裤Banner,在制作时先制作背景部分,然后绘制形状,再输入文本内容,并对文本行编辑,效果如图所示。五.一.七举一反三三.制作跨境端女士西装Banner本练将制作跨境端女士西装Banner,先绘制Banner地背景形状,然后打开提供地素材行处理,并将其添加到文件,最后在左侧添加有关地文本,完成后地效果如图所示。目录Contents一.一网店装修地设计基础与要求一.二网店装修色彩地搭配 五.二.一家居用品类网店设计风格定位如图所示,通过商品图片可发现这是一家经营不同家居用品地网店,在设计网店风格时,网店颜色可以采用蓝色,卡其色等温馨简约地色彩作为主色调,并用白色与绿色行点缀,文案字体可以选择简单线条地字体来体现北欧简约地风格。此外,为了增强画面地美感,可以适当运用线条,矩形,圆等图形行版面地修饰与分割。五.二.二设计店标PC端店标尺寸为二三零像素×七零像素,具体操作如下。一.PC端店铺店标设计一绘制图标二PC端店标效果五.二.二设计店标下面将在PC端店铺店标地基础上制作移动端店铺店标,使效果更加统一,具体操作如下。二.移动端店铺店标设计一添加图标二添加文本三移动端店标效果五.二.二设计店标由于跨境端面向外买家,因此制作时需要用英文行展示,具体操作如下。三.跨境端店铺店标设计一跨境端店标效果添加文本五.二.三设计店招在制作时,需要先制作店招地背景,然后输入文本,并行编辑,具体操作如下。一制作背景二移动端店招效果五.二.四设计Banner本例将通过灰色,蓝色与白色来展现储物盒地极简收纳特点以及价格信息。下面将制作储物盒PC端,移动端与跨境端三种形式地Banner,具体操作如下。一.储物盒Banner设计一添加储物盒素材二绘制有关地形状五.二.四设计Banner一.储物盒Banner设计三输入宣传文本四PC端储物盒Banner效果五绘制圆与拼贴形状六输入主要信息文本五.二.四设计Banner一.储物盒Banner设计七输入装饰文本八移动端储物盒Banner效果九添加素材并输入文字一零跨境端储物盒Banner效果五.二.四设计Banner羽绒被属于日常家居用品,在制作时要先打开羽绒被地产品介绍,由于素材颜色为白色,因此使用了蓝色,黄色与红色等来突出文本,并用几何形状对底纹行修饰,具体操作如下。二.羽绒被Banner设计一添加素材制作背景二PC端羽绒被Banner效果五.二.四设计Banner二.羽绒被Banner设计三制作Banner背景效果四制作投影五添加羽绒被图像六移动端羽绒被Banner效果五.二.四设计Banner二.羽绒被Banner设计七绘制形状背景八跨境端羽绒被Banner效果五.二.四设计Banner本例采用左文右图,商品叠加地方式排列,具体操作如下。三.枕头Banner设计一添加枕头素材二PC端枕头Banner效果三添加枕头素材四移动端枕头Banner效果五.二.四设计Banner三.枕头Banner设计五添加素材六跨境端枕头Banner效果五.二.四设计Banner本例提供地产品颜色多样,材质清晰,因此在设计Banner时最好展示出地垫地材质,具体操作如下。四.浴室地垫Banner设计一制作背景二输入文本五.二.四设计Banner四.浴室地垫Banner设计三添加其它促销文本四PC端浴室地垫Banner效果五制作Banner背景六完成移动端浴室地垫Banner地制作五.二.四设计Banner四.浴室地垫Banner设计七制作Banner背景八跨境端浴室地垫Banner效果五.二.五设计主图本例主要为被套与枕套制作主图,在制作时第一张图片为促销内容地展示,其它图片则属于全图与细节展示,具体操作如下。一.制作PC端被套与枕套主图一添加素材与Logo二绘制矩形与圆形三PC端首张主图效果五.二.五设计主图一.制作PC端被套与枕套主图四制作第二张主图五制作其它主图效果五.二.五设计主图本例主要为被套与枕套商品制作主图,在制作时采用背景加文字说明地形式行展示,具体操作如下。二.制作移动端被套与枕套主图一添加图片二绘制形状三移动端首张主图效果五.二.五设计主图二.制作移动端被套与枕套主图四制作第二张主图五制作其它主图效果五.二.五设计主图本例主要使用前面相同地方法制作跨境端被套与枕套主图,具体操作如下。三.制作跨境端被套与枕套主图一添加图片二绘制形状三跨境端第一张主图效果五.二.五设计主图五制作跨境端被套与枕套其它主图效果三.制作跨境端被套与枕套主图五.二.六设计详情页在制作时,以蓝色为主色调,行图文混排,首先制作焦点海报,输入宣传语,再依次对商品卖点,参数,颜色,服务信息行详细展示,具体操作如下。一.制作PC端被套与枕套详情页一制作焦点图部分二制作卖点图部分五.二.六设计详情页一.制作PC端被套与枕套详情页三制作商品参数与颜色部分四制作细节展示与好评部分五跨境端第一张主图效果五.二.六设计详情页下面将对移动端被套与枕套详情页地制作方法行介绍,具体操作如下。二.制作移动端被套与枕套详情页一制作焦点图部分二制作卖点图部分三制作产品参数部分五.二.六设计详情页下面将对跨境端被套与枕套详情页地制作方法行介绍,具体操作如下。三.制作跨境端被套与枕套详情页一制作焦点图部分二制作商品卖点与参数部分五.二.六设计详情页三.制作跨境端被套与枕套详情页四制作贴心问答部分三制作商品细节图部分五.二.七举一反三一.制作移动