Home » QRコード » ◉ビットマップ（ラスター）のQRコード画像をベクター化する方法まとめ。

◉ビットマップ（ラスター）のQRコード画像をベクター化する方法まとめ。

2011年4月25日月曜日

Illustrator Photoshop QRコード


以前、知人からビットマップのQRコード画像をベクター形式にする方法は…と聞かれたことがある。今でもニーズがあるか分からないが、私がこれまでに、QRコード画像のベクター化に利用した方法をまとめてみた。

QRコード画像をポスターや幟旗、看板などで大きくして使いたい場合、普通の小さなQRコード画像（縦横50px〜100px程度の）をビットマップのまま拡大すると、画質が荒れてしまうのではと心配する向きがある。でも、QRコードは縦横のラインで構成されているので、かなり拡大しても、劣化は少なく、携帯の読み取りも問題なく使えてしまう。しかし、印刷にデータをまわす際、拡大したビットマップファイルが重すぎてトラブルの種になってしまうケースがあるのもまた事実。そこでベクターデータとして保存しておけば…、ということになる。ベクターデータならどんなに拡大しても画質の劣化は皆無だし、かつ軽くてすむ。さらに他のデザインにも応用することができる。

まず、QRコードを作成する。
  • webで無料のQRコード作成サービスも数多くある。キーワード「QRコード作成」で検索すれば，たくさんヒットする。ほとんどの場合、文字を直接、もしくはコピー&ペーストで入力して、作成ボタンを押すだけで簡単に作成できる。もちろん、専用ソフトでQRコードを作成してもかまわない。
  • ちなみに私が作ったQRコード作成ページのものは、ベクター化に向いていない。
  • なお、QRコード画像は白黒2階調を想定している。

Photoshopでベクターデータの保存
  • でき上がったQRコードの元画像をPhotoshopで開いて、ベクター化する前に画質調整。QRコードを作成する環境によっては、グレーの薄いブロックノイズが載っている場合があるのでそれを飛ばしてきれいな白黒にしておく。[イメージ]→[色調補正]→[明るさ・コントラスト]で、明るさ、コントラストを+20程度に。
  • [選択範囲]→[色域指定]→「色域指定ダイアログ」の[指定色域]から[シャドウ]を選ぶ。黒い部分が選択された状態に。
  • そのまま、パスのパレットから[パス]→[作業用パスを作成…]。「色域指定ダイアログ」が開くので許容値を0.5にして[OK]をクリック。
  • [レイヤー]で画像を非表示にして、パスがきれいにできているか確認。そのままpsdで保存すれば、ベクター化されたデータがパスとして内部に残る。カスタムシェイプの作り方とほぼ同じ要領。
  • 拡大して利用するときの一例：キャンバスサイズを縦横1000pxに拡大（元画像のコード部分は縦横50px）。パスのパレット[パス]からパス選択ツールで全体を選択、[編集]→[パスを変形]→[拡大・縮小]から1700%に。パスのパレット[パス]に戻り、パスを選択したまま、下側の[パスを選択範囲として読み込む]をクリック、選択範囲が表示されたところで，レイヤーに戻り、[alt]+[delete]（Macは、[option]+[delete]）で着色。

Photoshopから、Illustratorにペーストしてベクターデータをaiで保存



Illustratorのライブトレース（CS2以降）を使ってベクター化
  • 新規アートボードにQRコードの元画像をドロップ。
  • 画像を選択したまま[ライブトレース]ボタンをクリック。
  • プリセットの右側の[トレースオプションダイアログ]をクリックして開く。
  • [プレビュー]にチェックを入れる（設定変更後の状態をプレビューに反映させて確認するため）。
  • 「再サンプル」の値を最大（600px）にする。
  • [トレース]ボタンをクリックして、[トレースオプションダイアログ]を閉じる。
  • [拡張]ボタンをクリック。
  • aiやepsで保存する。


◎以下の方法は、事前に元画像を拡大して保存しておく必要がある。
白い余白部分を除いたQRコード部分で縦横250 px程度に。画像を加工する専用ソフトを特に入れていない場合は、次のように。

（Windowsの場合）
  • QRコードの元画像（QRコード部分で縦横が50px程度の場合）をWindows標準ソフトの「ペイント」で開く。
  • [変形]→[サイズ変更/傾斜]で、水平方向500%、垂直方向500%に拡大（250px程度に。あまり大きいとFlashの場合は、でき上がるベクターデータが重くなりすぎるので）し、名前を付けてbmpやjpeg、gifで保存。

（Macの場合）
  • QRコードの元画像（QRコード部分で縦横が50px程度の場合）をMac標準ソフトの「プレビュー」で開く。
  • [拡大]ボタンを4、5回クリックすると、画面表示されているQRコード部分が縦横が約280px程度になるので、その画面をキャプチャーする。
  • [control]+[shift]+[command（林檎マーク）]+4で画面を矩形選択キャプチャー（キャプチャーはできる限りQRコード部分のみに）。
  • キャプチャーはクリップボードに入っているので、「プレビュー」の[ファイル]→[クリップボードから新規作成]を選んで、表示された画像をjpegやgifで保存しておく。


Flashでベクター化（ただしでき上がったファイルはやや重い）
  • 新規Flashドキュメントを開いて、QRコードの元画像をドロップ。
  • [修正]→[ビットマップ]→[ビットマップのトレース…]。ビットマップのトレースダイアログが開くので、色数：「2」、ノイズの許容量：「1」、トレースの精度：「最大」、ポイントの数：「多い」に設定、[OK]ボタンをクリック。
  • [書き出し]→[イメージの書き出し]で、aiかepsで保存。


無料ソフト Inkscapeでベクター化（Inkscapeについて詳しくはこちらから）
  • inkscapeを起動し、Flashのときと同様拡大しておいた画像をドロップ。画像を選択した状態で、[パス]→[ビットマップをトレース…]でビットマップをトレースダイアログを開く。
  • [モード]タグから「明るさの境界」をチェック、しきい値は、0.450程度。[オプション]タブから「角を平滑化」をチェック、しきい値を0.00に。同じく「パスを最適化」をチェック、許容値を0.00に。
  • [OK]ボタンをクリック。元のビットマップの画像の上にベクター画像ができ上がる。
  • svgやepsなどで保存。


無料ソフト CR8tracer（Windows用）、Cocoapotrace（Mac用）でベクター化
両者とも、トレースソフト「potrace」のGUIフロントエンド。

●CR8tracer
オフィシャルの説明では、Windows 98、2000、XP 、Windows 7となっている。私はVistaに入れて、正常に動いているが、他にインストールした場合は動作が違うかもしれない。また、やや古いソフトなので、今時のソフトとは少々勝手が違う。注意点は、事前に拡大（250%程度）しておくQRコード画像をbmpで保存しておくこと。それ以外は読み込めない。
  • 起動する何もないグレーの画面が表示されるだけ。
  • [File]→[Open]でQRコード画像を開く。
  • [Output Options]、[Tracing Options]などがあるがデフォルトのままで問題ない。
  • プレビューなども表示されず、なんともそっけないソフトだが、そののまま[File]→[Save as]で保存すれば、ベクターデータで保存される。保存はsvgで。epsでも保存できるが、Illustratorなどに持っていくと不具合があって開けないことがある。

CR8tracer・CR8 Software Solutions：http://www.cr8.netfirms.com/tracer.html

●Cocoapotrace
  • 起動画面で、しきい値などの設定がいろいろあるが、QRコードの変換の場合、起動したときのデフォルトのままで、きれいに変換される。
  • 起動した画面の左側「ビットマップ」に、縦横200px〜300px位に拡大しておいたQRコード画像をドロップするだけで、右側の「ベクター化」にベクター画像のプレビューが表示される。変換スピードはほぼ一瞬。
  • 保存はeps。

Cocoapotrace：

作者さんがファイルを置いていたwebスペースがサービス終了して、臨時（多分）の配布ページにバージョン0.3.6を置かれている。残念ながら、このバージョンはMac OS10.4、10.5では動かない。10.6用らしいが、私のMac book OS10.6.7では動かなかった。バージョン0.3.5ならMac OS10.4.11、10.5.8、10.6.7のいずれの環境でも動いた。

By 時刻:
ラベル: , ,