点击这里给我发消息 点击这里给我发消息

设计技巧杂谈 IV

添加时间:2010-6-22
    相关阅读: 网页 设计 技术 页面 链接 网站 公司

【译者的话】 如何仅仅利用简单的线条设计一个充满典雅风格的封面?在版面上如何放置多张图片?在一张大图片上加上多个说明文字区域,出来的效果永远吸引人。如何将你公司枯燥的产品名称变得更加吸引?如何通过矩形区域元素来制作一个漂亮的网页?让我们一起继续杂谈!

原文出处:www.bamagazine.com

图片:线条构成文件

用线条(技术上说,是一条线)描绘的元素可以传达出非常漂亮或电子信息感的印象,它可以将复杂的图片简化,并将本来平淡的元素变得有趣。对于一些原来缺乏冲击力的图片,这样处理是一种非常不错的补救办法,如果应用在网页上,在信息交换上也效率十足。

设计技巧杂谈 IV(图一)

居中排版:如果说,设计一个典雅的封面有什么技巧,那就是,用一种温和的颜色,字体尺寸要小,有大面积的开放空间,并用线条来描绘元素(包括边框),线条的粗细均相等。

设计技巧杂谈 IV(图二)

不同的线条:

找一张有清晰轮廓的照片,用钢笔工具沿边缘描线。你可以将不同的照片结合在一起也行。如果是对字母、数字及符号进行描边,那更加容易。线条可以是多种多样的,可以应用细线,粗线,点线或加上各种颜色的线条(见上图的几个例子,从左到右:描边,粗线条,点线,重叠)。一般来说,线条越细,出来的效果显得越经典,很有艺术味。

封面:设计一张图片相框式的封面

最近你有没有去过售卖艺术品的商店?用多张相片放在一起组成的相框现在特别热销!它们显得干净整洁,象网线排列,挂在你家的墙上,蓬荜生辉,当然,应用在页面上,效果同样不错。设计师长期以来都在使用网格线来安排版面,所以借用一下也合情合理。

设计技巧杂谈 IV(图三)

多张相片整齐放在相框里,效果当然要比那些在墙上挂满尺寸参差不齐的相框出来的效果要好很多。应用在设计上,同样有这种效果。注意上面大图中这个版面的层次感:背景区域是采用一种中性的颜色,可以同时与图片中的深色及浅色形成对比,从而使整个版面呈现深、中、浅的层次感。

设计技巧杂谈 IV(图四)

要应用这种方法时,首先要确保在一个版面中所有的图片尺寸要一样大。然后再根据图片的数量来组织成行或列或组,位置可以是向页面中心对齐(稳定、平静)或偏向一边(紧张、兴奋)。

设计技巧杂谈 IV(图五)

字体要小!均中或偏向某一边,效果一样不错

版面:在一种特别的照片用上多个说明

在我们前面的一篇文章中,我们曾经告诉你我们是很喜欢这种在图片上加上多个说明的排版技巧的,要记住的是:一定是要多个说明文字,而不是仅仅一块文字。这种技巧用在一些大图片上,效果特别不错,象是在同步传达图片的信息,但我们使用这种技巧最大的原因是,每一张照片我们都有“很多个故事”要讲给观众听。

设计技巧杂谈 IV(图六) 

(点击上图看大图)

半透明的文字背景:

这张照片魅力十足,所以在使用上,照片应该尽可能放大,然后直接在图片上方使用说明文字。背景框线条一定要细,字体形式要简单,切忌使用花里花俏的字体,某些背景设为半透明(可以填充浅灰色,再设置不透明度),使图片局部传达一种若隐若现及灵巧的感觉。

名称:在名字中加进图片

有时候,产品名称与产品本身就是天生一对,试一下这种技巧,将文字与图片紧密结合,可以比单独的文字给人留下更深刻的印象。

设计技巧杂谈 IV(图七)

有两种情况:一种是将图片直接插入,如上图中,盆景是一个说明性的图片,很容易“阅读”,加进 IKKO 的名称中。从上图示意图可以看出,要将图片当作是一个字母来对待,各个间隔要相等。

第二种情况:将图片代替其中的一个字母

设计技巧杂谈 IV(图八)

这种情况不是总会发生,即你的产品不仅仅配合文字意思,而且其形状还与名称中其中一个字母形状接近,如上面的例子,其产品刚好形成其中一个“ h ”,或者一个边缘圆滑的球形成为一个“ o” 。虽然你不一定总这么好运,但如果碰上了,尝试一下,不亦乐乎?

网页:矩形组合

如果你将一个元素、颜色或者位置组合作为一个视觉元素来重复应用,那你就无形中创造了一种“风格”。如果这种重复应用能够给人留下印象,那你就可以将它作为一个主题。主题比文字更容易“阅读”,还能够给人留下深刻印象。为了说明这一点,我们看一下 Parc Rittenhouse 公司是如何利用矩形及春天的颜色来作为它们网站的主题:

设计技巧杂谈 IV(图九)

设计技巧杂谈 IV(图十)

大矩形,小矩形:

上图大图中,五个小的正方形组成了导航区域,而页面中一个大的矩形区域就放置着大标题。在每一个矩形中,白色的文字都是放置于左下角,形成一种图案美。上图小图中,当你点击其中一个小矩形链接,该区域就会变成白色,同时,下方大矩形背景颜色会变成与点击的小矩形原来一样颜色,而且,文字标题同样是位于左下角。而以树叶构成弧线边缘的标志,则与所有的矩形形成了鲜明的对比。

本文所用颜色数值:

设计技巧杂谈 IV(图十一)

本文作者:未知
咨询热线:020-85648757 85648755 85648616 0755-27912581 客服:020-85648756 0755-27912581 业务传真:020-32579052
广州市网景网络科技有限公司 Copyright◎2003-2008 Veelink.com. All Rights Reserved.
广州商务地址:广东省广州市黄埔大道中203号(海景园区)海景花园C栋501室
= 深圳商务地址:深圳市宝源路华丰宝源大厦606
研发中心:广东广州市天河软件园海景园区 粤ICP备05103322号 工商注册