タグ: 作ったもの紹介

この度、ご縁があってFireworksの本を書かせていただくことができました。

Fireworks CS5/4/3 (速習デザイン) 山口 有由希 技術評論社 2011-12-07  →Amazonで詳しく見る →楽天で詳しく見る

12月7日発売予定です^^

先日twitterなどで発売日が決まったことを告知させていただいたのですが、
何名か予約したよ！なんて声をかけていただいて本当にうれしい限りです；；

結構いい内容に仕上がっていると思うのですが、
また発売日前でなにも詳細が公開されていない状態なので

「予約して買ったけど求めていた内容と違ったーー」

ということがあっては、
予約までして買っていただくのに本っ当に申し訳ないので…。

今日は、ちょっとその本の中身を紹介させてください！

Fireworksによる画像パーツのデザイン

Part2です。

FIreworksの基本動作が一通りマスターできるように考えました。

基本の操作説明ってなんか退屈な説明になりがちなので、
いろいろ実際に作りながら覚えられるようになっています。

これらのレシピをこなしていくと、
終わる頃には「あー大体こんな感じでパーツ作るんだなー」と
わかってもらえるような作りにしています。

すでに基本はわかっているよーという方も、
レシピをひとつ増やすつもりでやってみていただけるように、
作るものはボタンやバナー類など、役立ちそうなものにしました。

実際に作っていくものはこんな感じです。

ボタンを作る

こんな感じのボタンを作ります。
自動シェイプの使い方、塗りの適用方法、フィルタの適用法方法、共有ライブラリの使い方などを学びます。

ナビゲーションを作る

ステートを使ったグローバルナビゲーションの作り方を解説しています。
のラインを使った立体感の出し方や、くぼみの表現方法、ロールオーバー状態をプレビューで簡単に確認しながら作る方法などを説明しています。

ポラロイド風写真を作る

このLessonは、基本的な画像のマスクの方法と、カラーモードの変更（焼き込みなど）のやり方を解説しています。

バナーを作る

パターンやテクスチャを使って作る、質感あるバナーの作り方を解説しています。

アニメーションGIFバナーを作る

ステートをつかったアニメーションGIFの作り方です。まだまだECサイト等で活躍の場があったりするので、しっかり解説しています。

ブログヘッダーを作る

ストローク（線）の質感を使って消印を表現します。
このLessonのねらいとしては、ストロークの設定次第でいろいろな質感が表現できることをしってもらうことを目的としています。

LET’S TRY!!

練習問題は自動シェイプを使って以下のようなボタンをいろいろ作るという課題です。
完成見本データがDVDに収録されていますので、そのまま色を変えて素材としても使えるかも。

アニメーションGIFアイコンもまとめていっぺんに作れます。
完成見本データがDVDに収録されています

この本の一番のポイント！1つのサイトをじっくりデザイン。

Part3です。

何パターンかトップページを作るようなLessonにしようかとも考えたのですが、1つのサイトをワイヤーフレームから下層ページまで、Fireworksの機能を使いこなして仕上げるまでの課程を解説した方がよいのではないかなーと、Part3はまるまる全部使って「1つのサイトをFireworksを使ってデザインする流れ」を解説しています。

まず以下のようなワイヤーフレームの作り方を解説しています。

次にこのワイヤーフレームをこのように装飾します。
（このトップページのデザイン手順は、全部解説してます）

そして下層ページ。
ページ機能を使って作っていきます。

マスターページ機能を使ってヘッダーを全ページで共有させたり、
共有レイヤー機能を使ってすべてのページでサイドバーを共有させたり。

トップページではサイドバーは不要なので、
そういう場合どうやって除外するのかも書いています。

あと、マスターページ機能では管理するのが難しいフッター
（ページによって表示位置が異なるので）を
うまく共有させる方法など、
けっこう実用的な内容になっているのではないかなー、と思います^^

完成データもDVDに入ってます。

ホットスポットツールでリンクを作って、
リンクが有効なPDFを書き出す方法等も解説。

スライスも、
オブジェクトの大きさに合わせて自動的にスライスオブジェクトを作成する方法から、
重なっているオブジェクトをスライスするときの方法までいろいろと解説しました。

他にもいろんなレシピ。

Part4です。

Fireworksマニアで紹介したものも、
手順をすべて書き直しているのでかなりわかりやすくなっていると思います。

もちろんすべて完成データ付きです。

ウッドプレートとプレス文字で作るタイトルロゴ

ワンオブジェクトで作れる立体的なボタン

画像のマスクを極める

テキストオブジェクトでマスクしたり、自動シェイプでマスクしたり、選択範囲でマスクしたり。パスのマスクだったりグラデーションマスクだったり。

頻繁に使うマスクの、あらゆるマスクの方法を解説しました。

コラージュ風パーツを作る

マスキングテープを作る

星ツールでさまざまな点対称の模様を手軽に作る

これはサイトでは星ツールを使って作るとしか紹介していなかったのですが、
自動シェイプのプロパティパネルからどれくらいの値を設定すればこの形になるか、
というのを全部載せているので、すぐ同じ形が作れるようになっています。

（ちなみに自動シェイプのプロパティパネルから自動シェイプの黄色のハンドルの数値が変更できるのはCS4以降です。）

切手のオブジェクトを作る

整列や切り抜きがマスターできますよ☆

LET’S TRY!!

こんな感じで組み合わせて作ってみましょう！という練習問題。
こちらはこんな感じの完成見本ファイルがDVDに入っています。

東京タワーのまわりのぽわぽわっとした模様は、パスにデフォルトのストロークを当ててるだけです。

簡単ですよー！

その他色々。

パターン、テクスチャ、ストロークの早見表をつけました。

パターンはパターンのサイズも並記したので、スライスのときにとっても便利だと思います！

フリー素材を入れました。

パターン、テクスチャ、写真の素材をDVDにおまけでいれました。

はじめてFireworksに触れて、ソフトに慣れよう、これからいろいろとデザインを作っていこう！というときに素材に使える写真がなくて作業がはかどらない…！ということがよくあったので、何にでも使える完全フリーな素材を入れました。

ダミー画像に使うもよし、
これでサンプルサイトを作るもよし、
商用サイトに使うもよし、

なんに使っていただいてもOKです。

たくさん練習していろいろ作ってもらえるとうれしいです^^

レシピ系は全部完成ファイルがDVDに入っています。

DVD付きで完成データが全部収録されているので、実際に出来上がったものをみていただくことができます。

小ネタもいっぱいいれました

長年使っていて、そうだのか！知らなかった！って発見がいろいろあったのですが、そういうのもコラムとして随所に織り交ぜました。

ちなみに本書はCS3/4/5対応となっていますが、新しくなって改善されたところやよくなったところを活用しまくった本になっているので、ぜひCS5（最低でもCS4）での実習をおすすめします。

付属のDVDに体験版が入っているので、それでぜひCS5でお試しください！

なんだかとりとめもなく書いてしまいましたが、こんな感じの本になっています。

私がもう何年も使ってきて「最初からこれ知ってたら全然効率違ってたのに…！！！」と思ったことは全部本の中に詰め込んだつもりなので、これからFireworksを使いこなしていくぞ！という方のお役に立てるんじゃ…ないかなと…た、たてたらいいな…。

手順についても、同僚のプログラマ女子に夜な夜な試してみてもらって（えりかっち本当にありがとう！！；；）、手順通りにやったら同じものが作れるか、戸惑うところはないかを全ー部見てもらって修正したので、Fireworksはじめて！って方でもきっと読みやすいと思います。

もしちょっとでも気になる内容がありましたら、
図書館や本屋さんで立ち読みでもかまいませんのでぜひチェックしていただいて
一緒にFireworksマニアになっていただけるとうれしいです！！^^

長文にお付き合い頂き、ありがとうございました♪

Fireworks CS5/4/3 (速習デザイン) 山口 有由希 技術評論社 2011-12-07 →Amazonで詳しく見る →楽天で詳しく見る