Wikia

Wikia中文

评论0

如何创建合适的背景图片

Cal-Boy 2014年1月25日 用户博客:Cal-Boy

在弹性界面下,如何能够创建最佳的背景样式?这里将指导你如何使用界面设计

关于弹性界面

这里是关于弹性界面的一些信息:

  • 在小的显示屏上,比如1024px宽的iPad上,弹性界面的背景将由文字内容区域代替,背景图案不会显示
  • 在大的显示屏上,当内容区域宽度最小为1030px时,背景才会显示
  • 当内容区域的宽度介于1030px-1600px之间时,内容区域的两侧将有170px宽度的背景图案显示
  • 内容区域最大的延展宽度为1600px,一旦达到这个宽度,内容部分将停止变化。如果浏览器显示的宽度大过1920px时,更多的背景图案将会显示出来。

当你上传了一个文件之后,如何让同样的背景图片在不同尺寸的显示屏当中都能够显示?采用图片均分。也就是说,中心区域(内容覆盖区域)将会被"界面设计"中的“中间背景颜色”填充。对于大屏幕来说,在底端和两侧,这个固定颜色也可以在图片的边缘侧看到。

如下图所示,社区中心的背景图片在不同屏幕尺寸显示下呈现的效果。

在1600px宽度的截图中,内容区域的最大伸缩范围为1600px。那么背景图片将会自动均分,显示在内容区域的两侧。

  • 注意:如果你不想均分你的背景图片,上传的图片宽度必须至少为2000px,此时“界面设计”中才会有“不分割”的选项显示。这样无论内容区域的尺寸为多少,背景图片都可以作为一个整体被显示出来。

创建背景

创建背景图片你可以使用Photoshop、GIMP或者Paint等工具来量化你的图片尺寸。

这里是背景图片的模版供大家使用。Content Space即内容区域,最大宽度为(Maximum)1600px,最小宽度为(Minimum)1030px。

Background-darwinfluid.png

编辑小贴士:

  • 背景气球部分是你可以随意创意更改的区域
  • 你可以使用渐变工具,让两侧和底部逐渐融入背景颜色当中(如图片中的黑色部分所示)
  • 两侧红色部分代表内容区域的伸缩范围。在宽度达到1600px时内容区域将停止扩展
  • 中间半透明的灰色区域为内容区域。通过调整透明度,背景图片的显示也会自动调整
  • 黄色线条部分就是背景图片分割的位置,颜色可以在“界面设计”中进行调整。

这里我们提供一个Photoshop的模版供大家下载,方便背景图片的编辑使用:

点击这里进行模版下载

建议

  • 上传的图片大小不能超过300KB
  • 背景图片边缘的渐变越大,融入背景颜色的效果就更加清晰
  • 尽量不要将内容区域变成完全透明,因为会让文字内容阅读起来不方便
  • 在制作背景图片时,合适地使用图片分辨率,这样背景图片才会更加清晰
  • 使用谷歌或者百度引擎搜索“桌面图片”,这样可以帮助你找到更好更清晰的主题图片
  • 请尽量使用“界面设计”上传背景图片。如果你使用css进行背景图片的更改或者上传,由于Wikia对系统的不断调整和升级,可能会影响你的背景图片不能正常显示,下载页面的时间也会受到影响

更多链接

更多维基

随机维基