WEBデザイン授業 ６日目

今日は主にテーブルレイアウトについて勉強しました。アクセシビリティ、ユーザビリティ、Photoshop、Fireworksで作成するスライスの違いや、スペーサーGIFを入れる意味、パターンの作り方などとても充実した１日でした。特にテーブルについて分からなかった事がクリアになったのでとても勉強になりました。

Photoshopでスライス

1.スライスツールで切り出したい画像を囲む
2.「ファイル」→「Webおよびデバイス用に保存」→スライスした画像をダブルクリックをして名前をつける。
3.スライスごとにGIFかJPGにファイル形式を設定する。（同じ形式のモノはShiftを押してまとめて設定）
4.「保存」→「ファイルの種類：画像のみ」→「スライス：すべてのユーザー定義スライス」→「保存」→imagesフォルダ内に保存される。

1. ロゴの場合

　　　　

1. 画像の場合

　　　　

Fireworksでスライス

Photoshopと違う点はスライスがレイヤー分けができる事。

1.スライスツールで切り出したい画像を囲むとレイヤーパネルの一番上に「Webレイヤー」にスライスが追加される。
2.名前はプロパティの中でつける。
3.最適化パレットでスライスごとにGIFかJPGにファイル形式を設定する。
（同じ形式のモノはShiftを押してまとめて設定）
4.書き出したいスライスを選択して、「ファイル」→「書き出し」→「ファイルの種類：イメージのみ」、「スライス：スライスの書き出し」、「選択スライスのみ」にチェックを入れて保存。（書き出さないレイヤーはロックをして、表示しないようにする）
注意：ボタンシンボルを作っている場合は、スライスが自動で作られているのでWebレイヤーに含まれないので一緒に選択して書き出してあげる。

　　　　

パターン作成

1. Illustratorで作成する場合、画像の上に長方形ツールで塗り、線をなしにしてパターンに設定する位置に最背面に置き全部選択してスオッチに登録する。作成したパターンを拡大・縮小する場合は、拡大・縮小ツールをクリックして→オブジェクトのチェックを外し、パターンにチェックを入れ→拡大・縮小をする。
2. Photoshopで作成する場合は、パターン登録するデータを「編集」→「パターンを定義」→名前を入れて→「保存」　使用する時は塗りつぶしツールの「パターン」から選ぶ。