関連サイト
出版社による関連ページが公開されています。
内容紹介
「手ごろな値段のFireworksで、ロゴやパーツ制作から始めて、Webデザインをやってみたい…」
そんなFireworksの初心者はもちろん、
「今まで何度かFireworksを使ってみたけど、どこにどんな機能があるか分からなくて、いまいち使いこなせなかった…」
といった既存ユーザーの方、現在はPhotoshopやIllustratorをメインに使っている方にも、きっちり満足いただける1冊です。
---
本書は、「Part 1 Fireworksを知る」（総論）、「Part 2 Fireworksを学ぶ」（基礎操作編）、「Part 3 Fireworksで作るWebパーツ」（実践編1）「Part 4 Fireworksで作るWebデザイン」（実践編2）の4部構成になっています。
学習用のサンプルファイルはサイトからダウンロードできます。サンプルファイルはCS4～CS6対応。
Part1では、Fireworksの特徴は基本的な使い方、ざっくりとしたWeb制作のワークフローなどについて解説しています。
Part2の機能解説編では、Fireworksの機能について丁寧に解説。オブジェクトの作成や色の設定方法などの基本操作から、画像の編集やフィルターを使った補正、パス系ツールの操作、ステートやシンボル、ページといった、効率的な制作のために知っておきたい機能までしっかりと押さえています。また、単に機能の使い方を羅列で説明するだけではなく、「その機能を使って実際には何をするのが便利なのか？」まで分かるように、実例に即した作例を使いながらの解説になっています。
Part3、Part4では、機能を組み合わせて作品を作っていきます。1つひとつの機能をどのように順序立てて組み合わせて作品を仕上げていくかの流れを理解することができます。Part3では、よくWebサイトで使われるアイコンやマークなど、比較的シンプルな操作で作れるものから、画像を補正して文字と組み合わせて作るようなバナー画像やメニューの制作まで、ニーズの高い12の作例を作ります。
Part4では、ワイヤーフレームの作成から始めて、Webサイトの数ページを作成し、書き出すまでの一連の流れをしっかり学習。Webサイトデザインの流れが押さえられます。
書誌情報
- 著者: 森和恵, 狭間句美
- ページ数: 356ページ(PDF版換算)
- 対応フォーマット: PDF
- 出版社: マイナビ出版
対象読者
Fireworksを初めて使う人。Fireworksを使っているが、分からないところがある人。PhotoshopやIllustratorを使っていて、Fireworksに乗り換えたい人。
著者について
森和恵
r360studio.comで活動するWeb系セミナー講師。
「難しいことでも、わかり易く伝える」をモットーに楽しく学べるセミナーを開催。今後は、eラーニングや電子出版の形式で、Web制作を学ぶための教育コンテンツにも注力していく。
今後、「サイト制作の教科書 r360study」で何かいいことをしかける予定。
狭間句美
株式会社ふわっと勤務。
Webデザイナー＆イラストレーター。デザインをはじめ、コーディングやCMS構築などのWeb制作全般、イラストやまんが制作、書籍の執筆など幅広く活動中。
神戸を中心に、Web制作に関わる人のための勉強会やセミナー開催、セミナー講師なども行っています。
目次
Part 1 Fireworksを知る
Theme 1 Fireworksでできること
- Fireworksの特徴
- Web制作のワークフローにおけるFireworksの役割
- Fireworksで作れる作品
Theme 2 Fireworksの基本操作
- Fireworksの起動画面
- Fireworksの画面操作
Part 2 Fireworksを学ぶ
Lecture 1-1 ファイルの作成と保存
- ドキュメントの新規作成
- ドキュメントの保存
- ファイルを開く
Lecture 1-2 カンバスサイズ、画像サイズ
- カンバスサイズの変更について
- ［切り抜きツール］を使ったトリミング
- 画像サイズの変更について
Lecture 1-3 書き出しについて
- ［画像プレビュー］から書き出し保存する
- ［最適化］パネルを使って、先に書き出し設定をする
Lecture 2-1 図形や線を描く
- 基本シェイプツールで描く
- 自動シェイプツールで描く
- オブジェクトを選択・移動する
Lecture 2-2 テキストの入力と修飾
- テキストの入力
- 文字や行の設定
- パスオブジェクトにテキストを配置する
- テキストのアウトライン化
Lecture 2-3 オブジェクトを変形する
- ツールを使って変形する
- 数値を指定して変形する
Lecture 2-4 複数オブジェクトを操作する
- オブジェクトの重なり順を変更する
- オブジェクトのグループ化
- オブジェクトを整列する
- 複数オブジェクトの結合
Lecture 2-5 自由に描けるパスの操作
- 直線を描く
- 曲線を描く
- ［パス］パネルでパスを操作・加工する
Lecture 3-1 塗りの指定と種類
- ベタ塗りで色を指定する
- もっと細かくベタ塗りを指定する
- テクスチャを設定する
- グラデーション塗り
- パターン塗り
Lecture 3-2 線の種類と活用
- シェイプオブジェクトに線を指定する
- その他の線の設定
Lecture 3-3 ライブフィルターで特殊効果
- フィルターの基本操作
- Photoshopライブ効果（エフェクト）を活用する
Lecture 3-4 カラーの管理
- ［スウォッチ］パネルで色を管理する
- ［カラーパレット］で色を混ぜる
Lecture 4-1 写真画像の色補正
- レベル補正フィルターで補正する
- 色相・彩度フィルターで補正する
- トーンカーブフィルターで補正する
Lecture 4-2 ビットマップデータの扱い
- ビットマップを編集する
- ビットマップを選択する
Lecture 4-3 マスクを使った切り抜き
- マスク切り抜きの手順と仕組み
- さまざまなマスク
Lecture 4-4 画像に重ねて合成する
- 複数の写真を合成する
- 不透明度や描画モードで合成する
Lecture 5-1 レイヤーごとに管理する
- レイヤーのしくみ
- レイヤーの新規作成とオブジェクトの移動
- レイヤーごとの基本操作
Lecture 5-2 ステートの操作
- ［ステート］パネルについて
- ステートを利用してアニメーションを作る
Lecture 5-3 ページの操作とモックアップの作成
- ページの概念
- マスターページとその他のページを作成する
- マスターページを編集する
- モックアップデータを作成する
Lecture 5-4 スタイルの活用
- スタイルの基本操作
- オリジナルのスタイルを登録
- 作成したスタイルを他の環境で使うには
Lecture 5-5 シンボルの活用
- オブジェクトのシンボル化
- ［ドキュメントライブラリ］パネルでシンボルを管理する
- シンボルを別のファイルで利用する
- ［共有ライブラリ］パネルを活用する
Lecture 5-6 同じ処理を効率よく繰り返す
- ［ヒストリー］パネルで作業を繰り返す
- ヒストリーをコマンドに登録する
- 複数のファイルにバッチ処理をする
- 強力な検索と置換の機能を使う
Lecture 5-7 Dreamweaverとの連携
- DreamweaverとFireworksを連携させる
- DreamweaverとFireworksを連携して操作する
Part 3 Fireworksで作るWebパーツ
Practice 1 見出し画像を作成してみよう
- Step1 小さな文字の見出しを作る
- Step2 矢印のバリエーションを作る
Practice 2 アイコンを作成してみよう
- Step1 メールマークを作る
- Step2 家のマークを作る
Practice 3 ロゴマークを作成してみよう
- Step1 コーヒーカップの形を作る
- Step2 コーヒーカップを組み立てる
- Step3 カップの持ち手をつける
Practice 4 ボタンを作成してみよう
- Step1 基本的なボタンの作り方
- Step2 ボタンの光を作る
- Step3 ボタンの光と影を考える
- Step4 ［スタイル］パネルでボタンを作る
- Step5 色のバリエーションの作り方
Practice 5 ナビゲーションを作成してみよう
- Step1 メニューの枠組みを作る
- Step2 他のボタンに属性をペーストする
- Step3 ボタンに文字を乗せる
- Step4 ボタンと文字を整列させる
Practice 6 バナーを作成してみよう（1）
- Step1 写真をカンバスに読み込む
- Step2 写真をシンボルに変換
- Step3 写真を［マスクとしてペースト］する
- Step4 写真の上に文字を入れて書き出す
Practice 7 メインイメージを作成してみよう
- Step1 写真をカンバスに読み込む
- Step2 写真を重ねて配置
- Step3 メインイメージの飾り付けをする
- Step4 キャッチコピーを入れる
Practice 8 タイトル文字を作成してみよう
- Step1 ふちどり文字を作り、塗りをグラデーションにする
- Step2 文字に効果を重ねる
- Step3 グループ化した文字に効果を重ねる
Practice 9 ヘッダーを作成してみよう
- Step1 ヘッダーの土台を作る
- Step2 ロゴを入れる
- Step3 飾り付けの模様を入れる
Practice 10 写真を補正してみよう
- Step1 レベル補正を使って自然な明るさに調整する
- Step2 トーンカーブで画像の色調を調整
- Step3 アンシャープマスクでシャープを調整する
Practice 11 アクセントパーツを作ってみよう
- Step1 Fireworksで写真を開いて選択範囲を作る
- Step2 パスからマスクを作成
- Step3 花をワッペンのように加工する
- Step4 葉っぱの飾りを作る
Practice 12 バナーを作成してみよう（2）
- Step1 パーツの確認
- Step2 背景を作成
- Step3 グループ化したアイテムを変形
- Step4 文字をパス上に配置
- Step5 スライスしてWeb用に保存する
Part 4 Fireworksで作るWebデザイン
Practice 1 作成前の準備をしよう
- Step1 ドキュメントを作成し、ガイドやレイヤーを用意する
- Step2 レイヤーを準備する
Practice 2 ワイヤーフレームを作成しよう
- Step1 長方形ツールで大枠を作る
- Step2 細かくブロック分けをしていく
- Step3 文字や部品を入れていく
Practice 3 トップページをデザインしよう
- Step1 素材と作業の流れを確認する
- Step2 ヘッダを作成する
- Step3 ナビゲーションのベースを作成する
- Step4 ナビゲーション項目を作成する
- Step5 ナビゲーションを仕上げる
- Step6 メインイメージを配置する
- Step7 トップページコンテンツの見出しを作成する
- Step8 コンテンツの写真メニューを整える
- Step9 コンテンツのお知らせ情報を作成する
- Step10 フッタを作成する
- Step11 コピーライトを作成する
- Step12 背景を作成する
Practice 4 セカンドページをデザインしよう
- Step1 共有パーツの設定をする
- Step2 すべてのページの土台を作成する
- Step3 シンボルで共通パーツを管理する
- Step4 レイヤーを複数ページで共有する
- Step5 データを読み込む
Practice 5 デザインを部品に書き出そう
- Step1 スライスを挿入する
- Step2 スライスの設定をする