5月27日に、渋谷 LightningSpot にて Webデザイナーのための Adobe CS6 検証会 をひらきました。
日曜の開催にも関わらずたくさんの方にお越しいただき、CS6 について熱い議論が交わされました。
ご参加いただいた皆様、ありがとうございました。
CS6 検証会では、Photoshop、Illustrator、Fireworks はもちろん、Dreamweaver、最後は VPS など CS6 と関係ないところまで話が飛んだのですが、この記事では Photoshop CS6 と、Illustrator CS6 の進化したところと不具合などについてまとめたいと思います。
Photoshop CS6 の進化したところや活用法
Web制作に関係ある機能の多くは Webデザイナー視点から見たPhotoshop CS6の進化したところ という記事に既に書いていますのでそこは省きます。
ここに書いていないものだと、以下のような話が出ました。
複数レイヤーをまとめてロックしたり、ロック解除したりできる。
レイヤーの絞込み機能で「属性: ロックされたレイヤー」で絞り込んでまとめてロック解除すると楽。
レイヤーの絞り込み機能は「ダメな PSD データ」のあぶり出しに使える。
例えば「レイヤースタイル: 乗算」でドロップシャドウかけたり、「レイヤースタイル: スクリーン」で光彩（外側）をかけたデータを持ってこられて「これ CSS3 でお願いします！」と言われた時に役立つ。
「文字スタイル」「段落スタイル」は積極的に使用したほうが良い。大規模案件など、デザイン変更があった際に変更漏れを防げる（はず）。
「文字スタイル」「段落スタイル」パネルは、オプションで「文字スタイル/段落スタイルを読み込み」という項目があるが、これは別の PSD からスタイルだけを読み込むことができる。
ということは、大規模案件を複数のデザイナーがデザインする場合、共有フォルダに「文字スタイル/段落スタイル用PSD」を入れておき、社内で共有すると良いかも。
Shift + F1 or F2 で UI の色を濃くしたり薄くしたりできる。カンバス外を右クリックするとカンバス外の色を変更することもできる。
写真の時は黒い UI の方が良いかも。Webデザインの際はライトグレーの UI が良いという意見も多いが、iPad などタブレット向けのサイトのデザインも増えてきているので、黒の方がかえって良いという考え方もある。
長方形ツールで、カンバス内でクリックすると幅と高さを入力するダイアログが表示されるようになったのは良い。
ただ、座標までは指定できないので 私が作成した JSX でシェイプ作成した方が便利かも。
[追記]Mac で Google日本語入力を使用している場合、日本語入力オンの状態で V や M キーなど押してもツールが切り替えられるようになりました。→ Photoshop 側の対応ではなく Google日本語入力側の対応のようです。CS5でもできるようになっています。
結論として、Photoshop でWebデザイン制作する方は CS6 推奨。まだアップデートしてない方は、今すぐアップデートするか Creative Cloud を契約したほうが良いかと思います。
おまけ: Photoshopの3D機能について
3D機能について。例えば長方形ツールでシェイプを作成し、メニューの「3D＞選択したレイヤーから新規 3D 押し出しを作成」をクリックすると「3D レイヤーを作成しようとしています。3D ワークスペースに切り替えますか？」というダイアログが表示されるので [はい] をクリック。すると、パネル類が 3D 編集用になります。
ここで、カンバス内で左下などにドラッグすると3Dになったレイヤーが回転（カメラの位置が移動）します。
「3D＞レンダリング」をクリックするとレンダリングが開始します。
レンダリングを停止したい場合はどこかをクリックするか、何かキーを押します。
ただ、初期設定のままだと、MacBook Air（Core i5）で長方形1つレンダリングするのに約5分もかかります…
設定を変更するには、「環境設定＞3D＞高品質しきい値」をデフォルトの5から1に変更すると10秒ほどでレンダリングが終わります（ただし汚い）。
これは、どうやらレンダリングを途中で中止しているだけのようなので、高品質しきい値を変更せず好きなところで止めるというやり方もありかなと思います。
ただ、デフォルトの高品質しきい値5は高すぎると思っていて、一般的には3か4で十分だと思います。
「ファイル＞Web またはデバイス用に保存…」で書きだして完了。
ワークスペースは「初期設定」などに戻しておきましょう。
ちなみに、同じ要領で文字を 3D にすることもできます。
設定: 影をぼかすには「3D」パネルの下の方にある「無限遠ライト 1」の「ソフトネス」を10%に
表面のテクスチャは「Stocker.jp 膨張マテリアル」のテクスチャを「オーガニック オレンジピール」に「Stocker.jp 押し出しマテリアル」を「綿の布」に
「3D＞コンテンツを入手」をクリックすると ADOBE® PHOTOSHOP EXTENDED® 3D コンテンツ というページが表示されます。
このページでは Photoshop で制作した 3DCG が紹介されているのですが、本当に Photoshop だけで制作したのでしょうか…
ちなみに、このサイトでは色々な 3D オブジェクトを無料で入手できます。
例えば、Bed 3D Model というページにあるベッドの 3D 素材をダウンロードし、拡張子が .3ds のファイルを Photoshop で読み込み、掛け布団（？）に Photoshop にデフォルトで入っていた花柄バンプテクスチャを割り当ててレンダリングするとこんな感じになりました。
私は以前、Blender という無料の 3DCG ソフトを使ってキャンペーンページのタイトル画像を作ったりしていましたが、Photoshop だけでもその程度ならなんとかなりそうな気がしてきました。
Metasequoia というモデリングツール + Blender で こんな 3DCG を作ったこともあるのですが、頑張れば Photoshop でもこんなものも作れるのでしょうか。
[追記]Photoshop CS6 の 3D チュートリアル
- Use Photoshop CS6 to Create a Micro Machines Inspired Scene | Psdtuts+
- Photoshop Tutorial | Discover Photoshop CS6’s new 3D tools
うまく使いこなせば表現の幅が広がりそうな気はしますね。
Photoshop CS6 の不具合やいまいちなところ
「レイヤースタイル＞境界線」で境界線の不透明度を下げると、境界線だけでなく元のレイヤーの不透明度まで下がってしまう謎の挙動は CS6 でも健在。
しかも、不透明度が下がった部分の下のレイヤーが見えるケースと下のレイヤーが見えないケースがあるっぽい（？）
下の画像は、オレンジの長方形シェイプに黒い境界線を内側10pxでつけ、その境界線の不透明度を下げたもの。
Windows のみ、レイヤースタイルダイアログを表示した時に Adobe Help が表示されてしまう問題が健在。これ CS2 の頃からあったような…
「環境設定＞インターフェイス＞UI のフォントサイズ」を大にしてもほとんどフォントサイズが変わらない。カメラ趣味のおじいさんで Photoshop 使ってる人もいるので、もっと文字の大きなモードがあったほうが良いのでは。
Illustrator CS6 の進化したところや活用法
Illustrator CS6 の最も大きな変更はインターフェイスの刷新ではないかという話。
レイヤー名の変更がインラインでできる、フォント名の部分をクリックして上下キーで変更できるなど。
カラー・グラデーションパネルが縦に伸びたりもするようになりましたね。
ビットマップ画像をトレースしてパスにする機能も強化され、無駄なアンカーポイントが減ったほか、「画像トレース」パネルで微調整できるようになりました。
オブジェクトからパターンを生成する機能 もできました。
線にグラデーションをつける機能もできました。
グラデーションのかけ方は3種類から選べます。
グラデーションメッシュへの変換も可能です。
印刷にも出せるそうです。
Illustrator CS6の不具合やいまいちなところ
文字パネルで、command+クリックで値の初期化ができない。
行送りのアイコンをダブルクリックしても、行送りが文字サイズと同じ値にならない。
64bit 対応や地味な改良はされているが、Webデザイナーが Illustrator CS5 から CS6 にアップデートすべきかと言われると微妙なところ。
ちなみに、Adobe CS6 のバグに関しては CSS Nite の鷹野さんが Facebook にまとめています。
