转https://forum.suse.org.cn/viewtopic.php?f=16&t=731
Q：本教程涵盖的内容？
A：* Fcitx 皮肤结构说明
* 皮肤绘制
* 图标和图案定位
* 皮肤打包
* 批量生产的一些要点
Q：本教程不会讲但你需要知道的知识？
A：* 什么是 RGB 色彩？（红绿蓝三原色）
* RGB 取值范围 (0~255)
* 一些可有可无的 CSS 知识，比如什么是 Margin（外边距）？什么是 Padding（内边距）？
其它用的都会提到用到的部分，比如 inkscape 使用，比如九宫格模型。
Q：官方出品教学的闪光点？
A：细节。就是哪怕你是个二逼青年也能把你拐上道的细节。
Q：官方出品的皮肤的考虑？
A：* 可量产性。比如我给 openSUSE 12.3 做了一个潮到爆点的皮肤，但是 12.4 的时候源文件丢了或者没丢但根本改不了...
* 不操弄用户。（口气可能有些怪，你想象成薛大大就好）就是说选色、或图案上我们应该用大路货，不能用一些褒贬各半的实现。比如下面这种很 girlish 的水果色，你抠脚大汉默认用着就会显很娘。或者 Debian 7 一开机一个初音甩着大葱就粗来了，这都是不可以的。
![]()
* 要与主流桌面环境搭调。比如 Archlinux 配色是蓝色基调，你弄个屎黄屎黄的皮肤粘上去。所以决定了官方皮肤注定是非黑即白，辅助色基本都是蓝色（因为色彩上讲能和黑/白都配还能让大多数人接受的就是蓝色了）
* 在没有开启混成的机器上不可以太丑。比如你做了大圆角、全透明、大阴影，于是这些机器上就是一坨出来了。这是薛大大的观点。我并不赞同，你不开混成你活该啊对不对。
* 粒度。虽然我们使用的最终产品是 png 制式，但不代表你直接拿 png 交工即可。我们要求最高的粒度，即 inkscape svg 源文件，以下是两者在 250x250 的一个框下，5px 圆角在截取、放大后的粒度对比：
![]() GIMP 制作的 png 和 Inkscape 输出的 png 的粒度对比 fcitx-skin-howto1.png (2.77 KiB) 被浏览 959 次
用 GIMP 想要做出 svg 的质量不是不可以，但你的工程图至少要做 10 倍大。另 inkscape 实际比 gimp 简单多了（对 Fcitx 皮肤制作来说，我们不需要高级功能比如曲线当然你真的用了效果会很棒），就好比七巧板跟 photoshop 的区别，只是国人不太接受而已（openSUSE Artwork 团队的要求就是会用 inkscape）。
总之你做的皮肤想要进 core 而不是 community，想加入正规军而不当野路子，那么你必须满足以上要求。
Fcitx 皮肤结构说明：
Fcitx 采用系统 pango 渲染皮肤，皮肤采用九宫格模型。
![]() fcitx 九宫格模型 fcitx-skin-howto2.png (9.35 KiB) 被浏览 954 次
上面这个就是一个最基本的九宫格模型，四个角，四条边，一个身体。fcitx 所有的面板都是这个结构。
* 边距有四个方向。上下左右。每个方向都可以单独调整。
* 边距是从最外面的大黄框（实际使用时不可见）往里算的，也就是说边距始终是正的。
* 边距是「到字为止」，不是「到图为止」也就是说图中所画的蓝边是误导你的，如果你认为是从蓝边开始往里算边距，那么你永远也做不出好的主题，实际要看黑色线部分，左上整个一大块一直到黑色线都是左上角。所以实际上九宫格的九个格子都是矩形，只是你的视觉会认为是我用彩色划分的那样。那些黄色的部分用来干嘛呢？用来放阴影。
举个例子让你们看看视觉有多么误导人顺带说下大黄框是怎么出来的吧：
![]() 你眼中的九宫格和实际上的九宫格
大黄框实际上是高等于图像的最大高度，宽等于最大宽度的一个盒子。而你要通过上下左右四个边距把字放你想要的地方压，压好之后就确定了四个点连接成的小盒子即红色部分。剩下的边角也就确定了。
* 如果边距调整正确，只有最中间的红色部分和成对的两个边在实际使用中会被复制或拉伸（两种算法）。也就是说你制作主题可以有很漂亮的花边（但是花边主题只能照顾一种使用情况，要么横排要么竖排，为横排做的竖排就很丑，反之亦然），只要保证中间的红色部分和你用到的那两个边里面的东西不要太复杂就好。拉伸的像素偏低，如果你的图案是简单重复，那么建议选择复制算法，当然你要保证绝对对称，不要在黑色线的部分被切断。
以上是基本结构。
Fcitx 皮肤的基本元素：
可以去/usr/share/fcitx/skin/default
中查看。可分为以下几类（并标注了制作时间在总时间的占比）：
* 定位配置：fcitx_skin.conf （< 5%）
* 输入面板，即你打字时候的面板：input.png（20%）
* 系统托盘的右键菜单：menu.png （10%）
* 功能面板，即你调出输入法现在在屏幕上的那个东西：bar.png （10% ～ 25%）
* 虚拟键盘：keyboard.png （30%）
* 输入法图标：pinyin.png/wubi.png/blabla.... （< 5%）
* 功能图标，分两种：（5%）
** 一种是输入面板上的，有两个，就是那个前后箭头：prev/next.png
** 剩下的都是在功能面板上的，有：
logo，键盘布局（en/cn.png）两个，通用的开关（active/inavtive.png），繁简切换开关两个（chttrans_active.png 繁体，chttrans_inactive.png 简体），虚拟键盘开关两个（vk_active.png/vk_inactive.png），全角半角开关两个（fullwidth_active.png 全角，fullwidth_inactive.png 半角），中英标点两个（punc_active.png 中，punc_inactive.png 英），双拼联想开关两个（remind_active.png 开，remind_inactive.png 关）
以上是最基本的功能图标。其它语言输入法比如 mozc 会有自己的功能键，因此需要另行制作功能图标 |
