0616 リンクが命！
Photoshop
初めてPhotoshopに触ってみる。インターフェイスはIllustratorに近いものがある。
環境設定を定規・文字共にpixelに変更する。
Web用の画像編集の場合は72pixel/inchでOK。１inch（2.5cm）に72pixel入る設定。
→pixelは相対的な概念
各種ショートカット
ショートカットを多用するのでとにかく使って覚えること！
- Ctrl＋Z：１個戻る
- Ctrl＋D：キャンセル
- Alt＋BackSpace：描画色で塗りつぶし
- Ctrl＋BackSpace：背景色で塗りつぶし
- Ctrl＋T：バウンディングボックス表示
- Ctrl＋A：全範囲選択
- Shift＋クリック：複数個所を同時に選択
- Alt＋クリック：複数個所を同時選択している際の選択解除
画像の一部選択とその切り抜き
- なげなわツール（完全に手書きで選択）
マグネット選択ツール（手作業だけど選択的）
クイック選択（影のある画像でも大体選択される）
自動選択（魔法）（背景が一色の場合に使える）
上記のツールで画像の一部を選び、より細かく切り取る際はクイックマスクツールで消しゴム・ブラシを使い微調整する。
- [選択範囲]タブから[選択範囲の反転]
- 切り抜き完了
画像にぼかしを入れる
[フィルター]→[ぼかし]→[ガウス]→プレビューにチェックを入れて実行
画像全体にぼかしが入るので強調したい場所のみ消しゴムツールでぼかしを消す
画像の端をぼかす
！目線がより画像の中へ入りやすくなる
全選択→[選択範囲]→[選択範囲を変形]
→縦横比は鎖マークで固定しWの％を指定（大体10％前後）
→[選択範囲の反転]→[境界線を調整]→ぼかしのpxを指定→白色で塗りつぶし
ファイル保存について
再編集するためにはPhotoshopファイル、Web用にはgif/jpg/pngファイルで保存する。
[別名で保存]→ .psd
.gif 軽い。ロゴ画像などに最適。写真は不向き。
.jpg 使い勝手がいい。保存のたびに劣化する点に注意。
.png 重い。保存による劣化は少ない。画質はきれいだが大きい画像（トップ全画面etc）は表示に時間がかかる点に注意。
Webページはリンクが命！
リンクの無いWebページに意味はあるか？
ということでリンクと画像挿入のおさらい。
画像挿入
<p><img src=”ファイル名” alt=”画像の説明”></p>
・<p>で挟む事を癖付けしておく
・altを書き忘れない
・ファイル名の書き方については下記参照
絶対パス／相対パス
絶対パスは http:// から始まるどこからでもそれさえ分かればアクセス可能な住所そのもの
相対パスは現在地によって右が西になったり北になったりするような示し方
index.htmlくんの居場所から見て参照したい画像がどこにあるかで示す。
indexくんより上の階層にある場合は ../ で一度外に出なければならない。
indexくんより下の階層にある場合は / を重ねて中へ入る。
リンク
<a href=”http://～～～”> 画像や文字（リンク先へ飛ぶきっかけ）</a>
a：anchor
href：hyper reference
CSS
背景画像の表示（全面に、繰り返し）
body{
background-image: url(“ファイル名”);
}
背景画像の表示（位置指定）
body{
background-image: url(“ファイル名”);
background-repeat: *********;
}
→*********部分に入れる言葉によって表示が変更できる
- repeat：繰り返し（デフォルト）
- repeat-x：横へ（水平に）繰り返し
- repeat-y：縦に（垂直に）繰り返し
- non-repeat：画像を繰り返さない（１枚だけ表示）
路線図描き始めました
Illustratorで路線図や地図が描けると先生にお伺いしたのでわたしもやってみよう！ということで今日から授業前後の空き時間を使って描いてます。
30分かけてこのクオリティ…。
明日もがんばろう。まずは山手線完成を目指します。
