Ⅴ-３　画像を丸く切り抜く

１）切り出したい部分を選択します

Ｐｉｘｉａを立ち上げて、「ファイル」→「開く」→「sora.jpg」を開きます。
ツールバーの[領域]-円を選択し、画像上をドラッグして切り出したい部分を選択します。

２）選択範囲を反転します

「領域」→「領域の反転」で切り出す画像の背景を選択した状態になります。

３）画像の背景色を指定します

レイヤーパネルの背景色をクリックし、色の値を指定します。

Ｐｉｘｉａに於いては、ｇｉｆ画像はサポート外ですから、
画像の背景色をとトップページの背景色と同じにするわけです。

ここでもう一つ、
Ｐｉｘｉａでは色を０～１００％のＲＢＧ値とＨ（色相）Ｓ（彩度）Ｖ（明度）で色を指定しています。
トップページの背景色「#f0f8ff」を０～１００％のＲＢＧ値に変換する必要があります。
第２章３で紹介したフリーソフト【ColorDialog 003】を使うと便利です。
　「#f0f8ff」はＲ＝２４０　Ｂ＝２４８　Ｇ＝２５５です。１００％変換するには
Ｒ＝２４０÷２５５×１００＝９４　Ｂ＝２４８÷２５５×１００＝９７Ｇ＝２５５÷２５５×１００＝１００になります。
この値を入れると背景色が「#f0f8ff」になります。

あるいはＨＳＶに変換するソフト【ＰＣｉｃｋ】を使うと便利です。

４）画像の背景部分を消去します

「編集」→「消去」で現在選択している部分が消去され、パレットウィンドウで指定した「背景色」になります。

５）丸い部分だけを切り出します

選択範囲が丸い場合、長方形のようにトリミングすることは出来ません。
そこで長方形ツールで丸い部分をぴったり囲むように選択し直します。
決まれば「領域」→「トリミング」で選択範囲を切り出します。

６）画像サイズを確認して保存します

ここでは「sora.jpg」と言うファイルを上書き保存します。

６）トップページを編集します

トップページを表示すると、丸く切り出した画像が横に引き伸ばされた状態で表示されます。
そこで「表示」→「ソース」からメモ帳を開き、
<img>のwidth、heightで画像の新しいサイズを指定します。
これできちんと表示されます。

<html>
<head>
<title>色探しの旅</title>
<style type="text/css"></style>
</head>

<body>
<div align="center">
<h1>色探しの旅『Sky&Water』</h1>
<img src="sora.jpg"width="318" height="271" alt="空と水">
<p>日本の四季には色が満ちています。 <span class="sora">空</span>そして<span class="sora">水</span>の色<span class="iro">『色探しの旅』</span>に出かけませんか</p>

<div class="menu">
<a href="contents-h.htm">春の色</a>*
<a href="contents-n.htm">夏の色</a>*
<a href="contents-a.htm">秋の色</a>*
<a href="contents-f.htm">冬の色</a>
</div>
<div class="copy">copyright(c)sora<br>
E-MAIL：<a href="mailto:sora@free.japandesign.ne.jp"class="mail">sora@free.japandesign.ne.jp</a></div>
</div>
</body>
</html>

Ⅴ-３ 画像を丸く切り抜く