关于紫光华宇拼音V6版皮肤设计的说明

紫光华宇拼音V6正式版皮肤方案与V5版相比有了很大的改进。

V6版本状态栏的按钮图标现在可以自己定制了,而V5版的状态栏图标是不可以由用户自定制的。这样的改进可以让喜欢紫光华宇拼音的fans们进行更加酣畅彻底的DIY。这也是我们V6版本的创新之处,能够让用户拥有更多展现个性的空间。如果你喜欢紫光华宇拼音,那就赶紧来自己动手DIY吧!

一.状态栏

V6版主题默认的图片格式都是24位png格式的(当然也可以用其他一些格式,比如“jpg”、“bmp”),全部状态栏图标都放在一张png图片里面,此图片支持α通道透明信息,因此图标的透明和半透明区域都能够将状态栏背景图显现出来,如同在photoshop中的图层显示。

状态栏上面图标的大小是可以根据个人设计自定义的;图标的排列是有顺序的,具体的坐标位置请按照默认皮肤中的buttons.png的顺序排列。皮肤的默认安装路径C:\Documents and Settings\All Users\Application Data\unispim6\theme,请注意这是一个隐藏目录,请打开文件夹选项当中的“显示所有文件和文件夹”选项“。每个图标的大小是一样的。图标组右下角有两张方形的图片,一张是鼠标放在图标上的背景图片切换样式,另一张是鼠标点击后的图标背景图片样式。

状态栏是由三层元素构成的,最下面是是状态栏背景图片;第二层是图标背景层;最上面是图标层。状态栏背景图分为左中右三个区域,最前面的区域是鼠标拖动区,中间区域为状态栏平铺、拉伸区域,最右边为收尾区域。默认的图标按钮摆放在状态栏的中间区域与状态栏背景图垂直居中对齐。需要时可以通过调节状态栏样式中的“状态栏按钮图上边界”来控制按钮图标的上下位置。

二.输入栏

紫光华宇拼音输入法V6版输入栏皮肤的显示方式也有了很大的变化,因为加入了tab键扩展候选栏的功能,V6版的输入栏皮肤必须做到向四个方向都能扩展而不变形。输入栏的背景图片分为9个区域,左上角(1)、右上角(2)、左下角(7)、右下角(5)、上下左右的中间区域(2、4、6、8),以及图片正中央的区域(9)。左上角、右上角、左下角、右下角图片有固定宽高,以保证在输入过程中这些区域始终保持不会随着文字内容的变化而变形;上下左右的中间区域,以及图片正中央的区域是随时会根据内容的变化而变化的,可以平铺也可以拉伸以保证图片的连续性。

输入栏9个区域:

输入栏背景图区域边距:

边角、中心线、剩余候选数目字参数:

线框中为文字区域:

输入栏元素分为三层,输入栏背景图层、输入栏中心线图层,输入栏文字层。中心线为一张line.png的图片,放在拼音栏文字和汉字候选栏文字中间,有平铺和拉伸两种方式,中心线距离输入栏左边界和右边界的参数是可调整的;中心线的图片中心在垂直方向上与拼音栏文字和汉字候选栏文字间距的中心重合。中心线背景图可以不是一个很窄的细线,像默认皮肤中的中心线的样式,这张图片是一张上半部透明,下半部为渐变透明的png图片。输入栏文字层距离外部的上下左右边界的距离可控;输入栏文字字体颜色可控;剩余候选数目字颜色可控、与右边界距离可控。

V6版的皮肤包中共有五个文件:bg_main.png(输入栏背景图)、bg_status(状态栏背景图)、buttons(状态栏按钮图)、line.png(中心中心线)、theme.ini(皮肤配置文件)。皮肤制作前需要做的事情是先在photoshop这类图形图像处理软件中做好皮肤的整套效果图,并把需要的状态栏背景图和输入栏背景图做好;设计好图标按钮的样式,合并到一张图中(buttons.png),图标的设计根据个人喜好、图标代表的意思来设计。默认的图标大小是22×22 像素,所以整张buttons.png的图片大小为:宽22×9=198px;高22×2=44px。您设计的图标的大小不一定与默认皮肤中的大小相同,可以根据自己的需要来设计。可以在一张buttons的图片上画好辅助线,把每个设计好的图标放置到辅助线网格当中,具体的位置还要根据皮肤设计界面中在状态栏上的样式来进行微调。

photoshop中选择需要的固定大小的选择区

从左上角开始根据固定大小的选择区域画好辅助线

建议使用photoshop cs以上的版本进行v6皮肤的设计,因为在ps的颜色对话框中可以方便的拷贝颜色的值,比如大红色#ff0000,和网页设计中颜色的代码一致,然后将ff0000数值串拷贝粘贴到皮肤设计面板的数值栏中。这里请注意V6版的颜色参数前面都有0x,实际制作过程中不要忘了加上0x。

下面就一个实例来说明V6皮肤的注意事项。

这是透明窗口模式的皮肤。透明模式的皮肤,需要透明的区域在png图片中也应该是透明的,注意透明区域的透明度必须是100%的透明,而不能有不完全透明的像素。程序会自动将此区域设置成透明,露出皮肤下面的窗口界面。因此在设计皮肤时,尽量用像素画的方式将边缘连接,设计外框时尽量不要用抗锯齿的方式来做,否则会将背景透明色的紫红色与之混合,形成难看的紫色边界。你可以将主题的bg_main.png图片的边缘融合部分重新用像素的方法重新连接休整。

打开设置界面,从首页上点”主题制作“按钮进入皮肤设计界面。点左边的”新建“按钮会打开默认的空白主题模板。主题名称项必填。主题背景色用于观看在不同的颜色背景窗口中输入法状态栏和输入栏的效果,尤其是当选择透明模式的时候,请设置主题背景色来查看效果。

从已用图形设计软件设计制作完成的工作目录中选择状态栏背景图、状态栏按钮图、输入栏背景图、输入栏中心线图,这时就有了大体的皮肤效果,根据各项控制文字、按钮、中心线等元素的参数设置调整完成最终的皮肤方案。通过控制扩展显示的选项可以查看横向显示候选文字正常状态和按tab键显示扩展候选栏的样式;通过控制“辅助线”选项的选中状态,可以查看各区域的位置;有一个红色小圆圈表示输入栏起始原点,默认是在左上角,当输入栏的设计样式有不规则的图形在输入栏文字区域之外的时候,需要用到这个输入栏“锚点”来调整输入栏文字和输入文字焦点之间的距离,例如《传统中国》这款皮肤。

皮肤中文字字体请尽量选择系统默认字体,如中文字体用“宋体”、“仿宋”、“黑体”;英文用“arial”、“tahoma”,在选择英文字体时可用字母键快速定位到该字母打头的字体,如“a”或“t”就能快速找到上面那两种英文字体。如果选择了非系统默认字体的话有可能在没有这种字体的用户系统中显示效果与设计初衷相差较远。

皮肤制作界面:

几点皮肤设计的技巧:

边角尽量用同色的像素连接(锯齿状)

曲线的连接画法

可以通过修改图标大小来改变状态栏的大小。

可以通过设置程序控制状态栏图标显示隐藏来定制最小状态栏界面。

可以将line.png做成完全透明的图片,以不显示中心中心线。

面板的最下面是为使用双拼输入时的提示框设计配色方案,默认的样式是直角窗口的黑白灰色调搭配,可以根据主题需要修改此窗口的样式。

最终效果:

《星梦童话》

三.关于安装及应用

一般设计前大家都会建立自己的工作目录,制作的皮肤图片和主题配置文件也会放在工作目录中的皮肤目录中,这个目录包括皮肤文件所需要的所有图片和ini文件。在完成皮肤制作后,我们会从设置面板里面的外观设置界面中点击浏览,从工作目录中找到刚才已经制作好的theme.ini,这时样式图片就会替换成你自己做好的主题样式。同时主题文件目录会被自动的拷贝到软件主题的默认安装目录下。需要说明的一点是,如果修改某个主题后,有的图片没有被替换,这可能是你的输入法已经打开,并且正好应用的是当前修改的样式,暂时不能被替换,请换到别的皮肤样式,然后注销重新登录后再修改你的主题皮肤。可以从外观设置的界面当中点击浏览按钮旁边的小三角,选择选择“导出”,这样就可以将您已经制作好的皮肤打包成“utm”格式的皮肤安装包,下一次你或其他V6版的用户就可以通过双击这个文件,来方便的安装这个皮肤主题了。

感谢大家的支持

喜爱紫光华宇拼音的用户们,您对我们最好的鼓励就是尝试每个新版本并长期使用我们的产品,您对我们最大的支持就是及时反馈使用过程中出现的问题及不足。喜欢DIY的朋友们,我们现在诚挚的向您发出邀请:请将自己制作的V6版本皮肤上传到网站的皮肤下载空间里面,与大家分享您的作品。参与紫光华宇拼音皮肤大赛,有可能你的设计会得到好评,并获取我们为优胜者准备的丰厚的奖品。谢谢大家对我们的支持!