1、搜狗输入法皮肤制作分三个步骤：Step1：设计皮肤效果图Step1：对应“皮肤编辑器 ”中各部分将效果图进行切分Step3：使用“皮肤编辑器 ”将切分好的图片生成皮肤（更详细的皮肤制作说明请参照 搜狗输入法皮肤设计教程）皮肤文件说明1. 搜狗输入法皮肤文件为 ssf 格式，是采用 zip 压缩格式的文件。可将皮肤文件的后缀名 ssf 改成 zip 解压出来。修改完毕文件之后，可压缩成 zip 格式，把后缀名 zip 改成 ssf 后即是一个完整的皮肤文件。等同于搜狗输入法皮肤编辑器制作的文件。2. 搜狗输入法皮肤文件是由配置文件（skin.ini）及若干 png、apng 的图片构成的。3.
2、当双击皮肤时，皮肤文件会被拷贝到安装目录下的 allskin 文件夹中，并解压到 skin 文件夹下，同时更新输入法程序中的皮肤列表。搜狗输入法皮肤设计宝典从新人到高手快速晋级前言： 随着皮肤作者和作品数量的增加，越来越多的设计爱好者加入了搜狗皮肤设计的队伍，此前官方针对入门作者撰写了部分初级教程；更多活跃在论坛的优秀作者们也慷慨分享自己的设计经验，结合皮肤设计实例撰写了相当实用的皮肤教程，希望这些教程能镏?大家在皮肤设计上取得进步和突破，获得更多声望和物质收益！ 入门级：皮肤制作入门（作者：官方）皮肤编辑器使用入门（作者：官方）皮肤上传说明（作者：官方）搜狗 5.0 皮肤编辑器使用方法和编辑
3、技巧（作者：施情化忆）高手级：皮肤设计模式初探（作者：官方）浅谈花渡皮肤设计流程（作者：豁然开朗）Web2.0 视觉效果在输入法中的应用（作者：嘟嘟虫）红楼梦皮肤一等奖作者设计经验分享（作者：微笑安然）皮肤制作说明搜狗输入法皮肤最关键的部分是设计，个人使用的皮肤可以根据需求制作您需要的模式，但是在官网发布皮肤必须拥有完整的四种模式，好的设计需要您有一定的设计功底，如使用 Photoshop 等专业的画图软件来完成。如果您没有任何设计基础，建议您通过大头贴功能制作皮肤（大头贴皮肤制作地址：http:/ 。1、 输入法皮肤完整模式有四种（见例图）：横排同窗口、竖排同窗口、横排分窗口、竖排分窗口；请
4、务必提供四种模式，否则使用智能 ABC 模式的人将看不到输入窗口。注意事项：设计大小以候选字 4 个到 5 个为基础，但务必留出可延伸空间，因为网友很多会把外观修改为候选字5 个以上。在输入框设计中一定要留出拉伸或者平铺而不改变整体效果的位置。尤其是竖版，在设计中候选字为 9个以下的图片一定留出不改变图片的延展空间，否则实际使用中，由于画面延伸而使人物、logo、花样变形。 （在下面的皮肤制作中详细讲解）图片大小规格：可参考以下数据做调整，但不建议过大，否则影响输入：横排同窗口：380*60，不包括状态栏右侧的不规则形象（如小白猪）竖排同窗口：180*200，不包括状态栏右侧的不规则形象（如小
5、白猪）横排分窗口：180*30 180*30，不包括状态栏右侧的不规则形象（如小白猪）竖排分窗口：180*30 180*150，不包括状态栏右侧的不规则形象（如小白猪）2、 输入法状态栏的完整模式（见例图）包括状态栏背景图，及按钮三种模式：正常、鼠标悬浮，鼠标按下。在官网的下载的皮肤编辑器的文件夹内，有“搜狗酷黑”“蓝色空间 ”的两款标准按钮的 PSD 设计图，可以直接修改或者替换状态栏背景图层，为保证切图的标准，请使用参考线进行切图。 p 注意事项：标准的状态栏每按钮切片为16x17 像素。可根据制作需求任意设置，但请务必提供完整模式（中、英、A、中文标点、英文标点、全角、半角） ，状态栏各
6、按钮标准上有三种模式（正常、鼠标悬浮，鼠标按下）模式。三种按钮模式可根据创意进行设计。例图中提供了标准的三种模式。3、设计完成后的切图：搜狗皮肤编辑器支持 png 格式图片，可在背景透明下切图，这样格式的图片避免了 bmp 图片会产生的毛边等情况。但是在皮肤设计中没有异形（人物、logo 等）是比较方正的设计时尽量使用 bmp。皮肤文件越小，在使用中的输入速度会越理想。皮肤编辑器说明搜狗输入法最新版本中集成了输入法编辑器，右键输入法状态栏或右键输入框更换皮肤皮肤编辑器，搜狗输入法官网也提供搜狗皮肤编辑器的下载，这个下载包里有一些说明及介绍，包括两个标准导航栏设计的 PSD 文件和皮肤编辑器拉伸
7、方式示意图（下载地址：http:/ 下载完成后打开 SkinEditor.exe，就可以进行皮肤的组装，在实际组装中我们也会更加详细的认识到皮肤设计的相关注意事项。1） 点击文件，新建一个皮肤制作，并在皮肤信息中填写2） 点击输入窗口外观设置，根据设计图片来设置文字大小，字体，及字符串颜色。3） 四种输入模式的导入、制作、及参数调整等注意事项，四种模式的导入等方法相同注意事项：请一定注意参数的调整及拼音区和候选区的设置，好的设计是一个皮肤的灵魂，好的参数设置是皮肤使用的关键。4） 导航栏的导入、制作及阐述调整等注意事项注意事项：请一定导入选择按钮的全模式，否则在实际使用可能会出现，输入模式选择
8、大写，而导航栏上没有体现。5） 在所有模式及导航栏的导入及设置完成后，可以点击另存为，选择另存位置及设置皮肤名称，整个皮肤的制作就完成了，双击就可以使用。皮肤上传说明1、 皮肤上传步骤：使用搜狗通行证登陆搜狗拼音输入法官网皮肤页面（http:/ 皮肤上传设计的规格说明皮肤文件为小于 600k 的.ssf 文件皮肤效果图为小于 600k 的.jpg 格式图片，大小不超过 500*350列表缩略图为小于 600k 的.jpg 格式图片，大小不超过 420*2103、什么是皮肤效果图？皮肤效果图：在每个皮肤具体页面上展示的图片，如http:/ 皮肤效果图及缩略图的制作打开一空白文档，使用你制作的输入
9、法进行打字，打字的时候可以拖拽导航栏及输入框，把输入法和状态栏拖拽到一起，使用 QQ 截图就可以的，保存为 jpg 格式。为了你制作的输入法皮肤得到更多人的喜爱，效果图可以制作背景、四种模式完整等相关设计。 我们衷心希望这个小小的说明文档能够在皮肤设计和制作上帮到大家，快快来实践上传 pp 的皮肤的吧！【搜狗 5.0 皮肤编辑器使用方法和编辑技巧 】 首先说明一下，我不是一个优秀的皮肤作者，这里只是说明关于软件的问题而不是制作精美的皮肤。其次，或许有人已经晓得，其实官方有发布一篇超级详细的编辑器使用教程的，为什么我还要重复呢？其实，官方的教程是针对老版本的编辑器。比起官方教程的介绍，新的编辑器
10、多了支持动态皮肤以及个性化模块的编辑。这也是本教程着重要介绍和如何合理应用的，主要面对新手，假如你对编辑器的使用早已了如指掌，请直接跳过。在此之前，如果你还未看过官方的教程帖，建议你先翻阅一下。我做个快捷链接：http:/ 1：这是我制作的一款荧光类皮肤，这是直接使用一张编辑裁剪好的图片放上的，再看看我的拉伸距离设置。由于我这个边框是直线的，所以不管选择平铺或者拉伸，都不影响造型。问题是，在横向状态下，怎么操作都不成问题。竖向只要一拉，就出糗啦。当然，竖向拉伸一般是换成了大些的字体才会用到。但是我们做皮肤方方面面都要考虑周全，才能应对不同的使用者。比如，有些人的电脑显示器尺寸较大，需要更大的字
11、体才能看得清晰。又比如，有些人习惯使用竖排合窗、分窗的模式。看一下字体变大后导致的后果！在横排合窗、分窗中都有竖向固定的选项，可是竖排模式就没有了哦。如果，我们把两边的图片取消掉，剩下一个边框，那么就能完美拉伸了。所以，这里就要用到个性化模块的功能。这个就是把图片取消掉，只留下边框后的图片，位置我是实现调好的。接下来，点击编辑软件上方窗口设置旁边的按钮设置。这里可以添加默认的功能按钮，状态栏与写作窗口合并的皮肤就是在这里编辑的。我们点一下“添加 ”按钮，会出现一个新的选项，叫 “自定义图片”。在自定义图片中我们可以设置在平常状态下的显示效果，还有靠近、离开的效果。现在把原先左边的图片导入，并且
12、调试位置。注意！对齐区域选择正中，其他别的方向都会对皮肤效果造成直接的美观影响。然后，我这把剪刀准备是靠左上的，所以我竖直对齐上，水平对齐左。注意，在鼠标进入或者悬浮导入一个同样的图片，否则鼠标靠近软件找不到图片会直接显示空白。调试完毕！接下来右边的吹风机如法泡制。吹风机我设置的是靠右靠下，这样皮肤拉伸大了不会把两个图片都往一个地方挤，显得有点单调。接下来返回窗口设置，我们按照刚才一样的拉伸距离不动，再次把字体设置大，看看这次的效果。Just cool!完美拉伸不变形，这就是我们要的效果。其他三种模式也是这样操作的，需要注意的是，我们在做边框的时候，必须要留一点直线区域可以无限拉伸或者平铺的。
13、-上面提及的是怎样使用个性化模块，其中有一个要点必须着重讲解一下。首先，个性化图片对齐的位置，是与图片的尺寸有直接关系的。比如说对齐上方，那么就是个性化图片的最上方与边框的最上方对齐。既然如此，为什么我上面做的剪刀与吹风机不会对齐边框而是探出呢？因为，我在边框的上方留下了空白区域，这就是要点，包括下方也是。这是在 PS 中，我这款皮肤的横排同窗模式的分层个件。因为有一些使用了图层混合选项，所以我复制了这个组，然后合并。合并完成之后，就是刚才上面教程刚开始使用的那张图片了。载入选区，裁剪，然后隐藏这个图层。然后打开原先的组，把个件显示出来，然后去掉左右两边的图片。这样，我们就做出了一张单独边框的
14、图片，并且上下都有空白区域。-接下来说下个性化模块在状态栏的应用，会达到意想不到的效果。照旧先上例图：这个荧光的苹果 logo 看似就是一个中英文切换按钮，还有另外一个中英标切换按钮，而状态栏就是那个荧光边框的苹果。其实，那个苹果，是全半角的切换，而叶子则是呼出软键盘的按钮。这样一讲可能有些冲突，因为我们都知道状态栏的图片只能显示而不能操作。在这里不但能操作，而且好像根本就没有显示。这并不是勾上了“不使用图片” 这个选项，如果打开了这个选项，按钮都无法显示了。其实整个操作过程很简单，按钮部分照样是添加图片显示。重点是状态栏图片，我们使用一张与苹果和叶子整体尺寸一样大的空白图片。就是这样简单！当
15、然，要注意的是，在状态栏按钮的处理上！按钮并不是同层显示，而是由前到后，由上到下显示的。也就是说，如果你中文切换按钮导入了图片，X 轴 Y 轴位置设置为 5 和 10。另外，中英标切换也是放在 5，10 这个位置。你会发现完全被之前的按钮覆盖，这是因为按钮也有分层效果的。所以，我这个苹果的中英文切换按钮，中英标切换按钮，是直接显示在苹果的上方，而不是被遮挡在黑色部分的下方。所以添加个性化模块也是有层次关系的，并且添加的个性化模块都是排列在按钮的后面。【绝代芳华】-完整版沿用的就是这样一个设计理念，无视状态栏本身的存在，鼠标靠近之后，有很酷的视觉动画，又不会遮盖功能按钮的显示。参考地址：http
16、:/ gif 动画，当然也欢迎下载使用。花渡故事-花渡香犹在，设计苦自知( 浅谈花渡皮肤设计流程) 花渡 故事-花渡香犹在，设计苦自知（浅谈花渡皮肤设计流程）每款花渡的皮肤从构思、设计到效果图设计、制作、调参数直至完工，都不是轻轻松松就设计完成的，凝聚了作者的心情、心思、时间和创意，希望所有购买商业版花渡皮肤的客户能够体谅作者的辛苦，在您用漂亮的花渡皮肤打字的时候，避免共享就是对作者最大的支持和继续设计的动力。简单写写设计花渡系列皮肤的过程。第一步：主题构思不管是原创设计，还是动漫类皮肤的设计，每款皮肤作品都不应该独立存在，应该有一个可以清晰表达的主题，没有任何主题的皮肤，即使设计的再华丽也如
17、行尸走肉，作品如能承载体现设计者内心只所感所悟所想，就可以称得上是上佳作品。花渡的每款皮肤，都有一个特定的主题，从花渡系列皮肤的名字上可以看出一些来，其实每款皮肤背后都有一个设计故事，不过由于设计师的文笔太差，逻辑感太乱，每每设计完成皆不敢下笔：（，最后只能图个省事，做效果图了事。在此自我反省认真检讨一下。主题构思完成之后，就需要从素材库中找到合适的符合主题的素材，找不到的话，需要自己设计，这个过程比较痛苦，可能素材都很漂亮，但凡不符合主题的素材再漂亮也不要用：）第二步：花渡竖排设计找到花渡素材之后，开始设计，花渡皮肤一般从竖排输入框作为设计起点，因为竖排的输入框设计空间最大，相对也最容易展开
18、创意。搜狗皮肤的设计布局符合 UI 设计中用到的九宫格（九宫格中的九个区域只是虚拟的九个区，不见得非要均等分成九个区），九宫格中左上，右上，左下，右下四个角落加上竖排输入框的整体背景，是设计的重点。所有花渡输入框（横排，竖排以及分窗口）在设计上有个原则，九宫格的横向中间一排，和竖向中间一列的五个区块在皮肤使用中会被上下左右拉伸或者平铺，务必要考虑拉伸平铺变形之后的背景图案保持完整且不影响文字的辨识度。在这点上，有些花渡作品设计的还不够好，有待提高。输入框是为用户打字服务的，所以实用性是要放在第一位的，美观第二位，在输入文字的过程中，竖排输入框左上角和左下两个区块非常重要。a.左上角是紧邻文字输
19、入区域的部分，这里的设计一定要简洁，不要影响文字输入。4.2 版本的皮肤编辑器害可以设置输入焦点坐标，能够提高输入的可用性。b.左下角显示候选文字的最后几个字和上下页的三角按钮，注意这里的设计务必要考虑背景是否会影响文字和上下页的辨识度。c.右上角和右下角在设计力度上可以大一些，不过也要兼顾实用性，文字最右边到皮肤右边界的距离是否恰当也会影响美观和实用性，用皮肤编辑器调整时需要反复的调整测试。设计完成竖排皮肤，理想状态是可以只是任意大小字体的自定义设置。花渡的竖排输入框一般会支持 14 号字42 号字体，常用的是 16 号字、18 号字。16 号大小的字用的最多，从实际使用上来看，17 寸 1
20、024*768 分辨率的电脑屏幕使用 14 和 15 号更加协调一点， 16 号字稍微大一点点，对于现在普遍应用的宽屏显示器，16 号刚刚好。用户不喜欢的话可以通过自定义修改字体大小。第三步：花渡横排设计竖排设计好之后，接下来设计横排输入框，从竖排的设计图直接切换到横排也需要好好琢磨一下，怎样才能更好体现同一个主题。横排设计同样分九宫格，设计的原则和竖排有些不同，从理想状态考虑九宫格的设计，设计完成的横排输入框可以支持任意字体大小的自定义设置，但是由于横排输入框面积太小，可设计的空间有限，类似花渡这种类型的设计若想达到这个理想状态太难了，目前只有花渡镜台横排支持字体自定义大小，可以到 30 几
21、号字大小都没有问题，随着字体增大，皮肤的整体美观性同时在下降，协调性也在降低。花渡皮肤重点考虑左右拉伸平铺变形，上下拉伸平铺变形暂时不考虑。a.左上角部分和竖排一样，要注意实用性。b.左下角由于没有翻页的按钮可以多考虑一些美观性，c.左上+中左+左下三个区可以考虑合成一个整体来设计。d.中上+中间+中下三个区域需要能够拉伸平铺之后保持图像的完整一体，不能影响整体的设计美。e.右上+中右+右下三个区同理可以考虑合成一个整体来设计。 第四步：花渡分窗口的设计这步来说相对容易一些，就是操作上有点麻烦，需要不断的切图，输出。第五步：花渡状态栏背景设计状态栏虽小，但确是皮肤设计的难点所在，状态栏一般情况
22、下会始终在桌面上显示，设计的不好，即使横排和竖排输入框设计的再漂亮，也不能算是一款完美的皮肤。状态栏的外形基本上分两种，一种是中规中矩的矩形，另外一种就是创意无限的异型.青菜萝卜各有所爱：），不少人喜好矩形，而另外又有很多用户对异型情有独钟，这就看设计师自己的喜好了，两全的方式就是各设计一种，分成两个皮肤。第六步：花渡状态栏按钮设计按钮要根据上一步的状态栏背景来设计，如何让两者相互搭配焕然天成对设计师来说是一个很难的考验，按钮的三个状态（普通状态，鼠标滑过，鼠标点击）也要很好的考虑清楚，省力的方法就是三个状态使用同一张图片：）按钮的个数要设计师自己根据状态栏背景图片的大小来确定留下哪些，舍弃哪
23、些：a.务必保留的按钮：中英文按钮、全半角按钮，中英文标点符号按钮b.建议保留的按钮：软键盘按钮、简繁体按钮。c.其他按钮：设置按钮（花渡的很多皮肤舍弃了设置按钮，通过状态栏点击鼠标右键可以很方便调用出设置菜单来）、搜狗搜索按钮、搜狗登录按钮。d.全双拼按钮：这个按钮比较特殊，在拼音输入法里用来切换全拼和双拼，对于双拼用户没有这个按钮的话很不方便，不容易判断使全拼还是双拼状态。由于搜狗五笔输入法也可以使用搜狗拼音输入法的几万种皮肤，而在搜狗五笔输入法的状态栏上，这个按钮是要被屏蔽掉的。所以在设计全双拼切换按钮的时候，如果照顾双拼用户保留这个按钮，务必要考虑清楚当这款皮肤被搜狗五笔用户使用的时候
24、，你所放置的全双拼按钮是空（透明）的，如果按钮位置是空（透明）的，是否会影响状态栏的整体美观和平衡感。第七步：花渡皮肤零件导入皮肤编辑器车间搜狗公司提供的输入法皮肤编辑器就是组装车间，前几步设计完成的图片就是皮肤的各种零件，现在我们来看看有多少种零件需要组装：a.竖排背景图片：同窗口 1 张，分窗口 2 张b.横排背景图片：同窗口 1 张，分窗口 2 张c.状态栏背景图片：1 张d.状态栏按钮图片：根据按钮数量和状态不同，7 张（三个按钮，按钮状态合一）48 张（全按钮，按钮状态齐全）第八步：花渡调整组装零件导入之后是非常关键的一步“ 调整组装”，搜狗的皮肤编辑器提供了最大限度的调整参数，可以
25、通过可视化的方式进行设置。详细调整的方法不说了，简单谈几个注意的要点。a.平铺还是拉伸这两种变形方式是用户在输入文字的时候根据候选字数变化而变化，大致的选择原则如下：背景如果是可连续的图案，选择平铺方式。如果是渐变或单一色彩，选择平铺。特殊情况下是图案不可连续该怎么办，这时候就要多测试，看哪个效果在使用中好取哪个。2.输入焦点坐标设置默认打开编辑器时是 0，0 坐标，对于所有花渡的皮肤来说，如果用默认值的话，在输入文字的时候，输入区域距离首选字都有段距离。设置输入法焦点坐标的原则就是尽可能的让首选字靠近输入区域的文字焦点位置，同时又不要让皮肤遮盖输入焦点。3.分割线的取舍用来区分拼音串和候选字
26、符串的分割线，商业版花渡全部都舍弃了分割线的设计，分割线虽然有助于拼音和汉字的区分，但同时也会破坏皮肤的整体感，不愧是“分割线” ：）。没有必须留或必须舍的建议，完全看设计师的喜好。4.透明色的取舍早期搜狗输入法皮肤不支持 PNG，图片必须处理成 windows 系统图片格式 BMP。使用 BMP 图片设计皮肤必须要指定那种色彩为透明色。现在已经支持 PNG 图形格式，花渡系列皮肤全部采用 PNG，直接在图形处理软件中设置好透明区域，在编辑器中也就无需指定透明色了。5.字体大小和类型搜狗输入法皮肤编辑器默认是中文宋体 16 号字 英文字体 Arial，这个设置在 XP 系统和 Vista 系统
27、下使用都不会有问题，标准字体，很 ok。字号的问题在上面已经表述过了。这里讲讲字体类型。如果大家都是用标准的宋体字，岂不是太单调了，字体应该更加丰富多彩一些，设计师可以指定不同的中文字体和英文字体。推荐设计师使用下面的字体让输入法皮肤靓丽起来。 a.雅黑字体（ vista 字体专用）；b.浪漫雅园字体；c.华康少女字体；d.方正兰亭纤黑字体；e.其他任何漂亮的字体。 6.色彩搭配文字和背景在一起使用时，要保持文字的可识别程度和长时间使用的舒适度，对比过亮过暗的话，长时间使用都会导致眼疲劳。如何找到最佳色彩的搭配，一靠色彩的天赋，二靠积累，多看色彩类的设计作品，多浏览配色网站（比如 adobe
28、公司的 kuler 配色站）的示例，慢慢的，从中会找到色彩搭配的灵感：）第九步：导出皮肤文件通过皮肤编辑器，导出搜狗输入法的皮肤安装文件，分别设置不同字体（两种字体宋体和雅黑）字号（两种字号 16 和 18）这步方法简单，过程繁琐，设置不同字体字号时，很多细节参数需要进行微调以保证搭配的协调性。最后一一导出四款皮肤：a.宋体 16 号-xp 系统使用b.宋体 18 号- xp 系统使用c.雅黑 16 号- vista 系统使用d.雅黑 18 号- vista 系统使用花渡故事先写到这里，更多的花渡故事在下一篇里继续讲述花渡织造首席设计师 豁然开朗50 多款精美商业版花渡皮肤尽在花渡织造网站2009 年 8 月 9 日 23:30
