読者です 読者をやめる 読者になる 読者になる

Fireworks

複数ページのレイアウト

カンプ作成

レイアウトの練習

レイアウト 素材 例1 Cafeロゴ HOME ニュース メニュー 今月のおすすめ オリジナル雑貨 マップ メール 今月のおすすめ オムライスきのこのオムライス ふんわりアツアツのオムライスを、きのこたっぷりのドミグラソースでどうぞ。オムレツには新鮮な特選地卵…

レイアウト

Photoshopとの互換

Photoshopのデータを利用する コピー&ペースト Photoshopからのコピー&ペースト レイヤーは保持できません Photoshopデータを読み込む 「ファイル」→「読み込み」 「レイヤーを保持」を選択 Photoshopデータとして保存 「ファイル」→「別名で保存」 「オプ…

Illustratorとの互換

Illustratorのデータを利用する コピー&ペースト 《Illustrator》 Illustrator → Fireworks 《Fireworks》 グループ解除後 ファイルメニューから読み込む 「ファイル」→「読み込む」 ファイルメニューから書き出す 「ファイル」→「書き出す」 「FXG」形式 F…

ナビゲーションを作る

ナビケーションの背景を作成 「新規ドキュメント」を作成する サイズ「幅:958 × 幅:40」 立体感と縁取り Photoshopライブエフェクト 「ベベルとエンボス」 「ストローク:1px」 ボタンの要素を配置 しきり線 アイコン 文字 余白を削除する 実際のナビゲー…

Photoshopライブエフェクトとスタイル

ボタンを立体感をつけ、縁取りをする ボタンの形をつくりグラデーションを適用する Photoshopライブエフェクト Photoshop「効果」と同じ機能 各設定を変更してみる スタイルに登録 新規スタイルを作成 「スタイル」パネルを使用する スタイル名をつける オブ…

ロールオーバーの設定

シンボルに変換 ボタンシンボルを編集 シンボルの上の薄い緑の長方形(スライス)をダブルクリックする 「オーバー」ステートを作成する 「オーバー」ボタンの色を変更 確認する(ホットスポットを隠しプレビューする) 画像のみ書き出し Fireworksには、CSS…

ボタンを作る

ボタンの形を作る 「幅:200 ✕ 高さ:50」 角丸の半径「100%」 線の形状 ストローク「2px」を内側 アイコンを作る 白丸の中に▲右向き テキストを配置 テキストツールを使用する ボタン本体と文字の位置を揃える 文字にドロップシャドウを付ける シンボルに変…

マスク

オブジェクトで切り抜くマスク 新規ドキュメントに写真を読み込み 写真の上にオブジェクトを描画する オブジェクトを「カット」 写真を「カット」 グラデーションでマスク 長方形を描いてグラデーションを適用する 写真とグラデーションを選択する 「変更」→…

テキストの扱い

Webにおけるテキストの扱い Webで表示されるテキストはブラウザ依存です 例外として画像として扱う文字があります 基本は「文字サイズ」「色」「書体」です 「行送り」や「行揃え」は、CSSで設定します ブラウザ依存のテキストは、カンプ上「PS Pゴシック」…

ビットマップ画像

ビットマップ画像 主に写真を扱う JPEG、GIF、PNG(PNGは、ベクトルの属性も含む) 写真を扱う 写真を開く 写真を読み込み フィルター・カラー調整・シャープ Photoshopと同じ使い方 画像サイズ変更 Photoshopなどと同じ機能 トリミング(切り抜き) 書き出…

ベクトル図形

ベクトル図形 Illustratorと同じベクトルデータ(拡大縮小によって画質が劣化しない) ペンツールは、Illustratorの動きとは違うため慣れが必要です ストローク(線)はプロパティ・パネルで属性を変更する 長方形ツール 線種の形状により輪郭の表示が変化し…

Fireworksの目的と使い方

Fireworks使う目的 作業の効率化 画像の軽量化 もともと「ピクセルビュー」で作られるために、書きだした画像がピクセルにフィットしているため、Web画像を作りやすい。 しかし、テーブルレイアウトにする時代の名残があるため(どんな画像もつないで表示す…