一般电商美工需要会什么技能?主图、详情页、海报,还必需会产品精修、店铺装修、首页设计吗?
有很大部分都是处于新手入门阶段,对于刚入行电商美工设计行业都需要会哪些技能和软件呢,梳理一下需要学习的方向,方便大家入行之后的一个系统化的学习,更加快速的进入到这个行业当中,不至于迷茫的学习不知从何下手去开始。
1.PS(Photoshop)PS一定是会用到的,大部分的日常工作当中都离不开这个软件的使用,应用这款软件基本二维视觉效果都可以达到,满足日常电商设计项目是完全够用了,包括我们日常做的主图、详情页、首页、活动图,还有简单的动效图等
2.AI(Illustrator)
AI软件主要是制作矢量图形插画设计等,根据电商公司的需求,有的会用到来做线下物料,比如名片、宣传单、易拉宝、画册、产品包装设计或者店铺LOGO设计等,有的小型公司会一人多用,美工有时候也会需要做一些平面类的图,这个就视情况而定了,有兴趣的学习一下也许会用的上。
3.C4D这几年在电商当中的应用是非常广泛了,无论是产品建模,渲染,还是动画设计都在应用范围内,这个软件的使用我建议是有一定PS/AI/DW软件基础之后再去学习,因为这个软件算是一个进阶技能,可以让你达到一定水平之后提升到另一个维度的软件,对于新手来说可以慢慢接触,毕竟这是一个趋势,肯定是要用到的,前提是要有一定的设计技能之后再去学习应用,要不然很难发挥出他的设计价值。
4.DW(Dreamweaver)DW在电商设计当中主要用来做店铺的装修上,包括店招设置,全屏海报,轮播图,自定义布局等使用
如何打造电商详情页设计?随着移动电商的迅猛发展,视觉营销这一传统行业的惯用手段也逐渐融入移动电子商务,并越来越受重视,这都由移动电子商务特殊的购物方式所决定。在移动端App上购物,由于接触不到商品实物,消费者只能通过色彩、图像和文字来判断商品是否符合自己的需求。因此,视觉营销在移动电子商务中的作用,就是通过色彩、图像、文字等形成的强烈冲击力来吸引消费者点击进店,提升店铺流量,刺激消费者的购物欲望,最终成交。因此,视觉营销对移动端店铺提升有效流量非常重要。那么移动端店铺视觉营销该如何打造呢?
首先配色技巧
移动端店铺整体配色一定要给人以统一、协调的感觉。统一的颜色是指主色调只有一种,在此基础上搭配一些其它颜色。黄金配色比例是70%∶25%∶5%。其中70%为大面积使用的主色,25%为辅助色,5%为点缀色。
常见的色彩搭配有同类色搭配、邻近色搭配、互补色搭配和对比色搭配。同类色搭配使得整个页面看起来色彩统一,又有层次感;邻近色搭配的效果比同类色搭配更加丰富;互补色搭配对比最为强烈、醒目和鲜明;对比色搭配色彩的对比更加有诱惑力。在移动端店铺配色过程中背景和文字内容对比不强烈、色彩过多及过分强调色彩的刺激度,这些都是在移动端店铺配色过程中存在的问题。
其次店铺风格的形成
移动端店铺风格的形成要素包括店铺的主要风格、店铺主题气氛及店铺的包装色彩。经营不同的产品就需有不同的店铺风格,否则就会让人觉得不伦不类。常见的店铺风格有简约清爽型、商业型、炫酷型、可爱型和特色型等。例如,商业型的店铺促销产品位置明显,直截了当,适合中性、男性人群浏览,适用于虚拟产品、手机、数码产品和家居等行业;可爱型的店铺通常为暖色调,以卡通图案或者动物花草为装饰元素,适合小女生人群浏览,适用于饰品、毛绒玩具、居家日用和鞋子等行业。
移动端店铺的主题气氛主要通过店铺的配色和装饰来烘托。例如,以国庆节为主题的店铺配色大多采用红色,然后通过灯笼和烟花等元素来体现国庆节的节日气氛;以七夕节为主题的店铺大多采用紫色、粉色等颜色来营造浪漫和甜蜜的气氛,然后通过鹊桥等元素来体现七夕的节日气氛。
人们对一个店铺色彩的记忆往往更倾向于其包装,包装本身也代表着整个店铺的风格定位。例如,如店铺主营18-30岁的女性时尚女装服饰,那么比较适合的主题色就是偏粉色、红色的柔和浪漫色系;如店铺主营手机、相机等数码类产品,那么蓝色、黑色和灰色往往会给消费者以理智、高贵、沉稳的感觉。在配色的过程中需要巧用VI配色技巧,一般可分为单色VI、双色VI和多色VI设计,主要表现在店铺的整体色彩效果与店铺Logo色彩的对应性,使得页面整体风格协调、统一。
设计一张海报需要多少钱?看的复杂度,做工量大的几百元,做工量少的几十元。
1、低端的美工海报设计费用:
这类海报设计充斥在淘宝、复印店、威客
猪八戒
、大学设计类学生和懂点ps其他啥也不懂的人之中,那里面的海报基本白菜价,讲着根本没有的人情,设计费沦为附赠品,价格从300元至800元不等。
一张海报得花上很多时间去反复修改,有时候可能委托人自己都不清楚需求,目的性宽泛,设计效果也差强人意。
2、普通海报设计费用:
单纯图文排版的普通海报设计,做起来很快,价格也就较低,比如超市介绍产品类的海报、
朋友圈
海报或者电商海报等就属于这一类,报价一般从800元到2000元不等,这类海报的设计要求不是非常高,不需要有太多创意,有合格的排版知识和基本的审美素养就可以了。
3、创意性的海报设计费用:
创意性的广告类海报设计报价就比较高了,因为这类海报设计需要结合产品的特点和目标消费人群的特点,找到独特的创意点,通过简洁却又有强烈视觉
冲击力
的图形把需要传达的信息传达出来。
好的创意海报设计能够快速吸引消费者的注意,使消费者看到海报后产生强烈的购买欲,从而促进产品的销售,创造出来的价值非常高,所以这类海报设计的价格也就相对较高,北京市的专业设计公司根据本公司的设计水平不同这类海报设计一般报价3000元至5000元不等。
4、_笆泳绾1ㄉ杓品延:
近两年,影视剧海报设计越来越引人关注,作为剧集的主要宣传方式,影视剧海报在影视剧正式播出之前,是宣传盒维持热度的有效工具,能够吊足观众胃口,引人收看,据业内人士透露,六七年前剧集海报单张的费用。
包括创意、设计、后期,只有几千元,5000元就能算高价海报。目前剧集海报设计行业内均价已经涨到3万元左右一张,偶尔甚至会有达到10万元的高价海报,这部分费用仅仅只是海报本身的创作费用,如果邀请了知名摄影师和画师合作,还要额外付费。
注意事项:
1、
平面设计
的价格,不但和设计师的水平资历相关,也和这个设计需要设计师投入的时间和精力相关。最科学的计算方法,就是:报酬=(设计师月薪÷22天÷8小时)×(_降ブ谱魇奔+修改时间)
以上这个公式中,最关键的因素是两个:用月薪作为标准来标注的设计师业务水平、设计所需投入的时间。
2、一般来说海报的复杂程度、做工量、设计师水平等等都影响着设计一张海报的价格,从相关设计网站中可以了解到,一张海报的价格从几十元、百元、千元到万元不等,主要还是看需要什么质量的作品。海报不单单是一张图纸,在单薄纸张的背后是来自设计师的反复打磨及用心设计。
一、建立FW文档
打开fireworks,点击界面右侧的新建FIREWORKS文档(绿色方框内),
建立一个宽度为800,高度可以视情况而定的画布,建议颜色为“透明”或“白色”。
在界面的左上角处点击文件-导入
找到自己要用的背景,打开。(如果大家没有合适的背景的话,可以去我的店铺里面看看,有许多精品模板图都没加水印的,大家可以右键另存为到自己的电脑上。)这时会出现一个类似“「”的光标,通过它可以将导入在整个画布中的位置确定。
如上图所示,你也可以在界面的左下角找到四个数值填入框,其中宽度和高度表示的是导入的大小,而
“X”表示的是导入的最左边距整块画布最左边的距离(太过直白,也有点拗口,呵呵),“Y”表示的就是
导入的最上边距整块画布最上边的距离。填入你需要的数值,确定在整图中的位置。
特别说明:因为考虑到部分用户的显示器分辨率为800*600,所以我们建的画布宽度为800,高度1000也是可以
要据制作中的实际情况改变的。另外,导入的宽度必须≤800。如果宽度大于800,可以先在点击左上角
处的文件-打开,找到在FW中打开,然后在界面上方找到修改-画布-图像大小,再将像素尺寸的宽度改
为你想要的尺寸,记得一定要约束比例,要不就变形了。
二、改变背景色
把画布的颜色改为导入的背景色,这会使画布跟导入看起来更像一张完整的。方法:点击界面上方的修改-画布-画布颜色
在弹出窗口中选择自定义,并在如图所示的颜色定义框内点击一下,出现一个类似笔的形状,将它在导入的背景颜色处点击一下,然后确定。现在画布的背景色就协调了。
三、加入文字
根据你自己的布局构思,在适当的地方用文本工具加入店名、店铺链接(逛逛本店)、店铺介绍等文字,一定要考虑好整体布局哦~
点击文本工具,在中你想要的位置拖动鼠标后会出现一个矩形框,然后你可以在操作界面的下方看到属性选项
调整好文字大小,颜色,字体等,之后在矩形框内输入你的文字
另外,记得在宝贝展示、宝贝描述文字下分别留出一定的空白地方来,不需要太多。
第三步完全做完后的成果图
小提示,类似买家须知这种固定条款,可以直接在上制作出来,单独切片(马上会讲到),以免每次填入这么麻烦。
四、加入热点
在需要添加链接的文字上加入热点。
点击如下图所示的热点工具之后,在文字上面拖动矩形框,得到一个热点框。如果未覆盖到文字上,可直接用鼠标拖到文字上并覆盖住。
加入矩形热点工具后,选定这个矩形热点,界面下方如图所示的地方会有链接网址的设定,
“替代”指的是当鼠标放在所做的矩形热点上时会出现的文字。目标指网址打开方式,_blank指在新窗口打开。
五、切片
把所有的热点都做好之后,就要开始切片程序了。切片工具的位置在上图中已做说明。
切片的时候要注意,有热点的部分和各个文字部分要单独切出来。(这一步如有不懂的地方,可以问偶。因为有些东东偶也不晓得如何表达)
点击矩形切片工具,(用鼠标按住切片工具,会出来两个选择,选矩形切片工具就OK了)会出现在一个十字架状的光标,然后将整张图一点点的切出来,切完之后如图所示。
在界面下方的如图所示的框一内,“切片”二字下方的框表示的是你所选中的切片的命名,宽度和高度就表示的
是所选中的切片的大小,然后X,Y也是定义此切片在整图中的位置的。框二中,类型选择为图像,图像格式选择为
“JPEG-较高品质”。
六、导出为HTML文件
点击操作界面左上角“文件-导出”
在弹出如图所示的窗口,
文件名可自行设定,导出-HTML和图像,导出切片,一定要包括无切片区域并将放入子文件夹,最后导出。
以下为DW应用部分,可能米米在此表述的不是很清楚,做为菜鸟,又想DIY做模板的话,可能不容易沟通,所以对于那些这或那的规矩,米米并没有去框定,只是把步骤简单的给列了出来。我会尽快想办法,把下面的叙述部分描述得更清楚,如果有不懂的,敬请跟贴提问。
七、打开HTML文件(请详细看看此步中,后来加上去的红色字体部分)
打开DW工具,然后在如图
所示的操作界面中,单击“打开”菜单,找到刚刚保存好的HTML文件,打开。
然后在如图所示的位置,
会看到有“代码、拆分、设计”三个选项,选择“拆分”。现在在界面中,上面部分就是HTML代码,下面部分就是模式了。
找到宝贝展示字样的下的空白的切片,选中它之后,上面的代表这个切片的代码部分会被蓝色覆盖,将鼠标移到代码部分,将此部分代码“src="位置"”中的位置复制下来
Re: 开店如何制作宝贝描述模板
选中空白切片之后,在代码栏中会是类似于这部分代码被蓝色覆盖 < img name="n7" src="images/7.jpg"
width="800" height="77" border="0" id="n7" alt="" />
,(src=""引号中的文字即代表的是在电脑本地地址,在最后images里的上传到相册里后,要一一换成相对应的URL 地址的,这是后话。)
将刚被覆盖的< img name="n7" src="images/7.jpg" width="800" height="77"
border="0" id="n7" alt="" /> 这串代码保留src=""引号中的地址后,其它全删掉。然后直接手动加入如下代码
background="images/7.jpg" background-reapeat:reapeat-y
(background=""引号中即刚刚保留的本地地址)到< td colspan="4"
>(引号内未必是数字4,也可能是其他数字)中来,添加好之后的样子应该是这样子的< td colspan="4"
background="images/7.jpg" background-reapeat:reapeat-y>。
因为是要进行宝贝的展示,那么就要加入展示代码< img src="宝贝的URL地址" /
>,加完之后应该是类似于这个样子< td colspan="4" background="images/7.jpg"
background-reapeat:reapeat-y >< div align=center > < img src= "
宝贝展示地址"/>< /div > 如果你在进行宝贝编辑的过程中希望加入更多的,那么同样是用展示代码来表现的。
其中< div align=center>< /div>是一个居中命令的代码。可以加无数个< td
colspan="4" background="images/7.jpg" background-reapeat:reapeat-y >< div
align=center > < img src= " 宝贝展示地址"/>< /div >< div
align=center > < img src= " 宝贝展示地址"/>< /div >< div
align=center > < img src= " 宝贝展示地址"/>< /div >
如果大家是直接从这里复制代码过去的话,请将每个“<”符号之后的空格都删掉!
是一个居中命令的代码。可以加无数个< td colspan="4" background="images/7.jpg"
background-reapeat:reapeat-y >< div align=center > < img src= "
宝贝展示地址"/>< /div >< div align=center > < img src= "
宝贝展示地址"/>< /div >< div align=center > < img src= "
宝贝展示地址"/>< /div >
然后删掉刚刚被蓝色覆盖的这部分代码,
并在这部分加上引号中(不包括“”的如下代码 < div align="center" > < img
src="宝贝展示的URL地址"/ >
。在刚刚改好的这串代码前面的“>”符号前加入下面引号中的如下代码“background="刚刚复制的位置"
background-reapeat:reapeat-y”。
这一步的作用是把这部分切片变成了背景图,并且无论你的宝贝展示有多大,都不会撑破表格(除非宝贝展示大过了整个的宽度800)。
再找到宝贝描述下的空白,将蓝色区域中的代码删掉,然后把“background="刚刚复制的位置"
background-reapeat:reapeat-y”了复制到相同位置。此时不用加入链接代码,到时在宝贝描述编辑器中直接加入描述文字就OK了。
八、保存代码
全部完成之后,将界面切换到代码模式,(跟第七步切换到拆分模式的方法相同),打开记事本程序,将代码全选,点鼠标右键选择拷贝,然后粘贴到记事本中,保存。
九、上传
打开HTML文件所在的文件夹,找到images子文件夹,将里面的除一个名为“spacer"外的所有上传到你的相册里去。(这个SPACER可以忽略不计)然后再记事本里找到除“spacer.jpg”外的所有以jpg结尾的,换成其相对应的url地址,再将此代码保存。
特别提示:相册必须是支持外部链接的相册,如265相册(my.265)(支持JPG和GIF格式,但只有50M使用空间)或YAHOO相册(cn.yahoo)(无限量空间,但只支持JPG格式)还有很多好的相册,但我也不知道,申明一点的是网易相册不支持外部链接!
十、使用代码
上传宝贝时,在宝贝描述栏中,点击“编辑源文件”,然后从你保存好的记事本中将代码复制粘贴到编辑栏中,并将宝贝展示的URL地址添加好,再切换回编辑器编辑,在宝贝描述字样下面编辑宝贝描述





