Sketch3で画像をぼかしてみる(均一にぼかす編)

Sketchで画像ぼかしてみよう、ってことで調べてやってみました。

均一にぼかす方法と、グラデーション的にぼかす方法を２回に分けて紹介します。

この記事では均一にぼかす方法を紹介します。

均一にぼかす

手順

基本は以下の3ステップです。

1. 画像をSketch3で開く
2. 図形を挿入する
3. 挿入した図形のぼかしを有効にし「Background Blur」を選択する。

以下、手順を順に説明します。

まず画像をSketch3で開きます。

*1

次に、ぼかしをかけていきます。

ぼかしをかけるための四角形を挿入します。四角形を挿入するためのショートカットr を使うと便利です。

この四角形の範囲がぼかしの範囲となります。

最後のステップです。四角形を選択した上で、横のメニューからぼかしを有効にし「Background Blur」を選びます。

できました。四角形の横幅を画像の幅いっぱいに、高さを画像の半分ほどの大きさにしています。

ついでにレイヤーの名前を変更し、Rectangleという名前からBackground Blurに変えています。

さて、均一にぼかしをかけましたが、グラデーション的にぼかしをかけたいこともあります。

そちらの方法はまた別のときに書きます。思ったより書いていて疲れました。

追記 2017/05/15

グラデーションの方も軽くまとめました

taiki-t.hatenablog.com

*1:写真はRubyKaigi2015で撮ってきたものです。