idea如何自制插件_Lice IntelliJ插件图标制作过程

这是只属于没有Photoshop的人的悲哀。

首先先大吼一声——劳资终于做出了高清无码的Lice图标！

直接进入正题

其实我还是想说一下事情的发展过程的——

我想照着IntelliJ IDEA的图标风格做一个Lice插件的文件图标，于是就先各种找图标源。

本来可以去翻IntelliJ Community源码，后来直接在IntelliJ安装目录找到了这个文件。在:

安装目录/lib/icons.jar

里面，打开它，寻找fileTypes目录，里面有几乎所有文件格式对应的图标。JB为每种文件提供了四个图标文件——16 x 16 png

16 x 16 svg

32 x 32 png

32 x 32 svg

其中，我个人认为有用的，只有第零个。因为我运行插件之后，发现IntelliJ不会自动缩放文件图标(一开始我整了个长宽都是几百像素的图片，吓尿了，效果你们可以自己看，我就懒得复现再截图了)

所以现在可以进入正题了

为了保证清晰度，我找到了CSS文件对应的图标：

然后将它拖到一个在线SVG编辑器里面，开始魔改。中途花费了两个小时左右(我简直想死的心都有了，终于体会到SuperSodaSea做像素画的辛苦了)， 然后撸出了一个能看的svg图标。这个图标放在插件仓库里面，由于目前插件还不能见人，感兴趣的就自己去翻我commit记录找，不是特别感兴趣的就先别忙看吧。

我将它转成PNG之后发现，尼玛这就是AV画质嘛。。啥都看不清楚啊！

我当时的内心就是崩溃的，做了这么久的SVG(为什么花了那么久？因为调整透明度啊 颜色啊 字体啊 文字位置啊 改完了还得导出SVG，编辑一下XML，来手动控制一下那些元素的位置)，居然没·有·用！

不要气馁，我们换个方法搞定它——做个PNG吧。于是我开始手动编辑PNG，过程极其痛苦。因为找不到可以进行像素级编辑的编辑器(真是太痛苦了)，唯一一个可以进行像素级编辑的Windows自带的画图工具不支持透明度。

于是我回到了当年撸图的流水线——画图撸原型，然后光影魔术手进行透明度调整。然后整了半天，终于整出了这个效果：

我满心欢喜地打开IntelliJ IDEA插件工程，把文件拷过去，然后我看到了这一幕：

我突然发现，原版图标每个像素都是有一定透明度的，而我只是粗暴地将空白部分做成了透明的，看对比：

你永远不懂我伤悲，像白天不懂夜的黑

然后我实在没办法了。

怎么办呢？

我苦苦思寻，渐渐地进入了回忆之中，脑中浮现出一个画面——当年我还是个小小少年，刚开始接触Kotlin，拿着Swing的图形API把玩。

！！！！！！！！！！

我可以使用Kotlin代码操作png图片的每一个像素，反正都是RGB值，这多简单啊！

然后我就撸了个Kotlin程序，想起了当年写位运算程序的辛酸日子：

fun main(args: Array) {

val origin = ImageIO.read(File("lice.png"))

(0..origin.width - 1).forEach { x ->

(0..origin.height - 1).forEach { y ->

val o = origin.getRGB(x, y)

origin.setRGB(x, y, o + (0x22 shl 24))

}

}

ImageIO.write(origin, "PNG", File("lice-edited.png"))

}

希望它能带来改变。

然后编辑之后导出了一张几乎是透明的图片。。。。

这就很尴尬了，这也不是我想要的啊，我只是想要一张高仿的png图片啊！

我此时智商上线，灵光再一次闪现！

我发现这样不行，无论怎样硬编码RBGA的A值，都是不靠谱的。

既然是高仿，那就应该拿出高仿的样子！

我拿出了IntelliJ自带的CSS图片的png文件，直接将它的RGBA值抄过去。然后发现原版图标写了CSS字样的部分，每个像素的透明度都不一样。

于是我就只能“只抄没字样的部分，字样直接采用彩色背景的透明度”。你永远不懂我伤悲，像白天不懂夜的黑

最后版本：

fun main(args: Array) {

val origin = ImageIO.read(File("lice.png"))

val css = ImageIO.read(File("css.png"))

val alphaPosition = 0xFF shl 24

val bottomAlpha = css.getRGB(css.width - 1, css.height - 1) and alphaPosition

(0..origin.width - 1).forEach { x ->

(0..origin.height - 1).forEach { y ->

val o = origin.getRGB(x, y)

origin.setRGB(x, y,

if (y <= 9 || x < 1) o + (css.getRGB(x, y) and alphaPosition)

else o + bottomAlpha

)

}

}

ImageIO.write(origin, "PNG", File("lice-edited.png"))

}

导出之后感觉效果还不错：

累死我了 QwQ

明天还要上课背单词….睡觉睡觉。

(发之前画十字，求不要吞图片(给湛湛 dram和果冻发了预览邀请(跪求知乎不要吞我图片(他们收到邀请了(知乎食我大雕(垃圾(根据我对知乎编辑器行为的观察(知乎编辑器题图应该是只支持png格式的解码(因为，我上传了jpg编码的以png为扩展名的图片和jpg图片，都GG了，上传直接失败(只有QQ截图直接保存为PNG的图片是可以上传的(辣鸡知乎)))))))))))