网页设计

当前位置:

如何在设计高分辨率的网页

浏览量:0

        网页设计者首先要考虑的一个问题是项目将要建立的分辨率。站点会针对800×600系统进行优化吗?1024的宽度会是流动的还是固定的?对移动设备有用吗?现在要考虑的屏幕分辨率肯定比几年前多得多。

有相当多的文章写的是为移动设备设计小的,但是最大的通用分辨率呢;高清晰度(俗称高清或超清)?

        本文将向您展示一个通过使用一个真实的案例研究来使您的网站在多种分辨率下工作的过程:出道创意。当然,您可以在不处理高清分辨率的情况下使用它,但是为什么不走极端呢?

介绍

在过去的几年里,随着高清电视机价格的不断下降,高清得到了越来越多的消费者的使用。它们不仅容易连接到高清电脑,而且像Wii、Playstation 3和Xbox 360这样的现代游戏设备也有支持互联网的浏览器,可以用来浏览网页。现在是考虑的时候了为这种流行的格式设计。

尽管高清网页设计似乎有些过头,但我最近设计了我的网站,出道创意,1920×1080观看(目前网站布局实际上是为1024优化的,但背景为高清做了很好的框架)。在建立一个1920屏幕分辨率的网站之前,有一些严肃的考虑要做,即使它只是背景。

如何在设计高分辨率的网页

        支持高清的一些问题

文件大小是一个主要的考虑因素。根据高清网站的清晰度,任何跨越整个1920×1080的背景图像都将是巨大的(清晰度为200万像素)。此外,除非处理得当,否则对于不需要全高清体验的用户来说,这些大尺寸可能会导致不必要的带宽消耗。

从设计的角度来看,我希望我的背景渐变能够很好地将内容与全屏浏览器边缘周围最暗的边缘结合起来。对于任何较小的浏览器来说,有一个这样的高清背景是不够的。

在Photoshop中,所有可见的是我们想要调整大小以适应不同分辨率边缘的渐变层。点击图片参见满量程版本。

解决方法很简单;带有动态背景图像调用的JavaScript解析嗅探器。在谈到这一点之前,让我们来谈谈为高清准备图像。

        图像

第一步是在Photoshop(或同等功能的图像编辑器)中准备背景图像。我从一个高清背景(1920x1080px)开始。除了我的框架渐变之外,我添加了一层带有大量羽化的笔触,以确保背景图案很好地褪色为纯色,这样我的页面背景颜色就可以接管图像的结尾。

当你为高清做好背景准备时:保存它(也许做一个备份)。我们将很快从它身上裁剪和移除很多!

1920x1080px像素的高清分辨率。点击图片参见满量程版本。

        为了保存网络和移动设备优化的图像,Photoshop有一个名为为网络和设备保存(Ctrl+Alt+Shift+S)。我用这里的设置尽我所能优化这个巨大的图像。我决定把它保存为一个优化的JPG,质量为53%,我能够将图像缩小到111KB。对于一个典型的拨号连接来说,这将是一个痛苦的21秒的下载(对于背景图像来说),但是对于普通的DSL用户来说,这是一个可管理的5秒。我对此没意见。给你的文件取一个有意义的名字bg1920.jpg。

“为网络和设备保存”优化允许您比较压缩大小。单击图像以参见满量程版本。

        现在我们将重复其他常见解决方案的步骤。这是一个很好的时间进入一些键盘快捷键来完成这个过程。这是我为这个例子为Photoshop制作的一个接一个的播放序列(一些更有独创性的设计师可能会考虑简化这个过程)。

你会注意到我用画布大小只改变宽度。改变高度也会导致我的导航条变得太短。根据你的布局,你可能想做图像尺寸它会完全缩放图像(Ctrl+Alt+I)。

        首先,我点击我的渐变层(我需要调整每一个分辨率大小的层)。

         这是一个简单的过程:

  1.          Ctrl+Alt+C打开画布大小选项框
  2.          Tab键两次进入宽度领域
  3.          输入宽度(分辨率嗅探器将使用的宽度包括1920、1600、1440、1280、1152、1024、800、640。有关常见的手机分辨率。
  4.          按回车键两次确认裁剪并关闭帆布选项框
  5.          Ctrl+T激活自由变换活动层的特征。
  6.          按住Alt并水平调整渐变边缘的大小到新的边缘:按住Alt键可以镜像调整大小。它应该与文档的边缘对齐。
  7.          按回车键完成并渲染转换。
  8.          Ctrl+Alt+Shift+S打开为网络和设备保存选择权
  9.          按回车键(设置应与上次相同)保存。
  10.          命名文件和你第一次归档时一样。

         按回车键要完成文件保存

        你现在应该有一个充满图像的时髦文件夹。由于我的网页布局设置为1024,我不打算使用较小的文件;然而,我要做一个bg0.jpg这是我的背景的无渐变和平铺版本,有几百像素见方。这对手机冲浪者可能有用。

完成后,您应该有一个文件夹的各种大小的命名良好的图像。

        JavaScript

        既然我们已经有了所有的图片,我们就准备好动态地将它们调入我们的站点。以下脚本也适用于多个监控系统。通常当它得到屏幕宽度值,它检测的是主浏览器的宽度,而不是整个桌面的分辨率。某些浏览器可能会检测到它所在的屏幕。

将以下对JS文件的调用放在% 3车身%3E标签(把它放在头部会调用你的CSS之前的背景,这可能会导致它不渲染)。例如:

<script src = "https://wukongclouds.com/scripts/sniffer.js" type = " text/JavaScript " ></script>

        或者如果你使用的是像WordPress这样的主题:

<script src = "https://wukongclouds.com/WP-content/themes/主题themename/sniffer.js " type = " text/JavaScript " ></script>

        现在,你自然需要JavaScript。JavaScript解析嗅探器所做的是检测屏幕宽度并应用适当的CSS图像背景。

        一些笔记

        我用”大于或等于" (>=)条件运算符来覆盖站点上可能出现的奇怪分辨率。

        有一个”小于或等于" (<=)分辨率小于799px的运算符。这应该包括一些上网本和分辨率更小的手机。

        这个例子只是为我的1024px就绪站点切换了高清背景——然而,您可以修改代码来调用完全不同的样式表,甚至改变布局以在不同的分辨率下工作。

        测试

        武汉悟空云互联网有限公司建议更改您的桌面分辨率并刷新您的站点。如果你有一个多显示器系统,你只需要改变要测试的主显示器的分辨率,不管浏览器在哪个显示器上。如果你想在连接到电脑的高清设备上测试它,你可能需要将它设置为你的主显示器。





 

[声明]本网整理的媒体稿件是为了分享更多的讯息。此类稿件不代表本网立场,本网不承担此类稿件侵权行为的连带责任。故此,如果您发现本网站的某些内容侵犯了您的版权,请把您的相关内容发至此邮箱【wukongclouds@163.com】,我们在确认后,会立即删除,保证您的版权。