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

百度手机输入法皮肤设计教程目录基本介绍.......................................................................................................................................................2触屏版皮肤制作教程...................................................................................................................................31、配置输入框的外观..........................................................................................................................52、输入提示框.....................................................................................................................................53、候选框.............................................................................................................................................64、列表栏.............................................................................................................................................65、输入面板.........................................................................................................................................76、按键.................................................................................................................................................77、系统功能定义..................................................................................................................................88、制作皮肤安装包..............................................................................................................................9键盘版皮肤制作介绍...................................................................................................................................91、定义拼音区背景............................................................................................................................113、匹配输入法指示器........................................................................................................................134、放置装饰图标................................................................................................................................145、调整拼音区配色............................................................................................................................156、选取最靓丽的候选字颜色............................................................................................................157、制作皮肤安装包............................................................................................................................16基本介绍皮肤制作基本概念皮肤制作的本质，主要包含两个步骤：第一是需要把各种输入法功能在效果图上面的按钮形象表达，第二是把按钮的坐标找到，在ini文件中为它精准定位。百度手机输入法的皮肤也同样由ini文件控制键位，无论是什么样的皮肤样式，都可以通过调整ini文件来陪陪布局。下面，我们将大家平时经常用到的概念做一个简单梳理。关于坐标在百度手机输入法中，所有元素的位置都是通过坐标来定义的，单位为像素。坐标原点位于图片的左上角，横坐标向右逐渐增大，纵坐标向下逐渐增大。关于颜色百度手机输入法皮肤的ini文件中，都是采用16进制的RGB颜色值表示，如FFFFFF（纯黑）、000000（纯白）。您可以通过photoshop的调色板获得特定颜色的颜色值。关于百度手机输入法皮肤百度手机输入法存在两类皮肤类型，第一类是键盘版皮肤，后缀名为.bdskk，类似于大家在pc上看到的皮肤类型，另一类是触屏版皮肤，后缀名为.bdskt,包含了对按键的外观设计。需要修改皮肤的时候，只需要将原有的后缀名改为.zip(要在系统中显示文件的扩展名，依次点击工具－文件夹选项－查看，再把隐藏已知文件类型的扩展名前的小勾去除即可)，然后将其解压到单独的文件夹，进入该文件夹，可以发现里面包含了许多png格式的图片和ini文件,这些文件共同组成了一个模式的皮肤。png图片定义了输入法面板，ini则是配置文件，定义了皮肤的基本信息、按钮的功能、位置、大小等。ini文件可直接用系统自带的记事本或者其它文本编辑工具打开的。原点（0,0）为了降低初学者百度手机输入法为初学者提供了一套皮肤模板，大家只需要下载模板，按照规定大小替换其中的图片文件，保存为同名的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文件中修改即可。下面，我们将结合“百度酷黑”皮肤来介绍百度手机输入法触屏版版皮肤的制作。本教程中涉及的坐标，像素值，使用adobefireworks的“切片工具”获取。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是否使用字体平滑功能FONT_COLOR=4C4C4C文字颜色BACK_COLOR=D9E9FE候选框背景颜色BORDER_COLOR=BFBFBF候选框边框颜色X=0纵坐标，以输入面板左上角为原点，向右递增（建议保留原值）Y=0横坐标，以输入面板左上角为原点，向下递增（建议保留原值）W=480候选框宽度（建议保留原值）H=52候选框高度（建议保留原值）CELL_W=25单候选字宽度（建议保留原值）MORE_W=60多候选字宽度（建议保留原值）TYPE=21为固定点选，使用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每个列表单元格高度注意：列表的单元格个数为固定数目，请参照分辨率对应模板