透過PNG／random関数 - WEB

透過PNGを作成

[Illustrator]

テンプレート配置した画像をトレース
ドロップシャドウ効果を付ける

　　　レイヤーを複製
　　　ラインツールで任意の場所に線を引く
　　　パスファインダーで分割。任意の場所を削除
　　　効果→スタイライズ→ドロップシャドウ

web用保存

　　　PNG24　東名部分にチェック　画像サイズは必要に応じて

memo
*複合パス、パスファインダの上の図形で型抜き
*パスの平均化で図形を閉じることができる

[Photoshop]
背景画像作成パターンいろいろ

フィルター→ノイズを加える→ガウス分布（ランダム）→ピクセレート（点描）
1行・1列選択ツール→切り抜き→画像解像度で任意のサイズ指定（縦横比率外す）
画像を任意範囲選択→編集からパターンを定義→新規ファイルを開く→編集から塗りつぶし→パターンを選ぶ

透過PNGのIE6対策

DillerDesign からjsファイルをダウンロード
htmlのheadに以下記述

<!--[if IE 6]>
<script src="js/DD_belatedPNG_0.0.8a-min.js" type="text/javascript"></script>
<script>
DD_belatedPNG.fix('img, .png_bg');
</script>
<![endif]-->

[JavaScript]random関数

おみくじ

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>おみくじ</title>
<style>
body {
	background: url("img/omikuji.gif");
}
</style>
</head>
<body>
<h1>あなたの今日の運勢</h1>
<script>
var images=new Array(4);
images[0]="img/0.jpg";
images[1]="img/1.jpg";
images[2]="img/2.jpg";
images[3]="img/3.jpg";

num = Math.floor(Math.random() * 4);
document.write('<p><img src="');
document.write(images[num]);
document.write('"></p>');
</script>
</body>
</html>

画像のランダム表示

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ランダム表示</title>
<style>
body {
	background-color: #000;
	margin: auto;
	text-align: center;
}
h1 {
	color: #eee;
}
</style>
</head>
<body>
<h1>今日のイメージ</h1>
<script>
numOfImg= 10;
var num;

num=Math.floor(Math.random()*numOfImg)
document.write('<img src="img/star/', num, '.jpg">');
</script>
</body>
</html>