资源简介

(共23张PPT)
网店首页设计
项目三
YCF
01
网店Logo设计
03
店招设计
02
店标设计
目录
CATALOG
04
导航设计
05
焦点图设计
06
页尾模块设计
思政课堂
一家经营“国货”的品牌店主营业务产品是汉服。在“双11”大促即将到来之际，请你为该网店的首页进行设计，使其突出“国
货”这个重点，以弘扬中华文化，体现出汉服的美，达到吸引广大
客户的目的。请将你的想法写在下面，并将设计图交给教师。
网店的首页设计是电子商务行业的热门话题，关于网店装修的意义和目标，设计者一直存在不同的观点。然而不论是实体店还是网店，其作为一个营销的平台，装修的核心是促进销售。网店首页整体布局如图所示。
项目导读
01
掌握Logo的设计方法。
02
掌握店招的设计方法。
学习目标
03
掌握焦点图的设计方法。
04
能够为网店设计静态店标与动态店标。
05
能够为网店设计导航条。
02
店标设计
一、店标的分类
二、静态店标的设计
三、动态店标的设计
一、店标的分类
01
02
03
04
中文文字型店标
非中文型店标
图形型店标
图文结合型店标
一、店标的分类
中文文字型店标主要由文字单独构成，适用于多种传播方式，最大的优点是能让人一目了然，既容易辨识也容易记忆，如图所示。
1.中文文字型店标
如果要选择中文文字性店标作为制作的目标，要特别注意文字要精简，因为店标的尺寸有限，字清楚且醒目是最好的，想传达太多的信息反而会让传达效果大打折扣。
提示
一、店标的分类
非中文型店标会给人一种时尚感，能给人留下深刻的印象。但其含义并不会在第一时间被消费者理解清楚，如图所示。
2.非中文型店标
如果选择非中文型店标，特别要注意网店出售商品的范围和商品的风格是否和店标的感觉贴近。同样，因为英文标识不好理解，所以应该以简单和强烈的视觉冲击力为主。非中文型店标的染色搭配也多以冲击力强的对比色搭配为主，例如，欧美风格较多采用黑白搭配，女性风格较多采用黑白红搭配。
提示
一、店标的分类
图形型店标就是直接用图形作为店标。图示的店标上没有字符，所以给人的印象并不深刻，若不配合店面来看，人们很难记住这家网店是销售什么商品的。因此，不建议使用单纯的图形型店标。
3.图形型店标
一、店标的分类
图文结合型店标就是图形与文字相结合形式的店标。因为用图形作为店标，如果不带入店名或品牌名，能给消费者留下的印象是比较有限的，而带上文字信息会让消费者一目了然。这种店标既具有图形化的视觉冲击力，又能清楚地表达网店品牌信息，所以应用非常广泛，如图所示。
4.图文结合型店标
总而言之，每种设计表达形态都有其优势和劣势，所以在选择设计形态时可以根据自己网店的优势与特征采用合适的表达形态来进行表现。
提示
二、静态店标的设计
静态店标是指店标的图片是以静态表现的，由文字和图像组成。下面通过一个实例来介绍静态店标的设计流程。在本实例中，网店的名称是“BALI咖啡”，主营的商品是产自巴厘岛的咖啡豆及各类咖啡粉。其具体操作如下。
二、静态店标的设计
步骤1：打开Photoshop软件，新建大小为80像素×80像素、分辨率为72像素/英寸、名称为“coffee店标”的文件，具体参数设置如图所示。
二、静态店标的设计
步骤2：打开“素材/项目三/Bali.png”，选择“移动工具”，把素材图像移至“coffee店标”文件中；按Ctrl+T组合键，使用Shift键等比例缩放图像，调节图像四个角的控点，调整大小，效果如图所示。
二、静态店标的设计
步骤3：选择“横排文字工具”，输入文字“BALI咖啡”，将文字颜色RGB设置为“33/13/14”,文字具体设置格式如图所示。
二、静态店标的设计
步骤4：执行“文件”→“存储”命令，存储文件“coffee店标.psd”；执行“文件”→“存储为”命令，选择文件类型为“PNG”，将文件另存为“coffee店标.png”，该类型文件用于上传平台。
三、动态店标的设计
动态店标实质上就是将多个图像和文字效果构成GIF动画；该动画不但要醒目，而且要美观。本例将继续在绘制的静态店标上设计动态店标，在设计时，通过设置文字的不透明度达到闪烁的目的，其具体操作如下。
三、动态店标的设计
步骤1：打开Photoshop软件，执行“文件”→“打开”命令，打开静态店标“素材/项目三/coffee店标.psd”文件；执行“窗口”→“时间轴”命令，打开“时间轴”面板。单击“时间轴”面板中的“创建视频时间轴”右侧的下拉箭头按钮，选择“创建帧动画”选项，创建帧动画，如图所示。
三、动态店标的设计
步骤2：在“时间轴”面板中，单击下方的“复制所选帧”按钮复制两个帧。选择第1帧，在“图层”面板中选择“BALI咖啡”图层，并将其不透明度设置为20%，如图所示。
三、动态店标的设计
步骤3：选择第2帧，在“图层”面板中选择“BALI咖啡”图层，并将其不透明度设置为60%；选择第3帧，在“图层”面板中选择“BALI咖啡”图层，并将其不透明度设置为100%。
三、动态店标的设计
步骤4：选择第1帧，单击“选择帧延迟时间”按钮，设置延迟时间为0.5秒；用同样的方法设置第2帧和第3帧的延迟时间均为0.5秒，如图所示。
三、动态店标的设计
步骤5：在“动画（帧）”面板的下方单击 按钮，在其下拉列表中选择“永远”选项，单击右侧的 按钮进行播放演示，达到突出文字闪烁的效果。
三、动态店标的设计
步骤6：执行“文件”→“存储”命令，选择文件保存位置，存储文件“coffee动态店标.psd”；执行“文件”→“存储为Web所用格式”命令，设置“预设”为“GIF128无仿色”，其他参数不用更改，如图所示；单击“存储”按钮，选择文件保存位置，单击“保存”按钮，保存动画图片。

展开更多......

收起↑