画像の加工：方眼紙のような画像の背景を透明にしたい

背景が白の方眼紙の画像を作ったのですが、背景部分を透明にしたいと考えています。
元の画像は、正確に10px毎に線が入っている画像を作るのが大変そうだったので、Javascriptでブラウザに描画してスクリーンショットから作りました。

使用している画像処理ソフトは、MacのPixelmator、Seashore、Windowsのペイントくらいです。
Pixelmatorには任意の色だけを変更する機能がありますが、透明色にはできませんでした。
高価な画像処理ソフトは使用していませんが、これらのツールにはこだわらないので、
他のソフトでも、何かよい方法をご存知ならおしえてください。

No.2 ベストアンサー 回答者： torayoshi 回答日時： 2014/01/24 19:21

背景を透過する、あるいは背景を透過した方眼紙を作る。

というのなら、レイヤーと透明情報を扱えるレタッチソフトが必要でしょう。
私はWindowsなのでMacのことはよく知らないんですが、GIMP2が使えそうです。

添付画像は左が質問者さんが添付した画像の背景を透過したもの。
右がGIMP2で作成した背景を透過した1枡10px×10pxの方眼紙。

「フィルタ」→下塗り→パターン→グリッド。

この回答への補足

その後、GIMP2.8.10を使って無事画像加工ができました。

やったこと
１）元の画像をGIMP2に読み込み
２）新しいレイヤーを作り、Filters>Render>Pattern>Gridで10pxのグリッドを元のグリッドに重なる様に描画
３）作ったグリッドを選択し、選択範囲を反転（升目を選択）
４）元画像のレイヤーを選択してカット

もっとスマートな方法があるのかもしれませんが
GIMPを使うきっかけをいただいたと思い、感謝しております。
ありがとうございました。

補足日時：2014/01/27 17:33

この回答へのお礼

具体的な操作方法まで、ありがとうございます。
GIMP2をインストールしてみましたが、なぜか動かないので環境かえてやってみます。

お礼日時：2014/01/25 01:51

No.3 回答者： ORUKA1951 回答日時： 2014/01/25 08:42

No.1です。

＞WEBのデザイン調整などで、背景の手前に貼って
　なら単純に
html{margin:0;padding:0;background-image:url(./images/scale.gif);}
　で添付のような画像を指定すればすむことじゃないかと
　上にかぶせるなら、★リンクなど触れないけど★
html:after{content:url(./images/background/scale.gif);}
　ででっかい画像をかぶせるなり・・

　ただ、そこまで細かい指定はしません。スマホやタブレットのように小さいくせに解像度が96dpiじゃないものから幅広ディスプレイまである昨今、リキッドで作りますし・・。自分で指定していて位置がわからないと言うことも、ありえないので・・

この回答へのお礼

アドバイスありがとうございます。
たしかにその通り、特別おおきなものを用意する必要はなかったですね(^^;

お礼日時：2014/01/27 17:38

No.1 回答者： ORUKA1951 回答日時： 2014/01/24 10:01

で、その画像は何に使うのですか??

それによって・・
　ウェブで使用するならSVG( http://ja.wikipedia.org/wiki/Scalable_Vector_Gra … )を使うとか・・

この回答へのお礼

早速の回答ありがとうございます。
WEBのデザイン調整などで、背景の手前に貼ってマージンなどを目測するのに使おうと考えています。

SVGの説明を見てみましたが...ちょっと難しそうですね

お礼日時：2014/01/25 01:52