设计之家
设计365
设计之家|平面设计素材|PSD分层图库|PSD分层素材|PSD分层模版|广告图库|PSD图库|PSD格式|PSD设计素材|PSD源文件|PSD免费下载|VI模版|VI模板免费下载|POP海报
    商城首页 | 平面设计素材 | 韩国矢量图库 | 网页模板(欧·韩) | Flash源代码 | 婚纱儿童 | 地产专题 | VIS/CIS | 影视动画 | 付款方式 | 版权说明
    三维模型 | 字体设计 | 建筑装饰 | 营销策划 | 潘通色卡 | 设计图书 | 免费下载 | 移门图库(荐) | 站点地图 | 联系方式 | 站内新闻网站建设
热门关键词: 韩国 花纹 模板 PSD 分层 矢量 VIS CIS 网页 Flash 包装     高级搜索
 
目前位置:首页 > 新闻中心 > 浏览新闻
设计图片库背景网页
出处: PSD分层源文件 平面设计图库 网站模板 房地产素材 韩国花纹图案 VI模版  发布日期: 2011-12-23 16:15:51 

北卡罗莱纳州商务部下属的旅游网站并没有象其它网站一样仅仅介绍该州的迷人景色,而是让你恍如置身于该州的景色之中。因为该网站采用了视野开阔、漂亮迷人的照片作为背景。宽广的图片给人一种超大屏幕影院( IMAX )的视觉效果,传达出空间感及真实感。整个网页显得漂亮迷人。还有一点:这种效果其实很容易制作。

 

 

漂亮网页从漂亮图片开始。为了设计这样的一种超大屏幕感的视觉效果,背景图片必须很宽——至少 22 英寸 ——比一般的显示器都要宽,这样就算在大小不一的显示器中观看,也一样能占满背景。为了使视觉统一协调,无论网页窗口是拉大拉小,我们都要保证背景图片及内容网页都仍然居中。

使用具有强烈中心焦点的图片

 

 

 

焦点是最大的关键:上述图片上方的中心位置形成一个视觉焦点,这让我们在观看这个网页时有了一个起点。所以我们要选择那些具有中心焦点的图片(参考上方三张图片)。最好是选择那些视野开阔、较少细节的图片。留意上述三张图片中,透视消失点与图片的焦点是处于同一个位置的(或非常接近)。避免构图发散、繁琐或焦点偏离中心的图片,否则会使整个网页显得拥挤,让读者无法适从。

在 Photoshop 里准备图片

 

尺寸及象素:处理图片最好的方法就是将一张原本300dpi 的图片变成 72dpi 。在 PS 里很容易完成,选择:图像 > 图像大小,然后在对话框中,不要选“重定图像像素”选项,在分辨率一栏中输入 72 后,按确定即可。

 

发掘焦点:观察图片,发现一个合适的焦点,定下一下宽度大约为 22 英寸的区域后剪切。然后选择:文件 > 储存为 web 所有格式,选择 JPEG ,在“品质”一栏中,选择最低的压缩质量(这里,我们选择“中”),尽可能不使图像质量变差而且图片大小不会太大。按“存储”键保存文件。

在 Photoshop 里处理图片过渡


将图片边缘过渡至实色区域

你只是希望背景图片在网页上方出现,而图片下方则过渡到一个实色区域,这个实色区域是这个网页下方的背景色。这样可保证背景图片不会太大,也可以保证下方的背景平实,不会干扰网页上的内容。

 

用吸管取色然后填充:我们在图片底部区域中取一种主要颜色(注意这里的颜色模式应为 RGB ,记下颜色数值,因为在用 Golive 软件做网页时你还用得着)。然后我们可以用渐变工具或一枝柔软的毛笔将图片底部填充,使到图片过渡到实色区域显得温和自然。

在 Adobe GoLive 建立网页

 

在 GoLive 软件中,建立一个新的网页,并存储文件作为你的根文件夹。然后选择 View>CSS Editor ,打开对话框,点击“ Create a Style That Applies to Markup Elements ”键,在子菜单中选择“ body ”。

 

点击“背景特性”( Background Properties )按钮并进行如下设置:

在图像: URL (相对地址)区域中,点击下方“浏览”按钮,然后选择你刚才处理好的图片。您可以通过点击页里上方的预览按钮来观看背景图片的情况,默认模式下,该图片会以水平及垂直方向重复填充背景区域。我们会在下面的步骤中修正这一点。

 

颜色 (Color) :点击颜色库,在这里,输入我们刚才取色时确定的 RGB 色值作为网页背景颜色。

水平方向( horizontal ) :设为“居中”( Center ),这可以保证需要背景图片无论显示器如何缩放都是处于居中位置。

垂直方向 (Vertical) : 选择“上方“( top ),这保证图片是处于网页最上方的;

重复( Repeat ): 选择“一次”( once ),这表示图片只会放置一次,而不会在背景中重复图片。

放置( Attach ): 选择“固定”( Fixed ),这保证图片不会随着滚动条上下移动;

这样,我们的背景完成了。

 

当背景图片处理好后,我们就可按照常规的网页制作方法建立网页。如果你是按表格来安排网页内容,则将表格设为居中,主要内容最好也放置在中间区域,图片上方要空出一定的区域来显示背景图片,空出来的区域高度应该统一,这样整个网站看起来才显得协调。

分类 新闻标题 时间 查 看
  设计咨询     共享店铺-首页自定义模板代码+PSD背景图淘宝... 2012-7-6 查看
  设计咨询     如何将AI文件转换为PSD文件... 2012-7-6 查看
  设计咨询     名片分层模板素材PSD... 2012-7-6 查看
  设计咨询     PSD&素材&新增AUTODESK有关网站... 2012-7-6 查看
  设计咨询     2012年7月平面设计素材图库大促销... 2012-7-5 查看
  设计咨询     设计之家网站与哈尔滨seo城城正式合作... 2012-3-20 查看
  设计咨询     茶包装的设计要点... 2012-2-24 查看
  设计咨询     小册子折页方法... 2012-2-23 查看
  设计咨询     界面图标创意设计教程... 2012-2-16 查看
  设计咨询     设计理论:连贯式设计... 2012-2-9 查看


矢量图库
PSD分层素材
优优素材网
秀未来设计
中国设计网址大全
psd素材
展台设计
平面设计素材
平面设计素材网
更多链接
移门图库
4A广告设计
4A广告设计网
名片模板
哈尔滨驾校团购中心
PSD分层源文件
SU草图大师论坛
标志设计
汽车点火线圈
更多链接
展板模板
设计书店
设计图库
设计之家中文网站目录更多链接 
 
 
 
 
 

Copyright © 2007-2008 北京东方照生科技有限公司 设计之家 图库网 版权所有 All Rights Reserved 
全国各城市支持货到付款! (2-3天送到!)  只需提供收件人,详细地址,手机号。
 服务QQ :765905476给我发信息   
 24小时热线电话: 158 4600 6774(王)       
 版权信息: 设计之家    信息产业部备案: 黑ICP备07500731号  免责声明

回到页面顶部
设计365-2009PSD实用分层源文件专辑  09分层年鉴  设计密码二  花纹图库  展板设计师  图行天下-创意风暴  2009画册年鉴  2009PSD分层图库最新第2版 
Baidu