Fireworks標準デザイン講座[CS6/5対応]
菊池信悟(著)
,小野寺健一(著)
/翔泳社
作品情報
【本電子書籍は固定レイアウトのため7インチ以上の端末での利用を推奨しております。】Webグラフィックだけじゃない。Web制作におけるFireworksの本当の使い方Fireworks はCS6 になって、CSS 書き出し機能が充実し、Web グラフィック作成だけでなく、Webサイトのワイヤーフレームやモックアップを作成したり、モバイルサイト用にjQueryMobileテーマのカスタマイズを行えたりと、Web制作にかかせないツールになりました。本書は、このFireworks CS6の基本機能の習得と同時に、ワイヤーフレームの作成からWordPressのテーマデザインまで、WebデザインにおけるFireworksの使い方を学んでいきます。また全30レッスンのカリキュラム形式になっており、本書一冊で手軽に、自分のペースで、楽しく学習を進めていくことができます。Fireworks派もそうでないい人も、満足の一冊です。各レッスンで使用するサンプルファイルは弊社ホームページからダウンロード可能です。※本電子書籍は同名出版物を底本とし作成しました。記載内容は印刷出版当時のものです。※印刷出版再現のため電子書籍としては不要な情報を含んでいる場合があります。※印刷出版とは異なる表記・表現の場合があります。予めご了承ください。
もっとみる
商品情報
※この商品はタブレットなど大きなディスプレイを備えた機器で読むことに適しています。
文字だけを拡大することや、文字列のハイライト、検索、辞書の参照、引用などの機能が使用できません。
この作品のレビュー
平均 3.0 (1件のレビュー)
-
Fireworksについて書かれた本。著者は菊池慎悟さんと小野寺健一さんの二人。二人ともWebデザインのディレクションや制作を仕事にしているようだ。この本は、レッスンを始める前に、ワイヤーフレームを…作成する、ボタンを作成する、バナー・アイコンをデザインする、マウスオーバーと連動した表現を作成する、サイトのデザインとレイアウトを行う、オブジェクトの組み合わせによるパターンデザインを作成する、スライスと書き出しを行う、WordPressのテーマをデザインする、Jquery Mobileのテーマをデザインするという序章を含める全10章で構成されている。
レッスンを始める前にでは、Fireworksの環境や設定について簡単に説明している。パネルやワークスペース、メニューやよく使うツールについて書いてある。ワークフローについても親切に説明されている。
ワイヤーフレームを作成するでは、ドキュメントやガイドを引きシェイプを重ねていきながらワイヤーフレームを作成していく。オブジェクトの長さを計測し、オブジェクト上に長さを表示してくれる機能は便利だと思う。
ボタンを作成するでは、グローバルメニューのボタン画像を作成していく。カラーパレットやグラデーション、テクスチャ、カラーモードの説明が簡単にされている。その他、文字の入力やカーニングやトラッキング、アンチエイリアスについても説明がされていた。
バナー・アイコンをデザインするでは、一歩踏み込んだテクスチャの使い方、パターンなどを使いバナーやアイコン、ヘッダー画像を作成していく。ペンツールやドロップシャドウ、ベベルとエンボス、マスクの使い方が簡単に説明されている。ビットマップ画像の読み込みや補正するツールの使い方もここで紹介されている。Photoshopほどの補正はできないが色の3属性を補正する機能は用意されているみたいだ。
アニメーションバナーを作成するでは、GIFアニメーションを作るステートという機能について説明されている。Flashのオーサリングツールのように画像一枚を一コマとしてアニメーションを作成していく。イージングやループ、ディレイも設定できるようだ。
マウスオーバーと連動した表現を作成するでは、ボタンで切り替わる画像やマウスオーバーで動くキャラクターイラスト、ナビゲーションを作成していく。マスクやクリッピングマスク、ステートの少し詳しい使い方を説明しながら、ボタンを押すと切り替わる画像を作成していく。ステートにマスクした画像を設定し、スワップという機能でボタンと画像を関連付ける。Fireworks上でボタンにマウスを重ねると画像を切り替えることができる。
マウスオーバーで動くキャラクターイラストではシェイプや変形機能を使いイラストを描いていく。描いたキャラクターにホットスポットツールでボタンを登録し、ホットスポットツールで設定したスペースがボタンとして設定され、スワップ機能でキャラクターの画像が切り替わるようになる。
ナビゲーションでは、序盤で作ったボタン画像をシンボルに登録し、マウスオーバー時やマウスダウン時の状態をデザインする。必要な分だけ作成しテキストを変更する。ポップアップメニューエディタを使ったポップアップメニューの作り方なども書いてあった。オブジェクトの組み合わせによるパターンデザインを作成する。ヘッダーやバナーを作成していく。素材を組み合わせてコラージュのようなヘッダーを作成したり、マスキングテープ風の見出し素材などを作成する。パスやストロークを使いアナログ風なヘッダーをデザインする方法も書かれている。
サイトのデザインとレイアウトを行うでは、ワイヤーフレームからカンプデザインを作成していく。マスターページ機能を使い、各章で作成したパーツを配置する。アニメーションシンボルや9スライスなどについても説明がされている。また配置したオブジェクト、テキストにはスタイルを適用する。塗り、線の色をスタイルに登録することで、頻出する同じようなオブジェクトを一括で管理できる。テキストの幅が変わった場合も、スタイルを変更するだけで、適用したオブジェクトを一括で変更することができる。レイヤー共有機能についても説明がされている。サイドバーを下層ページにも表示したい場合、レイヤー共有機能を使うことで実現できる。共有ライブラリという機能も説明されている。Fireworksにはお問い合わせフォームやタブ、ボタンなどのパーツがあらかじめシンボルとして登録してある。必要に応じて共有ライブラリからパーツを配置することができる。
Fireworksの書き出し方法を把握するでは、デザインカンプを出力する方法やデザインカンプからHTMLに使う画像を切り出す方法、モックアップを出力する方法などが紹介されている。前章で配置したデザインからスライスツールを使いガイドを参考に画像を切り出していく。出力する際、画像の代替テキストを設定できるほか、デザインカンプ用のPDFとして出力したり、画像にHTML、CSSを付属させたり、CSSスプライトも出力することができる。スライスした画像は最適化することができる。jpegの圧縮率を変更したり、GIFやPNGの色数を減らすようなこともできるようだ。
ワードプレスのテーマをデザインするでは、デフォルトテーマであるトゥエンティイレブンを編集して新しくテーマを作成していく。テーマを編集する方法は通常2種類あり、一つは最初からHTMLとCSSを作成し、ワードプレス用にクラスやIDを変更する方法、もう一つはFireworksのCS6から実装された機能であるCSSプロパティを利用する方法がある。この章ではCSS3ベースでデザインしたファイルからCSSコードを抽出して子テーマとして適用している。子テーマをワードプレスにインストールするまでが説明されている。ワードプレスのインストールや設定については書かれていない。
Jquery Mobileのテーマをデザインするでは、Jquery Mobileのテーマを作成していく。Jquery MobileのテーマデザインはCSS3で実装されており、アイコンはCSSスプライトで書き出されている。テーマの色はスウォッチと呼ばれ、5パターン用意されている。アルファベットのA~Eがパターンとして割り当てられており、アルファベットを変更することでテーマカラーの変更が可能なようだ。Dreamweaverの5.5ではJquery Mobileに対応した機能が実装されていて、色のパターンを簡単に切り替えることができるそうだ。Jquery Mobileテーマ機能を使ってデザインし、CSSスプライトやCSSファイルを書き出してテーマをカスマイズしている。またAdobeの配色支援サービスkularを使い配色を設定している。
1冊の内容がチュートリアル形式になっており、説明とチュートリアル通りに操作することでFireworksの主要機能を把握することができる。しかし本の通りに作ってみても、ところどころ端折ってあるため本の完成品と同じものは作成できない。WordPressやJquery Mobileについてはおまけ程度の説明になるので、詳しく知りたい場合は別途本を買うか、サイトで情報を集める必要がある。Fireworksの本は初めて読むため学ぶ部分が多くあった。多くはInDesignやIllustrator、Photoshopからのノウハウから得られた機能を合わせたものだ。ワイヤーフレームやカンプのデザインはPhotoshopでしたいと考えているので、ワークフローも含めて勉強になった。メモ的に書き出していったのでだらだら長い感想になってしまった。続きを読む投稿日:2014.11.10
新刊自動購入は、今後配信となるシリーズの最新刊を毎号自動的にお届けするサービスです。
- ・発売と同時にすぐにお手元のデバイスに追加!
- ・買い逃すことがありません!
- ・いつでも解約ができるから安心!
※新刊自動購入の対象となるコンテンツは、次回配信分からとなります。現在発売中の最新号を含め、既刊の号は含まれません。ご契約はページ右の「新刊自動購入を始める」からお手続きください。
※ご契約をいただくと、このシリーズのコンテンツを配信する都度、毎回決済となります。配信されるコンテンツによって発売日・金額が異なる場合があります。ご契約中は自動的に販売を継続します。
不定期に刊行される「増刊号」「特別号」等も、自動購入の対象に含まれますのでご了承ください。(シリーズ名が異なるものは対象となりません)
※再開の見込みの立たない休刊、廃刊、出版社やReader Store側の事由で契約を終了させていただくことがあります。
※My Sony IDを削除すると新刊自動購入は解約となります。
お支払方法:クレジットカードのみ
解約方法:マイページの「予約・新刊自動購入設定」より、随時解約可能です続巻自動購入は、今後配信となるシリーズの最新刊を毎号自動的にお届けするサービスです。
- ・発売と同時にすぐにお手元のデバイスに追加!
- ・買い逃すことがありません!
- ・いつでも解約ができるから安心!
- ・優待ポイントが2倍になるおトクなキャンペーン実施中!
※続巻自動購入の対象となるコンテンツは、次回配信分からとなります。現在発売中の最新巻を含め、既刊の巻は含まれません。ご契約はページ右の「続巻自動購入を始める」からお手続きください。
※ご契約をいただくと、このシリーズのコンテンツを配信する都度、毎回決済となります。配信されるコンテンツによって発売日・金額が異なる場合があります。ご契約中は自動的に販売を継続します。
不定期に刊行される特別号等も自動購入の対象に含まれる場合がありますのでご了承ください。(シリーズ名が異なるものは対象となりません)
※再開の見込みの立たない休刊、廃刊、出版社やReader Store側の事由で契約を終了させていただくことがあります。
※My Sony IDを削除すると続巻自動購入は解約となります。
お支払方法:クレジットカードのみ
解約方法:マイページの「予約自動購入設定」より、随時解約可能ですReader Store BOOK GIFT とは
ご家族、ご友人などに電子書籍をギフトとしてプレゼントすることができる機能です。
贈りたい本を「プレゼントする」のボタンからご購入頂き、お受け取り用のリンクをメールなどでお知らせするだけでOK!
ぜひお誕生日のお祝いや、おすすめしたい本をプレゼントしてみてください。※ギフトのお受け取り期限はご購入後6ヶ月となります。お受け取りされないまま期限を過ぎた場合、お受け取りや払い戻しはできませんのでご注意ください。
※お受け取りになる方がすでに同じ本をお持ちの場合でも払い戻しはできません。
※ギフトのお受け取りにはサインアップ(無料)が必要です。
※ご自身の本棚の本を贈ることはできません。
※ポイント、クーポンの利用はできません。クーポンコード登録
Reader Storeをご利用のお客様へ
ご利用ありがとうございます!
エラー(エラーコード: )
ご協力ありがとうございました
参考にさせていただきます。