２月８日授業内容
こんにちは。
今日は授業の中で特に難しかった、イラストレーターの操作から説明していきます。
この次にはイラストレーター機能の説明と横ナビゲーション記入例があります。
作るものは下のメニューバー（幅８００px、高さ６０px、横のバーとの間隔１６０px、下のバーとのマージン１０px）です。
①新規ファイル（プロファイル：Web、詳細の"新規オブジェクトをピクセルグリッドに整合"にチェック）を開く→表示→ピクセルビューとピクセルにスナップにチェックを入れる（アンチエイリアス処理のため
）。
②長方形ツールを使い幅８００px、高さ６０pxの長方形を描く。
＊このあと長方形を選択した状態で拡大すると描写線は描いた線の真ん中になっていることがわかる。この状態だと外側線の端から端の幅が８００pxではないのでコントロールバネルの線→上から３番目の真ん中の線を内側に揃えるにチェック
③ダイレクト選択ツールをクリック→長方形の左端の縦編のみクリック→ダイレクト選択ツールのボタンの上でダブルクリック→入力画面に"水平方向１６０px"、"垂直方向０px"を入力しコピーを押す。→コピーされたらctrl + Dで等間隔に縦線をコピーする。
④グラデションツールを使って下の方に上から下に向かって薄黒い影が濃くなるようなグラデーションを適用する。（方法：グラデーション→色を選択→オブジェクトを選択しクリックして色付け→オブジェクトの真ん中で上から下にかけてshiftを押しながらドラッグ）
⑤文字ツールをクリック→文字の大きさを１６pxに変更→余白にインフォメーションと入力（入力する文字の中で一番長い文字（＊この後バーの中心に合わせる作業をするときに一番長い物を基準にしていないとバーの中に入りきらないかもしれないので））
⑥インフォメーションを選択した状態で中央揃えにチェック→まずボックスの上に幅１６０pxの長方形を描く→インフォメーションと描いた１６０pxをshiftを押しながら選択する→その状態で長方形のみ中心部分をクリックし長方形の周りが太線で囲われる（キーオブジェクト：
Illustrator：特定のオブジェクトを動かさないようにオブジェクトを整列させる - DTP Transit
）ようにする→水平方向中央に整列をクリック
⑦ ⑥と同じような手順で次は幅８００pxの長方形の横線とインフォメーションを同時に選択した状態で長方形の外枠をクリックし太線を表示させる。→垂直方向中央に整列をクリック
これで上下左右とも中央にできた。
⑧ ③と同じような手順でインフォメーションを選択し、ダイレクト選択ツールをダブルクリック→右方向にコピーするときはプラス、左方向にコピーしたいときはマイナスを初めに入力する。今回水平方向160px、垂直方向０pxで入力。
⑨５箇所にコピーできたら文字ツールをクリックし、見本のように入力しなおす。
10： ③と同じやり方で800pxの長方形全体を選択し、ダイレクト選択ツールダブルクリックで次の値を入力しクリックする。(水平方向0px、垂直方向70px)
11: 下の長方形の下側に見本と同じように幅１６０px、高さ１０px（任意）の長方形を描き大きい長方形と小さい長方形の端をぴったり合わせる。③と同じやり方で右に複製し、それぞれ色を変える。
12: 下側の大きい長方形を選択コピー（カラフル部分は避ける）し、一番最後に処理した紫色の部分をクリックしフロントペースト（ctrl + F）する。カラフルな部分に線が見えないときは背景色をなしにするか,
オブジェクト→重ね順→最前面にする。
13: 上下の長方形を選択→オブジェクト→アートボード→選択ブジェクトを合わせる
14: Web用に保存（png24で）＊この時幅、高さがあっていなければ①もしくは②をしていない可能性がある。＊あと0.5px単位になった場合Web上では表示できないので注意
- イラストレーター機能
・カーニング（オプションバーの文字で調整）・・・カーニングとは、特定の文字の組み合わせの文字間隔を調整する処理です。イラストレーター教科書P67
・トラッキング（オプションバーの文字で調整）・・・トラッキングとは、選択したテキストまたはテキストブロック全体の文字間隔を調整する処理です。
参照記事：
・フロントペースト・・・P64
・opacity(オプションバーの不透明度)
横ナビゲーション
①
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="02-08-02.css">
<title>横ナビゲーション</title>
</head>
<body>
<ul class="nav">
<li><a href="#">新着情報</a></li>
<li><a href="#">お知らせ</a></li>
<li><a href="#">製品情報</a></li>
<li><a href="#">店舗情報</a></li>
<li><a href="#">会社情報</a></li>
</ul>
</body>
</html>
@charset "utf-8";
/* CSS Document */
/*reset...........*/
html,body,ul,li{font-family:"Hiragino Kaku Gothic proN",
Meiryo,
sans-serif;
padding:0;
margin:0;
line-list:1.0;}
ul{list-style:none;}
a{text-decoration:none;}
body{font-size:16px;}
ul.nav{margin:50px auto;/*横幅を設定しないとマージンautoでも真ん中にはいかないよ*/
width:800px;
overflow:hidden;/*これ入れないとul間のmarginが均等に表示されない*/
}
.nav li{float:left;
width:160px;
}/*li aはli aの子要素みたいなものなのでliに入力したwidthを引き継ぐためli aでborderを設定してもボーダーは内側に設定されるので総幅は変わらない。逆にli aでwidthを入力した場合は入れ子状態ではないのでwidthの外側にボーダー線の幅が付いてしまうため総幅が変わる*/
.nav li a{display:block;
text-align:center;
font-size:1.2em;
line-height:56px;/*内側に上下ボーダーが２pxずつ入るので60px-4pxする*/
border-top:2px solid #333;
border-right:2px solid #333;
border-bottom:2px solid #333;
}
.nav li:first-child a{border-left:2px solid #333;}/*＊要注意*/
.nav li a:hover{color:#fff;
background:#333;}
