美化电商店铺的途径(电商美工工作量)

视觉营销中的电子商务是店铺运营中非常重要的一个环节。所谓视觉营销，就是以营销为目的，对店铺进行视觉设计和装饰。毕竟高颜值也是有吸引力的！
电商店铺包含了大量的图片、文字等信息。所以，只有合理设计店铺的布局，才能装修出漂亮的电商店铺。
一个好的版面可以更快更准确的传达信息，是提高店铺点击率和商品销量的重要因素。
因此，在装修电商店铺时，需要合理安排商品页面的元素，形成各种布局形式，以体现店铺的品味，达到吸引顾客的目的。
目前店铺的布局分为单向布局、S型曲线布局、对称布局、T型布局、“王”型布局、POP型布局六种，下面分别介绍。
01
单向布局
单向布局是一种常见的页面布局方式，一般分为横向布局和纵向布局。垂直排列的单向布局可以让画面感觉稳定，让布局更清晰；横向排列的单向布局更有条理，也更符合人们的阅读习惯。
一般来说，为了让画面更丰富，往往会把横向排列和纵向排列结合起来，如图。
02
曲线布局
电商店铺装修时，为了营造曲折的视觉体验，有时会采用S型曲线布局。这样的布局可以让画面有一定的旋律感，方便顾客快速灵活的查看店铺的产品，从而增强设计感，如图。
03
对称布局
商品详情页经常使用对称布局。这种布局可以保证版面各元素之间的平衡感，使版面具有统一规整的视觉效果，利用平衡的版面传递信息，如图。
04
测试布局
T型布局页面顶部为店铺横幅和家居海报，底部显示店铺产品的内容，整个店铺布局类似于英文字母T。T型布局在店铺设计中应用广泛，如图所示。
05
王形布局
“王”的布局类似于丁字布局。顶部结构与店铺招牌和首屏海报相同，底部展示店铺产品内容。不同的是，在“王”的布局中，会有一个与网页等宽的海报或分类栏，如图。
06
流行布局
POP layout是以一张漂亮的图片作为店铺首页的中心，常用于时尚化妆品、珠宝店的网页。POP版面的优点是精致美观，容易抓住消费者的眼球。缺点是展示的产品内容较少，如图。
07
布局设计标准
店铺布局不要复杂，不要把店铺设计成门户网站。虽然把店铺做成大网站看起来更有气势，但是会影响买家的浏览体验。
顾客很难在这么复杂的店铺里找到自己想要的商品，复杂的布局会让人眼花缭乱。所以不是所有能装修的地方都要装修，但有些区域不装修效果更好。设计网上商店的布局时，应遵循以下设计准则。
1.主题突出。
版面设计的最终目的是让店铺页面清晰连贯，可以更好地突出主体，吸引买家对店铺页面的注意力，从而吸引买家。
2.形式与内容的统一
一个店铺的版面设计所追求的表现形式必须符合页面所表达的主题，这是版面设计的前提。没有文字的店铺很难表达主题。
3.加强整体布局
在版面设计中，文字、画面、色彩是需要处理和安排的三个要素，它们之间的关系必须考虑一致。
在这里，数码易君还准备了精美的详情页设计案例，供大家参考。
案例——大闸蟹详情页面
表壳材料：
https://pan.baidu.com/s/130vRNmDFmpKbf-_LNhgluA
提货代码：n540
这个案例是大闸蟹详情页，食品类的详情页需要显示食品的细节。通过添加精美的大闸蟹产品图，将产品信息与精美的美食图片相匹配，展示美食细节，让人仿佛可以品尝美食。
01
制作海报
01启动Photoshop CC 2019软件，执行“文件”“新建”命令，新建一个1920像素 3259像素的文件，如图。
02选择“矩形工具”，在屏幕上方画一个矩形(颜色可以任意设置)，如图。
03按Ctrl O打开“大闸蟹. jpg”素材，拖动到矩形位置，如图。
04按住Alt键，在“大闸蟹”图层和“矩形1”图层中间点击，创建剪贴蒙版。效果如图。
05在图片左侧画一个黑色矩形，设置这个矩形的图层“不透明度”为39%，如图。
06继续选择“矩形工具”，在属性栏中更改“填充”为无，“描边”为白色，“描边宽度”为“4像素”，在矩形内部画一个矩形框，如图。
07点击“图层”面板底部的“添加图层蒙版”按钮，添加图层蒙版，选择蒙版，用黑色笔刷绘制矩形框。效果如图。
08按Ctrl O打开“金粉背景. jpg”素材，拖动到屏幕左侧，如图。
09按住Alt键，在“金粉背景”图层和“矩形3”图层之间点击，创建剪贴蒙版。效果如图。
10选择“横排文字工具”，设置字体为“楷书”，在矩形框中输入“大闸蟹”，如图。
1双击“大闸蟹”文本层，勾选“投影”复选框，设置参数，如图1所示。单击OK应用图层样式，如图2所示。
图1
图：密室逃脱：冠军联赛
12在图层面板中选择金粉背景图层，按Ctrl J复制金粉背景图层，将复制的图层移动到大闸蟹文字图层上方，按Ctrl T缩小，为复制的图层创建剪切粘贴蒙版。效果如图。
13选择“椭圆工具”，设置“填充”为# af0b0c，“描边”为无，在矩形框的空隙处画一个圆，然后再复制一个，在圆内输入文字，如图。
14继续选择“椭圆工具”，修改“填充”为无，“描边”为#ee1727，描边宽度为“1.33像素”。在矩形框下面画一个圆形框，复制3次，水平移动，如图。
5给每个圆形框所在的图层添加图层蒙版，依次选择每个图层蒙版，涂抹圆形框。效果如图。
16在圆形框中输入“现货”字样，字样颜色为白色，如图。
17创建一个图层组，将组名改为“主图”，将之前做的所有图层都移到这个组中。
02
打造商品特色区
01在“主地图”图层组下新建一个组，名称改为“商品特征”。执行“文件”“放置嵌入对象”命令，放置“装饰图形. png”素材，移动到主图底部，如图。
02双击“装饰图形”图层打开“图层样式”对话框，勾选“投影”复选框，设置参数，如图。
03选中“彩色叠加”复选框，并将叠加颜色设置为红色(#ee0000)，如图1所示。点击OK应用图层样式，效果如图2所示。
图1
图：密室逃脱：冠军联赛
04使用“横向文本工具”在图形内部输入红色文本，在图形下方输入黑色文本，如图所示。
05用同样的方法制作其他内容，如图。
06按Ctrl O打开“background grain.jpg”素材，拖动到主图底部，如图所示。
07选择“横向文本工具”，设置字体为“粗体”，文本颜色为黑色，在黑色文本下方输入文本，如图。
08选择圆角矩形工具，设置Fill为#de0124，Stroke为None，Radius为20像素，在文字下面画一个圆角矩形，如图。
09在圆角矩形左侧画一个白色小矩形，给矩形图层添加图层蒙版，涂抹在矩形左侧，如图。
10双击矩形图层，打开图层样式对话框，勾选渐变叠加复选框，渐变颜色从灰色(#676767)设置为透明，如图1所示。单击OK应用图层样式，如图2所示。
图1
图：密室逃脱：冠军联赛
1按Ctrl J复制矩形图层，水平翻转矩形，移动到圆角矩形右侧。如图所示，在圆角矩形内输入白色文本，在圆角矩形下输入黑色文本。
12按Ctrl O打开“桂花. png”、“盒装. png”、“蟹捆. png”和“莲蓬. png”素材，依次拖动到文字底部，如图。
13为“盒装”图层和“蟹捆”图层添加“投影”图层样式，如图所示。
图1
图：密室逃脱：冠军联赛
14在材质下方画一个红色圆角矩形，在圆角矩形中输入白色文字，在圆角矩形右侧输入黑色文字，如图1。然后在下方空白处连续输入“-”做两条虚线，如图2所示。
图1
图：密室逃脱：冠军联赛
5按Ctrl J复制多个圆角矩形图层，移动到合适的位置，输入文字，完成商品特色区域的制作，如图。
03
制作商品展示区
01最后，做一个商品展示区。在屏幕下方的空白处画一个黑色的长方形，如图。
02选择“横向打字工具”，设置字体为“加粗”，文字大小为“55.16磅”，文字颜色为#ffedbd，在黑色矩形顶部输入“严格筛选奶油加黄脂”。将文字大小改为“27.55分”，文字颜色改为白色，在底部输入“玉盘玲珑香”，如图。
03按Ctrl O打开“Show 1.jpg”素材，并将其拖动到文本的底部，如。
04点击图层面板底部的“新建填充或调整图层”按钮，选择“曲线”选项，创建“曲线1”调整图层，设置参数如图所示。
05将“曲线1”图层移动到“显示1”图层的上方，为其创建一个剪切蒙版，只调整显示图的亮度，如图。
06新建一个名为“Group 1”的组，将“Curve 1”图层和“Show 1”图层移入该组。
07选择圆角矩形工具，设置填充为白色，描边为#978a3c，描边宽度为2像素，半径为5像素，在显示屏下画一个圆角矩形，如图。
08按Ctrl O打开“Show 2.jpg”素材，拖动到圆角矩形位置，如图。
09按住Alt键，在“显示2”图层和“圆角矩形3”图层之间点击，创建剪贴蒙版，如图。
10单击图层面板底部的“新建填充或调整图层”按钮，选择“曲线”选项，创建“曲线2”调整图层，设置参数如图所示。
1按住Alt键并在“曲线2”层和“显示2”层之间单击，创建一个剪切蒙版。新建一个组，命名为Group 2，将Curve 2图层、Show 2图层和圆角矩形3图层移动到这个组中，如图。
12使用上述操作方法，添加其他展示图，制作“第3组”和“第4组”的内容，如图所示。
13大闸蟹详情页完成，最终效果如图。