5/24のまとめ

授業

授業メモ

header の練習1

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="print, screen">
<title>headerの練習</title>
</head>

<body>
<div id="container">
<div id="header">
<h1>Information World</h1>
<h2>Technical Information</h2>
</div>
</div>
</body>
</html>

@charset"UTF-8";

* {
	margin: 0;
	padding: 0;
}

body {
	color: #fff;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	background-color: #fff;
}
#container {
    width: 800px;
	margin: 10px auto;
}  	
#header {
	height: 110px;
	position: relative;
	background-image: url(../bg_img.jpg);
	background-repeat: repeat-x;
}
h1 {
	font-size: 2em;
	padding: 30px 0 0 20px;
}
h2 {
	font-size: 0.95em;
	position: absolute;
	right: 20px;
	top: 5px;
}
header の練習2

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="css/style2.css" type="text/css" media="print, screen">
<title>Information World</title>
</head>

<body>
<div id="container">
<div id="header">
<h1>Information World</h1>
<ul>
<li><a href="#">Internet</a></li>
<li><a href="#">Computer</a></li>
<li><a href="#">Networking</a></li>
<li><a href="#">Detabase</a></li>
</ul>
<form action="#" method="post" enctype="multipart/form-data" name="form1" id="form1">
<input name="textfield" type="text" size="15">
<input type="submit" name="submit" value="検索">
</div>
</div>
</body>
</html>

@charset"UTF-8";

* {
	margin: 0;
	padding: 0;
}

body {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
        background-color: #fff;
}
#container {
  	width: 800px;
	margin: 10px auto;
}
#header {
	height: 110px;
	position: relative; 
	background-image: url(../bg_img2.jpg);
	background-repeat: no-repeat;
}
h1 {
        color: #fff;
        font-size: 2em;
	position: absolute;
	left: 15px;
	top: 30px;	
}

ul {
        font-size: 0.875em;
        font-weight: bold;
	list-style-type: none;
	position: absolute;
	left: 25px;
	top: 3px;
}
li {
        display: inline;
	padding-right: 10px;
}
li a:link {
  color: #def5f7;
  text-decoration: none;
}
li a:hover {
  color: #94bed4;
}
#form1 {
	position: absolute;
	right: 10px;
	top: 3px;
}
Ps-写真からグラデーションのある画像を作る
  • 写真上に1pxの選択範囲を作り、切り抜き
  • 解像度の縦横比のチェック外し、縦幅と同じサイズにする
  • alt + shift + カーソルキーでコピーしながら色味を調整していく
  • ガウスでぼかしを入れることも
Ps-雲の背景と文字
  • キャンバスを水色で塗りつぶし、フィルタ→描画→雲模様1
  • shiftを押しながら、好みの雲になるまで同じ効果を繰り返す(shiftを押すことでアルゴリズムが変わる為)
  • 文字にドロップシャドウで影を作り、背景を上にコピーしてクリッピングマスク

  • 白い影の場合、乗算では見えないため描画モードを通常にする
  • スクリーンは黒い色を飛ばすこと
  • 包括光源は全てのレイヤーに影響する
  • Photoshopで画像を拡大するときはスマートオブジェクトにする
  • スマートオブジェクトを外すときはレイヤーをラスタライズ