网站设计的10大背景创意编辑本段回目录
如何选择一种最恰当的网页背景是网站设计中最常见的问题之一。 通常网站设计者都已准备好网站内容，而且版面布局大多也基本敲定。但背景要么是令人厌烦，要么是让人眼花缭乱，让设计者迟迟不能确定。
Today we’re going to take a look at a few live sites to grab some inspiration on how to effectively add interesting backgrounds to a web page. Bookmark this article and come back to it the next time you’re stuck on a background decision.
今天，我们将介绍几个实际网站来启发你的灵感，看看如何设计趣味而又令人感兴趣的网页背景。收藏本文，当你再次阅读时，你定会被某一个背景设计所迷恋。
#1 Sketch It
#1 素描设计
This kind of background became popular a few years ago and still persists today. It springs from the idea of a notebook full of doodles, like that of your typical teenager during English class. Everything has a rough, quickly sketched appearance and the page is a fairly random looking collection of ideas that are all scattered around and placed at various rotations. NotchStudio pulls this idea off nicely and in a fairly subdued manner.
这种设计在几年前就变得比较流行，而且一直持续到现在。这灵感来源于在笔记本上的涂鸦乱画，就像你十几岁时在英文课上所作的那样。每一部分都是些粗糙的素描表现，页面看似是非常随意的创意集合，而它们都以不同的旋转方式散布在页面各处。NotchStudio网站就是很好地应用了这种创意，并且以非常柔缓的方式表现出来。
Even if you can’t draw, this look is fairly easy to pull off as the doodles are generally super basic. If you have a Wacom or iPad, it’s quite easy to trace some of your own photos or printed text in a manner that reflects this style. There are also plenty of free fonts like Pointy that will help you pull off awesome sketched text with zero effort.
即使你本人不善长绘画，这种创意也是相当容易实现的，是因为这些涂鸦通常都是些非常基本的设计。如果拥有一部Wacom或iPad平板电脑，你就可以相当容易地描绘出你自己的图片或者某种意义上能够反映此类风格的书写文本。还有很多免费字体如Pointy，可以帮你不费吹灰之力就可实现让人赞不绝口的素描。
#2 Subtle Parchment
#2 精细文稿设计风格
Paper textures have always intrigued designers and we’ll likely be using them for ages to come. The current trend isn’t so much the intense grunge of a few years ago but rather a much more subtle effect that you could easily miss if you weren’t looking for it.
纸张的质地纹理总能激起设计者的激情，而且为所有年龄所适用。目前这种创意已不像几年前那样风靡，但是它还是会带给你一种非常微妙的效果：如果你没有看到它，那会让你非常地想念。1
Notice how the texture used on Beautiful Type’s site below isn’t distracting or exaggerated but instead merely brings a nice finish to a site that would already look perfectly good without it.
你注意到Beautiful Type网站所用的纹理设计，它既没有偏离主题也没有过分夸张，而是将一个原本看起来就很好的网站更是锦上添花。
Check out Lost and Taken for tons of great textures that you can use in all your designs.
查阅LostandTaken网站，你可以找到海量的纹理资源可以应用到你的设计中。
#3 A Radial Gradient
#3渐变设计
Gradients have been getting a bad rap lately from designers who think they are overused. I personally think that they are easily misused and poorly executed, but can’t ever see a time coming when all designs everywhere use purely solid colors with absolutely no gradations. Since gradients reflect reality (we never see pure, unadulterated solid colors in the natural world) designers will continue to use them to make their designs feel more real.
很多设计者认为渐变已经因被过度使用而变得不再那么让人着迷。我个人认为它们很容易被滥用，而且执行的不恰当，但是我们决不会看到全是纯色一统天下没有渐变的局面。因为渐变反映了现实（自然世界我们从未看到没有任何掺杂的纯色），所以为了让他们的作品感觉起来更真实，设计者还会继续应用渐变设计。
With gradients, it’s often best to just keep things simple. Don’t go mixing crazy colors and creating muddy transitions, opt instead for a simple gradient. One of my favorites is the good old gray to black (or darker gray) radial gradient. It’s clean and easy to implement and looks really classy.You can see this in practice on the 177themes website shown below.
渐变设计通常是用来保持事物朴素的最好方法。不必混入疯狂的颜色，也无须制造不明快的变调，只需选择一个简单的渐变。我的最爱之一就是从老灰到黑灰的渐变。它纯净，易于实现而且表现出真正的优雅。你可以从177themes网站的设计中体会到这一点。
#4 Two-Tone It!
#4 双色调对比设计
Another solution that I find to be particularly elegant or bold (depending on the execution) is to put a hard transition right through the page. This is most often done horizontally but can feel more unique and eye-catching if done vertically.
力求页面独特雅致而大胆的另一个选择就是页面中加入一个生硬的变色设计。大多是水平方向的变色，但如果采用垂直设计也会给人独特和耀眼的感觉。
The idea here(http://www.weisswein-party.de/) is to utilize the magic of contrast. Our eyes are naturally drawn to contrast, we simply can’t help but look! The key to pulling this method off then is to make sure your two colors really contrast. Don’t pick anything that conflicts or clashes, instead try one really dark color and then a really light shade of the same color.
这种创意是要利用对比的魔力。我们的眼睛会非常自然地被对比色所吸引而不能自拔。其关键在于要确保两种颜色明显差异。不要选择任何抵触或冲撞色调，而要尝试纯黑与一种浅色的对比。
My favorite tool for building these types of combinations is 0to255(), which allows you to quickly and easily grab web values for variations of any color.
我特别喜欢的创建这种效果的工具来自Oto255网站，那里你可以快速而且容易地找到任何颜色变色的网络代码。
#5 Full Screen Photographs
#5全屏图片设计
I mention this idea so much you’re probably sick of it, but I’ll continue to drill it into your head for as long as I can: great photography makes for great design. It’s plain and simple. We all love to look at a good photo so working one into your design makes for a website that everyone loves to look at. Easy right?
我提及这种创意，你或许会嗤之以鼻，但我仍会尽我所能继续给你讲解掌握这种创意设计的技巧：伟大的图片成就伟大的设计。它简洁而朴素。任何人都偏爱美好的图片，因此将它加入你的设计中，就会使你的网站得到每个人的垂青。很简单，是吧？
Photos provide inspiration for the entire site design. You can grab colors, textures and even typography inspiration from a photograph and create a nice coherent theme.
图片赋予了真个网站以灵感。你可以从一幅画中捕捉到颜色、纹理甚至排印的灵感，进而创造一种非常美好的统一连贯的主题。1
Check out how the dark nature of the designed elements in the site below reflect the look and feel of many of the photos used on the homepage slideshow.
注意体会下面网站设计中的暗色自然元素，它给人一种使用了很多照片于主页滑行的外表和感觉。1
If you’re wondering how to code a site like this, check out our recent article, Easily Create a Full Screen Photography Slideshow Website Without Flash.
如果你想了解怎样可以获得此类网页设计的设计效果或编码，可以参考我们最近的一篇文章“Easily Create a Full Screen Photography Slideshow Website Without Flash.”。
#6 Texture to Color Fade
#6 纹理搭配颜色渐变设计
One trick that I really like that I’ve been seeing a lot lately is to use lighting effects or something similar to throw in just a little bit of texture at the top of a page, which quickly fades to a solid color.
我非常喜欢最近时常看到的网站的原因是在于页面顶部应用了灯光效果或融入了某种类似于一点点纹理，让页面快速渐变到纯色的创意设计。1
Textures can easily reduce the readability of your text and add unnecessary visual noise to an otherwise usable page. Hinting at a texture in one location allows you to reap the benefits of the extra eye candy without sacrificing the overall aesthetic and/or readability on the site.
过多纹理会极易降低网页文本的可读性，还会增加视觉噪音将网页变为一种完全不同的页面。而把纹理隐含置入则会让你额外收获称赞的眼神，还不会牺牲网页整体的美感与可读性。1
We too often feel like choosing a texture means we have to flood the background with it using a CSS background image repeat. Try to be more selective with where your texture goes and you’ll find your designs immediately looking nicer.
太多时候，我们是利用CSS背景图片重置，让纹理充斥整个背景。其实我们可以尝试让纹理选择性地出现，那样你会立刻发现你的设计看起来要好地多。
#7 Look Up
#7 仰望设计
The sky is a constant and fantastic distraction for humans. Clouds, rays of sunlight, stars, planets, the moon; all of these objects hold a sort of magic place in our minds that makes them irresistible to the eye.
天空对于人类是永恒不变的幻想空间。云彩、太阳光束、星星和月亮，所有这些元素都会赋予人们一种魔法让他们目不转睛地盯着你。
Be really careful when incorporating these elements into your background, it’s super easy to create something ugly and/or cliche. This technique should only be used by designers who have a real feel for aesthetics and how to take an idea like “space” and not make it look like something from an old Windows screensaver.
当你要把这些元素融入你的背景的时候要特别小心，因为那会特别容易产生一些难看或陈腐的效果。要掌握这种创意技巧，设计者需要对美学有很好的感觉，懂得如何表达“空间”的概念，千万不要把它变成一种类似于老版Windows屏保的怀旧效果。
The site below is a great example of a really beautiful sky scene being used as a strong website background. The planets are rendered beautifully with a vintage color vibe and a subtle texture provided by diagonal lines. This is the kind of attention to detail you should be familiar with before throwing a sky background on your site.
下面的网站选用优美的天空作为突出的网页背景，是一个非常好的例子。设计者利用复古色调和微细的斜线纹理，渲染出了非常漂亮的星际空间。这是在你应用天空在你的网页背景之前最好要特别关注的。
#8 Argyle
#8 多色菱形图案设计
I can hear you now, “Argyle? Are you nuts?” Before you go off on me in the comments, diamond patterns can yield some really attractive results. But, as with the previous tip, they shouldn’t be attempted by anyone but experienced designers who know how to use a crazy pattern without creating a really ugly website.
我能听到你在说：“菱形图案？你在开玩笑？” 在你在评语栏扔砖头之前，我们必须要承认菱形图案确实能够产生一些特别有魅力的效果。但是，就像我们先前说的一样，这种创意不是任何人都能做的，只有那些懂得如何利用狂热模式的有经验的老手才能熟练掌握而不至于造成难看的效果。1
Check out the really nice use of this idea in the website below. The modified argyle-style pattern is only there enough to add some nice colorful accents and doesn’t really go out of its way to grab your attention.
下面是应用这种创意效果非常好的一个实例。改良后的菱形图案格调的应用并没有特别出格地吸引你的注意力，而是给页面带来了非常好的华美情调。
#9 Abstract & Crazy
#9 抽象和狂热设计
Are you sick of my suggestions to “be careful” and “take it easy” with subtle design touches? Well then this tip is for you. Sometimes the best background is something crazy and bold that doesn’t have to make sense with the content on the page, it just draws and holds your attention.
是否你已经厌倦了我的关于微妙设计技巧的“谨慎”或“放松”的建议？那么这个提示就是给你的。有时候，最好的背景可能就是一些对页面内容无关紧要地狂热和大胆的表现，它们只是为了吸引你的注意。
I thought both of the websites below pulled this off really nicely. Notice how the second one particularly looks like a painted watercolor piece. This is a very popular technique that you can find lots of resources online to mimic.
我认为下面的这两个网站都非常好地实现了这种效果。尤其注意第二个网站看起来就像是一副水彩画。这是一种非常流行的技巧，你能够发现非常多地网络资源可以模仿。
Go search iStock with the term “abstract watercolor” to see what you can find. There are a lot of cheap images in this category that will really boost the visual interest of your page.
试用iStock搜索“abstract watercolor” （抽象水彩画）看看你会发现什么。那里有海量的廉价图片，足够帮助让你的网页获得更多人的关注。
#10 Don’t Be Afraid of Solid Colors
#10 无须避免纯色设计
All of the advice above is meant to meet your demands for great website background ideas. However, it’s very important for you to understand as a designer that there’s absolutely nothing wrong with solid-colored white space. It’s a key ingredient in many of my all-time favorite designs and learning how to properly wield it is an important part of becoming a designer.
以上所有建议都是要满足你成就伟大网站背景创意的需求。但是，对于一个设计者必须要明白，纯色背景并没有任何不对的地方。它是我的特别喜爱的众多设计中的关键元素。学会如何恰当地应用纯色创意是成为一个设计者的重要组成部分。
Check out the gorgeous Fuzion Ads website(https://fusionads.net/bundle/closed) below. The design is really a typographic feast and both holds your attention and communicates effectively despite the fact that the background is just a plain old boring solid color!
你注意下华丽的Fuzion 广告网站。网页的设计成印刷排字的盛宴，但那既能吸引你的注意力，又能有效地沟通，尽管它的背景只是一种普通地陈旧地纯色设计。
Be sure to check out Piknik, a free tool that you must add to your design arsenal. This site makes it super easy to preview and select colors to fill your screen with. You simply move your mouse around and the background changes color.
你最好浏览一下Piknik网站，那里提供了很多免费工具，你最好一定要加到你的设计资源库里。这个网站能让你对屏幕颜色的预览和选择变得非常简单。你要做的只是移动鼠标，观察背景的颜色变化。
Conclusion
总结
The background you choose sets the tone and personality for your entire site. I was working with a designer just the other day who wanted to have his site featured in our gallery, but had simply chosen a really poor background image. The design and layout of the site were great, but I just couldn’t get past the ugly background. After I pointed it out, he agreed and switched to something much simpler that really brought the site to a whole new level.
背景的选择决定着你整个网站的基调和个性。就在前两天，我的一个同行有意将他的网站置入我们的宣传目录，但是他们只是选择了一个特别差的背景图片。这个网站的设计和布局非常好，我就是不能容忍那个难看的背景。之后，他接受了我所指出的问题，并把背景变换成了一种更简洁的风格，直接把网站提高到了一个全新的水平。
As I said in the opening paragraphs, the next time you’re stuck in a design rut and can’t choose a good background for your site, come back to this post and try some of the ideas I’ve laid out here. Sooner or later you’re bound to land on one that’s just perfect for your project.
就像在开场白所说的那样，下一次当你纠结于设计常规而不能选择合适网页背景的时候，再来看一下我们这篇文章，尝试其中的某种创意。总有一天，你也会抵达完美网站的彼岸。
As always, thanks for reading! If you enjoyed the article, give us a tweet, Stumble, Like or anything else you’re into!
跟以往一样，非常感谢您的浏览！如果你喜欢这片文章，请登录Tweet微博，纠正错误，表达喜欢或其他什么别的意思。
