Theme制作

发布时间:2010-06-29   来源:文档文库   
字号:
Just Theme It! - BlackBerry 主题制作指南
说明: 这是 BlackBerry Developer Journal 上的一篇文章,描述如何制作 BlackBerry 的主题。这里补充一下制作 BlackBerry 主题所需要的软件: 1. JDK

2. BlackBerry Java™ Development Environment (JDE 3. Plazmic Content Developer’s Kit(CDK

以上各个软件的版本,取决于你的 BlackBerry 手机系统 OS (暂且叫做OS吧)的版本,对应关系应该是这样:
OS4.2+ CDK v4.2 JDE v4.2 JDK v5.0 OS4.1+ CDK v4.1 JDE v4.1 JDK v5.0 老一点的版本窝就没去管它了,可以到以上的链接查看说明、下载软件。安装顺序是 JDKJDECDK 好,开始看正文
Just Theme It! - BlackBerry
作者:Mark Sohm & Patrick Strack, Research In Motion 原文:http://www.blackberry.com/developers/journal/sep_2006/theme.shtml 翻译:Zhanghu.org
目录

1 什么是 Theme Builder? 2 基本的 - 那么我可以做什么? o 2.1 定制主画面横幅 o 2.2 定制图标和背景图片 o 2.3 定制对话框界面和按钮 o 2.4 定制菜单,标题栏和列表 o 2.5 定制消息列表 o 2.6 定制电话程序
3 优化你的主题,让它看起来更棒 o 3.1 PNG 格式保存图片
o 3.2 为使图片明晰,使之符合原始解析度

3.2.1 如何用 GIMP 修改图片尺寸 3.2.2 如何用 Adobe Photoshop 修改图片尺寸 3.3.1 如何使用 GIMP 替换一种颜色为透明 3.3.2 如何使用 Adobe Photoshop 替换一种颜色为透明 o 3.3 使用透明效果 o 3.4 使用平铺图像 4 创建好看的(Great Looking图片的技巧和诀窍 o 4.1 Photoshop 给文字增加效果(浮雕、发光、投影,等等 5 现在,开始创建主题! 1 什么是 Theme Builder?
Theme Builder 来自 Plazmic® (www.plazmic.com,是 BlackBerry® 应用程序开发的最新工具,它 Plazmic Content Developers KitTM (CDK 捆绑在一起。Peter Hantzakos 曾在 BlackBerry 开发者杂志中描述过 Plazmic CDK。你可以在这里查看这篇文章。 Theme Builder 能做什么?它的一些主要特性允许你:

定制 Blackberry 应用程序图标

修改主画面横幅(banner图片和图标/指示器颜色 创建你自己的按钮

定制对话框和弹出窗口的外观 定制空闲(Idle画面 定制菜单和列表的外观 定制电话程序的画面

定制 BlackBerry 上使用的字体

有了这一切,你可以任意修改 BlackBerry 设备的外观!你可以基于自己喜欢的电影,电视节目或运动队伍创建一个主题。
或者对于有团队意识(Corporate-minded的用户,你可以用组织的颜色和 logo 来给所有 BlackBerry 设备制作统一的商标,创建独特的外观和感觉。
2 基本的 - 那么我可以做什么?
这一切都可以定制,你也许会认为需要一定程度的主题设计功力才能做出自己的主题,对吗?错!Theme Builder 提供了一个简单的 GUI 界面,只需一些点击就可以按你的方式创建主题。


左边的窗格显示 BlackBerry 设备,它的屏幕显示的就是用户创建的主题。当你修改了主题中的某一项,该图像会实时更新,这使你能轻而易举地协调色彩或者修改主题。 中间的窗格包括五个图标,从上至下分别是:

定制横幅(banner的主题 定制主画面的主题 定制控件的主题 定制消息列表的主题 定制电话画面的主题

通过切换这五个按钮,使右边的窗格显示相对应项目的控件。
所有的工作都在右边的窗格内完成。在这里,你可以选择所有的颜色、字体、图片、等等,最后完成主题。一个值得注意的特性是图标和图片的工具提示。把鼠标光标移到一个图像的上方,会显示该图像的解析度。这是个非常好的功能,它帮助你创建符合默认图像解析度的图片,这使得你的图像看起来整洁(clean以及明晰(crisp。后面会详细提到。
2.1 定制主画面横幅(banner Theme Builder 中第一部分允许定制横幅(Banner ,也就是显示在主画面和消息程序上方的东西。你可以修改横幅(Banner区域所有文字的颜色,包括日期、时间、网络状态(比如: GSM,GPRS,EDGE,CMDAEVDO,等等)以及新项目(未读邮件、日历约会等的计数。电池和信号指示器以及其他指示器(未读邮件、日历约会等的图标颜色也可以在这里修改。


要修改某个颜色,点击合适的颜色盒打开颜色采集器。颜色采集器界面允许你从某种颜色系列(已保存的颜色选取颜色,使用 RGB 值,HSB 值,色盘,CMYK 值或从 web 颜色中选取。







下面是一个定制的横幅(banner正如你看到的,所有的颜色都经过改动,并使用了新的横幅(banner图片。


2.2 定制图标和背景图片
除了横幅(banner通常你最希望定制主题的是主画面和应用程序图标。如果你正在创建图标类型的主题,Theme Builder 允许你为内置的 BlackBerry 程序选择选择自己的图标。焦点图像(Focus Image,也就是出现在突出显示的图标上方的图片也可以定制。如果你创建的是列表类型的主题,Theme Builder 允许你选择常规字体,突出显示字体以及显示在文本边上的常规图像和突出显示图像。你还可以为主画面指定背景图片,并更改主画面字体的颜色,该字体用于显示程序的名字。 在图标类型的主题中,遮罩图片(mask 用来防止背景图片淹没(overwhelming了图标。比如说,你使用颜色高度饱和的图片作为背景,你也许需要使用
10% 不透明度的纯白色遮罩图片(mask,这样可以使背景颜色变得柔和,图标才能突出显示出来。或者你可以简单地使用跟图标比起来色彩不是很鲜艳的图片做背景,这也能使图标从背景图片中容易区分出来。

下面是一个定制的主画面,使用了前一节中的定制横幅(banner。图标、背景、焦点图像和屏幕字体也都做了定制。


2.3 定制对话框界面和按钮
你可以定制对话框界面的背景,字体和图标。字体的类型、尺寸和风格都可以修改。你也可以指定一个图标集用于 Question(问题
Information(信息 Hourglass(沙漏 Exclamation(惊叹号 指示器。还可以选择对话框界面中使用的背景。这些修改在 BlackBerry 程序和第三方程序中都会生效。

应用程序或对话框界面里使用的按钮也可以定制。你可以更改按钮上显示文本的字体,包括它的尺寸,颜色和风格。用两张图片用来修改按钮的外观。常规图片用于非焦点按钮,而突出显示图片用于焦点按钮(即被光标选中的按钮


下面的屏幕截图展示了一个定制的对话框,其中有一对定制过的按钮。问号图标被一个冰球头盔替代,而按钮被突出显示和淡色的冰球球网代替,背景被一个有蓝红边框的冰球场代替。

2.4 定制菜单,标题栏和列表
菜单、标题栏和列表的外观也能定制。你可以定制菜单上文本字体的尺寸、颜色和风格。有两种文本可以选择,一种用于被光标突出显示的文本,另一种显示菜单中其余的文本。光标的颜色和菜单背景图片也可以修改。这些改动会应用于 BlackBerry 程序和第三方程序。

标题栏是指屏幕的上方用于显示程序标题和其他相关的信息的区域。在一个定制的 BlackBerry 程序中,这应该是 MainScreen 类中的 title 区域。(用 MainScreen.setTitle(函数设定)。背景纹理和光标颜色也可以修改。

类似与本节提到的其他元素,列表字体的尺寸和风格允许修改。光标颜色,突出和非突出文本也可以定制。


下图显示一个定制的菜单,标题栏和列表。你可以看到标题栏和菜单的背景已经被改掉。文本、突出文本使用的字体和光标的颜色也被修改过。

2.5 定制消息列表
BlackBerry 消息程序也可以定制。消息的列表会使用在你自定义主题列表时指定的外观和感觉(feel Theme Builder 的消息列表部分允许你定制字体,用于显示日期的字体的颜色和风格。你也可以修改显示在日期后的背景图片。

这里你可以看到一个定制的消息应用程序。 横幅(Banner)、列表中的定制项目和日期行的定制背景图片、字体和字体颜色放在一起。


2.6 定制电话程序
电话程序是最后一个可以定制的区域。在接打电话时显示的电话号码的字体和打电话时输入的号码的字体颜色都可以修改。来电的背景图片也可以定制。


通话时的屏幕画面也可以定制。这个画面上的文本颜色和音量刻度盘的颜色也可以定制。你也可以定制显示在屏幕上,表示你正处于哪种通话状态的图标。

3 优化你的主题,让它看起来更棒

目前为止,我们已经介绍完毕使用 Theme Builder 能对你的主题所做的所有定制。然而,简单地修改相关颜色以及插入新的图片并不能创建一个足够视觉震撼(visuall stunning的主题。请继续阅读,下面是一些关于如何创建更美观主题的 tip
3.1 PNG 格式保存图片
主题中使用的图片都被 Theme Builder 转化为 PNG 格式。大多数情况下,转化过的图片不会有很大的视觉差距,但是为了保证用户看到的图片尽可能地接近原始图片,我们建议你用 PNG 格式保存图片。这使你可以优化图片并创建尽可能小的文件用在 Theme Buidler 中。
使用 PNG 图片的另一个益处是它们对透明区域的支持。文章后面会讨论到,使用透明效果会使制作的主题更加出彩。
3.2 为使图片明晰,使之符合原始解析度
如果你正在创建一个图标类型的主题,这可能会是最重要的步骤,这会使你的主题看起来很棒。当你移动鼠标光标到 Theme Builder 里可定制的图片上面,会弹出一个显示当前图片解析度的工具提示。注意一下默认图片的解析度,并确保你用来替代的图片也符合这个解析度。你当然也可以使用不同解析度的图片, Theme Builder 会为你缩放图片,但是这样会导致图片扭曲或失常。以下面这 BlackBerry logo 为例子。

现在比较下面的两个截图,注意屏幕左上方的 BlackBerry 图标。


失常的 BlackBerry 图标

明晰,清楚的 BlackBerry 图标
上面的屏幕使用了未修改的尺寸为 196 x 169 像素的图片。下面的屏幕使用修改过的尺寸为 64 x 48 像素的图片,而它是符合BlackBerry® 8700 系列图标主题中图标的解析度的。有两个原因使第二个图像看起来更好: 尺寸和比例。第二个图片在我用图像编辑工具中创建时就使用了了正确的尺寸,此不用被 Theme Builder 重设尺寸。
但是如果用合适的比例缩放图片,即使 Theme Builder 重设了图片的大小,图片看起来应该也还可以。图标的解析度是 64 x 48 像素,也就是说,图片高度是宽度的 ¾ (0.75。原始图片的比例大概 43/50(0.86。所以图片不止是被重设了大小,而且比例也被修改了;也就是说宽度比高度以更高的百分比减小,这使得图片进一步扭曲。
这并不意味着你只能使用符合 1 x 0.75 比例的图片,这会限制你能使用的内容。你可以按照下面一些简单的步骤来以该比例优化你的图片。让我们使用在上面的屏幕截图中做例子的 BlackBerry logo 197 x 169 像素图片。

第一件要做的事情是调整图片尺寸,使它的高度低于 64 像素, 宽度低于 48 像素,而且不修改图片的比例。因此,如果你在你最喜欢的图片编辑程序中打开 BlackBerry logo,并调整高度到 64 素,它应该会自动调整宽度到 55 像素(假设宽度和高度的比例锁定)。对我们的图标来说,这还是太宽了。要是修改宽度到 48,而高度又会改到 56。这还是不适合,因为这样的话,最终 Theme Builder 会拉伸图片的高度到 64 像素,导致图片扭曲,怎么办呢?
现在我们创建一个尺寸是 64 x 48 像素的新图片,并且它的背景是透明的。然后我们回到重设过大小的图片(56 x 48 像素,复制然后粘帖它到新的 64 x 48 的图片。使粘帖的内容居中,把它保存为新的图片,用在 Theme builder 中。现在我们有了一个包含需要内容的 64 x 48 的图片,在 BlackBerry 8700 系列图标主题中会是一个看起来很棒的图标!
GIMP 是一个开源的图片编辑工具,在 Windows®Linux® MacOs® X 上都能用。这里有一些使 GIMP(版本 2.2.9 重设图片大小的步骤说明。
3.2.1 如何用 GIMP 修改图片尺寸
1. GIMP 中打开原始图片。 2. 点击 图像 菜单选择 缩放图像 3. 确保宽/高比例是锁定的(链条连接 4. 修改宽度或高度,是两者都符合或小于需要的图片尺寸。 5. 点击 缩放 按钮 6. 选择整幅图片(Ctrl + A 或点击菜单 选择 > 全部 7. 点击 文件 > 新建,创建一个新的图片。 8. 设置图像大小为需要的解析度 9. 选择高级选项并设置填充透明。 10. 点击 确定 11. 复制重设过大小的图片内容到新创建的图片 12. 保存新图片为 PNG 文件。

3.2.2 如何用 Adobe® Photoshop® 修改图片尺寸
1. Photoshop 中打开图片。 2. 选择 图像 > 图像大小 3. 确保宽/高比例是锁定的(链条连接 4. 修改宽度或高度,是两者都符合或小于需要的图片尺寸。 5. 点击 按钮 6. 选择整幅图片(Ctrl + A 或点击菜单 选择 > 全选 7. 点击 文件 > 新建,创建一个新的图片。 8. 设置图片大小为需要的解析度

9. 背景内容 部分,设置为透明(这会把图片的背景设成透明 10. 点击 11. 复制重设过大小的图片内容到新创建的图片 12. 保存新图片为 PNG 文件。


3.3 使用透明效果
透明是你的朋友。当你在为主题制作图片时请记住它。请默念一次:透明是我的朋友。在你的主题中使用透明能发挥很多酷酷的效果。一个明显的用途是应用程序图标。通常,图片总是有背景颜色,一般是白色。如果你留着图片周围的白色或彩色的背景区域,用户看来,图标会是一个方块。而使用透明效果能让主题的背景图片从图标中间显示出来。比较下面的两幅屏幕截图。

BlackBerry Icon with White Background

BlackBerry Icon with Transparent Background
透明也可以用来为菜单、按钮、对话框增加效果。给图片增加一个透明的边缘可以给图片添加锯齿(jagged、圆形(rounded、圆角(angled的边缘或者 实现 3D 效果。下面的屏幕截图展示了一个在对话框、菜单和按钮背景中使用了透明边缘的例子。第一幅截图展示了一个转角为圆角的对话框,第二幅是 3D 外观的菜单。



3.3.1 如何使用 GIMP 替换图片的一种颜色为透明
1. GIMP 打开图像。

2. 点击 图层 菜单,选择 透明 > 添加 Alpha 通道 3. 点击 选择 菜单, 按颜色
(或按
Ctrl + O 4. 点击你希望替换的颜色。

5. 点击 编辑 菜单并选择 清除 (或按 Ctrl + K.
3.3.2 如何使用 Adobe Photoshop 替换图片的一种颜色为透明
1. Photoshop 中打开图片。 2. 点击 图层 > 新建 > 图层背景 3. 点击 选择 > 色彩范围 4. 点击你的图片上希望替换的颜色。 5. 点击 编辑 > 清除 3.4 使用平铺图像

许多可定制的项目,如对话框,按钮,菜单没有固定的尺寸大小。这使得创建的尺寸固定的图片不能在所有情况下看起来都很好。这时,平铺图片派上了用场。对于这些项目,Theme Builder 允许你选择图片周围的一个区域作为边框,而另一个是图片中央的区域,将被平铺(或填充)到大小可变的区域。使用平铺图片也使更小的图片能被使用,减小了你的主题中的图片的体积。那么,它是怎么使用的呢?让我们以我创建的用作按钮的一个图片为例子。

假设这是一个冰球(曲棍球球网。当我没有设置任何平铺, 设置这个图片为按钮后,这个图片会被整体地平铺(重复地)上去,直到它填满了需要填充的地方,看起来不是很漂亮。

那么,我们要做的就是选出要作为边框的区域和要用来平铺的区域,点击那个 Tile Image 图标

弹出平铺图片界面。在该界面上,我们可以设置用作上下左右边框的像素的数量。
如果你使用图片边缘不均匀,而你又要把它设置平铺,用预览区域找出上下对应均匀的部分,这样对用户来说,平铺效果看起来就不那么明显了。


在为按钮调整了边框坐标之后,它们看起来更像冰球球网了好吧,至少有一点点像

4 创建好看的(Great Looking图片的技巧和诀窍
如果你的图片有透明部分,而且使用了 Photoshop 的多图层,但你想合并它到单个图层时,使用 菜单上的合并可见图层(Merge Visible选项来保留透明度。
因为 PNG 不支持图层,在保存图片为 PNG 格式之前,合并图片为一个图层是个好主意。这样确保图像保存为 PNG 格式后不会失真。
When creating custom backgrounds and banners, use a screen shot from the simulator as a guide to where things will appear. Set this screen shot as the top most layer, then use the Lasso tool to
roughly select sections that you want to keep. Once you have everything outlined, select the inverse then clear out all the unwanted sections. 【在创建自己的背景和横幅时,使用仿真器的屏幕截图作为指导,事物将出现在那里。设置该截图为最上面的图层,然后使用套索工具粗略的选择你想保留的部分。一旦你画出了轮廓,选择反选,然后清除不需要的部分。】
使你的主题出色(Stand out的一个简单方法是给任何在你的主题中使用的文字加上一些特殊的效果。
4.1 Photoshop 给文字增加效果(浮雕、发光、投影,等等
1. 点击文字工具,然后点击图片你希望增加文字的区域。 2. 输入文字,并点击选项栏上的钩(check mark接受。 3. 这样就在你的图片里创建了一个新的文本层。 4. 在层窗口里右击该层,然后选择 混合选项 5. 点击你想使用的效果名字,然后设置选项。 6. 当你对预览的文字效果满意了,点击 7. 因为文本是一个独立的层,你可以自由的移动文本到任何位置,而不会影响图片。

5 现在,开始创建主题! 阅读本文之后,你应该有较好的基础来创建一些你自己的主题。如果你仍然需要一些灵感,你可以参考 Research In Motion Limited® (RIM® 提供下载的一些主题。只要在你的 BlackBerry BrowserTM 中指向 http://mobile.blackberry.com/(译者:这个网址现在似乎没什么内容)。请注意,你 BlackBerry 设备需要 v4.1 版本或以上的 BlackBerry 设备软件来使用这些定制的或在 Theme Builder 中创建的主题。


本文来源:https://www.2haoxitong.net/k/doc/dff42e175f0e7cd1842536e0.html

《Theme制作.doc》
将本文的Word文档下载到电脑,方便收藏和打印
推荐度:
点击下载文档

文档为doc格式