分享

听说电商美工都在用这本设计案例专著

 一色惊鸿 2023-05-25 发布于辽宁

图片

近年来,互联网技术的快速更迭,为电商美工营造了发展空间。同时实体店铺的成本不断增加,加快了线上转型的步伐,电商平台的网店数量明显上升,电商美工也随之具备广阔的就业前景。除了在淘宝、京东、天猫等电商对于美工的需求是比较大的,入学门槛也比较低,初中毕业,零基础也能学习。

电商美工是淘宝、京东等网店页面编辑美化工作者的统称,需要精通Photoshop等设计软件,对平面,色彩 ,基调,创意等进行处理。美工专业大部分因为电子商务的兴起而发展的职业,主要负责公司形象包装、网站优化、产品宣传画册、电子商务专题设计等工作

随着我国电子商务产业的蓬勃发展,互联网商家之间的竞争越发激烈。商家的店铺装修、商品展示直接影响消费者对产品的第一印象,关系到顾客到店成交的概率。网店展示是商品和用户之间的一座桥梁,产品的图片带给用户最直观的视觉感受,是一种最有效的营销手段。

图片

图片

作为电商美工从业者,在店铺装修设计与产品优化处理工作中用得最多的软件就是Photoshop(PS)。如何利用PS提升网店的视觉营销效果,从而赢得消费者的关注和信赖,提升网店产品的成交率,是当下电商美工岗位必须掌握的一项关键技能。

对于网店美工设计来说,在设计中有效地使用色彩至关重要。对色彩探索得越多,越能培养设计师良好的色彩组合直觉和鉴赏力。

图片

色彩的三要素 / Colour

色彩三要素是指色彩的色相、纯度和明度。人眼看到的任一彩色光都是这三个特性的综合效果。

色相

色相指的是色彩的特征和相互区别。因波长不同的光波作用于人的视网膜,人便产生了不同的颜色感受,形成色彩。色相具体指的是红、橙、黄、绿、青、蓝、紫等。

光和物体的色相千差万别,为了便于归纳组织色彩,我们将具有共性因素的色彩归类,并形成了一定的秩序,如大红、深红、玫瑰红、朱红及不同明度、纯度的红色,都归入红色系中。色相秩序的确定是根据太阳光谱的波长顺序排列的,即红、橙、黄、绿、青、蓝、紫等,它们是所有色彩中最突出的,纯度最高的典型色相,图1-1所示为常见的12色相环。

图片

图1-1 常见的12色相环

纯度

纯度指的是色彩的鲜艳程度,也称为色彩的饱和度、彩度、鲜度、含灰度等。决定色彩纯度的因素是多方面的。从光的角度来说,光波波长越单一,色彩越纯;光波波长越混杂,色彩越不纯。比如,当各色彩光波波长比例均衡时,各单色光的色性消失,纯度为零。任何一个标准的纯色,一旦混入黑、白、灰色,色性纯度都会降低,混入越多,色彩越灰。同一高纯度色彩在强光或弱光的照射下,色彩的纯度也相应降低。图1-2所示为不同纯度的颜色效果。

图片

图1-2 不同纯度的颜色效果

明度

明度是指色彩的深浅和明暗所显示出的程度。物体受光量越大,反光越多。黑色是反光率最低的色,而白色是反光率最高的色。将黑色和白色列在色彩明度的两极,黑色作为零度色标,白色作为10度色标,它们之间的色分为9个明度色标,形成了一个明度色阶序列,图1-3所示为各色彩的明度变化。

图片

图1-3 各色彩的明度变化

颜色的明度高低

各色相的明度中,柠檬黄明度高,常见的警示色大多用黄色。蓝紫色的明度低,橙色和绿色属于中明度,红色和蓝色属于中低明度。

色彩的混合/ Colour

本小节将介绍三原色及色彩的加色混合和减色混合,学习之后能掌握色彩混合的原理,可以任意地混合颜色。

1. 三原色

三原色是指色彩中不能再分解的三种基本颜色。利用三原色,可以混合出人类视觉可以感知的任意颜色。三原色分为色光三原色和颜料三原色。色光三原色是红、绿、蓝;颜料三原色是红(品红)、黄(柠檬黄)、青(湖蓝),如图1-4所示。

图片

图1-4 三原色

2. 色彩混合

色彩混合是指某一色彩中混入另一种色彩。两种不同的色彩混合,可获得第三种色彩。在颜料混合中,加入的色彩越多,颜色越暗,最终变为黑色。反之,色光三原色能综合产生白色光。

(1)加色混合。色光混合变亮,称为加色混合。红、绿、蓝三光叠加为白,是电脑、电视、手机的发光配色原理,称为加色混合,如图1-5所示。

图片

图1-5 加色混合

1.红光+绿光=黄光

2.红光+蓝紫光=品红光

3.蓝紫光+绿光=青光

4.红光+绿光+蓝紫光=白光

5.红光+绿光(不同比例)=橙、黄、黄绿

6.红光+蓝紫光(不同比例)=品红、红紫、紫红蓝

7.紫光+绿光(不同比例)=绿蓝、青、青绿

8.红光(不同比例)+绿光(不同比例)+蓝紫光(不同比例)=更多的颜色

(2)减色混合。颜料混合变暗,称为减色混合。有色物体(包括颜料)能够显色,是因为物体对光谱中的色光选择吸收和反射的结果。两种以上的色料混合在一起,部分光谱色光被吸收,光亮度被降低。印染染料、绘画颜料、印刷油墨等各色的混合或重叠,都属于减色混合。品红、黄、青三种颜料原色加在一起,混合成黑色,称为减色混合,如图1-6所示。

图片

图1-6 减色混合

1.品红+黄=红

2.青+黄=绿

3.青+品红=蓝

4.品红+青+黄=黑

不同颜色的概念

在色彩学中,品红、黄、青三原色称为一次色;两种不同的原色相混合所得的色称为二次色,又称为间色,红、绿、蓝即为间色;两种不同的间色相混合所得的色称为三次色,又称为复色。

色彩的联想

色彩联想分为具体联想和抽象联想。具体联想是由看到的色彩联想到具体的事物,如看到红色,联想到太阳、火焰、红旗等;抽象联想是由看到的色彩联想到某种抽象概念,比如红色联想到温暖、危机、喜庆等。下面介绍不同色彩产生的不同联想。

1. 红色

红色在原色相中纯度最高,对人的视觉刺激最强,在视觉上产生一种临近感和扩张感。红色的效果富有刺激性,包含着一种热情的力量,象征着希望、幸福、生命。

红色让人联想到火焰、太阳、鲜血、花卉,给人温暖、兴奋、热烈、希望、忠诚、健康、充实、饱满、幸福之感。图1-7所示的拼多多主图的红色页面,带有强烈的视觉冲突。

图片

图1-7 红色的联想

2. 橙色

高纯度、高明度的橙色是一种富足、快乐而温暖的色彩。橙色的明度高,在工业安全用色中是警戒色。

橙色让人联想到橘子、火焰、灯光、霞光、水果、秋叶、夕阳,给人活泼、华丽、辉煌、跃动、炽热、温暖、甜蜜、健康、欢喜、幸福之感。图1-8所示的淘宝推广图大面积使用橙色,给人以青春活泼、跳跃明亮的感觉。

图1-8 橙色的联想

3. 黄色

高纯度、高明度的黄色是色彩中最亮的颜色,黄色是辉煌的,常使人产生一种欣喜、喧闹的效果。黄色能带来尖锐感和扩张感,但缺乏深度,用于食品类设计能引起人的食欲。

黄色让人联想到黄金、阳光、麦田、土地、香蕉、柠檬,给人光明、辉煌、轻快、纯净、快乐、希望、智慧之感。图1-9所示的拼多多玩具主图大面积使用黄色,带给我们可爱、活泼、天真的童心童趣。

图片

图1-9 黄色的联想

4. 绿色

绿色是稳定的,起到缓解疲劳的作用。在明度低(墨绿色)时或某种特定条件下,绿色也会带有消极意义,有时可营造出阴森、晦暗、沉重、悲哀的气氛。绿色大多数情况下会带来积极的心理感受,也是人的视觉最容易接受的颜色。

绿 色 让 人 联 想 到 大 地、 草 原、 庄 稼、 森 林、蔬菜、青山,给人自然、健康、成长、新鲜、安静、安详、和平、生命、青春、凉爽、清新之感。图1-10所示的京东床上用品首页图的绿色页面,带给人们安全、健康、环保的感觉。

图片

图1-10 绿色的联想

5. 蓝色

蓝色代表着广阔的天空色,同时又使人联想到深不可测的海洋,可表现人的沉静、冷淡、理智、博爱、透明等性格特征;蓝色也是一种体现消极、收缩、内在的色彩。

蓝色是最冷的色,表现出冷静、理智、透明、广博等特性,与积极火热的红橙色相比,是一种内敛、收缩、学习的色彩,是永恒的象征。由于蓝色具有沉稳理智、准确的意象特征,所以在强调科技、效率的商品或企业形象的网店设计中,大多选用蓝色。

蓝色让人联想到天空、海洋、水、太空、宇宙,给人平静、冷淡、理智、速度、诚实、真实、可信、深远、崇高之感,常用来表现未来、高科技、思维等信息。图1-11所示的两张拼多多主图,作为夏季产品,背景都选用蓝色的大海,给人清凉、舒适的感觉。

图片

图1-11 蓝色的联想

6. 紫色

紫色是纯度最低的色,同时又是明度最低的色,在可见光谱中,紫色的光波最短,眼睛对紫色的感知度最低,它可用于表现孤独、高贵、奢华、优雅而神秘的情感。在网店设计用色中,紫色多用于与女性有关的商品。

紫色让人联想到薰衣草、葡萄、夜空、丁香花、紫藤,给人神秘、优雅、高贵、庄重、奢华、细腻之感。图1-12所示的淘宝七夕节的紫色页面,给人以浪漫、高雅的感觉。

图片

图1-12 紫色的联想

7. 白色

白色是最干净纯粹的颜色,给人清洁、神圣、洁白、纯洁、柔软之感。白色让画面空间干净、整洁,是百搭的颜色,与任何颜色都很好搭配,黑、白、红是最为经典的搭配。

白色让人联想到雪、云、白纸、天鹅、婚纱,给人纯洁、清白、纯粹、清静、明快、空白、高尚、整洁之感。图1-13所示的抖音床上用品主图的白色页面,给人以干净、舒适的感觉。

图1-13 白色的联想

8. 黑色

黑色是无色相、无纯度的,是最暗的颜色,常让人联想到一些消极的事物。黑色表达着一种向周围的压抑和桎梏反抗的情绪,同时也表现出敏锐与锋芒。在网店设计用色中,黑色多用于与男性有关的商品或企业形象。

黑色让人联想到黑夜、黑发、魔法、死亡、黑板,给人沉静、神秘、严肃、庄重、含蓄、高贵之感,常用于表现重量、坚硬等。图1-14所示的天猫钻展图的黑色页面,给人以稳重、严谨的感觉。

图1-14 黑色的联想

9. 灰色

白到黑之间构成了灰,从浅灰到暗灰有若干种灰色,它给人宁静、高雅的印象。灰色与黑色、白色都属于无色彩,象征洗练、高贵、不卑不亢。

灰色让人联想到阴天、灰尘、烟雾、石材、乌云、水泥、烟雾,给人柔和、细致、平稳、朴素、颓废、大方、平凡、谦和、中庸之感。图1-15所示的拼多多主图的灰色页面,给人以稳重、高级的感觉。

图1-15 灰色的联想

色彩的心理学/ Colour

日常生活中观察的颜色在很大程度上受心理因素的影响,即形成心理颜色视觉感。不同的色彩会给人的感官带来不同的感受。

1. 色彩的冷暖

色彩的冷暖是指色彩心理上的冷热感觉。心理学上根据心理感觉,把颜色分为暖色调(红、橙、黄、棕)、 冷 色 调(绿、 蓝、 紫)和 中 性 色 调(黑、 灰、白)。暖色调会给人热闹、鲜艳、愉快、动感等感觉,冷色调给人沉稳、冷峻、寒冷、凉爽、整齐等感觉。

冷暖是具有相对性的,即便是同一色调的色彩,也会因为是更趋向温暖的橙色、黄色还是更趋向寒冷的蓝色而呈现不同的冷暖感觉。例如,同样是绿色,倾向黄色的黄绿色会比倾向蓝色的蓝绿色要感觉温暖一些。图1-16所示为蓝色与黄色的冷暖对比。

图片

图1-16 色彩的冷暖对比

2. 色彩的轻重

轻的色彩明度越高,感觉越轻快;重的色彩明度越低,感觉越沉重。轻而明度高的色彩给人一种柔软、安静的感觉;重而黯淡的色彩会让人感觉坚硬、厚重。图1-17所示为色彩的轻重对比。

图1-17 色彩的轻重对比

3. 色彩的软硬

色彩的软硬感取决于明度和纯度。明度越高的色彩越软,明度越低的色彩越硬。纯度越高的色彩越硬,纯度越低的色彩越软。图1-18所示为低纯度与高纯度的软硬对比。

图片

图1-18 色彩的软硬对比

4. 色彩的强弱

高纯度色彩有强感,低纯度色彩有弱感。有彩色系比无彩色系有强感,有彩色系以红色为最强。

对比度大的有强感,对比度小的有弱感。图1-19所示为无彩色与有彩色的强弱对比。

图片

图1-19 色彩的强弱对比

无彩色搭配技巧

无彩色之间可以进行搭配,白底黑字或黑底白字都非常明晰。灰色是中性色,可以和任何色彩搭配,也可以帮助两种对立的色彩实现和谐过渡。

5. 色彩的空间

色彩的空间感是色相、明度、纯度等多种对比造成的错觉现象。亮色、暖色、纯色有逼近之感,称为“前进色”。暗色、冷色、灰色有推远之感,称为“后退色”。进退效果在画面上可以造成空间感觉。如图1-20所示,产品为暖色黄色,具有前进感,背景为冷色蓝色,具有后退感,更能突出产品。

图1-20 色彩的空间对比

好书推荐

Good Book Recommendation

北京大学出版社

案例学:Photoshop 电商美工设计

内容简介

本书打破了传统脱离实际的单一软件技能操作的讲解模式,完全从“学以致用、经验总结”的角度出发,首先给读者讲解了Photoshop电商美工设计的相关行业知识、设计美学基础、电商美工设计流程与规范等内容,然后精选了Photoshop在电商美工设计中的七大典型应用领域案例,系统并全面地讲解了Photoshop电商美工设计的实战应用和设计经验。

全书分两部分共10个章节,第1部分为设计知识(第1~3章),本部分内容主要介绍了电商美工设计的相关要素及设计的美学知识,让你站在新的起点和高度去实现设计的想法与创意;第2部分为设计实战(第4~10章),本部分主要针对Photoshop电商美工设计应用领域及分类(包括网店的店标设计、网店的店招设计、首页其他模块设计、网店的详情页设计、网店的海报设计、网店的主图及推广图设计、移动端网店装修设计),剖析了大量设计案例的设计思路、方法与流程,让读者不仅能学会如何设计操作,还能知道设计理念与缘由,真正快速掌握Photoshop电商美工设计的相关经验与实战技能。

本书内容全面,讲解清晰,图文直观,既适合Photoshop初、中级读者学习使用,也适合从事电商美工设计行业而又缺乏设计经验与实战经验的读者学习参考,同时还可以作为大、中专职业院校和各类电商培训班的学习教材与参考用书。

作者简介

凤凰高新教育专注于高质量图书策划与出版。集团总裁为知名图书策划人及内容创作者,曾任五月花学院(现希望教育集团)教研总监,负责教学、教材研发和教师培训,具有丰富的教学经验。对Office办公、图形设计、IT新技术等领域有深入研究和独到见解,策划出版了100多本畅销书,包括《Word/Excel/PPT 2016三合一完全自学教程》《精进PPT——PPT设计思维、技术与实践》《Excel数据分析思维、技术与实践》《案例学——Photoshop商业广告设计(全新升级版)》等,广受读者的认可和好评。

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多