5种塑造木纹质感的设计方法
发布人:一全科技 来源:www.hx-h.com 发布于:2011-04-25 23:06:52 浏览:1014

木质纹理

我们知道,无论是在现代网站设计还是复古网站设计中,木纹元素的添加总是随处可见。不管是打印产品、界面设计或总体布局,木纹总是能增强视觉效果。

在这篇文章中 ,我们将着眼于五个常见的设计元素,塑造出不同的木纹质感效果。

这五种网站设计元素是:

1.面料和缝合

2.纸质和阴影

3.刻字体和图案

4.时尚现代的元素

5.立体效果

1.面料,缝制

面料和缝制这两种元素用在木纹质网站设计里面是天衣无缝的 ,因为它们都是很天然的手工品,有这类似的质感,无论是材质上还是视觉上 。我们来看几个这三个元素结合在一起的网站范例。

范例

木纹质感

这里运用了简单的虚线式“针脚”设计,勾勒出圆徽章和旗帜的轮廓,就像被缝合在木质板背景上一样。简单的网站设计,真实的触摸感。

木纹质感

在这个网页设计中运用了不透明的面料材质,再加上针脚缝合,以及下拉阴影效果,塑造出与众不同的网站视觉拼接效果。

木纹质感

数字化制作的木质纹理,使这个设计看起来很现代。细微的视觉梯度感和雕刻元素产生一个稍微立体,更逼真的外观。特别是左上角可爱的徽章,同样运用了缝合元素、皮质缝合效果。

2.纸质和阴影

纸质和阴影的网站设计效果是越来越受欢迎的,特别是与木质纹理的结合。下面我收集了一些不同纸质表达方式的网站设计供大家参考。

范例

纸质和阴影

不知道大家有没有注意到,这个截图同样来自上节在讲“面料和缝制”的那张,但是在这部分我们看到的是利用简单的阴影效果和白色形状扭曲的主题来塑造卷曲的纸张效果。

纸质和阴影

皱巴巴的纸质效果和木纹结合是非常协调的。在这UI文件中显示一些可爱的剪影式的图片,便于用户浏览、收藏和共享有关食谱方面的信息。

纸质和阴影

这种设计是深度木材纹理、纸张和胶带纹理的组合产生一个很有吸引力的用户界面 。数字化纸张纹理和阴影的结合更显逼真和形象。

纸质和阴影

这是我很喜欢的一个用户界面样本。细腻的木质纹理,同时利用内部阴影的效果创造搜索栏目。再加上面料和缝制元素,整体效果别具一格。

纸质和阴影

这种设计的灵感来源应该是受传统航空信封图案的启发。特别还加上便签钉在木板上的背景,使用户界面更像是个形象的告示牌,而不是平面的网页出现。

纸质和阴影

褐色木纹背景加上深度阴影,使得它想纸一样呈现出来,特别是印徽章和棕褐色风格的照片结合,让图片看来就是被打印出来的 。真是奇妙的组合效果。

3.雕刻字体和图案

雕刻字体和图案的应用是网页设计中相当普遍的技术,而且越来越受日常设计的欢迎。

范例

雕刻字体和图案

这个用户界面的木纹设计用了做旧处理,让褐色的半透明的图像产生磨损的外观。同时,雕刻技术让字体看起来立体,就像真的刻在木板上一样。

雕刻字体和图案

这是个看起来很干净舒服的用户界面,基本运用了上述所有的技巧,但是最突出的特点应该是,木板顶部花卉图案的雕刻元素确实值得称赞。

雕刻字体和图案

谁会想到用金属标牌挂在木质感的版头做菜单导航呢,而且阴影的加入还营造了真实的锈迹斑斑的效果,非常棒。

雕刻字体和图案

同样,这里的导航也是设计在木材的纹理上,雕刻的标题,我们仿佛还能看见木头慢慢腐蚀的痕迹。

雕刻字体和图案

还是标牌式的设计,但是不是金属质感的,而是木制感的。

雕刻字体和图案

这个界面采用了圆润的现代设计元素。特别添加了突兀的“购买”按钮,真实,立体,实在很神奇。

4.时尚现代元素

通常木质感被定义为复古,但是,只要处理得当,它同样可以体现现代时尚的元素。

范例

时尚现代木质纹元素

在这个界面中,我们看到一个完全不同的风格元素,一个白色和一个绿色的滚动条设计很好的诠释了现代设计元素。

时尚现代木质纹元素

同样是面料和雕刻的元素,加入2像素的灰白色的图标就会让整个界面充满现代感,有吸引力。

时尚现代木质纹元素

这个也是我喜欢的设计。它结合了时尚的渐变技巧、简单的图标、多变的文字,让木质感不再单调,用户更乐意去接受。

时尚现代木质纹元素

一个略带三维效果的设计。非常强的木质感,甚至还带有立体的光泽,相信用户会为此深深着迷的。

时尚现代木质纹元素

发光、阴影、图标。现代时尚设计不就是如此吗?

时尚现代木质纹元素

典型的复古和现代元素的结合,你看出来了吗?

时尚现代木质纹元素

这个很特别:木质的小键盘,纹理清晰生动。它的整体设计是默认iphone 的UIKIT.

5.三维效果

三维立体的设计,这真是令人难以置信的木质纹理效果。这种组合一般用于“架子式”的设计,我们通常可以在iphone和ipad接口,特别是苹果的ibook应用里看到。

范例

三维木质纹理

这些“货架”具有很强的真实感,特别是阴影效果的添加。

三维木质纹理

这种设计看似更现代了些,而且很“实用”,不是吗?

三维木质纹理

这是既现代又逼真,完美平衡与数字化效果质感的照片。

3D木质纹理按钮

这里的3D按钮真令人难以置信。同样是木制纹理,一个微妙的设计就能产生一种奇妙的效果。如果你看到这样的按钮,是不是会情不自禁的去按一下?

3D木质纹理

一个简单而有效的3D效果已被应用到了导航栏,按钮的设计就好像装着无数秘密的抽屉。

作者:Ivan

原载:幻想互动(www.hx-h.com

仅代表作者个人观点。版权归幻想互动所有,转载时请注明出处。