网页设计教程:网站背景设计案例分享

文章描述:我们将介绍几个实际网站来启发你的灵感,看看如何设计趣味而又令人感兴趣的网页背景。收藏本文,当你再次阅读时,你定会被某一个背景设计所迷恋。

如何选择一种最恰当的网页背景是网站设计中最常见的问题之一。 通常网站设计者都已准备好网站内容,而且版面布局大多也基本敲定。但背景要么是令人厌烦,要么是让人眼花缭乱,让设计者迟迟不能确定。

今天,我们将介绍几个实际网站来启发你的灵感,看看如何设计趣味而又令人感兴趣的网页背景。收藏本文,当你再次阅读时,你定会被某一个背景设计所迷恋。

1. 素描设计

这种设计在几年前就变得比较流行,而且一直持续到现在。这灵感来源于在笔记本上的涂鸦乱画,就像你十几岁时在英文课上所作的那样。每一部分都是些粗糙的素描表现,页面看似是非常随意的创意集合,而它们都以不同的旋转方式散布在页面各处。NotchStudio就是很好地应用了这种创意,并且以非常柔缓的方式表现出来。

即使你本人不善长绘画,这种创意也是相当容易实现的,是因为这些涂鸦通常都是些非常基本的设计。如果拥有一部Wacom或iPad平板电脑,你就可以相当容易地描绘出你自己的图片或者某种意义上能够反映此类风格的书写文本。还有很多免费字体如Pointy,可以帮你不费吹灰之力就可实现让人赞不绝口的素描。

2. 精细文稿设计风格

纸张的质地纹理总能激起设计者的激情,而且为所有年龄所适用。目前这种创意已不像几年前那样风靡,但是它还是会带给你一种非常微妙的效果:如果你没有看到它,那会让你非常地想念。

你注意到Beautiful Type所用的纹理设计,它既没有偏离主题也没有过分夸张,而是将一个原本看起来就很好的网站更是锦上添花。

查阅LostandTaken网站,你可以找到海量的纹理资源可以应用到你的设计中。

3. 渐变设计

很多设计者认为渐变已经因被过度使用而变得不再那么让人着迷。我个人认为它们很容易被滥用,而且执行的不恰当,但是我们决不会看到全是纯色一统天下没有渐变的局面。因为渐变反映了现实(自然世界我们从未看到没有任何掺杂的纯色),所以为了让他们的作品感觉起来更真实,设计者还会继续应用渐变设计。

渐变设计通常是用来保持事物朴素的最好方法。不必混入疯狂的颜色,也无须制造不明快的变调,只需选择一个简单的渐变。我的最爱之一就是从老灰到黑灰的渐变。它纯净,易于实现而且表现出真正的优雅。你可以从如下的设计中体会到这一点。

4. 双色调对比设计

力求页面独特雅致而大胆的另一个选择就是页面中加入一个生硬的变色设计。大多是水平方向的变色,但如果采用垂直设计也会给人独特和耀眼的感觉。

这种创意是要利用对比的魔力。我们的眼睛会非常自然地被对比色所吸引而不能自拔。其关键在于要确保两种颜色明显差异。不要选择任何抵触或冲撞色调,而要尝试纯黑与一种浅色的对比。

5. 全屏图片设计

我提及这种创意,你或许会嗤之以鼻,但我仍会尽我所能继续给你讲解掌握这种创意设计的技巧:伟大的图片成就伟大的设计。它简洁而朴素。任何人都偏爱美好的图片,因此将它加入你的设计中,就会使你的网站得到每个人的垂青。很简单,是吧?

图片赋予了真个网站以灵感。你可以从一幅画中捕捉到颜色、纹理甚至排印的灵感,进而创造一种非常美好的统一连贯的主题。

注意体会下面网站设计中的暗色自然元素,它给人一种使用了很多照片于主页滑行的外表和感觉。

6. 纹理搭配颜色渐变设计

我非常喜欢最近时常看到的网站的原因是在于页面顶部应用了灯光效果或融入了某种类似于一点点纹理,让页面快速渐变到纯色的创意设计。

过多纹理会极易降低网页文本的可读性,还会增加视觉噪音将网页变为一种完全不同的页面。而把纹理隐含置入则会让你额外收获称赞的眼神,还不会牺牲网页整体的美感与可读性。

太多时候,我们是利用CSS背景图片重置,让纹理充斥整个背景。其实我们可以尝试让纹理选择性地出现,那样你会立刻发现你的设计看起来要好地多。

7. 仰望设计

天空对于人类是永恒不变的幻想空间。云彩、太阳光束、星星和月亮,所有这些元素都会赋予人们一种魔法让他们目不转睛地盯着你。

当你要把这些元素融入你的背景的时候要特别小心,因为那会特别容易产生一些难看或陈腐的效果。要掌握这种创意技巧,设计者需要对美学有很好的感觉,懂得如何表达”空间”的概念,千万不要把它变成一种类似于老版Windows屏保的怀旧效果。

下面的网站选用优美的天空作为突出的网页背景,是一个非常好的例子。设计者利用复古色调和微细的斜线纹理,渲染出了非常漂亮的星际空间。这是在你应用天空在你的网页背景之前最好要特别关注的。

8. 多色菱形图案设计

我能听到你在说:”菱形图案?你在开玩笑?” 在你在评语栏扔砖头之前,我们必须要承认菱形图案确实能够产生一些特别有魅力的效果。但是,就像我们先前说的一样,这种创意不是任何人都能做的,只有那些懂得如何利用狂热模式的有经验的老手才能熟练掌握而不至于造成难看的效果。

下面是应用这种创意效果非常好的一个实例。改良后的菱形图案格调的应用并没有特别出格地吸引你的注意力,而是给页面带来了非常好的华美情调。

9. 抽象和狂热设计

是否你已经厌倦了我的关于微妙设计技巧的”谨慎”或”放松”的建议?那么这个提示就是给你的。有时候,最好的背景可能就是一些对页面内容无关紧要地狂热和大胆的表现,它们只是为了吸引你的注意。

一些网站都非常好地实现了水彩画的效果,这是一种非常流行的技巧,你能够发现非常多地网络资源可以模仿。

试用Flickr搜索”abstract watercolor” (抽象水彩画)看看你会发现什么。那里有海量的廉价图片,足够帮助让你的网页获得更多人的关注。

10. 无须避免纯色设计

以上所有建议都是要满足你成就伟大网站背景创意的需求。但是,对于一个设计者必须要明白,纯色背景并没有任何不对的地方。它是我的特别喜爱的众多设计中的关键元素。学会如何恰当地应用纯色创意是成为一个设计者的重要组成部分。

浏览一下Piknik,那里提供了很多免费工具,你最好一定要加到你的设计资源库里。这个网站能让你对屏幕颜色的预览和选择变得非常简单。你要做的只是移动鼠标,观察背景的颜色变化。

总结

背景的选择决定着你整个网站的基调和个性。就在前两天,我的一个同行有意将他的网站置入我们的宣传目录,但是他们只是选择了一个特别差的背景图片。这个网站的设计和布局非常好,我就是不能容忍那个难看的背景。之后,他接受了我所指出的问题,并把背景变换成了一种更简洁的风格,直接把网站提高到了一个全新的水平。

就像在开场白所说的那样,下一次当你纠结于设计常规而不能选择合适网页背景的时候,再来看一下我们这篇文章,尝试其中的某种创意。总有一天,你也会抵达完美网站的彼岸。

时间: 2025-01-25 12:12:26

网页设计教程:网站背景设计案例分享的相关文章

PS网页设计教程XXIV——从头设计一个漂亮的网站

作为编码者,美工基础是偏弱的.我们可以参考一些成熟的网页PS教程,提高自身的设计能力.套用一句话,"熟读唐诗三百首,不会作诗也会吟". 本系列的教程来源于网上的PS教程,都是国外的,全英文的.本人尝试翻译这些优秀的教程.因为翻译能力有限,翻译的细节上还有待推敲,希望广大网友不吝赐教. 约定: 1.本文的软件是Photoshop CS5版本 2.原教程的截图是英文的,本人在重新制作的基础上,重新截了中文版的图 3.原文中有些操作没有给出参数.本人在反复测试的情况下测定了一些参数,以红色的

10大创意教你玩转网站背景设计

  1. 素描设计 这种设计在几年前就变得比较流行,而且一直持续到现在.这灵感来源于在笔记本上的涂鸦乱画,就像你十几岁时在英文课上所作的那样.每一部分都是些粗糙的素描表现,页面看似是非常随意的创意集合,而它们都以不同的旋转方式散布在页面各处.NotchStudio就是很好地应用了这种创意,并且以非常柔缓的方式表现出来. 即使你本人不善长绘画,这种创意也是相当容易实现的,是因为这些涂鸦通常都是些非常基本的设计.如果拥有一部Wacom或iPad平板电脑,你就可以相当容易地描绘出你自己的图片或者某种意

photoshop设计理论让背景突显主体分享

给各位photoshop软件的使用者们来详细的解析分享一下设计理论让背景突显主体. 解析分享:   @豪斯K先生 :在平面设计中主体与背景就像是主角与配角的关系,可以说一部好的电影一定是主角与配角相互搭配共同完成的,同样道理,设计中的主体与背景就是这样的关系,背景烘托主体,主体映衬背景,那么怎样利用背景让主体明显,就是我们这篇文章所要阐述的内容. 第一部分:背景的大致分类 设计中的背景大致可以分为纯颜色.场景.渐变.肌理.图形五大类别,下面我就针对这五大类分别举例说明.   纯颜色背景不是指纯度

设计理论:网站首页设计需要突出主题思想

网页制作Webjx文章简介:设计网站首页的技巧总结. 首页设计,需开宗明义突出主题 开宗明义,无论是对于一篇文章.一场会议或一部专题片,还是对于一个网站来说,都是必不可少的.那么能为一个网站开宗明义的地方(标签)就是Title(标题)和Description(描述.副标题),而能够为Title和 Description提供进一步诠释的就是网站的首页. 展示哪些信息 页面的重要性是建立在它所呈现信息的基础之上,反过来说,页面要向用户展示哪些信息是决定其重要与否的首要指标.在网站页面中,网站标题.副

设计理论:网站导航设计的复杂性

一说到导航每个人都不陌生,如amazon的Tab式导航.网站地图.软件中的菜单导航.索引表等等.导航设计看上去非常的简单:无非是页面上放置一些链接,通过这些链接用户可浏览和使用整个网站.事实并非如此,导航设计是非常复杂和严谨的. 下面我们以网站导航为例粗浅的分析一下导航设计的复杂性: 任务:设计一个网站导航 目标:1.提供给用户方便的网页间跳转的方法          2.能够表达出页面之间.页面与内容之间的关系 分析:人本能的具有空间感.想象一下你现在坐在家中的沙发上看电视,突然有访客,你起身

交互设计:电子商务网站导航设计

最近在UCDCHINA上看一些电子商务设计的东西,因为手头一个项目就是如此.发现最新一期的话题是"导航设计".我觉得结合最近的一些思考,有很多想法是可以说一说. 说到电子商务的导航, 很多人都会指向2个电子商务网站,淘宝和亚马逊.但是以此来设计电子商务网站的导航,其实是不准确的,因为在不同商品数量级上,淘宝和亚马逊的做法,不一定合适现在的电子商务网站. 1.海量商品的导航 淘宝和亚马逊商品数量众多,据数据显示,淘宝现在有4000万商品,为4000万商品设计导航和为4000个商品设计导航

网页设计中网站背景的创意风格与设计趋势

正确的背景风格可以为整个网站确定基调.我们搜集了一批使用大幅图像.明亮颜色或出众图案来作为背景的优秀网站,希望从中探寻当下网站的流行设计风格. 什么样的背景最适合你的网站,这并没有一定之规,但确实有一些共同的要素: 互联网背景的内容应该有目的性. 背景应该与你的品牌风格一致. 背景之上的文字内容应该易于阅读(无论是颜色.反差还是尺寸大小.) 背景的主题在整个网站内应该连贯一致. 背景应该能很快下载并且不会让你的网站变得缓慢甚至卡死. 现在的流行趋势是什么? 就像服装和发型会变,网页设计的风格也在

Dreamweaver网页制作教程:表格设计

dreamweaver|教程|设计|网页 表格设计 表格是现代网页制作的一个重要组成部分.表格之所以重要是因为表格可以实现网页的精确排版和定位.本节教程我们分为两步来进行.首先看表格操作的一个实例.然后来看一些表格操作的基本方法.在开始制作表格之前,我们首先对表格的各部分的名称做一个介绍.(看下图) 一张表格横向叫行,纵向叫列.行列交叉部分就叫做单元格. 单元格中的内容和边框之间的距离叫边距.单元格和单元格之间的距离叫间距.整张表格的边缘叫做边框. 下面看看我们使用表格制作的页面的实例 这幅页面

网站导航设计:综合型网站导航设计技巧

文章描述:综合型网站导航问题很棘手,看起来也不像只有一个显然的解决方案.一个让我写这篇文章的主要的原因是开放讨论这个话题,并希望能抛砖引出更多替代方案.正是因此,我真心感谢你能在评论中给出一些想法,或你发现的替代性的导航案例. 对于大部分网站,导航并不算是个挑战.一条主导航加条二级导航支撑,通常就足够了.典型的做法是,二级导航显示出父.兄及当前子菜单.常显的主导航条显示最顶层的菜单,允许用户在菜单间切换. 然而,有一类网站让这种传统的导航样式承担有些吃力.这就是我要提的大型网站. 定义大型网站