Fireworks講習ノート

職業訓練でFireworksrを習った。その際の講習ノート。

マスク

・画像の加工、編集、トリミングにはマスクを使用→後からでも編集できる
画像と、白の範囲のレイヤーを作成→選択→変更→マスクとしてグループ化
マスクのレイヤーは白と黒で表す：白が表示部分・黒がマスク部分
編集時には、リンクアイコンをクリックし、各々編集可能
※パスアウトラインモードではストローク（枠線）が使用可

・ピクセルマスク：画像がビットマップ
選択範囲ツールで選択→レイヤーパネルでマスクを追加ボタン
ブラシツールで手作業でトリミングできる

色調補正

・レベル補正：ヒストグラムの裾に合わせて、中間色の位置をずらす

・トーンカーブ：レベル補正を斜めに
シャドウ→中間色→ハイライト　上が明るく・下が暗く

色調整にはレベル補正かトーンカーブいずれか使いやすい方を選ぶ

・部分補正：画像をコピーし、上層の画像のみマスキングをかけ、補正したい部分を補正する

角丸の半径をバーの高さの半分に設定すると、角が半円のバーができる

原則として、上か左上から光が当たっているようにデザインする

整列でぼやけた場合ctrl+K（ピクセルにスナップ）

文字のグロー設定で可視性

CSS3ジェネレータを使えばコードをコピーペーストできる

スマートフォン対応の仕方によって、画像とCSS3の使い分け

・シンボル化：編集をしても原形を保つ・同じオブジェクトを使いまわすとき、設定の変更がすべてに反映される→F8

・スライス：一つのカンバスより各パーツごと画像データを切り取っていく

選択→長方形スライスの挿入→delete
→webレイヤーに格納される

・透過画像の書出し：アルファチャンネルを使用する
インデックス透明カラー：一色だけ透明にする、半透明など不可、あまり使わない
※ドロップシャドウなどの影の部分にも透過が使用されているため、アルファチャンネルの使用を忘れずに

・cssスプライト：各画像を一つのデータにまとめ、cssにて表示位置を指定し、表示させたい部分だけを表示する手法
データの個数を減らし、リクエストの回数を減らすことで、読み込み速度向上を図る

ベジェ曲線

描画の終了→ダブルクリック or ctrlキー
書き始め：曲線を描きたい方向に、ペン先のハンドルを向け、ポイントする
→2点目は、ペン先の無い方向のハンドルを見て、曲線の形を調整する
この前後2本のハンドル操作で描画を確定することを意識する
ポイントとポイントの間で線を描く、上達にはトレース、頂点に合わせてアンカーポイントを置く 

Adobe Fireworks CS6 Macintosh版 [ダウンロード]