AzPainter2を使おう〜HOMEへWeb素材作成 > 半透明シート

半透明シート

Webページで、下の背景画像が透けて見える半透明画像を作る方法です。

こちらのWebページで使っていますが、ブラウザの横幅を変えたりスクロールしてみると、面白い効果が実感できます。
★実際にWebページで使うには、HTMLとスタイルシート(CSS)の知識が必要です。

白でドットのテクスチャを描画する


16×16、32×32など、縦横とも16の倍数で「新規作成」します。
(左図は64×64です)
★実際はもっと小さいサイズでいいのですが、あまり小さすぎても何なので。

全体を白以外の、白と違いが分りやすい色で塗りつぶします。


描画色を白にします。
テクスチャウィンドウで、左図の青で囲んだドットのテクスチャを選び、コントロールウィンドウでテクスチャ機能をONにします。

★他のドット系テクスチャや、ライン系でも半透明シートはできますが、上に文字を表示する場合など考えると、青で囲んだものが一番無難です。


これで塗りつぶしを実行すると、左図のようになります。

この画像の白でない方の色を「透過色」にしてPNG又はGIFで保存すると、Webで半透明シートとして使える画像になります。
(↓↓↓以下の操作)

透過色を指定して保存する



「ファイル」⇒「別名で保存」で、ファイル形式にPNGを選びます。
ファイル名を入力して「保存」ボタンをクリックすると、左図のような画面が出るので、まず「透過色指定」にチェックします。

続いてその右横の、白い部分をクリックします。
(この色が透過色になるので、変更しないで保存すると白が透過色になってしまいます)


画像が拡大表示されるので、スポイトの先端を「白でない」ドットに動かして、クリックしましょう。

(ドットが小さくて見辛いですが・・・)


元の画面に戻るので、透過色が白以外になっているのを確認して、OKします。
★GIF保存の場合も、基本的な手順は同じです。

この画像をWeb表示(スタイルシートで背景画像として指定)すると、1ドットごとに「白・透明・白・透明・・・」になるので、後ろの画像や背景色が半透明風に透けて見えるようになります。

******* 関連のある記事 *******
テクスチャ機能透過GIF・透過PNGの保存方法背景に敷く画像を薄くする
HOMEへAzPainter2の基礎イラスト講座写真補正・加工切り抜き&透過Web素材作成
テクスチャ&パターン作成色々な加工とTIPSAzPainter2レストランこのサイトについて