今作っているアプリのリソースを作っているところ。アプリのスクリーンショットを撮影して、広告はそのままだとアレだからモザイクかけたいなーと思っていろいろ調べてたら、いつのまにかプラグイン作っていました。

Sketch3でモザイクのかけかた

そもそもぐぐっても情報がでてこなかった。blurでごまかせないかな―とやってみたけど、今ひとつ使えるものではなかった。インターネットで調べてもやり方がでてこないから、自分でなんとかせんとなーと考えていると、Fireworksでのモザイクの書け方を思い出した。

Fireworksではレイヤーを縮小して拡大することでモザイクを実現していた。縮小するときに複数のピクセルが１つのピクセルになることを利用して実現していた。Sketch3でもできるんじゃないかと試したところ、できた。

ただ単純にScaleを変更するだけだと、元の解像度に戻るだけなので、途中でReduce Image Sizeすることで解像度が落ちた状態の画像にするところがポイント 5%って数字はテキトーなんでモザイクかけたい強度によって変える

Sketch3 Pluginにする

モザイクかけたい時に、温かみのある手作業でやってもよかったんだけど、そーいやプラグインってあるよなと思い出したので、プラグイン化しました。

公式のリファレンスがあまり充実してないっていうのと、cocoascriptの情報自体が少ないので、他のプラグインのソースを読むのがオススメです。

GithubのREADMEに書いたので、それを読んで下さい github.com

要望があったらissueにて受け付けます。