Tips04．透過GIF/透過PNG形式で保存して角の丸い画像を作る
Web上で角の丸いバナーやアイコンなどを見かけることがあります。
Pixiaでも透過GIF/透過PNGで保存することでこのような画像を作ることができます。

★元画像の用意と準備★ まずはあらかじめ元になる画像を用意しておいてください。 今回はこの画像を使用します。 もしレイヤを複数使用している画像であればいったん『画像−レイヤの結合』でレイヤを結合しておいてください。 その際、必ず「透明色の結合」で「不透明にする」を選択し、透明な部分が残っていない状態で保存してください。 あと、必ず 『表示−補助パレット』の『ペイント』設定内の『領域外をマスク』にチェックを入れておいてください。

★円領域を活用してケシゴムをかける★ 今回は画像の角の部分を丸くしたいので、『領域−円』を活用したいと思います。 まず、『領域−円』を選択します。 ※領域の「円」ボタンは「フリーハンド」ボタンと「塗りつぶし」ボタンの間にある 「領域」ボタンをクリックするとずらっと出てくるボタンがありますよね。 その中の左から３つ目のボタンです。 ではまず、左上の角からドラッグして、円領域をお好みの大きさになるまで大きくします。 なお、Shiftキーを押しながらドラッグすると正円になるので便利です。 また、画面下部に選択部分の情報も出ますので参考に。 このように選択しました。 左上の「0,0」座標から「37,37」座標にかけて選択し、そのサイズ（縦×横）は「38×38」、その中心座標は「18,18」座標となっています。 ※座標表示はそれぞれ左上を起点としてX方向（横方向）への距離,Y方向（下方向）への距離を示しています。 この状態でメニューバーから『領域−領域の反転』を選択します。 ちょっとわかりにくいですが、先ほどまでは円の中が選択されていたんですがこれで逆に円の外が選択されている状態になりました。 フリーハンドで、ケシゴムを選択します。t値、d値ともに255です。 ペンのサイズは角の部分よりあまり大きくならない程度のサイズのものにしておいてください。 この状態で、左上の角の部分をフリーハンドでケシゴムをかけていきます。あんまり大きく動かして関係ないところまで消さないようにご注意を。 するとこのようになりました。 左上の白くなった部分が実際は「透明」になっています。 同様にして、残りの角も消していきます。 次は左下いってみましょうか。 『領域−円」を再び選択し、今度は左下からの角からドラッグして円領域を選択します。 この時、さっきの円のサイズが「38×38」だったので、今度もそのサイズになるように、 Shiftキーを押しながら「38×38」サイズの正円になるように選択します。 あとは先ほどと同様。 『領域−領域の反転』で円の外側が選択された状態にして、 フリーハンドのケシゴムで左下の角を消しましょう。 あとは右上、右下も同じ要領で角を消しちゃってください。 はい、こんな感じになりました。 さてこの四隅にケシゴムをかけた画像、JPGとかで保存してしまうと四隅が透明にはなりません。 ↑背景色を変えても、角が白いままでしょ？ 透明になっていないからですね。

★GIFで透過指定して保存する★ ではまず透過GIFで保存してみることにしましょう。 『ファイル−名前を付けて保存』を選択し、「ファイルの種類」で『GIF[*.gif]』を選択します。 ファイル名には任意の名前を入力してください。 そして「保存」をクリックします。 このようなメッセージが出たら構わず「OK」をクリックしてください。 そしてここ重要！ 必ず「透過」にチェックを入れてから「OK」をクリックしてください。 はい、これで透過GIF画像の完成です。 背景色を変えてみれば四隅が透明になっているのがわかりますね。 うーん、でもやっぱりGIFの256色という制約のため、ちょっと画像が減色されて汚くなっちゃいましたかね。

★PNGで透過指定して保存する★ では、今度は透過PNGで保存してみることにしましょう。 四隅にケシゴムをかけるところまで同じように処理したものを、 『ファイル−名前を付けて保存』を選択し、「ファイルの種類」で今度は『PNG[*.png]』を選択します。 ファイル名には任意の名前を入力してください。 そして「保存」をクリックします。 GIFのときと同様、このようなメッセージが出たら構わず「OK」をクリックしてください。 そしてPNG保存設定で「透過情報」にチェックを入れて「OK」をクリックします。 はい、PNG形式での保存が完了し、四隅が透明になりました。

* Web拍手 *