登录

第一步:理解和设计炫彩风格头部和底部图片

炫彩风格由两张图片组成──一张“头部”图片和一张“底部”图片──这两张图片共同组成了火狐用户界面的背景。

“头部”图片示例

“头部”图片作为浏览器窗口的顶端背景显示出来,衬托在工具条、地址栏、搜索框和标签条下面。

使用任何您制作的图片作为头部图片,它都是以浏览器窗口的右上角为原点。 图片的右侧部分总是可见的,而当用户 增大浏览器窗口的宽度时,浏览器会自动增大图片左侧部分的显示区域。这意味着最有价值的视觉部分应该被放置在头部图片的右上角区域。

如果浏览器或者某个附加组件在窗口顶端添加了另外的工具条(例如StumbleUpon工具条)或者其他任何用户界面元素,浏览器会自动增大 头部图片下方的显示区域。

头部图片应该存储为PNG格式或者JPG格式,3000像素宽、200像素高,并且保证文件大小上不要超过300kb。

头部图片在Mac OSX、Windows XP和Windows Vista上的显示效果
Mac OSX
Windows XP
Windows Vista
“底部”图片示例

“底部”图片作为浏览器窗口的底端背景显示出来,衬托在状态条和网页内搜索条下面。

“底部”图片同“头部”图片不同,它是以浏览器窗口的左下角作为原点的, 所以,图片的左侧部分总是可见的。当用户增大浏览器窗口的宽度时,浏览器会自动增大图片右侧部分的显示区域。

当状态条处于它的缺省状态时,底部图片在垂直方向上只有一小部分被显示出来, 这应该考虑在您的设计中。如果浏览器或者某个附加组件在窗口底端添加了另外的工具条(例如网页内搜索条)或者其他任何界面元素, 浏览器会自动增大底部图片上方的显示区域。

底部图片应该存储为PNG格式或者JPG格式,3000像素宽、100像素高,并且 保证图片文件大小不超过300kb。

底部图片在Mac OSX、Windows XP和Windows Vista上的显示效果
Mac OSX
Windows XP
Windows Vista
第二步:测试您的头部和底部图片

通常来说,把重点突出在浏览器右上角的设计会最好的适合炫彩风格。虽然是这样,您应该经常查看在不同版本的Firefox上用户界面元素 对您设计的影响。

这可能是您最后完成设计过程中很重要的一步,取决于您希望在设计中突出的视觉信息的重要性。

方案 1:在Firefox中使用自定义炫彩风格设置

在浏览器状态条左下侧的炫彩风格菜单中,您可以通过在个人偏好中的设定来开启使用本机炫彩风格的功能。这样您就可以在上传到线上分类目录之前测试您的设计效果。 进行下面四个步骤来开启测试本机炫彩风格的功能:


第一) 选择“设置” 第二) 选中“在菜单中显示自定义炫彩风格” 第三) 选择自定义炫彩风格然后“编辑”

第四) 使用选择文件和额外设置来构建炫彩风格

当您的设计图片同各种平台上的火狐浏览器融合的很好时,保存最后的结果(PNG或者JPG格式)── 但是确定要保证他们的文件大小没有超过300kb! (注意:这只会在您正在使用的操作系统上对炫彩风格进行测试,您还应该去测试其他的操作系统上的表现。)

方案 2:使用跨平台的Photoshop PSD 头部模板

我们制作了一个定位模板可以帮助来放置您的设计。这个模板可以让您在Mac OSX、Winows XP和Windows Vista上测试炫彩风格。

使用这个PSD模板的关键在于把您的炫彩风格头部图片的图层放到三个操作系统图层其中的一个下。确定要关闭您没有使用的操作系统图层,否则他们 会由于透明关系而重叠在一起。


Photoshop覆盖图层列表

当您开启某个操作系统图层时,就可以看到有哪些浏览器的用户界面元素遮挡住您的设计,然后解决这些元素的遮挡问题了。

在头部图片PSD模板中的覆盖层
Mac OSX 覆盖层
Windows XP 覆盖层
Windows Vista 覆盖层

下面的例子展示了我们教程中的头部图片在Windows XP图层覆盖下的效果,突出了浏览器中的用户界面元素,可以看到有哪些元素会同设计相互影响而带来问题。 在工具条部分下面的深色矩形条显示的是浏览器标签页的所在位置。

头部图片在Windows XP图层覆盖下的效果

当您的设计图片同各种平台上的火狐浏览器融合的很好时,保存最后的结果(PNG或者JPG格式)── 但是确定要保证他们的文件大小没有超过300kb

第三步:提交您的炫彩风格!

进行到这里,您已经完成了设计部分的制作,是时间分享给大家了!需要注意一件事,请确认在您的炫彩风格中使用的任何图片或者设计都是有合法的使用版权的。 (我们可不想接到任何律师信!)

点击下面的链接开始分享,把您的创作添加到火狐炫彩风格的线上目录!

  1. 如何制作炫彩风格
  2. 如何使用
  3. 常见的问题

下载火狐和炫彩风格

容易安装 千变换肤,在火狐浏览器中使用炫彩风格。