项目五网店店招设计与制作,项目概述项目五

文件 4
网店店招设计与制作 网店首页装修的首要就是为网店设计店招,在此之前可以先设计网店标志,放置在店招中,起到网店宣传的作用。
无论是设计店标还是店招,都需要先进行设计前分析、构图,再在Photoshop软件中进行具体设计。
本项目中,我们将了解网店标志和店招的设计要点,通过实际任务操作掌握网店标志和店招的制作方法和技巧。
以“爱家汇”淘宝网店为例,根据网店的风格和特征来设计代表网店形象的Logo标志;结合设计好的网店标志和网店服务设计宣传网店的店招。
项目实施流程 纯文字型方案设计文字店标确定店招类型 设计意图分析综合型方案设计混合店标分析网店运营方向 设计店招版面设计店招内容完成店招设计 分 析 构 纯形象型方案 图 设计图案店标 分 析 完成店标设计 构 图 项目实施步骤 任务描述 任务5.1设计网店标志 小美完成了第一款商品“佳洁士草本水晶牙膏”的主图和详情页的设计与上传后,得到了不错的评价,接着小美接到任务要为网店首页进行初步装修,首先就是为网店设计一款形象、独特的网店标志,让消费者在搜索、收藏网店时都能对网店留下深刻印象。
任务目标
1.了解网店标志设计的工作流程和工作内容;
2.理解网店标志的设计思路和要点;
3.能根据网店的运营方向和装修风格设计网店标志;
4.了解网店标志的制作方法和技巧;
5.能运用画笔工具、铅笔工具、标尺、参考线等制作网店标志。
任务实施 5.1.1设计店标图案 网店标志是网店的名片,是消费者打开淘宝网店首页时最先看到的部分,它在设置网店基本信息时上传,当消费者搜索和收藏网店时就可以看到店标。
而店标中的图案是店标的“点睛”之处,能给消费者留下深刻印象,可以让店标在同类中脱颖而出。
设计网店标志时,首先需要根据网店的名称和销售的商品进行分析,设计风格相吻合的店标图案。
诸如一个水果店铺和一个家居用品店的店标,其图案即形象又生动,让人一眼就能记住,如图5-1、5-2所示。
图5-1网店店标示例(一) 图5-2网店店标示例(二) 有些网店也会根据网店名称设计图案不加文字,直接把图案当作网店标志,如图5-3、5-4所示。
图5-3网店店标示例(三) 图5-4网店店标示例(四) 在设计网店店标时,首先要根据网店的名称和销售的商品等内容进行分析和构思,再在Photoshop软件中进行具体设计。
【活动背景】要给“爱家汇”网店设计店标,小美觉得首先要设计一个形象生动,又容易让人记住的店标图案。
【活动步骤】
(1)分析设计意图,设计店标图案。
根据网店的名称和销售的商品进行分析,确定网店店标的风格,确定店标图案的设计方向和思路。

(2)新建店标,设置参考线,确定店标大小。
在Photoshop软件中新建店标文件,并根据分析方案设置合适的参考线。

(3)运用「钢笔工具」绘制店标图案轮廓。
运用「钢笔工具」绘制出大致的店标图案轮廓,并进行相应调整。

(4)运用填充工具填充店标图案。
将绘制好的图案轮廓的路径转化为选区,用「油漆桶工具」进行相应颜色填充。

(5)运用「画笔工具」完善店标图案。
运用「画笔工具」继续绘制店标图案,使其完整、美观。
【活动实践】
(1)要设计一个有“爱家汇”特色的图案,小美首先根据“爱家汇”网店的名称,并结合网店销售的商品,分析确定店标图案的设计方案。
小美在设计店标图案时除了考虑店名和销售的商品,还需要考虑哪些元素? 从以上分析的网店店标设计时要考虑的要素,讨论“爱家汇”店标图案的设计方向和思 路,可将具体的想法罗列出来。
操作贴士 设计网店店标时,要遵循以下几个标准:精美、独特;与网店的整体风格相融;能够体现网店的类型、内容和风格。
设计店标图案时,除了形状设计,颜色搭配也是一块重要内容。

(2)小美根据分析好的设计方向和思路,开始在Photoshop软件中进行设计,首先要新建文件,绘制参考线,打好文件框架。
①新建文件新建文件,设置大小为“80像素×80像素”,分辨率为“72像素/英寸”,颜色模式为“RGB”,背景内容为“白色”,如图5-
5。
②绘制参考线执行“视图>标尺”,调出标尺。
按住鼠标左键拖动,新建相应参考线,如图5-
6。
图5-5新建文件 操作贴士 图5-6新建参考线 可按住Ctrl+R快速显示/隐藏标尺,Ctrl+H快速速显示/隐藏参考线,也可用鼠标直接拖动参考线进行调整,拖到最边上标尺处即为删除。

(3)根据参考线的标记,小美用「钢笔工具」在中间矩形区域绘制代表“家”的屋顶 图案路径,利用房屋的图案寓意家,与“爱家汇”网店名称相呼应。
选择「钢笔工具」,绘制屋顶形状的路径,如图5-
7。
选择「转换点工具」和「直接选择工具」,对路径进行调整,效果如图5-
8。

(4)给屋顶区域填充颜色按住Ctrl+Enter,将路径转化为选区,新建图层,填充颜色为RGB(230,120,20), 如图5-
9。
图5-7绘制路径 操作贴士 图5-8调整路径 图5-9填充颜色 在调整曲线锚点时,按住Shift键的同时,拖曳其中的一个锚点,将强迫控制手柄以45°或45°的倍数进行改变,按住Alt键的同时拖曳控制手柄,可以任意改变两个控制手柄中的一个,而不改变另外一个的位置。

(5)接着小美利用「画笔工具」继续绘制房屋底部和内部字形,房屋内部的“H”字样既是店名中“汇”的中文首字母,也是“家”的英文首字母,巧妙诠释了店名,容易记忆。
①绘制房屋底部选择「画笔工具」,在工具选项栏中单击,打开“画笔预设”选项器,单击右上角按钮,选择“方头画笔”,点击“追加”,单击确定。
选择画笔笔尖形状为“硬边方形3像素”,如图5-10,设置前景色为RGB(218,36,26)。
新建图层,按住Shift键绘制一条竖线和横线,如图5-11。
图5-10选择画笔笔尖形状 图5-11绘制竖线和横线 操作贴士 如想恢复默认的画笔库,可再次单击按钮,在弹出的下拉菜单中选择“复位 画笔”选项,在弹出的询问面板中单击 按钮即可。
②绘制屋顶内部字形新建图层,保持画笔笔尖形状不变,设置前景色为RGB(0,145,65),在房屋形状内部绘制一个“H”形状,如图5-12。
新建图层,保持画笔笔尖形状不变,设置前景色为RGB(218,36,26),在H字形上方单击,出现方块点,完成最后制作,如图5-13。
将文件保存为PSD格式,文件名为“店标”。
图5-12绘制“H”形状 知识链接 图5-13绘制方块点
1.网店标志尺寸 淘宝网店的店标尺寸为80像素×80像素,一般在设置网店基本信息时上传,消费者在 搜索店铺或收藏店铺时会出现店铺标志,是网店的形象代表和标志,所以这个小小的图标看 着小,但作用可不小。

2.店标的基本构成要素 网店的店标一般由代表网店形象的Logo图案、网店名称、网店链接、联系号码、微信 号、宣传口语等其中的一项或多项组成,一般要求店标的构成以简洁为主,凸显网店形象, 因此由两项或三项元素构成为宜。

3.网店店标设计要点 在分析网店店标设计方案时,除了要考虑网店的名称和销售的商品外,还要考虑网店的 整体风格,消费者喜欢的类型,同类网店已有的店标等,以此确定店标的风格类型,设计相 应的店标图案、文字。

4.「画笔工具」各参数的说明 选择「画笔工具」或反复按Shift+B组合键直至选中画笔为止,其选项栏如图5-14所示。
① ② ③ 图5-14「画笔工具」选项栏 ④ ⑤⑥ 序号① ②③④ ⑤⑥ 参数点按可打开「画笔工具」下拉面板 模式不透明度 流量 喷枪 绘图压力 说明 单击「画笔工具」选项右侧的按钮,打开「画笔工具」下拉面板,在面板中可以选择笔尖,设置画笔的大小和硬度。
在下拉列表中可以选择画笔笔触颜色与下面像素的混合模式用于设置画笔的不透明度,该值越低,线条的透明度越高用于设置当鼠标指针移动到某个区域上方时应用颜色的速率。
在某个区域上方涂抹时,如果一直按住鼠标按键,颜色将根据流动的速率增加,直至达到不透明度设置。
单击该按钮,可以启用喷枪功能,Photoshop会根据鼠标按键的单击程度确定画笔线条的填充数量。
单击该按钮,使用数位板回话时,光笔压力可覆盖“画笔”面板中的不透明度和大小设置。
打开画笔下拉面板如图5-15,其各参数说明如下: ①② ③ ④ 序号① ② ③④ 参数大小 创建新的预设 图5-15画笔下拉面板 说明拖动滑块或在文本框中输入数值可以调整画笔的大小。
单击该按钮,可以打开“画笔名称”对话框,输入画笔的名称后,单击“确定”按钮,可以将当前画笔保存为一个预设的画笔。
硬度笔尖形状 用于设置画笔笔尖的硬度 Photoshop提供了3种类型的笔尖:圆形笔尖、毛刷笔尖以及图像样本笔尖。
画笔除了可以在选项栏中进行设置外,还可以通过画笔面板进行更丰富的设置,执行“窗口>画笔”命令,可以调出画笔面板,如图5-16所示。
画笔面板各主要参数说明如下表所示。
① ⑥ ⑦ ② ⑧ ④ ⑨ ⑤ ⑩ 图5-16画笔面板
5.标尺工具的功能和意义设置标尺后可以精确地编辑和处理图像。
如果显示标尺,则标尺会出现在当前文件窗口的顶部和左侧。
选择菜单栏中的「视图」命令,在 序 参数 说明 号 ①画笔预设 可以打开“画笔预设”面板 改变画笔的角度、圆度,以 ②画笔设置 及为其添加纹理、颜色动态 等变量 ③锁定/未锁定锁定或未锁定画笔笔尖形状 ④画笔描边预可预览选择的画笔笔尖形 览 状 ⑤显示画笔样使用毛刷笔尖时,显示笔尖 式 样式 ⑥选中的画笔当前选择的画笔笔尖笔尖 ⑦画笔笔尖 显示Photoshop提供的预设画笔笔尖 ⑧画笔参数选用于调整画笔参数项 ⑨打开预设管可以打开“预设管理器”对 理器 话框 对预设画笔进行调整,可单 ⑩创建新画笔击该按钮将其保存为一个 新的预设画笔 弹出的菜单栏中选择「标尺」命令,使「标尺」命令前出现“√”标志即可将「标尺」调出, 如图5-17,当用户移动指针时,标尺内的标记会显示指针的位置。
图5-17调出标尺工具 将鼠标指针放在标尺的X轴和Y轴的0点处,如图5-18所示。
单击并按住鼠标左键不放,向右下方拖拽鼠标到适当的位置,如图5-19所示,释放鼠标,标尺的X轴和Y轴的0点就变为鼠标指针移动后的位置,如图5-20所示。
图5-18鼠标放置标尺起点 图5-19按住鼠标拖动 图5-20标尺0点发生改变
6.「参考线」的功能和意义设置参考线后可以使编辑图像的位置更精确。
将鼠标指针放在水平标尺上,按住鼠标左键不放向下拖拽出水平的参考线将鼠标指针放在垂直标尺上,按住鼠标左键不放想右拖拽出垂直的参考线。
显示或隐藏参考线:选择“视图>显示>参考线”命令可以显示或隐藏参考线或者按住快捷键Ctrl+
H,此命令只有在存在参考线的情况下才能应用。
移动参考线:选择“移动”工具,将鼠标指针放在参考线上,鼠标指针变为双向箭头时,按住鼠标左键拖拽即可移动参考线。
锁定、清除、新建参考线:选择“视图>锁定参考线”命令或按Alt+Ctrl+;组合键可以将参考线锁定,参考线锁定后将不能移动。
选择“视图>清除参考线”命令可以将参考线清除。
选择“视图>新建参考线”命令,弹出“新建参考线”对话框,如图5-21所示,设定完选项后单击“确定”按钮,图像中即可出现新建的参考线。
图5-21“新建参考线”对话框 5.1.2设计店标文字店标文字是店标里具体、明确呈现的内容,一般包含网店名称、网店链接、联系号码、微信号、宣传口语等,能使消费者直接、具体地记住网店。
店标文字在设计时要根据网店标志的整体风格和店标图案,设计相应的文字。
也有一些网店标志是直接由文字组成,或将文字进行相应的改变而成,如图5-22、5-23所示。
图5-22网店店标示例(五) 图5-23网店店标示例(六) 【活动背景】小美完成网店标志的图案设计之后,接着要在已有的图案基础上设计文字,完成“爱家汇”网店店标的制作。
【活动步骤】
(1)分析店标图案,确定设计方案。
根据已经设计好的店标图案和网店名称进行分析,确定店标文字的设计方向和思路。

(2)设计主体文字。
在Photoshop软件中打开设计好图案的店标文件,在上面输入网店的名称。

(3)设计小文字和装饰。
除了网店名称之外,还可以在店标上输入其他小文字,绘制线条等,起到辅助、装饰作用。
【活动实践】
(1)小美根据设计好的“爱家汇”店标图案,分析文字的设计风格和思路,要确保整体风格和谐统
一。
图案的颜色已经比较丰富,那么文字可以设计得稍微简洁,你觉得店标的文字可以包含哪些内容? 操作贴士 网店店标的文字可以包含网店的名称、简称或网店的链接等。

(2)小美确定好店标文字的设计思路后,就开始动手设计。
首先设计主体文字,将网店名称“爱家汇”三个字直接以清晰显目的方式呈现出来,让人一眼就看得到,记得住。
打开“店标.psd”文件,选择「文字工具」,设置字体为“幼圆”,大小为“7点”,设置前景色为黑色,输入文字“爱家汇”,如图5-24。

(3)接下来根据整体布局,设计小文字和添加装饰,在最下方输入“爱家汇”的英文“lovehomemarket”,使整体更饱满,也作为店名的另一种说明。
在两行文字中间绘制一条横线,目的使整体结构更分明。
①绘制直线选择「铅笔工具」,设置笔头大小为1像素,前景色为黑色,新建文件,在文字下方绘制一条直线。
如图5-25。
②输入小文字选择「文字工具」,选择字体系列为“ComicSansMS”,字体大小为“3点”,设置前景色为黑色,在直线下方输入文字“lovehomemarket”,如图5-26。
图5-24输入主体文字 操作贴士 图5-25绘制直线 图5-26输入小文字 在输入文本时,依次Ctrl+Shift组合键可在各输入法之间进行切换,在输入英文字母之前按CapsLock键可确保输入的字母为大写,再次按CapsLock键可还原输入大小写字母。
③保存文件对设计好的店标文件进行保存,分别保存为PSD和JPEG格式。
操作贴士 由于淘宝网店标尺寸较小,为了方便设计,可以先在尺寸较大的画布中制作好,再根据需要进行使用。
知识链接
1.店标文字设计要点店标的文字设计要根据整体的布局情况而定,如店标图案已经突出,占据了较大的位置,那么文字只需输入网店名字简称即可;如店标中文字是重点,那么文字的内容、变形、颜色设置都需好好加工。

2.「铅笔工具」的功能「铅笔工具」可以模拟铅笔的效果进行绘画。
选择「铅笔工具」或反复Shift+B组合键直至选择「铅笔工具」为止,其属性栏如图5-27所示 图5-27「铅笔工具」选项栏 在「铅笔工具」属性栏中,“画笔”选项用于选择画笔:“模式”选项用于选择混合模式:“不透明度”选项用于设定不透明度:“自动抹除”选项用于自动判断绘画时的起始颜色为背景色,则「铅笔工具」将以前景色绘制,反之,如果起始点颜色为前景色,则比工具会以背景色绘制。
使用「铅笔工具」:选择「铅笔工具」,在铅笔工具属性栏中选择画笔,选中“自动抹除“复选项,如图5-28所示,此时绘制效果与所单击的起始点颜色有关。
当起始点像素与前景色相同时,「铅笔工具」将进行使「橡皮擦工具」的功能,以背景色绘图;如果鼠标点起始点颜色不是前景色,则绘图时仍然会保持以前景色绘制。
图5-28「铅笔工具」选择“自动抹除” 任务拓展 在实际工作中,网店的类型、风格不一样,设计的角度就不一样。
店标的设计也要跟随

标签: #文件 #文件 #映像 #cad #服务器 #隐藏文件 #图纸 #文件