搜狗输入法皮肤制作分三个步骤:Step1:设计皮肤效果图Step1:对应“皮肤编辑器”中各部分将效果图进行切分Step3:使用“皮肤编辑器”将切分好的图片生成皮肤(更详细的皮肤制作说明请参照《搜狗输入法皮肤设计教程》)皮肤文件说明1. 搜狗输入法皮肤文件为ssf格式,是采用zip压缩格式的文件。
可将皮肤文件的后缀名ssf改成zip解压出来。
修改完毕文件之后,可压缩成zip格式,把后缀名zip改成ssf后即是一个完整的皮肤文件。
等同于搜狗输入法皮肤编辑器制作的文件。
2. 搜狗输入法皮肤文件是由配置文件(skin.ini)及若干png、apng的图片构成的。
3. 当双击皮肤时,皮肤文件会被拷贝到安装目录下的allskin文件夹中,并解压到skin文件夹下,同时更新输入法程序中的皮肤列表。
搜狗输入法皮肤设计宝典——从新人到高手快速晋级前言:随着皮肤作者和作品数量的增加,越来越多的设计爱好者加入了搜狗皮肤设计的队伍,此前官方针对入门作者撰写了部分初级教程;更多活跃在论坛的优秀作者们也慷慨分享自己的设计经验,结合皮肤设计实例撰写了相当实用的皮肤教程,希望这些教程能°镏??大家在皮肤设计上取得进步和突破,获得更多声望和物质收益!入门级:皮肤制作入门(作者:官方)皮肤编辑器使用入门(作者:官方)皮肤上传说明(作者:官方)搜狗5.0皮肤编辑器使用方法和编辑技巧(作者:施情化忆)高手级:皮肤设计模式初探(作者:官方)浅谈花渡皮肤设计流程(作者:豁然开朗)Web2.0视觉效果在输入法中的应用(作者:嘟嘟虫)红楼梦皮肤一等奖作者设计经验分享(作者:微笑安然)皮肤制作说明搜狗输入法皮肤最关键的部分是设计,个人使用的皮肤可以根据需求制作您需要的模式,但是在官网发布皮肤必须拥有完整的四种模式,好的设计需要您有一定的设计功底,如使用Photoshop等专业的画图软件来完成。
如果您没有任何设计基础,建议您通过大头贴功能制作皮肤(大头贴皮肤制作地址:/skins/dtt.php)。
1、输入法皮肤完整模式有四种(见例图):横排同窗口、竖排同窗口、横排分窗口、竖排分窗口;请务必提供四种模式,否则使用智能ABC模式的人将看不到输入窗口。
注意事项:设计大小以候选字4个到5个为基础,但务必留出可延伸空间,因为网友很多会把外观修改为候选字5个以上。
在输入框设计中一定要留出拉伸或者平铺而不改变整体效果的位置。
尤其是竖版,在设计中候选字为9个以下的图片一定留出不改变图片的延展空间,否则实际使用中,由于画面延伸而使人物、logo、花样变形。
(在下面的皮肤制作中详细讲解)图片大小规格:可参考以下数据做调整,但不建议过大,否则影响输入:横排同窗口:380*60,不包括状态栏右侧的不规则形象(如小白猪)竖排同窗口:180*200,不包括状态栏右侧的不规则形象(如小白猪)横排分窗口:180*30 180*30,不包括状态栏右侧的不规则形象(如小白猪)竖排分窗口:180*30 180*150,不包括状态栏右侧的不规则形象(如小白猪)2、输入法状态栏的完整模式(见例图)包括状态栏背景图,及按钮三种模式:正常、鼠标悬浮,鼠标按下。
在官网的下载的皮肤编辑器的文件夹内,有“搜狗酷黑”“蓝色空间”的两款标准按钮的PSD设计图,可以直接修改或者替换…状态栏背景‟图层,为保证切图的标准,请使用参考线进行切图。
p 注意事项:标准的状态栏每按钮切片为16x17像素。
可根据制作需求任意设置,但请务必提供完整模式(中、英、A、中文标点、英文标点、全角、半角……),状态栏各按钮标准上有三种模式(正常、鼠标悬浮,鼠标按下)模式。
三种按钮模式可根据创意进行设计。
例图中提供了标准的三种模式。
3、设计完成后的切图:搜狗皮肤编辑器支持png格式图片,可在背景透明下切图,这样格式的图片避免了bmp图片会产生的毛边等情况。
但是在皮肤设计中没有异形(人物、logo等)是比较方正的设计时尽量使用bmp。
皮肤文件越小,在使用中的输入速度会越理想。
皮肤编辑器说明搜狗输入法最新版本中集成了输入法编辑器,右键输入法状态栏或右键输入框→更换皮肤→皮肤编辑器,搜狗输入法官网也提供搜狗皮肤编辑器的下载,这个下载包里有一些说明及介绍,包括两个标准导航栏设计的PSD文件和皮肤编辑器拉伸方式示意图(下载地址:/skins/design.php)。
1、下载完成后打开SkinEditor.exe,就可以进行皮肤的组装,在实际组装中我们也会更加详细的认识到皮肤设计的相关注意事项。
1)点击文件,新建一个皮肤制作,并在皮肤信息中填写2)点击输入窗口外观设置,根据设计图片来设置文字大小,字体,及字符串颜色。
3)四种输入模式的导入、制作、及参数调整等注意事项,四种模式的导入等方法相同注意事项:请一定注意参数的调整及拼音区和候选区的设置,好的设计是一个皮肤的灵魂,好的参数设置是皮肤使用的关键。
4)导航栏的导入、制作及阐述调整等注意事项注意事项:请一定导入选择按钮的全模式,否则在实际使用可能会出现,输入模式选择大写,而导航栏上没有体现。
5)在所有模式及导航栏的导入及设置完成后,可以点击另存为,选择另存位置及设置皮肤名称,整个皮肤的制作就完成了,双击就可以使用。
皮肤上传说明1、皮肤上传步骤:使用搜狗通行证登陆搜狗拼音输入法官网皮肤页面(/skins/)点击上传皮肤,按照提示填写信息,及上传皮肤及效果图。
2、皮肤上传设计的规格说明皮肤文件为小于600k的.ssf文件皮肤效果图为小于600k的.jpg格式图片,大小不超过500*350 列表缩略图为小于600k的.jpg格式图片,大小不超过420*210 3、什么是皮肤效果图?皮肤效果图:在每个皮肤具体页面上展示的图片,如/skins/view_skin.php?skin_id=2888804、什么是列表预览图?列表缩略图:皮肤分类结果及关键词搜索结果列表图片,如/skins/recommend.php5、皮肤效果图及缩略图的制作打开一空白文档,使用你制作的输入法进行打字,打字的时候可以拖拽导航栏及输入框,把输入法和状态栏拖拽到一起,使用QQ截图就可以的,保存为jpg格式。
为了你制作的输入法皮肤得到更多人的喜爱,效果图可以制作背景、四种模式完整等相关设计。
我们衷心希望这个小小的说明文档能够在皮肤设计和制作上帮到大家,快快来实践上传pp的皮肤的吧!!【搜狗5.0皮肤编辑器使用方法和编辑技巧】首先说明一下,我不是一个优秀的皮肤作者,这里只是说明关于软件的问题而不是制作精美的皮肤。
其次,或许有人已经晓得,其实官方有发布一篇超级详细的编辑器使用教程的,为什么我还要重复呢?其实,官方的教程是针对老版本的编辑器。
比起官方教程的介绍,新的编辑器多了支持动态皮肤以及个性化模块的编辑。
这也是本教程着重要介绍和如何合理应用的,主要面对新手,假如你对编辑器的使用早已了如指掌,请直接跳过。
在此之前,如果你还未看过官方的教程帖,建议你先翻阅一下。
我做个快捷链接:/bbs/viewthread.php?tid=113995&extra=page%3D1---------------------------------------------------------------------------------------------------------个性化图片模块和动态皮肤目前只支持拼音输入法,与五笔用户无缘。
基本上,很多人在没有明白个性化图片这个功能之前,做皮肤都是直接编辑一张图片出来,然后把拉伸部分设置在空白区域。
例1:这是我制作的一款荧光类皮肤,这是直接使用一张编辑裁剪好的图片放上的,再看看我的拉伸距离设置。
由于我这个边框是直线的,所以不管选择平铺或者拉伸,都不影响造型。
问题是,在横向状态下,怎么操作都不成问题。
竖向只要一拉,就出糗啦。
当然,竖向拉伸一般是换成了大些的字体才会用到。
但是我们做皮肤方方面面都要考虑周全,才能应对不同的使用者。
比如,有些人的电脑显示器尺寸较大,需要更大的字体才能看得清晰。
又比如,有些人习惯使用竖排合窗、分窗的模式。
看一下字体变大后导致的后果!在横排合窗、分窗中都有竖向固定的选项,可是竖排模式就没有了哦。
如果,我们把两边的图片取消掉,剩下一个边框,那么就能完美拉伸了。
所以,这里就要用到个性化模块的功能。
这个就是把图片取消掉,只留下边框后的图片,位置我是实现调好的。
接下来,点击编辑软件上方窗口设置旁边的按钮设置。
这里可以添加默认的功能按钮,状态栏与写作窗口合并的皮肤就是在这里编辑的。
我们点一下“添加”按钮,会出现一个新的选项,叫“自定义图片”。
在自定义图片中我们可以设置在平常状态下的显示效果,还有靠近、离开的效果。
现在把原先左边的图片导入,并且调试位置。
注意!对齐区域选择正中,其他别的方向都会对皮肤效果造成直接的美观影响。
然后,我这把剪刀准备是靠左上的,所以我竖直对齐上,水平对齐左。
注意,在鼠标进入或者悬浮导入一个同样的图片,否则鼠标靠近软件找不到图片会直接显示空白。
调试完毕!接下来右边的吹风机如法泡制。
吹风机我设置的是靠右靠下,这样皮肤拉伸大了不会把两个图片都往一个地方挤,显得有点单调。
接下来返回窗口设置,我们按照刚才一样的拉伸距离不动,再次把字体设置大,看看这次的效果。
Just cool!完美拉伸不变形,这就是我们要的效果。
其他三种模式也是这样操作的,需要注意的是,我们在做边框的时候,必须要留一点直线区域可以无限拉伸或者平铺的。
---------------------------------------------------------------------------------------------------------上面提及的是怎样使用个性化模块,其中有一个要点必须着重讲解一下。
首先,个性化图片对齐的位置,是与图片的尺寸有直接关系的。
比如说对齐上方,那么就是个性化图片的最上方与边框的最上方对齐。
既然如此,为什么我上面做的剪刀与吹风机不会对齐边框而是探出呢?因为,我在边框的上方留下了空白区域,这就是要点,包括下方也是。
这是在PS中,我这款皮肤的横排同窗模式的分层个件。
因为有一些使用了图层混合选项,所以我复制了这个组,然后合并。
合并完成之后,就是刚才上面教程刚开始使用的那张图片了。
载入选区,裁剪,然后隐藏这个图层。
然后打开原先的组,把个件显示出来,然后去掉左右两边的图片。
这样,我们就做出了一张单独边框的图片,并且上下都有空白区域。
---------------------------------------------------------------------------------------------------------接下来说下个性化模块在状态栏的应用,会达到意想不到的效果。