魔扣论坛

魔扣源码论坛业务
查看: 1803|回复: 5

网页的背景设计 精选实例与最佳做法(下)

[复制链接]

该用户从未签到

146

主题

0

回帖

156

积分

初级魔扣

Rank: 2

魔扣币
2
贡献
2
威望
8
发表于 2016-12-28 15:58:30 | 显示全部楼层 |阅读模式
魔扣币兑换比例:【 50以下 : ¥1 = 10 魔扣币 】丨【 50 - 100 :¥1 = 20 魔扣币】丨【 100以上:¥1 = 30 魔扣币 】

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

x
无缝的拼接或重复背景
制作好的背景的最简单的办法就是使用重复,这样可以不需要大幅面的图片。但是在创建重复背景的时候,需要了解一些要素。为了便于理解,这里将采用Brad Colbow的网站作为案例研究,这个网站中运用了无缝图片拼接。
使用大图片来重复
要获得良好的背景,你需要使用大图片。Brad Colbow的背景图片大约每1000像素重复一次,见下图。红线部分为图片重复的边界。

完美的对齐边缘
使图片的边缘完美的对其,比任何事情都重要。图片链接的区域的颜色必须一致,即当你在创建背景图片的时候,图片的左边缘必须和右边缘对应连接。如果使用了形状,他们也必须完美的连接。
看下面这个例子。第一个截屏是用在网站背景中的原图,在它下面的截屏展示了图片被设置为重复时,图片之间是如何连接的。背景的边缘完美的连接,注意云朵之间没有任何的间断,左右两边水的颜色也完全一致。


除去重复后很明显的物体
用重复图片作为背景时,如果有的物体在图片重复后很显眼,那么就应该除掉它。因为你希望你的背景流畅没有间断,看起来像一张图片而不是好几张。这一条对于Brad Colbow的网站而言,不是特别重要,因为它采用了大图片,重复的物体在重复的图片很大的情况下,不是那么显眼。当重复的图片较小时,就应该引起高度的警觉了。
将某些图片放到独立区域中
另外一种掩盖图片重复痕迹的方法,就是把某个元素放到另一个背景区域中去。如何理解这句话呢?以Brad Colbow的网站为例分析。
下图是Brad加入到背景中的一个岛屿,岛屿的图案并没有和背景一起重复。这样背景就显得多变,使人难以注意到背景是由重复图片组成的。

内容/包装背景技巧
内容背景在一定程度上也很具挑战性。它不能喧宾夺主,不然会毁掉整个内容部分。以下是几条提示。
简单的渐变
不管你是否相信,网页设计中,细节可以决定成败。经常用于布局中的一个小细节,便是渐变。渐变非常简单,但如果运用得当,可以使一个枯燥无趣的设计变得生气勃勃。
看下图,想像它如果没有运用渐变,将会变得何其无趣与平淡。

细微的材质
材质是另一种很赞的背景技巧。材质有助于展现出网站的主题,例如,要表现摇滚音乐的主题,可以采用颓废的材质风格。当采用材质作为背景时,很重要的一点是不能超过顶端,材质应该足够细微,不至于影响文字的可读性。
如下是材质的得体运用。主背景的材质比重很大,内容背景继续了这一风格,但材质不如主背景的明显。

包装与背景融合
这一点也许刚开始听起来令人迷惑,但实际上这是个相对简单的技巧,如果运用得当,将会获得很好的视觉效果。下面是ZenSender的截屏。在顶部,采用了层状包装背景浮在主背景之上,下来约一半的位置,包装背景淡出与主背景融合。这个技巧值得考虑。

风格化包装/模块的边框
如果风格化包装背景的主体,很难保证不会占据太多的内容。但是可以通过风格化包装的边界,来保持其与主背景的一致性。下图的网站采用了良好的材质与图案,内容元素也有风格化的边缘。

在层状设计中使用半透明内容背景
最后一个在层状结构中风格化内容包装背景的技巧,是采用透明。透明可以在将背景与文字分割的同时,获得一定的背景可见性。很重要的一点是,文字颜色与背景颜色的对比度要好,并且背景不要太过透明。
下图中的网站在半透明背景这一点上找到了良好的平衡点。主背景的图片可以清晰的看到,同时也文字的可读性。

实例展示
365 Days of Astronomy
有着别致包装背景图案的漂亮背景。

TN Vacation
图片拼贴与颓废风格的良好结合。

Squared Eye
良好的背景图案、配色以及头部设计。

Grace of Alexandria
将图纹加入到了主题设计中。

IconDock
除了漂亮的图案之外,这个网站采用了很好的木质纹理,材质图案是静态的,没有滚动的问题。

Old Loft
这是一个非常好的把文字内容直接放在图案上的例子。

Studiobanks
很好的背景图案与完美的配色。

HutchHouse
有趣的图案背景可以吸引用户的注意。

280 Slides
良好的配色与渐变。

JUNECLOUD
插画头部,采用图案来分割。

Andrew Greig
多彩的头部,斜角的良好运用。

GOTOCHINA
采用图片淡出以及半透明元素。

eWedding
主背景中的地对比度图形很好的补充了设计。

Bellingham Real Estate
漂亮的头部图形与材质化的包装背景。

Duplika
醒目的背景。

ANidea
时髦有力的主背景,采用包装风格。

Flash Gaming Summit
多彩的静态主背景。

Twiistup
相互分离的元素,鲜明热情的背景。

Design Disease
轻快的设计,内容直接放在背景上。

RapidWeaver
漂亮的包装背景淡出与白色背景融合。

Sony CES 2009
有力的背景与分离的模块。

Mediocore
维度的良好运用。

Chris Merritt
顶部的光照特效与独特花纹。

Robyn
背景采用插画与柔和的颜色创造出良好的视觉体验。

Advanced Wellness
导航区的背景能立即吸引用户的注意力,又不会破坏整体设计。

August
背景不至于分散注意力,淡出得很好。

关于作者
Matt Cronin是一位自由职业者,从事网页、图形设计与开发。他是Spoonfed Design的作者与所有者,提供关于设计的提示与指导。

该用户从未签到

2

主题

246

回帖

494

积分

中级魔扣

Rank: 3Rank: 3

魔扣币
246
贡献
246
威望
0
发表于 2017-2-1 08:58:45 | 显示全部楼层
兄弟如手足,女人如衣服,谁动我手足,我扒他衣服-魔扣源码论坛!   

该用户从未签到

1

主题

256

回帖

513

积分

高级魔扣

Rank: 4

魔扣币
256
贡献
256
威望
0
发表于 2017-5-20 11:49:31 | 显示全部楼层
越走越急的是岁月,越流越广的是河流,越陈越香的是佳酿,越远越深的是怀念,越久越浓的是情感,越发越真的是祝福。魔扣源码论坛愿您越来越快乐,越来越幸福!越来越年轻!

该用户从未签到

3

主题

245

回帖

493

积分

中级魔扣

Rank: 3Rank: 3

魔扣币
245
贡献
245
威望
0
发表于 2017-10-3 10:10:14 来自手机 | 显示全部楼层
把留言撒在你的空间,愿你每天都绽放出笑脸;把祝福留在你的心间,愿你时刻感受到友情的温暖;魔扣源码论坛祝朋友周末愉快!

该用户从未签到

2

主题

242

回帖

486

积分

中级魔扣

Rank: 3Rank: 3

魔扣币
242
贡献
242
威望
0
发表于 2018-3-18 18:25:36 | 显示全部楼层
顶起出售广告位

该用户从未签到

1

主题

263

回帖

527

积分

高级魔扣

Rank: 4

魔扣币
263
贡献
263
威望
0
发表于 2018-9-23 11:14:52 | 显示全部楼层
呵呵,低调,低调!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

  • 联系我们
  • 新浪微博 :
  • 在线客服 :魔扣科技 
  • 源码QQ群 :魔扣源码论坛官方总群
  • 联系邮箱 :charlin#morko.net
  • 微信扫一扫
快速回复 返回顶部 返回列表