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

質問

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

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

回答No.2

torayoshi · ベストアンサー

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

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

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

お礼

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

補足

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

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

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

回答No.3

ORUKA1951

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

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

お礼

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

回答No.1

ORUKA1951

で、その画像は何に使うのですか??
それによって・・
　ウェブで使用するならSVG( http://ja.wikipedia.org/wiki/Scalable_Vector_Graphics )を使うとか・・

お礼

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

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