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

百度手机输入法
皮肤设计教程
目录
基本介绍 (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文件来陪陪布局。

下面，我们将大家平时经常用到的概念做一个简单梳理。

关于坐标
在百度手机输入法中，所有元素的位置都是通过坐标来定义的，单位为像素。

坐标原点位于图片的左上角，横坐标向右逐渐增大，纵坐标向下逐渐增大。

关于颜色
百度手机输入法皮肤的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 中可以单独控制显示形式。

附上各组文件名对应关系
二、准备工作
在百度手机输入法触屏版皮肤中，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最外层边框颜色
2、输入提示框
当用户按下或者点划按钮时，提示用户即将要输入的字符，在ini中由[HINT]字段控制
[HINT]
FONT_SIZE = 88文字大小
FONT_NAME = Tahoma字体
FONT_WEIGHT = 700文字粗细
FONT_CLEARTYPE = 1是否使用字体平滑功能
FONT_COLOR = 2a59ab文字颜色
BACK_COLOR = E7E3E7填充输入提示框的背景色
BORDER_COLOR = BFBFBF输入提示框边框颜色
W = 96宽度（建议保留原值）
H = 116高度（建议保留原值）
3、候选框
当用户输入拼音或笔画时，候选框中会出现候选文字，在ini中由[CAND]字段控制
[CAND]
FONT_SIZE = 40文字大小
FONT_NAME = Tahoma字体
FONT_WEIGHT = 100文字粗细
FONT_CLEARTYPE = 0是否使用字体平滑功能
文字颜色
候选框背景颜色
候选框边框颜色
X = 0纵坐标，以输入面板左上角为原点，向右递增（建议保
留原值）
Y = 0横坐标，以输入面板左上角为原点，向下递增（建议保留
原值）
W = 480候选框宽度（建议保留原值）
H = 52候选框高度（建议保留原值）
CELL_W = 25单候选字宽度（建议保留原值）
MORE_W = 60多候选字宽度（建议保留原值）
TYPE = 2 1为固定点选，使用x,y设置，2为浮动点选，忽略x,y设置，直接浮动在界面上方。

（建议保留原值）
4、列表栏
[LIST]
FONT_SIZE = 26文字大小
FONT_NAME = Tahoma字体
FONT_WEIGHT = 100文字粗细
FONT_CLEARTYPE = 1是否使用字体平滑功能
FONT_COLOR = 313031文字颜色
FONT_COLOR_SEL = FFFFFF按下后文字颜色
BACK_COLOR_SEL = 888888按下后背景颜色
X = 7列表栏起始横坐标
Y = 8列表栏起始纵坐标
W = 74列表栏宽度
H = 336列表栏高度
CELL_H = 56每个列表单元格高度
注意：列表的单元格个数为固定数目，请参照分辨率对应模板。

5、输入面板
输入面板用来陈列各类按键，包括KEY和LIST，是整个键盘的基础，在ini中由[PANEL]标签控制
[PANEL]
W = 480输入面板宽度
H = 350输入面板高度
KEY_NUM = 12按键个数
BAR_H = 52 键盘和屏幕下侧的距离，用以现实菜单栏（建议
保留原值）
LINE_COLOR = FFFF00面板边线颜色
LINE_W = 3面板边线粗细
6、按键
按键是输入的核心，所有的字母、比划、字根输入工作都由按键完成，一个键盘中往往包含多个按钮，是触摸屏皮肤设计中最复杂也最能体现个性的部分。

在ini中由[KEY]字段控制
[KEY1]
X = 87纵坐标，以输入面板左上角为原点，向右递增
Y = 8横坐标，以输入面板左上角为原点，向下递增
W = 94按键宽度
H = 107按键高度
CENTER = F1点击按钮输入的字符或启动的功能
UP = 1向上划词输入的字符或启动的功能
DOWN = 向下划词输入的字符或启动的功能
LEFT = ！向左划词输入的字符或启动的功能
RIGHT = ？向右划词输入的字符或启动的功能
SHOW = 1
7、系统功能定义
在按键的设计中，我们除了数字与字母外，会遇到一类特殊的按钮——功能按钮。

他们本身不会输入文字，但是却起着编辑文字、控制输入的作用。

下面是百度手机输入法为大家预制的输入法功能按钮类型。

启用方法和文字按钮的方式一样，在按键的center、up、down、left、right五个字段中进行设置，比如我需要向上滑动切换大小写，只需要使up=f6即可。

F1: 符号输入(sym)，有输入时可能为分词、隔音符
F2: 退格Backspace
F3: 删除delete / 清除全部已输入的编码
F4: 空格
F5: 回车return
F6: 大小写切换caps
F7: 中英文切换
F8: 菜单menu
F9: Tab
F10: 进出更多候选字，返回
F11: 候选字上翻/汉字单字与词组间切换
F12: 候选字下翻
F13: 切换10/26键盘，大小键盘切换
F14: 切换拼音、笔画、自定义，中文输入法间转换
F15: 切换英文字母输入、联想输入
F16: Win
F17: Home
F18: End
F20: 剪切Ctrl+x
F21: 复制Ctrl+c
F22: 粘贴 Ctrl+v
F23: 撤销Ctrl+z
F24: 全选Ctrl+a
F25: 恢复Ctrl+y
F26: 应用1（默认mail）
F27: 清空
F28: 应用2（默认word）
F29: 关闭,点击右上角x或ok ，退出程序
F30: 切换到软件盘
F31: 数字123 切换到数字输入状态
F32: 控制切换到控制输入状态
经过以上步骤我们就完成了一个配置文件，接下来只需重复以上步骤修改剩下的ini文件，很快就可以得到一套完成的皮肤文件了。

8、制作皮肤安装包
当PNG文件和ini文件都准备完成，将两者打包为一个zip文件后，将后缀名修改为bdskt即生成一个皮肤安装包。

只需下载到手机中，点击皮肤即可进行安装。

键盘版皮肤制作介绍
百度手机输入法键盘版皮肤制作教程
一、皮肤包文件说明
当我们需要查看一个百度手机输入法键盘版皮肤时，可以将下载的bdskk文件的后缀名改为.zip，再用解压缩工具打开，即可看到如下两个文件，分别为：一张png格式图片和一个ini配置文件构成。

Png是皮肤外观，决定了皮肤的基本样式。

ini是配置文件，控制着输入法的文字显示效果。

二、准备工作
刚才在前言介绍皮肤制作思想时，已经谈到过，皮肤的本质是把效果图与配置文件对应起来，效果图的样式便决定了皮肤的实际观感。

因此，在制作皮肤之前，我们需要首先用图形绘制出皮肤的样式。

下图是一个百度手机输入法键盘版皮肤的效果图，它主要包含以下三个元素：背景、图标和输入法指示器。

1、背景，用以显示被输入的拼音以及候选字。

2、图标，放置在背景边上作为装饰的图片，最多可以有六张，也可以没有。

3、输入法指示器，指示输入法现在处于的输入状态，如中文输入，英文输入。

在制作皮肤时，我们需要准备背景图一张、指示器图一张以及若干个图标。

将它们整合到一张背景透明的png格式的图片中，各个元素之间需要留出间隙，以便后续制作，如下图。

文件体积最好控制在12k以下，否则容易影响操作的流畅程度。

值得注意的是，PNG图片整合时，需要按照如下左图的方式，每个元素需要至少独占一个大小为图像长宽值的矩形位置。

不能像右图一样将元素叠放在一起。

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

下面，我们将结合“baidu”皮肤来介绍百度手机输入法键盘版皮肤的制作。

本教程中涉及的坐标，像素值，使用adobe fireworks的“切片工具”获取。

文件中存在一些位置描述，可以参考如下图形进行理解。

==============================================================================
在百度手机输入法键盘版皮肤的ini文件中，包含以下六种标签[NEWTAB] \ [NEWCAND] \ [NEWIDCT] \ [ICON] \ [TAB] \ [TEXT]，分别控制输入法皮肤的六个部分
1、定义拼音区背景
[NEWTAB] // 拼音区背景定义
SOURCE_Y = 0
SOURCE_W = 53
SOURCE_H = 25
//以上四行参数指定拼音区皮肤来源,
// 第一次制作皮肤时,可以用adobe fireworks打开baidu.png 按这几个参数用切片
工具在图片上标出这个区域,这样可以帮助理解这个参数的意义
SOURCE_INNER_X = 5
SOURCE_INNER_Y = 3
SOURCE_INNER_W = 44
SOURCE_INNER_H = 20
//以上四行参数指定拼音内部区域，这个区域会随着字体大小，以及面板的大小缩放，因此在选择的时候时候，不能选入边角。

//上面的八行参数，可以划分出皮肤的边框部分。

// 第一次制作皮肤时,可以用adobe fireworks打开baidu.png 按这几个参数用切片工具在图片上标出这个区域,这样可以帮助理解这个参数的意义
CONNTENT_X = 3
CONNTENT_Y = 3
CONNTENT_W = 9
CONNTENT_H = 20
//以上四行参数指定内容区，即，拼音或文字显示的区域。

// 第一次制作皮肤时,可以用adobe fireworks打开baidu.png 按这几个参数用切片工具在图片上标出这个区域,这样可以帮助理解这个参数的意义
SCALE_TOP_MIDDLE = 0 // 0表示平铺, 1表示拉伸。

SCALE_MIDDLE_LEFT = 0
SCALE_MIDDLE_MIDDLE = 0
SCALE_MIDDLE_RIGHT = 0
SCALE_BOTTOM_MIDDLE = 0
2、定义候选字区背景
[NEWCAND] //候选字区背景定义
SOURCE_Y = 25
SOURCE_W = 53
SOURCE_H = 93
//以上四行参数指定候选字区皮肤来源
SOURCE_INNER_X = 3
SOURCE_INNER_Y = 25
SOURCE_INNER_W = 46
SOURCE_INNER_H = 90
//以上四行参数指定候选字内部区域，这个区域会随着字体大小，以及面板的大小缩放，因此在选择的时候时候，不能选入边角。

// 第一次制作皮肤时,可以用adobe fireworks打开baidu.png 按这几个参数用切片工具在图片上标出这个区域,这样可以帮助理解这个参数的意义
CONNTENT_X = 3
CONNTENT_Y = 26
CONNTENT_W = 47
CONNTENT_H = 89
//以上四行参数指定内容区，即，候选字显示的区域。

// 第一次制作皮肤时,可以用adobe fireworks打开baidu.png 按这几个参数用切片工具在图片上标出这个区域,这样可以帮助理解这个参数的意义
SCALE_TOP_MIDDLE = 0
SCALE_MIDDLE_LEFT = 1
SCALE_MIDDLE_MIDDLE = 1
SCALE_MIDDLE_RIGHT = 1
SCALE_BOTTOM_MIDDLE = 0
3、匹配输入法指示器
[NEWIDCT] //输入法指示器
SOURCE_X = 72
SOURCE_Y = 124
SOURCE_W = 35
SOURCE_H = 17
//以上四行参数指定输入法指示器皮肤来源
// 第一次制作皮肤时,可以用adobe fireworks打开baidu.png 按这几个参数用切片工具在图片上标出这个区域,这样可以帮助理解这个参数的意义
CONNTENT_X = 74
CONNTENT_Y = 126
CONNTENT_W = 13
CONNTENT_H = 13
//以上四行参数指定内容区，即，拼，笔，en等状态的显示区域。

// 第一次制作皮肤时,可以用adobe fireworks打开baidu.png 按这几个参数用切片工具在图片上标出这个区域,这样可以帮助理解这个参数的意义
4、放置装饰图标
[ICON1] //图标
POSTION_TYPE = 11 //定义图标显示的位置，总共有6个，坐标分别外11、12、13、
14、23、24。

POSTION_X = 0
POSTION_Y = -2
//以上两个参数定义图标位置,坐标以各个角定义原点
SOURCE_X = 54
SOURCE_Y = 0
SOURCE_W = 35
SOURCE_H = 19
//以上四个参数定义图标来源，即其在xxx.png中的位置
// 第一次制作皮肤时,可以用adobe fireworks打开baidu.png 按这几个参数用切片工具在图片上标出这个区域,这样可以帮助理解这个参数的意义
[ICON2]
POSTION_TYPE = 23
POSTION_X = -2
POSTION_Y = -20
SOURCE_X = 54
SOURCE_Y = 65
SOURCE_W = 41
SOURCE_H = 24
其余图标设置可以以此类推，注意同一位置下不能定义两个图标，且图标数量最多不超过六个
5、调整拼音区配色
[TAB] // 普通版皮肤拼音区配色定义，仅有TAB_SEL_BACK2、TAB_ARROW_EMPTY和
TAB_ARROW_MORE有效，其他属性建议保持不变。

TAB_SEL_BACK1 = ffe6a0 //选中标签上半底色
TAB_SEL_BACK2 = ffcf6c //上屏拼音颜色
TAB_INACTIVE_BACK1 = ffee87 //未选中标签上半底色
TAB_INACTIVE_BACK2 = fedb07 //未选中标签下半底色
TAB_INACTIVE_BORDER = fedb07 //未选中标签边框颜色
TAB_ARROW_EMPTY = ffefb1 //拼音区右边的三角剪头(不能继续翻页)
TAB_ARROW_MORE = f98732 //拼音区右边的三角剪头(可以继续翻页)
6、选取最靓丽的候选字颜色
[TEXT] //文字配色
TEXT_NORMAL = 000000 //普通字体颜色
TEXT_SEL = fd0100 //选中框内字体颜色
TEXT_SEL_NOLINE = 0 //无选中框的皮肤选中项是否加下划线，“1”表示无线，“0”或没有此项，表示有线.
TEXT_SEL_NUM = fd0100 //候选字编号数字颜色
TEXT_SEL_NUM_HOLD = 000000 //长按选字提示数字颜色
TEXT_ONSEL = 000000 //选字模式下候选字颜色
TEXT_ONTAB = fd0100 //选中标签上字体颜色
TEXT_INPUT = fd0100 //输入提示字体颜色
TEXT_INPUT_LIST = 000000 //候选拼音列表、符号列表等字体颜色
TEXT_DEL = FF850D //删除模式下可删除候选字颜色
TEXT_NODEL = DDDDDD //删除模式下不可删除候选字颜色
TEXT_EN_ADD = FF6600 //英文造词模式下已选字符颜色
7、制作皮肤安装包
当PNG文件和ini文件都准备完成，将两者打包为一个zip文件后，将后缀名修改为bdskk即生成一个皮肤安装包。

只需下载到手机中，点击皮肤即可进行安装。