实例二、分解组合椅子照片 用局部细节图做精美网页设计

　　素材照片如下

　　完成效果如下

　　大家仔细观察，可以发现上面个网页上的所有图片其实都是来自于素材照片的不同部分。

　　这张普通的椅子包含了各种各样的线条、图案、颜色、孤线及转角位，它们充满着对比(如浅色及深色，直角与圆角)。

　　在整个版面中分为上下两部分，它们各自所形成的视觉效果并不一样。上面部分显得开阔平静，而下面部分则显得饱满充实。

　　这个版面的上下两部分的构图差别非常大。我们只利用一张图片就可以使整个版面充满视觉对比，包括不同的尺寸、材料、图案、形状及方向的对比。

　　上面的开阔设计使到眼睛很容易就集中在那张椅子上。

　　而下面显得很充实的版面传达一种动感及丰富的层次感。在这部分中并不存在一个视觉焦点，因为所有的图片都是在大小不一的矩形区域中，产生了不同的方向感。

　　我们将下部分其中几张小图片用颜色区域代替，并加上标题来使设计显得更具吸引力。现在的关键问题是我们要选择什么样的颜色才能与整个版面配合。

　　我们首先用吸管在椅子上取一种颜色，然后看一下这种颜色在色轮中是处在哪一个位置上。

　　在这个例子中，椅子上的所有颜色几乎都是暧色调，为了使整个设计具有暧色调的感觉，我们可以采用一种相近色来作为搭配。两种相近色具有同一种基色，具体在这个例子中，我们从上图的色轮可以看出，棕色与草绿色都包含了黄色这种基色。这种拥有同一种基色的颜色总是能够形成良好搭配效果。

　　如果你不希望整个版面有太多的暧色，那我们可以采用补色(即在色轮中相对的颜色或相隔 180 度的颜色)搭配。

　　为了使版面能够形成强烈对比，或希望整个版面充满动感，我们可以采用补色搭配，因为互为补色的两种颜色能够形成高强度对比的视觉效果。但是，补色搭配会使到两部分的区域在视觉上都一样具有强烈的视觉效果，从而会互相削弱对方。为了解决这个问题，我们将其中一种颜色变浅(在上图中，我们是将蓝色变浅)，减少蓝色的“气势”，这样使到棕色区域仍然能够突围而出。

　　本文所用的颜色如下：