本文由Fotor小编倾情撰写、整理。
欢迎移步Fotor国内版www.fotor.com.cn,Fotor-免费的一站式平面设计、图片编辑和拼图工具,几分钟快速完成平面设计与图像处理!
最近这段时间,到处都能看到好看的底纹。你会发现它们被放在好看的包装上,或者是用在一些有名出版物的封面上,或者是被印在漂亮的纺织物上。
如果你最近在网上闲逛,你可能会发现底纹还被用在了网页设计里。虽然他们被用在网页上不同的部分,但是设计师们非常喜欢用它们来做背景。如果你也喜欢底纹,或者想要寻找一些灵感,请参看下文。
在本文中,你可以看到不同方法或不同风格的精彩案例,它们也许会让你才思如泉涌。
01.使用你的网页的设计元素
http://cafefrida.ca/
想知道什么元素适合用来设计你的网站底纹吗?可以参考这个网站:http://cafefrida.ca/。
如你所见,这个可爱的底纹是由美丽的白色花朵填充整个网页布局,非常令人愉悦。
02.使用对称的底纹
www.forbetter.coffee
我们很多人都喜欢对称的美。就像网站www.forbetter.coffee,它利用了这个特点,使用对称的底纹。从网页的中间画一条线,你可以看到两边是相同的。
03.只用线条绘制底纹
http://letters-inc.jp/
有时候,设计师喜欢用颜色来表达,他们往往不记得简单的线条有多漂亮。看看这个网站http://letters-inc.jp/以及它的复杂底纹。
如果你点进去这个网站,你可以欣赏到有着底纹中图案特征的不同的精妙动画。
04.在复杂的底纹中使用柔和的颜色
http://votd.tv/
当你投身于网页设计时,你一定要记住网页设计的功能——应该是支持网页,并且帮助网页突出它的信息。
复杂的底纹有时候会喧兵夺主,让用户获得信息变得艰难。如果你在做一个复杂的底纹背景,你可以像http://votd.tv/这样做,使用柔和的颜色。
05.使用照片作为元素
http://hi-res.net/
http://hi-res.net/是一个伦敦的设计机构,他们善于设计难以置信的迷人作品。你可以到他们的网站去看看他们的获奖作品。
观察他们是怎样用照片作为元素来设计底纹的,就像气泡一样,当你观看不同部分时它们都会发生变化。是不是很酷呢?
06.让你的底纹动起来
http://www.gv.com/2014/
动画已经在UI和网页设计中流行起来。如今,丰富的的动画是高品质移动应用和网页的标志。
如果你已经做了一个简单的背景底纹,让它动起来吧。你可能会创造出优雅的美丽的作品,就像谷歌风投在http://www.gv.com/2014/做得那样。
07.使用透明度和图层
http://garbett.com.au/design/join-the-dots#gallery
http://garbett.com.au/design/join-the-dots#gallery使用很多透明的波点组成的蓝色底纹。当你往下滑动时,每个波点的内容都会改变。这是一个简单但是有效的增加底纹的趣味性的方法。
08.使用简单的色板
http://pokelondon.com/
底纹没必要为了有意思而包含丰富的色彩。有时候简单的色板和有趣的形状就已经可以创造出漂亮的底纹了,就像http://pokelondon.com/那样。
09.活泼一点
http://carbure.co/
使用抽象的、随机的元素来构建底纹,就像http://carbure.co/这样。他们将有趣的元素用明亮的颜色放在黑色的背景上,并且加上了动画,使得网页整体活泼又时尚。
10.让你的底纹运动起来
http://www.sourisseauxpartners.de/en/home.php
http://www.sourisseauxpartners.de/en/home.php的底纹会随着你的鼠标移动而运动。这种运动并非很剧烈,但是足以引起你的注意。这是一个给你的网站增加趣味性的好办法。
11.用字母作为设计元素
http://mattluckhurst.com/
Matt Luckhurst在他的网站http://mattluckhurst.com/上用他名字里的字母和一些不同的设计元素创造了一个漂亮的底纹。通常,当我们提及底纹时,我们会忘记在底纹中还可以使用字母作为元素,而且字母是非常有价值的。字母会帮你创造出不同的东西。
如果你曾经努力地想要知道哪种元素是你想要的底纹,不要忘了考虑一下字母元素。
12.把你的底纹变成交互的一部分
http://samskinner.net/
Sam Skinner用一些列很酷的图标组成了网页的底纹,而且你可以点击这些图标来查看他的作品。如果你简单地点击一个图标,你将在图标和sam skinner之间画出一条线。很难描述他是怎样的,所以点击http://samskinner.net/你就明白了。是不是很酷?
13.使用动画循环
http://www.jam3.com/
你真的有必要看看这个优秀的设计——http://www.jam3.com/。它用朝一个方向运动的三角形创造了这个背景底纹。
移动你的鼠标会影响三角形的流动,一旦你停住不动,它们会回到原来的轨道。如果你将鼠标滑过每个字母,字母也会收到影响,就像吸铁石那样。是不是很棒呢?
14.变换背景底纹
http://www.jamiewolfond.com/
谁说只能用一种底纹的? http://www.jamiewolfond.com/网站中,每当你点击都会改变底纹。
点击他的网址看看底纹变换和他其他的优秀作品吧。如果你设计了几个不同的方案,但不确定用那个,你可以试试全部都用。
15.保持简单
http://borheh.com/
看看http://borheh.com/的设计,通过运用轻微的方向改变,他们创造了让人震惊的图案。
如果你认为你需要让你的设计更加深入,考虑一下改变你的图案上或者是设计元素上某部分的方向,也许你会有新的发现。
16.创建一个明亮的色板
http://www.lemonadela.com/
当你为你的背景底纹创建色板时,不妨试试大胆的颜色。http://www.lemonadela.com/使用的明亮的黄色,在细节处用了不同明度的黄色。这是一个确保背景不会有太多明亮色而导致杂乱无章的好方法。
17.不要忘记经典的底纹
https://printmor.com/
有时候,简单又经典的底纹,像是https://printmor.com/这样的,或许能走得更远。不要犹豫了,试试这些经典底纹吧,他们能够调剂平淡的布局。但是千万要注意不要用太多,否则他们会看起来像是纹理。
18.用简单几何图形来设计
http://kellianderson.com/blog/
是不是不想用太复杂的元素来创建你的底纹呢?可以尝试用基本的几何图形来达到不一样的效果。看看这个例子http://kellianderson.com/blog/,它结合了两种几何图形创造出有趣的背景图案。
19.使用字体或文字
http://hackfwd.com/kthxbai
将文字当作设计元素用在你的背景底纹里吧,如果这些文字和网页的主题联系紧密,一定会让设计更强大。http://hackfwd.com/kthxbai就是一个很好的案例。
20.根据主题来设计
http://www.wiski.com/
围绕着网站的主题来设计背景底纹,像http://www.wiski.com/这样。他们设计了描绘美丽的白色山坡边缘纹理的背景。你可以从你设计的网页中受到启发,围绕它创建背景。
总结以上就是我们帮你找的拥有创意底纹背景的网站案例。
为了跳出惯性思维的怪圈,不要忘了多多从线下的资源找灵感。参观一下画廊,博物馆,甚至是当地的图书馆。有时候,最好的灵感并未出现在屏幕里。
设计愉快!
更多设计素材、创作灵感请访问Fotor国内版 www.fotor.com.cn
Fotor-免费的一站式平面设计、图片编辑和拼图工具,几分钟快速完成平面设计与图像处理!
本文由Fotor小编倾情撰写、整理。如需转载,可直接评论或邮件至info@fotor.com。
,