読者です 読者をやめる 読者になる 読者になる

簡単にモザイクがかけられるSketch3 Pluginを作りました

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

github.com

Sketch3でモザイクのかけかた

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

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

  • モザイクをかけたいレイヤーを選択
  • Scaleで5%に縮小
  • Layer > Image > Reduce Image Size
  • Scaleで2000%に拡大

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

Sketch3 Pluginにする

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

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

インストールと使い方

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

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