みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

JPG画像をHPに載せたい(ふちをぼかして背景に入れるには?)

こんにちは。
JPG画像をHPにうまく載せられなくて困っています。
普通の四角い写真の場合はできるのですが
輪郭をぼかしたり陰を付けて色の付いた背景に乗せた場合
キャンバスの部分が白くなってしまいます。
GIF画像だったら背景の透明化をしているのですが
JPGでもそういった処理はできるのでしょうか?
イメージ的には↓のような写真を載せたいのです。
http://www.herbalnote.co.jp/index2.html

OSはWinXP
ソフトはHPビルダーとフォトショップエレメンツ
あとはイラストレータを持っています。
よろしくお願いします。

投稿日時 - 2003-10-29 19:06:05

QNo.692076

困ってます

質問者が選んだベストアンサー

参考になされているページの画像を、画像だけの表示で見ると、画像自体のふちに背景色をつけているようです。

まあつまり、JPGだと、こういった工夫をしないと、基本的には無理、ということですね。
スクリプトでの半透明化は、画像の全体に適用されるので、ふちだけというのは無理でしょう。たぶん。

方法としては、参考に挙げられたもののように、画像のふちをページの背景色にしておくか、
PNG(GIFよりは色数が多く使える)の透明処理を使うか、というところでしょうか。

投稿日時 - 2003-10-29 19:43:01

お礼

いままでいろいろなサイトで背景にきれいになじんだ写真を見て
どうやってやるんだろう、と不思議に思っていました。
こんなやり方があったんですね。
無理ということがわかっただけでもすっきりしましたが
これでうまく写真を載せられそうです。
丁寧にURLまで書いていただいてありがとうございました。

投稿日時 - 2003-10-29 20:07:18

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(5)

ANo.4

DPE

フォトショップもビルダーも経験がないので、具体的な操作方法までは回答できませんが、こう考えてはいかがでしょう。

キャンバスの色を予めHPの背景と同じ色にしておき、そこに写真を置いて、影やぼかし等の効果をかけます。
この状態でキャンバス全体をJPEG形式で書き出します。ぼかしの下や影の周りに見えるのはキャンバスの色で、そのキャンバスの色はHPの背景の色と同じなのですから、透過処理などなくても、白い部分が見えることはありません。
質問文にあったサイトの写真を「名前を付けて画像を保存」して見てみると、この表現方法のタネがよく分かります。
載せる写真よりも一回り大きなキャンバスを作り、HPの背景となじませた状態の1枚の絵として作ってしまうのがポイントです。

投稿日時 - 2003-10-29 19:39:44

お礼

皆さんの意見をお聞きしてみると
やはり背景のレイヤーを作った上に
画像を乗せるというのが一番いい方法のようですね。
実は込み入った背景を使う予定なのでレイヤーを作るのが大変そうなのですが
頑張ってチャレンジしてみようと思います。
わかりやすい説明ありがとうございました。

投稿日時 - 2003-10-29 20:04:20

ANo.3

JPGの場合透明色は使用出来ません。

私がやるとしたら、フォトショップのようなレイヤーが扱えるペイントソフトで先ずHPの背景と同じ色背景レイヤーを作ります。そして写真画像の輪郭ぼかしを行い、レイヤーの統合をしてJPGで保存してやれば、HPの背景となじんだ画像が出来ると思います。

ちなみに統合する前にフォトショップ形式で保存をしておけば、後でHPの背景を変えた場合にもう一度レイヤーの背景を入れ替えてまた同じ事をすれば、何回でも使い回しが出来ていいと思います。

投稿日時 - 2003-10-29 19:39:19

お礼

>JPGの場合透明色は使用出来ません
なるほど、いままでどうにかできないかと悩んできたのですが
できないとわかってすっきりしました。
おっしゃるとおり頻繁に写真を入れ替えて使いたかったので
頑張って背景のレイヤーを作ってみたいと思います。
どうもありがとうございました。

投稿日時 - 2003-10-29 20:00:51

ANo.2

HPビルダー付属のウェブアートデザイナーで 
影をつけてJPEGのまま保存すると角が白いですよね~

画像を選択して「透明色で塗りつぶし」で影と画像の重なりの隙間に(色は付かないですが)塗りつぶします。その画像をGIFで保存すると透明化できます。写真をGIFで保存しても問題ありません。

あるいは JAVAスクリプトで影を落として半透明の指定をすればよいと思うのですが、詳しくないのでおおしえできません
m(_ _)m

投稿日時 - 2003-10-29 19:29:49

お礼

角が白くなるってわかってもらえてうれしいです。
GIFのときはこういう風にすればいいのですね。
それにJAVAスクリプトでも出来るとは初耳でした。
いろいろ参考になりました。
どうもありがとうございました。

投稿日時 - 2003-10-29 19:57:30

ANo.1

HPビルダー付属のウェブアートデザイナーの場合

○影をつける
画像を選択後、[ツール]-[影効果]でできます。

○輪郭をぼかす
画像を選択後、[オブジェクト]-[フォトフレームの作成]でできます。

>JPGでもそういった処理はできるのでしょうか?

特段問題なくできるようですが。

とりあえずやって味噌

投稿日時 - 2003-10-29 19:20:26

お礼

影はできたのですが、輪郭をぼかすのはこうするのですね~
なるほど。
あとは背景とのマッチングだけです。頑張ります!
どうもありがとうございました。

投稿日時 - 2003-10-29 19:55:05

あなたにオススメの質問