ホームページビルダー・グレート初心者講座

グレート初心者講座トップへグレート初心者講座 小技集へグレート初心者講座≠ヨグレート初心者講座 質問掲示板へ

HTML版 過去ログ
| 掲示板を見る | ホームに戻る | ワード検索 | 過去ログ |   

背景の透明化の方法は?

日時: 2006/02/20 19:06
識別: IDK/j9r5AVtFw
名前: むら

初めまして
現在初めてHPを作成しています。

背景やアイコンなどは色々な素材屋さんからお借りして使用しているのですが、ほとんどの場合、「白背景用」「黒背景用」と設定されていて、アイコン等のうしろ(キャンバス、でいいのでしょうか)が透化されておらず、白もしくは黒で色がついています。
これをウエブアートデザイナーまたはホームページビルダー内の画像の編集、もしくは別の方法で透明化する方法はないでしょうか?
素材にはほとんどの場合、キャンバス部分だけでなく素材そのものにも白色や黒色が含まれており、たとえば画像の編集でgif画像の一色(希望としてはキャンバスの白)を透明化すると、素材に含まれる白色も透明化されてしまい、素材そのものが原型をとどめません。ウエブアートデザイナーの透明色で塗り潰しをしても、ほぼ同じ結果です。

素材はそのままに背景だけを透明化し、アイコンやイラストなどをページの飾りとして挿入したいです。(ホームページビルダーで素材として使用可能になっているアイコン等と同じ状態で保存したいのです。)
もう1点、素材屋さんからお借りする(たとえば横長の)背景は、これもまた背景が白や黒の場合が多く、左端の「絵」が入っている部分の色や画像はそのままに、単色で無地の背景部分を透明に加工したいのです。
素材屋さんは色の変更は許可してくださっています。

あと、ホームページビルダーの画像の編集でgif画像の一色(背景部分)を透明化すると、「画像が変更されたので上書き保存しますか?」というようなメッセージが表示されます。
画像の編集は、ページへの挿入前にしかできないことですよね?
最初から保存していた加工前のオリジナルの画像は、それはそれとして残しておきたいので、上書きされてしまっては困るのですが、上書きしないと透明化した画像が保存されないのです。
これもまたなにか良い方法はないでしょうか。

つながりのある質問かと思い、ひとつにまとめてしまいました。
もし分けるべきであったのなら申し訳ありません。
長々と書いてしまい読みづらいかとは思いますが、ぜひご回答いただければと思います。
よろしくお願いいたしますm(__)m

Re: 背景の透明化の方法は? ( No.1 )
日時: 2006/02/21 00:42
名前: sumi

>素材はそのままに背景だけを透明化し

>素材屋さんは色の変更は許可してくださっています


とのことですが、「色の変更」と、「背景の透明化」は違うのでは?
そのへんも素材屋さんはOKとおっしゃっているならいいですけど、「色の変更」以外の加工はNGという素材屋さんもいらっしゃいますので、一応確認させてください。


>素材屋さんからお借りする(たとえば横長の)背景は、これもまた背景が白や黒の場合が多く、左端の「絵」が入っている部分の色や画像はそのままに、単色で無地の背景部分を透明に加工したいのです

その背景素材の白や黒のところを、使いたい色で塗りつぶすのではだめですか?



>最初から保存していた加工前のオリジナルの画像は、それはそれとして残しておきたいので、上書きされてしまっては困るのですが、上書きしないと透明化した画像が保存されないのです。
これもまたなにか良い方法はないでしょうか。

先にその残しておきたい素材を(エクスプローラ上などで)コピーして、そのコピーしたものを加工用にお使いになればよいのでは。
Re: 背景の透明化の方法は? ( No.2 )
日時: 2006/02/21 10:03
名前: むら

さっそくのお返事ありがとうございました。

>「色の変更」以外の加工はNGという素材屋さんもいらっしゃいますので、一応確認させてください。
HPを作るにあたって複数の素材屋さんから素材をお借りしているのですが、加工に関しては何をしてもOKに近い素材屋さんや、色にはこだわりがあるので色調変更はいっさい不可という素材屋さんもありました。
もちろん今回の透明化に関しても、加工を不可とされている素材屋さんの素材に関しては、規約を厳守するつもりでいます。

>背景素材の白や黒のところを、使いたい色で塗りつぶすのではだめですか?
もちろんそれでも構わないです!
要は、白い背景が私がほしい色ではないので、1度透明化して、希望の色に変更したいということなので。アイコン等に関しても同様です。
実際にウエブアートデザイナーで、背景の白色部分を別の色で塗り潰ししてみたのですが、その場合も左端の「絵」の部分がぼやけるとか部分的に一緒に塗り潰されるなどで壊れてしまいました。
「羽」とか「雲」みたいな、輪郭がはっきりしていない素材ではやはり無理なのでしょうか。
「蝶」や「食べ物(たとえばりんごなど)」など、輪郭がはっきりしたものに関しては透明化でも他の色での塗り潰しでもうまくいきました。

>先にその残しておきたい素材を(エクスプローラ上などで)コピーして、そのコピーしたものを加工用にお使いになればよいのでは。
そ、そうですね!
ありがとうございます。



Re: 背景の透明化の方法は? ( No.3 )
日時: 2006/02/21 18:49
名前: Newのり太

ぼかしのかかった画像はむずかしいでしょうねぇ。
根気よく消しゴム&ブラシで修正していくしかないでしょう。

参考FAQ:「ウェブアート デザイナー」で、画像の回りに付いた不要な点(ごみ)を取る方法を教えてください
https://www-06.ibm.com/jp/domino01/swhc/esupport.nsf/all/hpb0353
Re: 背景の透明化の方法は? ( No.4 )
日時: 2006/02/21 18:59
名前: sumi

以下、GIF保存を前提にしています。(素材屋さんの許可の件、了解しました。)


>「羽」とか「雲」みたいな、輪郭がはっきりしていない素材ではやはり無理なのでしょうか
>輪郭がはっきりしたものに関しては透明化でも他の色での塗り潰しでもうまくいきました

おっしゃる通り、背景を透明にしたい/塗りつぶしたい素材の『絵の部分』と『背景の部分』とが、
ドット絵のようにはっきりと分かれているため、透明化も塗りつぶしもやりやすいです。
(GIFの256色以内なら特にやりやすいかと)

(もっとスマートな方法もあるかと思いますが)
輪郭がぼんやりして見えるものでしたら、その素材をウェブアートデザイナーのキャンバスに乗せた状態で、
キャンバスの色自体をその「使いたい色」にしてみてください(色のとり方は、カラーピッカーなどを併用する方法もあります/カラーピッカーはフリーソフトでも色々あります)。
その状態で、保存のダイアログで透明化したい色を選択して、「背景色(G)」の欄で「キャンバスの色」を選択して保存します。
(透明化したい色を選ぶ際、いらないところまで透過されてしまうようでしたら、透過したい場所だけあらかじめ、まったく別の色で塗っておきます。
そして、その色を選択します)
これで大体、輪郭が使いたい背景色になじむように透過されるかと思います(この後はそのまま使っても、もう一度塗りつぶしをし直しても、多分それなりなじむかと思います/元の素材によって多少差があるとは思いますが)。
このときに、「パレット」の欄で、色数を少なくしたり(減色)、その減色でも「ディザあり」か「ディザなし」かで、『絵の部分』の輪郭の出方が変わってくると思いますので、
そのへんは元の素材画像に応じて色々試してみてください(慣れるまで面倒かもしれませんが)。

元々の素材画像がJPGなどでグラデーションや中間色が多く使われていれば、
この減色作業で「ディザなし」にすると不自然なことになる場合もありますので、
具合を見て加減してください。



>実際にウエブアートデザイナーで、背景の白色部分を別の色で塗り潰ししてみたのですが、
>その場合も左端の「絵」の部分がぼやけるとか部分的に一緒に塗り潰されるなどで壊れてしまいました

色で塗りつぶす/透明色で塗りつぶすにかかわらず、「許容範囲」が0〜100までありますので、
この数値を上げ下げして、不要なところまで塗りつぶされないように融通してみてください。
または、「塗りつぶし」を使わず、「ペン」や「ブラシ」・「エアブラシ」で少しずつ塗っていきます。
画面を拡大表示にするとやりやすいかもしれません。


#加工の許可についてしつこくお聞きしてごめんなさい。
#素材屋さんも色々な考えの方がいらっしゃいますので、念のためお聞きした次第です。<(_ _)>
Re: 背景の透明化の方法は? ( No.5 )
日時: 2006/02/21 21:54
名前: むら

sumi様
教えていただいたこと、さっそくためしています

>〜保存のダイアログで透明化したい色を選択して、「背景色(G)」の欄で「キャンバスの色」を選択して保存
これは、Web用保存ウィザードでの保存中のことですよね。
ここで透明化の処理をすると、パーソナルフォルダに保存する素材は透明化されたものになりますが、キャンバスに残っている素材は白色(黒色)背景のままです。
「キャンバスの保存」をする際には透明化されていない素材を保存することになってしまうので、透明化された素材に対してのペンやブラシでのこまかな処理ができません
許容範囲もいろいろためしてみたのですが、やはりある程度は素材が壊れてしまう部分があり、透明化+諸々の加工がしたいです。

使いたい画像のひとつには(これは黒背景で左端の部分が羽の絵なのですが)、素材屋さんが素材を作る時点で、羽の絵の部分にも透明度があるみたいで、上記の方法で透明化をしても、羽の絵の部分で透けて見えている黒色までは消すことができませんでした。
透明化の前に別の色に置き換えておくこともさすがに作業が細かすぎるので、透明化や塗り潰しをあきらめて、最初からこまかく作業したほうがよさそうな気がします。

>#加工の許可についてしつこくお聞きしてごめんなさい。
>#素材屋さんも色々な考えの方がいらっしゃいますので、念のためお聞きした次第です。<(_ _)>
いえいえ。規約を読んでいると、加工に厳しい方は、本当に自分の作品を大事に大事にしているんだなあと思います。
私の拙い加工で素材が台無しにならないようにしなければ!と。


Newのり太様
参考URLありがとうございました。
輪郭のぼやけた素材や、素材屋さんがいろいろ工夫されている部分などこまかなところがあり、教えていただいたことを実践しつつも透明化や塗り潰しをしてしまうと、やはり完璧な元の状態は望むべくもありません。
観念して消しゴムやブラシ、ペンなどを積極的に使用していこうと思います。
ぜひ、参考にさせていただこうと思います。




Re: 背景の透明化の方法は? ( No.6 )
日時: 2006/02/21 23:47
名前: sumi

(#解決になっていますが)


>>〜保存のダイアログで透明化したい色を選択して、「背景色(G)」の欄で「キャンバスの色」を選択して保存

>これは、Web用保存ウィザードでの保存中のことですよね。
>ここで透明化の処理をすると、パーソナルフォルダに保存する素材は透明化されたものになりますが、キャンバスに残っている素材は白色(黒色)背景のままです。
>「キャンバスの保存」をする際には透明化されていない素材を保存することになってしまうので、透明化された素材に対してのペンやブラシでのこまかな処理ができません


ダイアログ→ウィザードの用語錯誤失礼しました。

ええと、パーソナルフォルダでもほかの任意のフォルダでも、その透明化処理をしたGIFファイルを呼び出して、再加工すればよいのではないでしょうか?
ご質問自体をこういった意味にとって提案させていただいていたのですが、
もし違っていましたなら申し訳ありません。

「キャンバスに残っている素材(何も変わっていない)」を再加工するのではなくて、
「透明化などの加工をして一旦保存した画像」を、更に加工する、という意味で、>>1>>4のレスを付けさせていただきました。
Re: 背景の透明化の方法は? ( No.7 )
日時: 2006/02/22 10:23
名前: むら

すみません!
私もご回答いただいた文章の勘違いがあったみたいです

再度のアドバイスありがとうございました。
これからもいろいろ試してみます

ホームページビルダー・グレート初心者講座 Copyright © 2002-2005 aimix All Rights Reserved