橘云网-淘宝店铺装修设计论坛

标题: 如何合理运用一张图来排版 [打印本页]

作者: Juyun123 时间: 2016-4-8 15:24
标题: 如何合理运用一张图来排版
如果手头上没有合适素材，可以通过从原始图片中获得几个小图来协同你的版面设计。
比如下图：

你有没有注意到在大图中隐蔽着一点小图片吗，因此我们把一大幅相片剪切成多张小图片。
而且，因为这些小图片都是来自同一幅大图，因此它们的色调及图片都显得很统一，这使你的设计很容易就得到协调的效果。

其中的重点就是你要选取好到底要哪部分。我们可想象一下我们是在跟别人讲一故事。一幅从大照片出来的小照片其实有着一种全新的意义，这个步骤本身就非常有趣。把图中各个不同的部分分离，之后看一下我们到底有什么信息可传达给别人。

当我们一眼望去这张海滩的照片时，我们是把它看成一整体的，或者多或者少会对其中的细处置若罔闻。但假如我们把各部分分离，我们会发现，其实每一部分都隐蔽着一“故事”，都有着各自的关键。
见上图右下角小图中，我们就会想，海岸线到底有多长?这张照片虽然显得有点小，但由于它里面包括了陆地和大海，因此这张照片可使之和其他两张我们截取的照片形成统一。

一张人间天堂式的景色，它是驶离陆地也是预备靠岸?假如我们没有看原始图片，我们无从判断。

   旧的总比新的更有性格。我们选取这艘破旧的小舟，让你不禁在想，这艘小舟见证了多少的风雨?当我们从大图中截取让它变成一张单独的照片时，这艘小舟显得孤伶伶的，它之前的主人是谁?它此时为什么会停在这儿?旁边的那些脚印又是谁保留的?
   我们只截取小舟的舟头部分，这部分只占原来的大图非常小的地方，还不到十分之一。但我们却把它作为版面的大图，如此，它给人的尺寸觉得就完全调整了，此时，它成只为一有趣的视觉焦点。上图中，三张照片的尺寸都不同样，右半的特殊大，左下的照片特殊小，这种不同尺寸的照片可让我们的整个版面产生层次感。而读者的眼睛就会从右的到左(上图下的线条表示了读者在观看时的视觉线路)。

   采用上方的这种手法，我们还可创造出其他一种完全不同视觉效果的设计。

下方这个网页上的所有照片其实都是来自于上方这张椅子的相片。

假如你细心查看一下那张椅子的相片，你就会发觉其实这张普通的椅子包含了各种各样的线条、图片、色彩、孤线及转角位，它们充满着对比(如浅色及深色，直角和圆角)。

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

这个版面的上下两部分的构图差异很大。我们只运用一幅照片就可使整个版面充满视觉对比，包括不同的尺寸、材料、图片、外形及方向的对比。

上方的开阔设计使到眼睛非常轻易就集中在那张椅子上

而下方显得非常充实的版面传达一种动感及丰富的层次感。在这部分中并不存在一视觉焦点，由于所有的照片都是在大小不一的矩形区域中，产生了不同的方向感。
我们把下部分其中几张小照片用色彩区域代替，并添加标题来使设计显得更具吸引力。此时的重点问题是我们要选取什么样的色彩才能和整个版面协同。

我们第一步用吸管在椅子上取一种色彩，之后看一下这种色彩在色轮中是处于哪一地方上。

在这个例子中，椅子上的所有色彩差不多都是暧色调，只为使整个设计具有暧色调的觉得，我们可采用一种相近色来作为搭配。两种相近色具有同一种基色，详细在这个例子中，我们从上图的色轮可看出，棕色和草绿色都包含了黄色这种基色。这种拥有同一种基色的色彩总是能够形成良好搭配效果。

   假如你不希望整个版面有太多的暧色，那我们可采用补色(即在色轮中相对的色彩或者相隔 180 度的色彩)搭配。
   只为使版面能够形成强烈对比，或者希望整个版面充满动感，我们可采用补色搭配，由于互为补色的两种色彩能够形成高强度对比的视觉效果。可是，补色搭配会使到两部分的区域在视觉上都同样具有强烈的视觉效果，从而会互相削弱对方。
   只为解决这个问题，我们把其中一种色彩变浅(在上图中，我们是把蓝色变浅)，减少蓝色的“气势”，如此使到棕色区域仍旧能够突围而出。

来源：三联设计教程

欢迎光临橘云网-淘宝店铺装修设计论坛 (http://www.juyun123.com/bbs/)