JTrim 033 / 画像の中に別画像を入れる(HTMLでの合成) 簡単なアンケートです。ご協力ください。

Enjoy JTrim > JTrim Lab > 合成 >
関連項目を見る >>   次のページへ >>
ご質問は 画像加工質問掲示板/Help Forum へどうぞ!

ここではJTrimとHTML、そしてプリントスクリーン(画面キャプチャ)を使った画像の加工をやってみましょう。
画像の中に別の画像を入れてみようという試みです。画像は基本的に四角形ですから、どうしても変形に 加工すると余った部分(たとえば四隅)の処理に困ってしまいます。 レタッチ系のソフトで出来るかもしれませんが、ここではHTMLとの合わせ技を使ってみました。 なお、ここで作ったHTMLファイルを保存しておけば、いろんなケースで使うことができます。





<No.1>
左の画像(senna001.jpg)に、中央の画像(senna002.jpg)を円形切り抜きしたものを組み込んで、右のようにする方法です。


<No.2>
まずsenna002.jpgをJTrimで開き、背景を黒系にして円形切り抜きします。 この画像をGIF形式にして、ファイル名をsenna003.gifとします。


<No.3>
senna003.gifの四隅を透過し、ファイル名をsenna004.gifとします。


<No.4>
ここでsenna001.jpgに透過処理したsenna004.gifをコピーして合成貼り付けしてみましょう。 透過部分が解除されて、このようになってしまいます。これではいけませんね。


<No.5>
では、どうすればいいでしょう。そんなことは起こり得ないのですが、雲の手前にお月様があったとしましょう。 HTMLでは雲が背景(head部分で指定します。)お月様がコンテンツの画像(body部分で指定します。)ということに なります。
そうです。もうお分りでしょう。HTMLの背景にsenna001.jpgを指定し、表示する画像にsenna004.gifを指定します。 ソースはこのようになります。

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title></title>
<style type="text/css">
<!--
body {background-image: url(senna001.jpg);background-repeat:no-repeat;
background-position:50% 40;background-attachment:fixed;}
-->
</style>
</head>
<body>
<br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br>
<div align="center">
<img src="senna004.gif">
</div>
</body>
</html>


<No.6>
No.5のソースをメモ帳にコピー&ペースト(貼り付け)して、拡張子.htmlとして適当なフォルダに保存してください。 (ファイル名は何でもかまいません。senna.htmlとでもしましょうか。) 同じフォルダにsenna001.jpgとsenna004.gifも入れてください。
そしてsenna.htmlをダブルクリックで開いてください。IEが起動して、このように表示されましたね。 これをプリントスクリーンキーで取り込みします。(もちろん WinShotのような画面キャプチャソフトでもかまいません。)


<No.7>
キャプチャした画像をJTrimで開き、切り取った画像がこれです。
いかがでしたか? 画像加工とHTMLを組み合わせた楽しい遊びですね。(^^♪


◆このページは Enjoy JTrim 内の「JTrim Laboratory 〜 初心者向け実験室」の一つです。

お立ち寄り記念に簡単なアンケートへご参加ください。 こちらからどうぞ!



to Page top