搜狗皮肤编辑.doc

皮肤制作说明     搜狗输入法皮肤最关键的部分是设计，个人使用的皮肤可以根据需求制作您需要的模式，但是在官网发布皮肤必须拥有完整的四种模式，好的设计需要您有一定的设计功底，如使用Photoshop等专业的画图软件来完成    如果您没有任何设计基础，建议您通过大头贴功能制作皮肤（大头贴皮肤制作地址：    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文件和皮肤编辑器拉伸方式示意图（下载地址： 下载完成后打开SkinEditor.exe，就可以进行皮肤的组装，在实际组装中我们也会更加详细的认识到皮肤设计的相关注意事项。

1） 点击文件，新建一个皮肤制作，并在皮肤信息中填写2） 点击输入窗口外观设置，根据设计图片来设置文字大小，字体，及字符串颜色3） 四种输入模式的导入、制作、及参数调整等注意事项，四种模式的导入等方法相同注意事项：请一定注意参数的调整及拼音区和候选区的设置，好的设计是一个皮肤的灵魂，好的参数设置是皮肤使用的关键4） 导航栏的导入、制作及阐述调整等注意事项注意事项：请一定导入选择按钮的全模式，否则在实际使用可能会出现，输入模式选择大写，而导航栏上没有体现5） 在所有模式及导航栏的导入及设置完成后，可以点击另存为，选择另存位置及设置皮肤名称，整个皮肤的制作就完成了，双击就可以使用皮肤上传说明  1、 皮肤上传步骤：使用搜狗通行证登陆搜狗拼音输入法官网皮肤页面（ 皮肤上传设计的规格说明皮肤文件为小于600k的.ssf文件皮肤效果图为小于600k的.jpg格式图片，大小不超过500*350列表缩略图为小于600k的.jpg格式图片，大小不超过420*2103、什么是皮肤效果图？皮肤效果图：在每个皮肤具体页面上展示的图片，如 皮肤效果图及缩略图的制作打开一空白文档，使用你制作的输入法进行打字，打字的时候可以拖拽导航栏及输入框，把输入法和状态栏拖拽到一起，使用截图就可以的，保存为jpg格式。

为了你制作的输入法皮肤得到更多人的喜爱，效果图可以制作背景、四种模式完整等相关设计 我们衷心希望这个小小的说明文档能够在皮肤设计和制作上帮到大家，快快来实践上传pp的皮肤的吧！！[皮肤教程] 【搜狗5.0皮肤编辑器使用方法和编辑技巧】本帖最后由 施情化忆 于 2010-11-17 16:07 编辑 首先说明一下，我不是一个优秀的皮肤作者，这里只是说明关于软件的问题而不是制作精美的皮肤其次，或许有人已经晓得，其实官方有发布一篇超级详细的编辑器使用教程的，为什么我还要重复呢？其实，官方的教程是针对老版本的编辑器比起官方教程的介绍，新的编辑器多了支持动态皮肤以及个性化模块的编辑这也是本教程着重要介绍和如何合理应用的，主要面对新手，假如你对编辑器的使用早已了如指掌，请直接跳过在此之前，如果你还未看过官方的教程帖，建议你先翻阅一下我做个快捷链接： (38.26 KB)2010-9-14 19:06例1：这是我制作的一款荧光类皮肤，这是直接使用一张编辑裁剪好的图片放上的，再看看我的拉伸距离设置下载 (29.52 KB)2010-9-14 19:06由于我这个边框是直线的，所以不管选择平铺或者拉伸，都不影响造型。

问题是，在横向状态下，怎么操作都不成问题竖向只要一拉，就出糗啦当然，竖向拉伸一般是换成了大些的字体才会用到但是我们做皮肤方方面面都要考虑周全，才能应对不同的使用者比如，有些人的电脑显示器尺寸较大，需要更大的字体才能看得清晰又比如，有些人习惯使用竖排合窗、分窗的模式看一下字体变大后导致的后果！下载 (45.93 KB)2010-9-14 19:06在横排合窗、分窗中都有竖向固定的选项，可是竖排模式就没有了哦如果，我们把两边的图片取消掉，剩下一个边框，那么就能完美拉伸了所以，这里就要用到个性化模块的功能下载 (10.55 KB)2010-9-14 19:06这个就是把图片取消掉，只留下边框后的图片，位置我是实现调好的接下来，点击编辑软件上方窗口设置旁边的按钮设置这里可以添加默认的功能按钮，状态栏与写作窗口合并的皮肤就是在这里编辑的我们点一下“添加”按钮，会出现一个新的选项，叫“自定义图片”在自定义图片中我们可以设置在平常状态下的显示效果，还有靠近、离开的效果下载 (1.98 KB)2010-9-14 19:06现在把原先左边的图片导入，并且调试位置注意！对齐区域选择正中，其他别的方向都会对皮肤效果造成直接的美观影响。

然后，我这把剪刀准备是靠左上的，所以我竖直对齐上，水平对齐左下载 (3.04 KB)2010-9-14 19:06注意，在鼠标进入或者悬浮导入一个同样的图片，否则鼠标靠近软件找不到图片会直接显示空白下载 (22.24 KB)2010-9-14 19:06调试完毕！接下来右边的吹风机如法泡制下载 (38.53 KB)2010-9-14 19:06吹风机我设置的是靠右靠下，这样皮肤拉伸大了不会把两个图片都往一个地方挤，显得有点单调接下来返回窗口设置，我们按照刚才一样的拉伸距离不动，再次把字体设置大，看看这次的效果下载 (49.92 KB)2010-9-14 19:06Just cool!完美拉伸不变形，这就是我们要的效果其他三种模式也是这样操作的，需要注意的是，我们在做边框的时候，必须要留一点直线区域可以无限拉伸或者平铺的上面提及的是怎样使用个性化模块，其中有一个要点必须着重讲解一下首先，个性化图片对齐的位置，是与图片的尺寸有直接关系的比如说对齐上方，那么就是个性化图片的最上方与边框的最上方对齐既然如此，为什么我上面做的剪刀与吹风机不会对齐边框而是探出呢？因为，我在边框的上方留下了空白区域，这就是要点，包括下方也是。

下载 (4.76 KB)2010-9-14 19:06这是在PS中，我这款皮肤的横排同窗模式的分层个件因为有一些使用了图层混合选项，所以我复制了这个组，然后合并合并完成之后，就是刚才上面教程刚开始使用的那张图片了载入选区，裁剪，然后隐藏这个图层然后打开原先的组，把个件显示出来，然后去掉左右两边的图片这样，我们就做出了一张单独边框的图片，并且上下都有空白区域下载 (33.55 KB)2010-9-14 19:06下载 (7.19 KB)2010-9-14 19:06---------------------------------------------------------------------------------------------------------接下来说下个性化模块在状态栏的应用，会达到意想不到的效果照旧先上例图：下载 (17.94 KB)2010-9-14 19:06这个荧光的苹果logo看似就是一个中英文切换按钮，还有另外一个中英标切换按钮，而状态栏就是那个荧光边框的苹果其实，那个苹果，是全半角的切换，而叶子则是呼出软键盘的按钮这样一讲可能有些冲突，因为我们都知道状态栏的图片只能显示而不能操作。

在这里不但能操作，而且好像根本就没有显示这并不是勾上了“不使用图片”这个选项，如果打开了这个选项，按钮都无法显示了下载 (26.26 KB)2010-9-14 19:06下载 (29.34 KB)2010-9-14 19:13其实整个操作过程很简单，按钮部分照样是添加图片显示重点是状态栏图片，我们使用一张与苹果和叶子整体尺寸一样大的空白图片就是这样简单！当然，要注意的。