PNG画像-龍

Illustrator 授業

PNG画像の表示をIETesterで確認


龍の画像を完成させ、IETesterで表示確認のおさらい。

一部だけドロップシャドウをつける
  1. ペンツールでトレスした龍レイヤーをコピー
  2. 直線ツールで線を数本引く
  3. 全てのオブジェクトを選択し分割する
  4. 分割した一部を削除してドロップシャドウをかける
  5. シャドウをかけたレイヤーをコピー元レイヤーの下に移動させる
IE6用のスクリプト

DD_belatedPNG.jsをDLし、表示させるサイトのjsフォルダーに入れておく。
以下の<!--[ifIE6]>から<![endif]]-->のスクリプトを打つとIE6でもきちんと見られます。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>png画像の練習</title>
  <style type="text/css">
	* {
		margin: 0;
		padding: 0;
	}
	body {
		background-image: url(images/bg.jpg);
	}
	</style>
  <!--[if IE 6]>
  <script src="js/DD_belatedPNG_0.0.8a-min.js" type="text/javascript"></script>
  <script>
  DD_belatedPNG.fix('img.png');
  </script>
  <![endif]-->
</head>
<body>
<p><img class="png" src="images/dragon.png" width="540" height="600" alt=""></p>
</body>
</html>

MacではIETesterが使えないのでWindowsを使ったのですが、
調べてみたらオンラインの表示確認ツールが存在するのですね。

via MacでIEの表示を確認する方法のまとめ | WebDesign Memo
他にもいろいろな方法が載っています。