设计图片路径式版面

《设计图片路径式版面》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、一组图片排列在一起，既可以丰富版面的信息，还可以在视觉上形成一条路径，引导读者眼睛去到最重要的信息上。这种设计能够轻易使你的版面突破平凡，在引导读者眼睛移动时也使整个版面充满动感。虽然设计这种版面并不复杂，但其中涉及的一些基本原则我们却不能忽略。在这里我们介绍一种简单的办法使你能够更强烈地传递你版面信息，把你的版面变成一条路径，然后在路径中放上六张（当然，也可以随你喜欢）醒目的图片，这些图片从最左方开始。而文字则放在右边，读者在观看时会很自然地沿着这些图片从左到右去到那些文字上面。看一下我们已经做好的效果：从左到右：我们的眼睛在看一样东西时总习惯从左到右，图片从左方开始，符合我们一般人

2、的观看习惯，而一直去到版面右边的文字信息（包括LOGO、价格及标题等）时停止，也可以随你喜欢放上你认为重要的其它信息。看一下我们具体是怎么做的。1、为了达到有足够距离移动的效果，我们需要采用类似于上面这种尺寸的版面（上面的宽与高的比例为2:1），这种尺寸适用于网页上狭窄区域的广告排版，也可以作为明信片、宣传单张及宣传卡片等单独印刷。2、创建图片路径：将你的图片安排成单独的一行排列，从最左方的边缘开始，而右边则留有一些间距（这个间距使到读者的眼光最终停留在页面里）。而图片与图片之间则相邻排列，不留间隙，使读者的眼光在观看时一气呵成。3、加入焦点元素：这个焦点元素可以是你公司的LOGO或图

3、片，当然，这个焦点元素必须放在右边的区域，留意上图这个油漆刷，我们采用的是这个油漆刷的轮廓图片，而不是象那些排列图片的矩形图片，这样可以达到两个目的：一，更容易吸引读者的眼光，二，这个油漆刷轮廓所形成的不规则边缘与上方那些整齐的矩形图片形成对比，使整个版面不会变得过于沉静。4、加上文字：将文字加在接近图片的右方末端区域，留意上图文字，这些文字均是左对齐排列，而且是以其中一张图片的边缘作为对齐参考线。注意不要让这些文字干扰图片的视觉效果，所以我们采用一种低调的字体及颜色，这样可以避免读者在观看这些图片时受到其它元素的干扰。这种版面设计虽然简单，但却有几点需要特别注意：为了达到最佳效果，这

4、些图片尺寸应该是相同的。如果象下方小图那样，图片大小不一，将会减慢甚至阻止读者观看这些图片的视线移动。眼睛水平线的地方最适合放置图片（你可想象一下眼睛在你脸上处于哪一个水平位置，应该是在脸部略为偏高的地方）。必须避免象小图那样，将版面的高度分成三等份，三等份的间隔使整个版面显得呆板，不吸引。如前所述，最右方图片与版面右边边缘留有一段小间距，使到读者的眼睛移动到这里时嘎然中止，这样才会使读者的眼睛观看处于图片末端区域的其它元素。但如果图片离右方边缘的间距太小（如小图所示），那读者的眼睛就来不及“刹车”，会一直去到页边的外边这条图片路径到底需要采用多少张图片才合适？当然要看具体情况，但是，

5、越多的图片移动感就越强，象上图示意图所示，如果只采用三张图片，虽然图片的尺寸变大会吸引读者（这也是一种设计，但用在这里却并不合适），但三张图片形成不了一条路径的感觉，这也意味着削弱了整个版面的动感。读者在看这三张图片时是将它们分别当作单独的个体，而不是一条路径。在处理这种图片路径时，除了要用相同的尺寸图片外，还要保证每一张图片给人的感觉相似，所以我们在剪切时需要特别注意。上图是没有经过剪切的滑雪图片——人物在这些图片中的位置各不相同，有些背景很宽阔，有些又比较收紧，而且每张图片的比例也不一样。我们的任务就是要让这些图片在最终排列时是呈现相似的视觉效果，在剪切时要保证每张图片中的人物均处

6、于相似的位置（在这个例子中，我们要让人物都处于图片的中间），我们首先从上方箭头处的那张图片开始处理，然后其它图片均与它为准剪切。为什么要先从最狭窄的图片下手，道理很简单：最狭窄的图片在剪切时灵活性最少，我们只能用其它图片去迁就它，而不能让它去迁就别的图片。上方是剪切后的图片，这七张图片虽然人物和动作各不相同，但给人的感觉却很协调，这正是我们想要达到的目的。人物的主要部分均处于上图虚线区域里。我们有一点要记住：在这里，我们并不需要让某张图片特别抢眼，相反，我们希望它们都给人同一种感觉。。