皮肤制作

• 设计指南

  • 皮肤的设计分成普通皮肤和相框皮肤两种。

  • 状态栏

    

    1、状态栏背景。

    

    2、形象-用于装饰状态栏。

    

    3、按钮

    个性皮肤按钮为：中、英、A、全角、半角、中文标点、英文标点、软键盘、同步更新、用户登陆、设置。一个按钮需要做4种状态：正常，经过，点击，不可用。一个按钮制作成一个文件，横排排列，四个状态的尺寸大小必须是相同的。

    

    两个按钮之间是可以重叠的，以层的关系决定点击的优先顺序。当两个按钮重叠后透明度为0的区域不可点击，利用这种技术可以实现各种效果，例如：

    

    画面中"中"字按钮大小为红框内，而"半角"按钮的大小为绿框内，两个按钮有交叉重叠的情况，此时如果重叠的区域透明度为0，那么两个按钮可点击区域只是按钮本身有图案的部分，即使两个按钮重叠了也不影响操作。

  • 横排输入框

    

    1、背景-用于输入框的背景。

    

    背景图片需要注意的几点：

    （1）背景图片的大小限制了整个输入框的大小，包括在背景中出现的形象必须要在这个背景的大小范围之内，所以设计的时候必须注意整个背景的区域设定。比如图中企鹅形象超出了背景的区域，那么就必须把背景图片的大小扩展至该大小。

    （2）背景图片有上下和左右拉伸的一个区域（途中蓝线部分），设计时需注意该区域可以被拉伸而不变形。

    （3）拉伸区域分为直接拉伸和平铺拉升两种。

    直接拉伸的方式为以一段像素作为基础，直接拉伸，如下图：

    

    平铺拉伸的方式以一段像素作为基础，复制该区域的图像平铺展开，如下图：

    

    Ps:该拉升方式可以解决边框底纹带重复图案的拉伸问题。

    2、底纹-作为背景的装饰。（该项不设计不影响实现）

    底纹会跟随背景移动，所以必须要为底纹和背景之间设定一个跟随方式，

    如：跟随背景的右下角移动。设计的时候就需要注意到底纹的跟随方式。同时注意背景扩大后的情况，可以用一些渐变过度的方式去避免拉伸后的不融合情况：

    底纹：跟随方式：

    通过渐变避免出现断开的情况：

    3、形象（该项不设计不影响实现，建议设计）

    用于装饰输入框，建议使用png24位格式，同样需要设定一个跟随方式。

    

    4、候选词分割线（该项不设计不影响实现，建议设计）

    用于视觉上分隔开候选和输入词。

    

    中间部分必须要设定一个拉伸区域，设计时注意该部分是否影响拉伸效果。

    5、候选词和光标颜色设定

    

    需要提供5个色值，提供设置的形式为：通过取色器可以得出该值。

    6、小箭头按钮

    

    一个按钮需要做4种状态：正常，经过，点击，不可用。一个按钮制作成一个文件，横排排列，四个状态的尺寸大小必须是相同的。

  • 竖排输入框

    

    1、背景-用于输入框的背景。

    

    竖排背景图片与横排的区别在于必须把上面的输入框和下面的后选区分开两个文件输出。

    其他的规则与横排的相同。

  • 相框皮肤的相框制作

    

    相框皮肤的制作除相框外其他的制作方式与普通皮肤的相同。

    状态栏的相框建议为40X40pix的大小，输入框的相框大小为2的倍数，如80x80,尽量避免80x81这种非2的倍数的情况出现。

    相框包括3个文件：

    （1）相框文件-相框必须是有镂空区域的，文件格式为png24位格式

    

    （2）蒙板-蒙板的文件格式为png24位格式，如带有透明度的情况，蒙板会根据相应的透明度进行显示。如：

    

    蒙板的图片大小必须是和相框的图片大小一致，蒙板的位置也要符合相片的出现位置。

    （3）默认图片

    默认图片必须要和蒙板的区域一样大，一个像素都不能差，不然会造成图片的拉伸变形。

    效果图：