写真やイラストを切り絵にするサイトを作りました

Posted on by

写真やイラストを切り絵にするサイトを作りました。

切り絵オンデマンド

こんな感じのものができます。

浅草 雷門の切り絵

浅草 雷門の切り絵

 

持ってみると、ちゃんと切り絵になっていることがわかります。

浅草 雷門の切り絵(持ったところ)

浅草 雷門の切り絵(持ったところ)

 

レーザーカッターでカットしています。
元の写真はこちらです。

浅草 雷門

浅草 雷門

 

他にもこんな感じのものができます。

写真1

写真1

写真の切り絵1

写真の切り絵1

写真の切り絵1(持ったところ)

写真の切り絵1(持ったところ)

写真2

写真2

写真の切り絵2

写真の切り絵2

写真の切り絵2(持ったところ)

写真の切り絵2(持ったところ)

 

使い方

まず、写真やイラストなどの画像を切り絵の白黒画像に変換するページを開きます。

切り絵オンデマンド(http://kirie.xyz)

切り絵オンデマンド

切り絵オンデマンド

 

画像を選択してアップロードします。
スマホの写真をそのままアップロードしても構いません。

切り絵オンデマンド 浅草 雷門

切り絵オンデマンド 浅草 雷門

 

画像を選択してアップロードすると、このように候補が表示されます。

白黒画像への変換は、そんなに単純ではありません。
候補の中には、単に、

  • 色の濃い部分を黒
  • 色の薄い部分を白

として変換したもののほか、輪郭線を強調したものなどが含まれます。
建物の写真の場合、人の顔の写真の場合、イラストの場合など、
画像の種類によって適した変換方法が異なるので、複数候補を表示して選んでもらう形にしています。

「もっと見る」を押すと、パラメータを変更した候補をさらに追加で表示します。
「微調整」を押すと、変換パラメータを微調整した、近い画像が画面の下に追加されます。

良さそうなものが見つかったら、「選択」を押してください。

切り絵オンデマンド 浅草 雷門の画像変換結果

切り絵オンデマンド 浅草 雷門の画像変換結果

 

このように、少し大きめの画像で、最終結果が表示されます。

こちらの画像を印刷して、黒い紙に重ねて、カッターやハサミで白い部分を切り取れば、切り絵の完成です。

ですが、手作業で作るのは大変ですよね。
そこで、レーザカッターで切断したのが、冒頭の写真です。

レーザーカッターが自宅にない方のために、我が家のレーザーカッターで代わりに切り絵を作るサービスを細々と始めたので、ほしい方は販売サイトで注文してください。

特徴

写真やイラストを切り絵にするには、以下の作業が必要です。

  1. 画像をグレースケールに変換する
  2. 白と黒の2色の画像に変換する
  3. 離れた部分ができないように、黒い領域を全て線でつなぐ
  4. 「点」で表された画像を、カットする「線」の画像に変換する

白と黒の2色の画像に変換する際に、アルゴリズムの選択やパラメータの調整が必要になります。

最も簡単なのは、

  • 色の濃い部分を黒
  • 色の薄い部分を白

 

とする場合です。
この場合、「黒にする部分と白にする部分の境目の濃さ」のパラメータを調節する必要があります。

ですが、これだけだと元の画像の特徴が失われてしまうため、

  • 輪郭線を抽出する

とした方が良い場合があります。

さらに、輪郭線を抽出しただけだと、黒い部分の内側まで白くなってしまうので、

  • 抽出した輪郭線を、濃さで白黒分けした画像に重ねる

という方法も考えられます。

画像によって、このような変換アルゴリズムを選択して、パラメータを調節するのは大変なので、いっそのこと、候補をたくさん出してその中から選ぶようにしてしまおう、というのが、切り絵オンデマンドの方針です。

色々な画像で試してみてください!

実際に切り絵で作ったものの見た目を、画像をアップロードするだけで確認できます。
確認するだけなら注文の必要もないので、ぜひ色々な画像で試してみてください。

紹介動画

写真やイラストを切り絵にするサイトを作ってみた – ニコニコ動画

YouTube

Category: 切り絵 | Tags: