Technology Development

企业互联网营销一站式服务专家

网站建设背景:创建主题

合适的背景,插图,图像,图形和文本内容对于整个Web设计的外观和视觉吸引力至关重要。使用背景作为正文和内容,然后将其与网站的真实含义和信息融合在一起,并充分利用图形设计的潜力,可以使您的网站从无到有地变成令人惊叹的。

回顾一下网站及其设计的发展,您会发现早期的示例仅包含具有基本颜色背景的静态内容,如果有纯白色以外的其他背景颜色。与当今网站的动态内容相比,该网站主要使用带有图形,纹理,渐变,插图,图表和表格的风格化背景,您会发现完全不同。

如此众多的设计选择

那里有许多示例网站和最佳实践,可为您提供具有正文和内容背景的大量选择。您可以选择合并正文和内容背景;添加页眉和页脚或流畅的插图包装;将纹理与插图,固定图像,重复的瓷砖结合在一起;或淡入淡出和边框如何?在将背景应用于网页设计时,有很多选择和很多选择。

创建示例背景主题

在示例中,我将使用Photoshop创建一个优雅而简单的布局。

我将使用旧纸图A所示的图像;它可以从Flickr的 Playingwithbrushes中以png文件格式获得。旧的纸质图像最终将成为我们的主要内容划分,而我将以此为摘要来创建菜单按钮。但是在此之前,我将对Photoshop中的图像文件进行一些修改。

图A

网站建设背景:创建主题

首先,我想使图像更亮一些,并且最简单的方法是使用“色相/饱和度”选项:

在Photoshop中打开文件后,我使用菜单路径Layer |添加新图层。新调整层| “色相/饱和度”,然后单击“确定”,“色相/饱和度”对话框打开,设置被修改,如图B所示:

图B

网站建设背景:创建主题

确保选中了“ Colorize”,设置为“ Hue:43”,“ Saturation:28”和“ Lightness:+16”。当然,您可以根据自己的需要调整这些设置。现在,旧的纸张图像看起来比原始的纸张要轻一些,而且还不如陈旧。我还打开或关闭色相/饱和度图层以比较差异。

接下来,我将按照菜单路径Layer |在图像上添加一个带有阴影的新层。图层样式| 具有以下设置的阴影-混合模式:正片叠底,不透明度:65%,角度:120°,距离:5px,展开:2%,尺寸:5px,如图C所示。

图C

网站建设背景:创建主题

没什么装饰性的,只是细节可以产生更好的效果。生成的图像如图D所示。

图D

网站建设背景:创建主题

接下来,我将使用相同的背景纹理创建一些按钮背景。在激活背景层并使用“多边形套索”工具的情况下,我将在图像的底部进行选择,类似于图E所示。

图E

网站建设背景:创建主题

然后,我们将通过“复制”(Ctrl + J)创建一个新图层,从而创建所选作品的一个新图层。我将重命名新层“ Button”,如图F所示。

图F

网站建设背景:创建主题

选择此按钮层,然后通过从菜单栏进行调整来修改位置和方向。转换| 旋转180°。然后使用“移动工具”,将按钮层放置在背景层的顶部和最左侧,如图G所示:

图G

网站建设背景:创建主题

现在,将按钮层移动到背景层下方,以使其位于图H所示的后面。

图H

网站建设背景:创建主题

继续执行这些步骤,以创建特定布局所需的任意数量的不同按钮。我还使用了Edit | 转换| 旋转和倾斜选项可操纵多个按钮位置;有趣的设置来创建自己的按钮布局。所有按钮都放置到位后,我也将分别转到每个按钮层,并像以前对背景层所做的那样添加一个阴影。我将五个加在一起,它们显示在图I中。

图一

网站建设背景:创建主题

现在,我将调整每个按钮的色相和饱和度,就像我对主背景层所做的一样,以便可以将它们与当前设置区分开来。选择需要调整的按钮层,然后按CTRL + U进行色相/饱和度调整。下表1中列出了每个按钮层的设置。

网站建设背景:创建主题

这些是图J中显示的已调整按钮。现在,按钮层看起来更像是主要背景后面的分层板岩纹理。

接下来,我将分别更改每个按钮的颜色,以进一步区分背景颜色。但是,在此之前,我将把背景层与原始的色相/饱和度层合并。通过突出显示两个图层,然后右键单击所选内容,单击“合并图层”,如图K所示,以便按钮的颜色替换可见。

选择 第一个按钮层“ 按钮1”后,我将使用菜单路径“图像” |“替换颜色”选项。调整| 替换颜色,出现替换颜色对话框,如图L所示,突出显示按钮2的设置。

我继续所有其他按钮,结果显示在图M中。

现在已经分别替换了按钮颜色,我们可以为每个按钮添加文本层。(它们将仅作为示例显示在PSD文件中;在系列的第二部分中,我们将进行HTML编码,而CSS将处理按钮文本。)在这里,我使用的字体是Viner Hand ITC,常规,48像素和深黑色。确保已选择并激活按钮层,然后选择文本工具,然后输入所需的文本。我在第一个按钮上添加了“ Home”,如图N所示。

这是一项容易的任务,无需花费太多精力即可完成。我继续在其余按钮和主要内容背景中添加其他文本元素,出于示例目的,基于餐馆网站创建内容。然后,我也将一些图像添加到布局中,如图O所示。

但是,等等,我们还没有结束。我需要在内容主体后面添加另一个背景层,以填充页面的其余部分。我认为某些木纹或采石砖类型的纹理将是合适的,任何木纹表面都可以为整体外观添加一些对比效果,如图P所示。任何可以帮助区别主要内容的纹理都可以,您可以从许多可用纹理中进行在线选择。

我在图层托盘顺序的最底部添加了一个新图层,并添加了1600px x 1600px的木质纹理。现在,如果那种特殊的纹理没有我所希望的真正的发散质量该怎么办?通过“阴影”和“高光”进行一些调整,我可以实现更暗,更丰富的对比背景。设置如图Q所示。从菜单路径逐步:调整| 阴影/高光...您可以调整对话框设置。

我只对左上角的食物图像做了一些细微的调整,以将它们散布开一些,并重叠到身体背景中。最终布局如图R所示。

即将来临

这是一个由四部分组成的系列文章的一部分,该系列文章还将包括从PSD文件到HTML,使用CSS添加导航以及使用CSS和html格式化文本的过程。在Web设计背景系列的第二部分中,我将进入将这个PSD文件转换为使用CSS和HTML编码的阶段。


智能会议平板 婚姻出轨调查 ad2流量家 网络营销 天马赛车场 快安盛 香港海华设计 辽秦安家 安居乐业网 旭丽置业 婚姻挽回公司 微信会员积分系统 宿州网 成都网站建设 视频素材 欧纷泰 力盛赛车学校 北京网站优化 一度好数码 智轩云 上海顶伯软件 ChinaETL 花呗分期 上海华森消防