講師だって、最初は初心者だもの[番外]Fireworks Vs. Photoshop 対決! 〜 本番 〜/森 和恵

投稿:  著者:  読了時間:9分(本文:約4,000文字)


こんにちは! 森和恵です。

11月も後半に入り、師走の足音が聞こえてきました。街中では、クリスマスイルミネーションが始まったりしていて......気が焦るというか、年末が近づいてもの悲しくなるというか、秋深しですね。

さてさて。今回は、先日登壇したイベントの報告と、「Fireworks Vs. Photoshop 対決」から、Fireworks派がPhotoshopを使ってみて思ったことをお届けします。




●CSS Nite in OSAKA, Vol.38 「なくなったわけじゃないけど、Fireworksを使わないワークフローを考えなきゃいけないかも会議」

11月12日から、大阪でイベントが行われました。夜開催にもかかわらず、約50名の方にご参加頂きました。男性より女性の方の方が少し優勢で、Web系のお仕事をされている方が多かったようです。会場の雰囲気的には、Fireworks派の方が目立ったかなと思います(会のタイトルがタイトルだけに)。
< http://osaka.cssnite.jp/vol38/ >

私の担当は、「Fireworks VS. Photoshop でバナーを作ってみた」でした。普段Fireworksを使っている私から見た、Photoshopの使いごごちを比較する形でお話ししていきました。

まったく同じ機能ではないですが、Fireworks機能をPhotoshop機能で代替してみました。

(Fireworks)→(Photoshop)
シンボル  → スマートオブジェクト
パスツール → ライブシェイプ+属性パネル
テクスチャ → パターン塗り
フィルター → レイヤー効果
グループ  → レイヤーグループ
スライス  → Generator(生成)※CCのみ

なお、セッション当日に使ったスライドを下記にて公開しています。

【 Fireworks派から伝えたい、イマドキのFireworks活用法 】
< http://www.slideshare.net/r360studio/cssnite-osaka38-mori-kazue >

●Photoshopのレイヤーに対する誤解がとけた

Fireworks派といいつつも、私はPhotoshop歴は割と長くて、1994年 Photoshop 3.0からのユーザーです。ようやくレイヤー機能が導入されて、Windows版がリリースされたバージョンです。

本職がセミナー講師なのですが、一番よく教えていたバージョンがPhotoshop 5〜6の間でした。いまと比べるとずいぶん原始的な時代でしたね。機能が少ないので、操作手順の多いこと......。グラフィック操作の初心者に教えるには、酷なソフトだなぁと思っていました。

私自身は、レベル補正とかトーンカーブとか使って、写真加工をするのはとても好きだったのですが、どうにも苦手だったのが「レイヤー」の扱いでした。画像重ねるのもレイヤー、テキストを打つのもレイヤー......。

「レイヤー分け超メンドクサイ!!!」と思っておりました。

そこで出会ったのが、レイヤー分けをほとんどしなくていい、Fireworksです。オブジェクトを選択して、そのまま操作できるなんて、超楽ちんでした。

それからは、写真の色補正だけをPhotoshopで行い、すぐにFireworksに持ち込んでレイアウトから最終アップをしていたのです。

【 CSS Nite LP22フォローアップ 『Photoshopの色補正ツールを極めよう』 】
< http://cssnite.jp/archives/post_2383.html >

ですが、最近のPhotoshopって、なにも意識しなくても、レイヤー分け勝手にやってくれるんですね。今回使ってみて、楽さを実感しました。

例えば、写真を部分的に選択→コピー&ペーストすると、新しいレイヤーを作ってから貼りつきます(昔は、同じレイヤーに貼りついていたので、苦労していました)。

レイヤーを選択する操作も、[移動]ツールのオプションで「自動選択」と「バウンディングボックスを表示」にチェックを入れておけば、オブジェクトを直接選択できます。選択中のオブジェクトを消すときは、[DEL]キーでレイヤーごと削除されます。

「えっ? えっ? これ、Fireworksと同じじゃね?」と、その変化を知った時に驚き&焦りました。しばらく見ていないうちに、ツンデレで使えなかった後輩が、素敵な相棒に変わるかも?的な感覚でした。

補足:ちょっとした不満

グループレイヤーにしている時に、グループだけを選択する簡単な方法がないのかなと思います。[移動]ツールのオプションで[グループ]を選べば、グループ単位で選択ができるのですが、今度は個別に選択することができない......。なにかキーを押しながら操作すれば、グループ単位で選択とかできれば素敵なのですが。

もう一つは、オブジェクトの複製を「コピー([Ctrl+C])&ペースト([Ctrl+V])」でできると嬉しいなと思います。[Alt]キーを押しながら、ドラッグすれば複製できるんだけど、ちょっとやりにくくて。

この二点、うまい方法がないかなと思って調べ中です。

●Photoshop のパス操作はずいぶん改善されている

Photoshopは、基本的にビットマップを扱うソフトなので、ベクトルデータ(パス)は扱えませんでした。パスオブジェクトに色を塗る時は、ベタ塗りしたレイヤーにパスでレイヤーマスクを設定する方法でした。こんなの違う! って思ってました。

その後に出会った、ベクトルデータの扱いをllustratorっぽくできるFireworksが好きになるのも当然と言えば当然(モニョモニョ)......。この辺は、個人の好みもありますね。はい。

ですが、最近のPhotoshopは様子が変わりました。長方形ツールで描いたオブジェクトは、「長方形」オブジェクトとして扱われます(レイヤーを見ると「長方形」と表示。Photoshop的には、ライブシェイプと呼んでいるようです)。

名称が変わったから、だからどうした? と思ってしまうのは、気が早い。大事なのはここからで、[属性]パネルを使って、オブジェクトの「位置・サイズ・塗り・線・角丸」などの属性を数値でしていすることができるんです!(※スライドの13ページをご覧ください)

FireworksやIllustratorでは、ごくごく当たり前のことですが、Photoshop派としては、悲願の機能じゃないかなと思います。後からなおすのがマジで楽ちんです。わーい! 今後も、Photoshopのパス操作が機能アップしていくんじゃないかな、と予感させてくれました。

補足:ちょっとした不満

バグだと思うんですが、この便利な[属性]パネルが表示しないことがあります(属性パネルに「マスク」しか表示されない)。その時は、オブジェクトを再選択するか、オブジェクトのレイヤー名を[Alt]キーを押しながらクリックしてみてください。無事に表示されます。

●登壇しての感想(フォローアップメールから抜粋)

今回は、Fireworks派の方に、Photoshopとの機能比較をお伝えししたのですが、後でアンケートを拝見してみると、「Photoshopも使ってみよう!」とのご意見があり、お話してよかったな! と思う次第です。

最後にまとめでもお話しましたが、「Fireworks終了のお知らせ」のうわさが飛び交った時にお恥ずかしい話、私自身がツールに固執していて愕然としたものです。

その後に別のツールを使って思ったことは、「ツールに使われるのではなく、使う自分が主役なんだ」ということでした。

本職ではないので私は、デザインセンスにかけるところはありますが、少しでも「伝えたいことが、効率的に伝わる表現」をいつも模索します。また、「少しでも効率的に時間の無駄なく作業を進めたい」も考えます。

そういった制作者の欲求を満たすツールを貪欲に探す行為は、無駄ではないんだなと感じました。ツールもそうですし、さまざまなWeb技術もそうですよね。きっと。

勉強し続ける......というのは、お金にならなくて、孤独で、しんどいことですが、CSSNiteをはじめとして、Web業界では多くの勉強会が開催されています。参加して「ひとりじゃない」感を味わえば、モチベーションもあがるよねと感じます。

また、どこかの勉強会でお会いしましたら、気軽に声をかけてください。みなさんと一緒に頑張りたいな、と思っております。

......さて、今回はここまで。

来月は2回登壇予定なので、続物で今年のまとめ的なことをお話ししようかなと思っています。では、来月初めにお会いしましょう!(^θ^)

※記事へのご意見・ご要望は下記より受付ます。
< http://goo.gl/rN5Dg >

【 森和恵 r360studio 〜 Web系インストラクター 〜 】
site < http://r360studio.com > < twitter: http://twitter.com/r360studio >
< mail: r360studio@gmail.com >
サイト制作の教科書 r360study:< http://www.facebook.com/r360study >

今月末(11月30日)に、久しぶりに新ネタのセミナーをします。

ブラウザを使って手軽にホームページの作成ができるサービス Jimdoの入門講座です。御好意で頂いたグッズプレゼントもあり。ぜひ、ご検討ください。

【いちから学ぶ Jimdoスタートアップ入門】
< http://www.sansokan.jp/events/eve_detail.san?H_A_NO=16252 >