电商视觉营销：网店首页设计PPT教学课件.pptx

网店首页设计项目三

YCF01网店Logo设计03店招设计02店标设计目录CATALOG04导航设计05焦点图设计06页尾模块设计

思政课堂一家经营“国货”的品牌店主营业务产品是汉服。在“双11”大促即将到来之际，请你为该网店的首页进行设计，使其突出“国货”这个重点，以弘扬中华文化，体现出汉服的美，达到吸引广大客户的目的。请将你的想法写在下面，并将设计图交给教师。

网店的首页设计是电子商务行业的热门话题，关于网店装修的意义和目标，设计者一直存在不同的观点。然而不论是实体店还是网店，其作为一个营销的平台，装修的核心是促进销售。网店首页整体布局如图所示。项目导读

01掌握Logo的设计方法。02掌握店招的设计方法。学习目标03掌握焦点图的设计方法。04能够为网店设计静态店标与动态店标。05能够为网店设计导航条。

01网店Logo设计一、Logo的设计要领二、Logo的设计步骤三、Logo的排设位置

一、Logo的设计要领便于识别，以简为美Logo要与网店或者商品有关Logo设计要便于运用010203

一、Logo的设计要领一个优秀的Logo必须遵循“便于识别，以简为美”的原则，因为最简单的方案往往能让消费者记住，而且在简单的同时要把握一个“美”字。只有将这两点完美地结合，设计出来的Logo才算是优秀的Logo，如图所示。1.便于识别，以简为美

一、Logo的设计要领Logo应该符合它所代表的商业形象，应该与行业或者面向的受众人群有关。例如，银行的Logo往往与古代的钱币有关，如图所示。2.Logo要与网店或者商品有关

一、Logo的设计要领除此以外，如果网店经营具有一定知名度的品牌商品，则可以结合品牌的Logo来设计网店Logo。百雀羚的网店Logo如图所示。2.Logo要与网店或者商品有关

一、Logo的设计要领理想的Logo设计是在大小为80像素×80像素、分辨率为72像素/英寸的图片上能够清晰地展示其网店的品牌和特征。如图所示。3.Logo设计要便于运用商品图片无论在哪种图片中，网店的Logo都应尽量保持位置、颜色及布局不变，在统一的视觉传达中实现品牌的标准化和整体感。提示

二、Logo的设计步骤在设计Logo的过程中，可以把销售品牌的信息融入其中。本例将设计一个咖啡铺子Logo（如图），该Logo是图文结合型，设计时可以借用Photoshop工具（本书以Photoshop为例）做出相应的图片。具体操作步骤如下。

二、Logo的设计步骤步骤1：打开Photoshop软件，新建大小为150像素×70像素、分辨率为72像素/英寸、名称为“coffee-logo”的文件，如图所示。

二、Logo的设计步骤步骤2：新建图层“图层1”，选择“钢笔工具”，在图层中绘制一个咖啡杯形状的路径，在绘制的过程中按住Ctrl键，通过改变锚点位置或者利用控制柄调整曲线，如图所示。

二、Logo的设计步骤步骤3：设置前景色RGB为“33/13/14”、背景色RGB为“187/124/119”；在“图层”面板中复制“图层1”，生成“图层2”；在“路径”面板中右击“路径1”，在弹出的快捷菜单中选择“填充路径”选项，如图所示；打开“填充路径”对话框，单击“确定”按钮，完成填充路径操作。

二、Logo的设计步骤步骤4：在“图层”面板中复制“图层1”，生成“图层3”；单击“图层”面板中“图层1”“图层2”前的按钮，将图层设置为不可见，如图所示。

二、Logo的设计步骤步骤5：选择“钢笔工具”，在图层中绘制一个底部有咖啡液体的路径，在绘制的过程中按住Ctrl键改变锚点位置或者利用控制柄调整曲线，绘制效果如图所示。

二、Logo的设计步骤步骤6：切换至“路径”面板，在“路径1”上右击，在弹出的快捷菜单中选择“建立选区”选项；切换至“图层”面板，填充颜色为背景色，按Ctrl+D组合键确定选区，如图所示。

二、Logo的设计步骤步骤7：选择“椭圆绘制工具”绘制杯顶咖啡选区，填充背景色，按Ctrl+D组合键确定选区；单击“图层”面板中“图层1”“图层2”前的按钮，设置图层为可见，效果如图所示。

二、Logo的设计步骤步骤8：选择“横排文字工具”，输入文字“coffee”和“语思”，设置“coffee”文字颜色RGB为“33/13/14”，“语思”文字颜色RGB为“105/51/54”，字体的格式设置如图所示。

二、Logo的设计步骤步骤9：选择“移动工具”，拖动文字并将其放置在适当位置，至此完成Logo的设计，效果如图所示。步骤10：保存文件。一般将Logo保存为PNG格式。执行“文件”→“存储为”命令，存储类型为PNG的图片，保存文件。

三、Logo的排设位置1.Logo排设的作用将设计好的Logo添加到主图和详情页中，不但能避免图片被盗用，而且能加深买家对网店商品的