2.4 页面图像配色与编修要领_手机网店美工实操：淘宝天猫掌上店铺设计与装修（全彩）-QQ阅读男生历史网

上QQ阅读APP看本书，新人免费读10天

设备和账号都新为新人

2.4　页面图像配色与编修要领

掌上店铺的页面配色通常是指设计的各个图像区域的色调，将整体色调进行统一，使主题更加鲜明。色彩搭配一定要合理，要与产品相符，这样会给人一种和谐、愉快的感觉，一定要避免容易使人产生视觉疲劳的纯度过高的单一色彩。

2.4.1　色彩搭配

色彩与人的心理感受和情绪有一定的关系，利用这一点可以在设计时形成自己独特的色彩效果，从而给买家留下深刻印象，加大产品的售出概率。不同的色彩给人不同的感受，色彩主要按照色相、印象及色系分类。

按照色相分类

常见的色彩搭配按照色相的顺序归类。每类都以该色相为主，配以其他色相或同色相，应用对比和调和的方法，按照从轻快到浓烈的顺序排序。

1.红色

红色的色感温暖，是一种对人的刺激性很强的颜色。红色容易引起人的注意，也容易使人兴奋、激动、紧张、冲动，还容易造成视觉疲劳。

根据掌上店铺主题内容的需求，单独使用红色为主色调的掌上店铺较少，多将其作为辅助色、点睛色，达到陪衬、醒目的效果。

在众多颜色里，红色是最鲜明生动、最热烈的颜色，因此它也是代表热情的情感之色，鲜明的红色极容易吸引人们的目光。常见的红色配色方案如图2-16所示。

图2-16　红色搭配

温馨提示

红色可以和蓝色混合成紫色，可以和黄色混合成橙色。红色和绿色是对比色；红色的补色是青色。红色是三原色之一，能和绿色、蓝色调出任意色彩。

应用红色系的掌上店铺多数以卖婚庆用品为主，红色还会出现在卖女装、化妆品或做店庆活动的页面中，以提醒大家注意，通过配色产生的粉色页面会给人一种温馨的感觉，如图2-17所示。

图2-17　红色系掌上店铺

2.橙色

橙色可以产生轻快、欢欣、收获、温馨、时尚的效果，是给人以快乐、喜悦、能量的色彩。橙色又称橘色，为二次颜料色，是红色与黄色的混合。在光谱上，橙色介于红色和黄色之间。

橙色在空气中的穿透力仅次于红色，而色感较红色更暖，最鲜明的橙色是色彩中感受最暖的颜色，给人以庄严、尊贵、神秘等感觉。许多权贵和宗教都用它装点自己，也常常作为标志色和宣传色。不过，它也是容易造成视觉疲劳的颜色。橙色明视度高，在工业安全用色中，它是警戒色，用于火车头、登山服装、背包、救生衣等。橙色一般可作为喜庆的颜色，也可作为富贵色，如皇宫里的许多装饰。红、橙、黄三色均称暖色，橙色可作为餐厅的布置色，据说可以增加食欲。常见的橙色配色方案如图2-18所示。

温馨提示

橙色是一种非常惹人注目的颜色。橙色的对比色是蓝色，这两种颜色的彩度倾向越明确，对比强度就越大。除了正宗的对比色橙色和蓝色，橙色和绿色随着纯度的升高，达到的对比效果也很强烈。

图2-18　橙色搭配

橙色主要应用于与食物有关的店铺页面中。由于橙色也是积极活跃的色彩，所以还会经常在家具用品、运动及儿童玩具等掌上店铺中出现，图2-19所示的图像是橙色与黄色等邻近色搭配的食品掌上店铺，在视觉效果上井然有序，整个页面看起来非常诱人，使人胃口大开，正好能够体现食品店铺的宗旨。

图2-19　橙色系掌上店铺

3.黄色

黄色是阳光的色彩，具有活泼与轻快的特点，给人十分年轻的感觉，象征光明、希望、高贵、愉快。浅黄色表示柔弱，灰黄色表示病态。黄色的亮度最高，和其他颜色配合很活泼，有温暖感。黄色也代表着土地，象征着权力，还具有神秘的宗教色彩。常见的黄色配色方案如图2-20所示。

图2-20　黄色搭配

温馨提示

黄色能和众多颜色搭配，但是要注意和白色的搭配，因为白色是“吞没”黄色的色彩，会使人看不清楚。另外，深黄色最好不要与深紫色、深蓝色、深红色搭配，否则会使人感觉晦涩与失望；淡黄色不要与明度相当的色彩搭配，要拉开明度上的层次关系。黄色与红色搭配可以营造一种吉祥喜悦的气氛；黄色与绿色搭配会显得有朝气活力；黄色与蓝色搭配可以显得美丽清新；淡黄色与深黄色搭配可以衬托出高雅。

黄色与某些食品色彩相似，可以应用于食品类的店铺。另外，黄色具有金色的光芒，代表权力和财富，是一种“骄傲”的色彩，因此很多店铺都会使用它来体现商品的高档与华贵，黄色也可以应用在珠宝首饰店中，图2-21所示就是黄色系掌上店铺。

图2-21　黄色系掌上店铺

4.绿色

绿色在色谱上位于黄色和蓝色之间，属于较中庸的颜色，给人以平和、安稳、大度、宽容之感，是一种柔顺、恬静、满足、优美、受欢迎之色，也是掌上店铺页面中使用最广泛的颜色之一。

绿色是自然之色，有永恒、欣欣向荣之意，代表生命与希望，也充满了青春活力，象征着和平与安全、发展与生机、舒适与安宁、松弛与休息，有缓解眼部疲劳的作用。

绿色能使人们的心情变得格外明朗。黄绿色代表清新、平静、安逸、和平、柔和、春天、青春、生机。常见的绿色配色方案如图2-22所示。

温馨提示

当绿色中黄色的成分较多时，其就趋于活泼、友善、幼稚；在绿色中加入少量的黑色，其就趋于庄重、老练、成熟；在绿色中加入少量的白色，其就趋于洁净、清爽、鲜嫩。

图2-22　绿色搭配

绿色通常与环境保护有关，也经常被联想到与健康有关的事物，所以绿色系经常会被用于与自然、健康有关的掌上店铺，还经常被用于与生态特产、护肤品、儿童用品或健康食品等有关的掌上店铺，图2-23所示就是绿色系掌上店铺。

图2-23　绿色系掌上店铺

5.蓝色

蓝色是色彩中比较沉静的颜色，象征着永恒与深邃、高远与博大、壮阔与浩渺，是令人心境畅快的颜色。

蓝色代表着朴实、稳重、内向，是活跃且具有较强扩张力的色彩，同时也活跃页面。另外，蓝色又有消极、冷淡、保守等意味。蓝色与红色、黄色等色运用得当，能构成和谐的对比调和关系。

蓝色是冷色调中最典型的代表色，是掌上店铺页面中运用得最多的颜色之一，也是许多人钟爱的颜色。常见的蓝色配色方案如图2-24所示。

图2-24　蓝色搭配

温馨提示

在蓝色中添加少量的红、黄、橙、白等色，均不会对蓝色构成较明显的影响；当蓝色中黄色的成分较多时，其就会趋于甜美、亮丽、芳香；在蓝色中混入少量的白色，可使蓝色趋于焦躁、无力。

蓝色表达着深远、永恒、沉静、无限、理智、诚实、寒冷等多种感觉。蓝色会给人很强烈的安稳感，还能够表现出和平、淡雅、洁净、可靠之感等。蓝色多用于科技产品、家电产品、化妆品或旅游类型的掌上店铺，图2-25所示就是蓝色系掌上店铺。

图2-25　蓝色系掌上店铺

6.紫色

紫色可以说是最具优雅气质的颜色，给人以成熟和神秘之感，是女性的专属色之一。从T台秀场到街拍，紫色常出现在人们的视线中，有的优雅、高贵，有的极具街头范儿，大家的精彩搭配，显示出了紫色的百变魔力。然而，紫色并不好驾驭，如果搭配不当则会显得过于老气。紫色的明度在彩色色料中是最低的。紫色的低明度给人一种沉闷、神秘的感觉。常见的紫色配色方案如图2-26所示。

图2-26　紫色搭配

温馨提示

当紫色中红色的成分较多时，其具有压抑感、威胁感；在紫色中加入少量黑色，其就趋于神秘、难以捉摸、高贵之感；在紫色中加入白色，可使紫色沉闷的意味消失，变得优雅、娇气，并充满女性的魅力。

紫色通常被用于以女性为对象或以艺术品为主的掌上店铺。另外，紫色是高贵、华丽的色彩，很适合表现珍贵、奢华的商品。图2-27所示为紫色系店铺效果。

图2-27　紫色系掌上店铺

按印象的搭配分类

色彩搭配虽然复杂，但并不神秘。既然每种色彩在印象空间中都有自己的位置，那么色彩搭配得到的印象就可以用“加减法”来近似估算。如果每种色彩都是高亮度的，那么它们叠加后自然会是柔和、明亮的；如果每种色彩都是浓烈的，那么它们叠加后就会是浓烈的。当然，在实际设计过程中，设计师还要考虑到“乘除法”，比如同样亮度和对比度的色彩，在色环上的角度不同，搭配起来就会得到千变万化的效果。因此，色彩除了按色相搭配，还可以将印象作为搭配分类的方法。

1.柔和、明亮、温柔

亮度高的色彩搭配在一起就会得到柔和、明亮、温和的感觉。为了避免刺眼，设计师一般会用低亮度的前景色调和，同时色彩在色环之间的距离也有助于避免沉闷，如图2-28所示。此类色彩常被用于与女性有关的掌上店铺。

图2-28　柔和、明亮、温柔

2.柔和、清洁、爽朗

对于柔和、清洁、爽朗的印象，色环中蓝色到绿色之间的颜色应该是最符合的，并且它们亮度偏高，几乎每个组合都可以有白色参与。当然，在实际设计时，可以用与蓝、绿色相反色相的高亮度有彩色代替白色，如图2-29所示。此类色彩常被用于与厨卫有关的掌上店铺。

图2-29　柔和、清洁、爽朗

3.可爱、快乐、有趣

可爱、快乐、有趣的色彩搭配特点是色相分布均匀、冷暖搭配、饱和度高、色彩分辨度高，如图2-30所示。此类色彩常被用于与儿童有关的掌上店铺。

4.活泼、快乐、有趣

相对前一种印象，活泼、快乐、有趣的色彩选择更加广泛，最重要的变化是将纯白色用低饱和有彩色或灰色取代，如图2-31所示。此类色彩也常被用于与儿童有关的掌上店铺。

图2-30　可爱、快乐、有趣

图2-31　活泼、快乐、有趣

5.运动、轻快

运动的色彩要强化激烈、刺激的感受，还要体现健康、快乐、阳光，因此饱和度较高、亮度偏低的色彩在这类印象中经常登场，如图2-32所示。此类色彩常被用于与运动有关的掌上店铺。

图2-32　运动、轻快

6.轻快、华丽、动感

华丽的印象要求页面充斥有彩色，并且饱和度偏高，而亮度适当减弱则能强化这种印象，如图2-33所示。此类色彩常被用于与户外运动有关的掌上店铺。

图2-33　轻快、华丽、动感

7.狂野、充沛、动感

狂野的印象空间中少不了低亮度的色彩，甚至可以用适当的黑色搭配。其他有彩色的饱和度高，对比强烈，如图2-34所示。此类色彩常被用于与户外运动有关的掌上店铺。

图2-34　狂野、充沛、动感

8.华丽、花哨、女性化

在女性化的页面中，紫色和品红色是主角，粉红色、绿色也是常用色相。一般它们之间要进行高饱和的搭配，如图2-35所示。此类色彩常被用于与女性有关的掌上店铺。

9.回味、女性化、优雅

要给人以优雅的感觉，色彩的饱和度一般要降下来，一般以蓝色和红色之间的相邻色来搭配，并调节亮度和饱和度，如图2-36所示。此类色彩常被用于与女性有关的掌上店铺。

图2-35　华丽、花哨、女性化

图2-36　回味、女性化、优雅

10.高尚、自然、安稳

高尚一般要用低亮度的黄绿色表示，色彩亮度降下去，注意色彩的平衡，页面就会给人安稳之感，如图2-37所示。此类色彩常被用于与老人有关的掌上店铺。

图2-37　高尚、自然、安稳

11.冷静、自然

绿色是冷静、自然印象的主角，但是若以绿色作为页面的主要色彩，容易使人陷入过于消极的感觉之中，因此应该特别重视图案的设计，如图2-38所示。此类色彩常被用于与茶有关的掌上店铺。

图2-38　冷静、自然

12.传统、高雅、优雅

传统的内容一般要降低色彩的饱和度，棕色是高雅和优雅印象的常用色相，如图2-39所示。此类色彩常被用于与家纺用品有关的掌上店铺。

图2-39　传统、高雅、优雅

13.传统、稳重、古典

传统、稳重、古典都是保守的印象，在色彩的选择上应该尽量用低亮度的暖色，这种搭配符合成熟的审美，如图2-40所示。此类色彩常被用于与家具建材有关的掌上店铺。

图2-40　传统、稳重、古典

14.忠厚、稳重、有品位

亮度、饱和度偏低的色彩会给人忠厚、稳重的感觉。为了避免色彩过于保守，使页面僵化、消极，这样的搭配应当注重冷暖结合和明暗对比，如图2-41所示。此类色彩常被用于与珠宝或仿古产品有关的掌上店铺。

图2-41　忠厚、稳重、有品位

15.简单、洁净、进步

简单、洁净的色彩在色相上可以用蓝色、绿色表现，并且大面积留白。而营造进步的印象可以多用蓝色，搭配低饱和的色彩甚至灰色，如图2-42所示。此类色彩常被用于与男性有关的掌上店铺。

图2-42　简单、洁净、进步

16.简单、时尚、高雅

灰色是最平衡的色彩，并且是塑料和金属质感的主要色彩之一，因而要表达高雅、时尚，可以适当甚至大面积使用灰色，但是要注重图案和质感的构造，如图2-43所示。此类色彩常被用于与男性用品有关的掌上店铺。

图2-43　简单、时尚、高雅

17.简单、进步、时尚

简单、进步、时尚的色彩多以灰色、蓝色和绿色作为主导色，在网页中多表示时尚、大方，如图2-44所示。此类色彩常被用于经营男性用品的掌上店铺。

图2-44　简单、进步、时尚

按色系分类

色系即色彩的冷暖。在色彩学上，根据心理感受把颜色分为暖色系（红、橙、黄）、冷色系（青、蓝、绿）和中性色系（黑、灰、白），图2-45所示为冷暖色调分布色相。

图2-45　冷暖色系

1.冷色系

青色、绿色、蓝色都属于冷色系，给人以专业、稳重、清凉的感觉，图2-46所示为冷色系掌上店铺。

图2-46　冷色系掌上店铺

2.暖色系

暖色系是由太阳的颜色衍生出来的颜色，红色和黄色给人以温暖、柔和的感觉。春天色系和秋天色系的人比较适合穿暖色系的衣服，化暖色系的妆，如图2-47所示为暖色系掌上店铺。

图2-47　暖色系掌上店铺

3.中性色系

中性色系指黑、白、灰三种颜色，可以与任何色系搭配，图2-48所示为中性色系掌上店铺。

图2-48　中性色系掌上店铺

若文字与主色调搭配合理，会直接提升整个页面的视觉效果，下面详细讲解图像主色背景与文字色彩的搭配，如表2-1所示。

表2-1

续表

温馨提示

使用颜色配比表，可以大大减少制作者网页配色的时间，还可以在此基础上发挥想象力，搭配出更有新意、更醒目的颜色，使店铺更具竞争力。

2.4.2　色彩调和

两种或两种以上的色彩合理搭配，产生统一和谐的效果，称为色彩调和，通过图2-49所示色环颜色对比可以更清楚地了解色彩调和。

图2-49　色环

1.同种色的调和

同种色的调和指相同色相、不同明度和纯度的色彩调和。方法：使色彩循序渐进，在明度、纯度的变化上形成强弱、高低的对比，以弥补同种色调和的单调感，如图2-50所示。

图2-50　同种色配色

2.类似色的调和

色相接近的某类色彩（如红色与橙色、蓝色与紫色等）的调和，称为类似色的调和。类似色的调和主要通过类似色之间的共同色产生作用，如图2-51所示。

图2-51　类似色配色

3.对比色的调和

对比色的调和是色相相对或色性相对的某类色彩（如红色与绿色、黄色与紫色、蓝色与橙色）的调和。方法：选用一种对比色将其纯度提高或降低另一种对比色的纯度；在对比色之间插入分割色（金色、银色、黑色、白色、灰色等）；采用面积不同的处理方法，达到对比中的和谐；对比色之间具有类似色的关系，也可起到调和的作用，如图2-52所示。

图2-52　对比色配色

2.4.3　强调色彩

强调色彩又名突出色彩，是网店页面设计时有特殊作用的色彩；是为了达到某种视觉效果时与静态色彩对比反差较大的突出色彩；是在店招中带有广告推荐意义的特殊色彩；是在大段文字中为了突出重点而通过不同色彩加注文字等，图2-53所示为作为强调色彩的文字、标签和商品、人物肤色与静态色彩的背景产生了强烈对比。

图2-53　强调色彩

2.4.4　色彩基本原理

了解如何创建颜色，以及如何将颜色相互关联可以更有效地工作。只有对基本颜色理论进行了了解，才能使作品产生一致的效果，而不是偶然获得某种效果。在对颜色进行创建的过程中，可以依据加色原色（RGB）、减色原色（CMYK）和色轮完成最终效果。

1.加色原色

加色原色是指三种色光（红色、绿色和蓝色），当按照不同的组合将这三种色光添加在一起时，可以生成可见色谱中的所有颜色。添加等量的红色、蓝色和绿色光可以生成白色，完全缺少红色、蓝色和绿色光将生成黑色。计算机的显示器是使用加色原色创建颜色的设备，如图2-54所示。

图2-54　加色原色（RGB）

2.减色原色

减色原色是指一些颜料，当按照不同的组合将这些颜料添加在一起时，可以创建一个色谱。与计算机的显示器不同，打印机使用减色原色并通过减色混合生成颜色。使用“减色”这个术语是因为这些原色都是纯色，将它们混合在一起后生成的颜色都是原色的不纯版本。例如，橙色是通过将洋红色和黄色进行减色混合创建的，如图2-55所示。

图2-55　减色原色（CMYK）

3.色轮

如果你是第一次调整颜色分量，在处理色彩平衡时使用标准色轮图表会很有帮助。可以使用色轮预测颜色分量的更改如何影响其他颜色，并且了解这些更改如何在RGB和CMYK颜色模型之间转换。

例如，通过增加色轮中相反颜色的数量，可以减少图像中某种颜色的数量，反之亦然。在标准色轮上，处于相对位置的颜色被称作补色。同样，通过调整色轮中两个相邻的颜色，甚至将两个相邻的色彩调整为其相反的颜色，可以增加或减少一种颜色。

在CMYK图像中，可以通过减少洋红色的数量或增加其互补色的数量来减淡洋红色，洋红色的互补色为绿色（在色轮上位于洋红色的相对位置）。在 RGB 图像中，可以通过删除红色和蓝色或添加绿色来减少洋红色。所有这些调整都会得到一个包含较少洋红色的整体色彩平衡，如图2-56所示。

图2-56　色轮

2.4.5　颜色基本设置

由于掌上店铺中的图像效果多数都是在Photoshop中完成的，所以了解如何在Photoshop中设置颜色是非常重要的，其可以决定一个作品的生死，结合加色原色、减色原色与色轮，可以更有效地进行工作。那么如何才能更好地设置颜色是非常重要的工作，本节就为大家详细讲解通过 “颜色”面板和“色板”面板设置颜色的方法。

“颜色”面板

“颜色”面板可以显示当前前景色和背景色的颜色值。拖动“颜色”面板中的滑块，可以利用几种不同的颜色模型来编辑前景色和背景色；也可以从显示在面板底部的四色曲线图中的色谱中选取前景色或背景色。在菜单中执行“窗口/颜色”命令，即可打开“颜色”面板，如图2-57所示。