百度手机输入法皮肤修改教程

由天下分享时间：2024/9/28 21:30:38 加入收藏我要投稿点赞

百度手机输入法

皮肤设计教程

基本介绍....................................................................................................................................................... 2 触屏版皮肤制作教程 ................................................................................................................................... 3

1、配置输入框的外观 .......................................................................................................................... 5 2、输入提示框 ..................................................................................................................................... 5 3、候选框 ............................................................................................................................................. 6 4、列表栏 ............................................................................................................................................. 6 5、输入面板 ......................................................................................................................................... 7 6、按键 ................................................................................................................................................. 7 7、系统功能定义.................................................................................................................................. 8 8、制作皮肤安装包 .............................................................................................................................. 9 键盘版皮肤制作介绍 ................................................................................................................................... 9

1、定义拼音区背景 ............................................................................................................................ 11 3、匹配输入法指示器 ........................................................................................................................ 13 4、放置装饰图标................................................................................................................................ 14 5、调整拼音区配色 ............................................................................................................................ 15 6、选取最靓丽的候选字颜色 ............................................................................................................ 15 7、制作皮肤安装包 ............................................................................................................................ 16

基本介绍

皮肤制作基本概念

皮肤制作的本质，主要包含两个步骤：第一是需要把各种输入法功能在效果图上面的按钮形象表达，第二是把按钮的坐标找到，在ini文件中为它精准定位。百度手机输入法的皮肤也同样由ini文件控制键位，无论是什么样的皮肤样式，都可以通过调整ini文件来陪陪布局。下面，我们将大家平时经常用到的概念做一个简单梳理。

关于坐标

在百度手机输入法中，所有元素的位置都是通过坐标来定义的，单位为像素。坐标原点位于图片的左上角，横坐标向右逐渐增大，纵坐标向下逐渐增大。

原点（0,0）

关于颜色

百度手机输入法皮肤的ini文件中，都是采用16进制的RGB颜色值表示，如FFFFFF（纯黑）、000000（纯白）。您可以通过photoshop的调色板获得特定颜色的颜色值。

关于百度手机输入法皮肤

百度手机输入法存在两类皮肤类型，第一类是键盘版皮肤，后缀名为.bdskk，类似于大家在pc上看到的皮肤类型，另一类是触屏版皮肤，后缀名为.bdskt,包含了对按键的外观设计。

需要修改皮肤的时候，只需要将原有的后缀名改为.zip(要在系统中显示文件的扩展名，依次点击\工具\－\文件夹选项\－\查看\，再把\隐藏已知文件类型的扩展名\前的小勾去除即可)，然后将其解压到单独的文件夹，进入该文件夹，可以发现里面包含了许多png格式的图片和ini文件, 这些文件共同组成了一个模式的皮肤。png图片定义了输入法面板，ini则是配置文件，定义了皮肤的基本信息、按钮的功能、位置、大小等。ini文件可直接用系统自带的记事本或者其它文本编辑工具打开的。

为了降低初学者百度手机输入法为初学者提供了一套皮肤模板，大家只需要下载模板，按照规定大小替换其中的图片文件，保存为同名的png格式。这样，不需要改变ini配置，就可以制作一套属于自己的皮肤。

触屏版皮肤制作教程

一、皮肤包文件说明

当我们需要查看一个百度手机输入法触屏版皮肤时，可以将下载的bdskt文件的后缀名改为.zip，再用解压缩工具打开，即可看到如下25个文件。文件可以分为两个类别： ini配置文件和png图形文件。Ini记录了键位的定义和文字显示参数，是控制输入法的基础文件。png 是皮肤外观的文件，决定了皮肤的基本样式。一般来说，一个配置文件对应一个图形文件。hint.png为所有ini公用，在各个ini中可以单独控制显示形式。

附上各组文件名对应关系

文件名 Bh Def10 Def26 Edit En10 En26 En26s Num Hint Py10 Py26 Sel1 Sel2

二、准备工作

介绍笔画九键五笔输入全键盘五笔输入编辑界面九键英文输入全键盘英文输入全键盘大写英文输入数字键盘输入提示九键拼音输入全键盘拼音输入中文候选界面英文候选界面在百度手机输入法触屏版皮肤中，png文件不仅是皮肤的视觉样式，而且还决定了输入法的交互效率。在制作皮肤之前，我们必须首先设计好皮肤中各种按键的样式。

百度手机输入法皮肤为了充分满足用户的自定义需求，我们只需直接绘制完整的键盘图案即可，不需要拆分元素进行设计。

整个设计中，主要有两类键盘，一类为数字键盘，类似于普通手机，另一类是全键盘，类似于电脑。当然，大家还可以发挥自己的创意，设计出别具一个的键盘布局。我们为大家准备好了推荐的设计模板，方便大家设计不同分辨率键盘时选用。

下图为数字键盘。

下图为全键盘

三、开始制作

和所有的皮肤制作步骤一致，做完图片的准备工作之后，我们接下来就要将图片和配置文件进行匹配，建议大家复制一份ini文件，然后直接在ini文件中修改即可。

下面，我们将结合“百度酷黑”皮肤来介绍百度手机输入法触屏版版皮肤的制作。本教程中涉及的坐标，像素值，使用adobe fireworks的“切片工具”获取。

1、配置输入框的外观

显示被输入的字符，在ini文件中由[INPUT]字段控制 [INPUT]

FONT_SIZE = 36文字大小 FONT_NAME = Tahoma字体 FONT_WEIGHT = 700文字粗细

FONT_CLEARTYPE = 1是否使用字体平滑功能 FONT_COLOR = 4C4C4C文字颜色

BACK_COLOR = D9E9FE填充输入框的背景色 BORDER_COLOR = BFBFBF最外层边框颜色