世界戦争の時代MASS AGE

2013年07月06日

よくWEBで背景が透けて見えてるDESIGNを見かけるが、
センスよく感じる。

具体的に言うと、
一番奥の一つ手前のレイヤーの背景が透けているため、 
一番奥の背景が うっすら見える構成。

透けずにベタ塗りより印象イイ。

で、
その方法なんだけれども、
Dreamweaver等、WEB作成ソフト側で設定するものと思いがちだけれど、
その前段階の・・・画像制作段階(Photoshop)にて設定する。

まず、Photoshopにて新規ファイル作成で、
新規ファイルを【カンバスカラー:透明】で作成。

【ツール】の【グラデーションツール】〜、
【グラデーションピッカー】で【描画色から透明に】に設定し、
レイヤーパレットで【不透明度:XX%】に設定して背景を透過。

ココのXX%は20%とか30%とか好みの透け方で。

で、
【Webおよびデバイス用に保存】を選択して、
プリセット=【PNG-24】を設定して保存。

ココで注意しないといけないのは、
【最適化】ではなく【元画像】で保存すること。
※ 【最適化】すると、透明部分が反映されず、
背景が白のベタ塗りになってしまうため。

こーして画像作成段階で透明を作っておいた上で、
WEB製作段階に貼り付ける。
これで、半透明のDESIGNに反映できる。 

shun699 at 16:35│Comments(0)TrackBack(0) このエントリーをはてなブックマークに追加 IT:web design 

トラックバックURL

コメントする

名前
 
  絵文字
 
 
世界戦争の時代MASS AGE