このブログではFireworksのことを中心に書いていますが、仕事ではFireworksはもちろん、PhotoshopもIllustratorも使っています。それぞれのソフトのおいしいところだけをいただく、まさにつまみ食い的に使っている感じです。

今日はFireworksを中に制作している僕から見た、他のAdobeソフトの使いどころを紹介してみます。「普段制作はPhotoshop一本!」「Illustrator一本!」というかたにも使い分けるためのヒントになればと思ってます。

Fireworks:
ワイヤーフレーム、素材の統合、モック制作、画像のスライス

Fireworksが一番強いと感じているポイントはページ機能です。
トップページ・下層ページ数10ページ、これを一つのファイルにまとめて管理することができます。さらにマスターページやレイヤーをページ間で共有することができるので、サイト全体で共通で使うパーツを一元管理でき効率の面で大変役に立っています。

「サイト全体のモックを管理する」という点においては他のAdobeソフトでは難しいものと考えています。どんなときに使っているのかを思い出し書き出してみると、このような感じです。

・ワイヤーフレーム(一人でサイト制作時。ディレクターと組む場合は僕は作りません)
・ページのモック制作
 ├Photoshop、Illustratorなどで作ったグラフィック素材の統合
 ├ボタンやバナー
 ├写真の簡単な補正(明るさを直す程度で解決できそうな写真)
 └文字組み
・画像のスライス、書き出し

Fireworksが苦手とする表現は他のソフトに任せよう

描画に関しては機能の半端さから赤魔道士に例えられてしまいます。たとえば、パスが尋常じゃない数があるとベクター素材をFireworksで開こうとすると固まってしまうこともあります。写真補正については、いろんなカラープロファイルを読めるPhotoshopのほうが安心です。こういうときは臆せずに他のソフトを使っています。

こういうときには迷わず他のソフトを使っています。

Fireworksへの移行は段階を追ってやってくとスムーズ

PhotoshopやIllustratorから少しFireworksを使ってみようという方は、メインビジュアルなどの「ここ絶対に外せない!」という部分だけを今までのツールで制作して、それ以外の部分をFireworksで制作してみることをおすすめしています。

あとで触れますが、PhotoshopやIllustratorで書き出す際にPNG-24で[sRGBに変換]にチェックを入れてWeb用に書き出すと、Fireworksでは色味を極力崩さず読み込むことができます。

BrigdeとCamera RAW:写真の補正

BridgeはExplorerやFinderのようにファイルの一覧を表示するソフトです。このBridgeで写真のRAWデータを開くと、Camera RAWというRAW現像のプラグインが起動します。BridgeCS3からはRAWデータほどに補正はできませんが、JPEGも開けるようになりました。

簡単な色補正程度であれば十分に使えます。しかし、JPEGでもあえてCameraRAWを使う理由というのがあります。

補正情報のコピー&ペーストが魅力的

ホワイトバランス(以下、WB)がずれた写真というは、次の写真もだいたい同じようにWBがずれているんですよね。Photoshopだと1枚1枚丁寧に補正しなくてはいけないところですが、BrigeとCamera RAWを使うと補正情報のコピー&ペーストで一括で補正ができてしまいます。下の例は、RAWデータを補正して、その補正情報をコピペしたときの 例です。

補正後はPhotoshopでリサイズやシャープ

Camera RAWだけではWeb用に書き出すことができないので、Photoshopで開きます。このときの補正した状態を保った状態でPhotoshopで開きます。この後、Web用に縮小し、シャープをかけてPNG24で書き出しをしてFireworksに読み込ませています。

Photoshop:
範囲指定が細かく必要な写真補正、ランダム感の表現を作る

Photoshopは名前のごとく写真を補正する際によく利用します。Camera RAWだけではトリミングはできてもリサイズができなかったり、Web用に書き出すこともできないのでPhotoshopで開くことになります。

Adobe RGBやCMYKなどのファイルを読み込み

PhotoshopはsRGBのほかにもCMYKやAdobe RGBも当たり前のように開けるので色空間がsRGBじゃない写真には必ずPhotoshopを使っています。補正したあとは、PNG24でsRGBにチェックを入れて書き出しというプロセスです。

なぜPhotoshop上からコピーしないかというと、Fireworksに貼り付けると、Fireworksがカラープロファイルを無視して無理矢理sRGBで表示するために表示色がおかしくなります。詳しいことは以前書いた記事を参照ください。

ピクセルベースの画像加工

またPhotoshopは細かい写真加工をするときに便利ですね。しわ・ほうれい線が目立つ人物補正にはパッチツール、肌の目が目立つ補正にはぼかしやダストスクラッチをよく利用します。あとふさふさな犬の切り抜きにもPhotoshopが欠かせませんね。

選択範囲内での調整レイヤーで修正可能なデータに

調整レイヤーがパネルになったCS4からは、気軽に設定値を変えることができるようになりましたね。僕はここからPhotoshopを頻繁に使うようになりました。Fireworksでは範囲指定した箇所だけの補正はフィルタでしか行うことができないので、写真の補正はPhotoshopを積極的に使っています。

多彩すぎるブラシ

ブラシもPhotoshopでは見逃せない魅力です。とくにランダム感、手書き感を演出するときにはブラシは欠かせません。これもFireworksで読み込ませるときにはPNG-24で書き出します。

透過したFaviconをPhotoshopで作る

他にもFireworksでは作れないものがあります。それは透過しているFaviconです。拡張機能でFaviconを作ることはできますが、透過しているFaviconは作ることができません。

ここでPhotoshopのICO書き出しプラグインを使って透過で書き出しています。Fireworksで16x16のPNGでFaviconの元になる画像を制作、Photoshopで読み込んで別名で保存をし、ICO形式で書き出します。

Lightroom:大量の写真補正

LightroomもCameraRAW同様にRAW現像のソフトです。こちらも写真補正に使います。Photoshopは1枚1枚を丁寧に補正していくイメージなのに対して、LightroomはPicasaのようにたくさんの写真をベルトコンベア式に補正していくツールです。

CameraRAW同様に画像に補正情報のコピー&ペーストができる上に、さらに1枚1枚確認しながら微細な補正をしていくときに最適です。ファイルの開く・閉じる、保存がないので、これも効率化に一役買っています。

操作はPicasaやiPhotoなどに似ていて、ファイルを読み込む→写真を補正する→画像を書き出すという流れです。詳しい使い方は、機会ができたときに書きます。

このLightroom、なんと2012年夏からCreative Cloudのなかに組み込まれるようですので、この際に使ってみてはいかがでしょう。大量の補正のときは本当に役に立ちます。

Illustrator:
複雑すぎるベクター素材や自動化しておきたい文字組み

Photoshopがピクセル処理が得意なソフトと言うなら、Illustratorはベクター処理が得意なソフトと言ったところでしょうか。僕は主にFireworksでやるには重たくなりそうなベクターデータの加工、無料で配布されているベクター素材を開いたりと、こちらも同時起動していることが多いソフトです。

ベクターデータの細かな作り込みにはIllustratorで

僕にとってのIllustratorは、パスの細かい作り込みの段階に達したところで起動します。それまではFireworksでざざっと作って、パスをIllustratorに貼り付けて加工していきます。

CS5以降は線の先端と矢印の先端が合うように設定できるようになっていたり、パスの線の中で太さを自在に変えることができるようになり、ランディングページのときには矢印をよく使うのでIllustratorは常時起動しています。

Fireworksの場合、サイズの小さいベクターデータはつぶれて汚くなりやすいのでPhotoshopのときと同様にPNG32で書き出して読み込みます。会社のロゴをAi形式でもらった場合も、PNGに書き出してからFireworksに読み込んでいます。

文字を効率よく組む

文字組みをFireworksで再現できることがわかったので、以前よりもIllustratorを使う機会が急に増えました。

Fireworks中心に制作しているので、慣れのせいか手動で文字詰めを行う場合はFireworksのほうが早かったりしますが、大量の見出し画像、本文をしっかり文字組みした状態で画像にして書き出したいというときにはIllustratorで作ってFireworksにペーストしています。

まとめ:自分が望んでいる表現が効率的に作れる道具は何か

自分が使っているFireworksをベースにWeb制作の多い僕のAdobeソフトの使い道を書き出してみました。Adobeのグラフィックソフトはいっぱいありますね…。

数年前まではFireworks以外はほとんど使わなかったんですが、「欲しい表現はなんとしても手に入れる。しかも楽に手っ取り早く!」と意識するようになってからPhotoshop、Illustrator…というように使うソフトが増えていきました。

インストールはできるけど使っていないソフトを今一度見直して、既存のツールと組み合わせて自分の効率化や表現力アップに結びつけられそうか考えてみてはいかがでしょう。