2013年07月06日
よくWEBで背景が透けて見えてるDESIGNを見かけるが、
センスよく感じる。
具体的に言うと、
一番奥の一つ手前のレイヤーの背景が透けているため、
一番奥の背景が うっすら見える構成。
透けずにベタ塗りより印象イイ。
で、
その方法なんだけれども、
Dreamweaver等、WEB作成ソフト側で設定するものと思いがちだけれど、
その前段階の・・・画像制作段階(Photoshop)にて設定する。
まず、Photoshopにて新規ファイル作成で、
新規ファイルを【カンバスカラー:透明】で作成。
【ツール】の【グラデーションツール】〜、
【グラデーションピッカー】で【描画色から透明に】に設定し、
レイヤーパレットで【不透明度:XX%】に設定して背景を透過。
ココのXX%は20%とか30%とか好みの透け方で。
で、
【Webおよびデバイス用に保存】を選択して、
プリセット=【PNG-24】を設定して保存。
ココで注意しないといけないのは、
【最適化】ではなく【元画像】で保存すること。
※ 【最適化】すると、透明部分が反映されず、
背景が白のベタ塗りになってしまうため。
こーして画像作成段階で透明を作っておいた上で、
WEB製作段階に貼り付ける。
これで、半透明のDESIGNに反映できる。
センスよく感じる。
具体的に言うと、
一番奥の一つ手前のレイヤーの背景が透けているため、
一番奥の背景が うっすら見える構成。
透けずにベタ塗りより印象イイ。
で、
その方法なんだけれども、
Dreamweaver等、WEB作成ソフト側で設定するものと思いがちだけれど、
その前段階の・・・画像制作段階(Photoshop)にて設定する。
まず、Photoshopにて新規ファイル作成で、
新規ファイルを【カンバスカラー:透明】で作成。
【ツール】の【グラデーションツール】〜、
【グラデーションピッカー】で【描画色から透明に】に設定し、
レイヤーパレットで【不透明度:XX%】に設定して背景を透過。
ココのXX%は20%とか30%とか好みの透け方で。
で、
【Webおよびデバイス用に保存】を選択して、
プリセット=【PNG-24】を設定して保存。
ココで注意しないといけないのは、
【最適化】ではなく【元画像】で保存すること。
※ 【最適化】すると、透明部分が反映されず、
背景が白のベタ塗りになってしまうため。
こーして画像作成段階で透明を作っておいた上で、
WEB製作段階に貼り付ける。
これで、半透明のDESIGNに反映できる。