Webデザイナー視点から見たPhotoshop CS6の進化したところ

数週間前から、「Adobe Photoshop CS6 は写真合成機能が大幅に向上している」という報道を見ることが多くなってきました。 例: GIZMODO

しかし、Webデザインに関係ありそうな部分といえば「段落スタイル」と「パフォーマンスの向上」くらいで、これはスルーした方がいいかな…と思っていたのですが、試しに CS6 Windows 版のベータ版を使ってびっくり。Webデザインに関連する部分も大きく進化していました。

正直、「これは買い」だと思っています。

この記事では、私がこれまでに見つけた Adobe Photoshop CS6 の Webデザインに関連しそうな部分の変更点についてまとめています。
一部、私のWebデザインスクール の生徒の方が見つけたものもあります。この場で御礼申し上げます。

Photoshop CS6 beta

※この記事は Photoshop CS6 ベータ版(Windows版)をもとに書かれているため、実際にリリースされるバージョンでは機能が変更される可能性があります。

シェイプ関係(長方形ツール・楕円形ツール等)

長方形を作成

サイズを指定して新規シェイプを作成することが簡単になりました。
オプションバーでサイズを指定できることはもちろん、「長方形ツール>カンバス内をクリック」でサイズ指定ダイアログが表示されます。

ストロークオプション

ストローク(線)のサポート。レイヤースタイル「境界線」を使わなくても、シェイプツールのオプションバーから塗りだけでなく線も設定できるようになりました。

ストローク

破線のサポート。オプションバーから「ストロークオプション」でプリセットの破線(3種類)を選べるだけでなく、詳細オプションでダッシュ・間隔を詳細設定できます。線端・角なども Illustrator 同様細かく設定可能です。
自分で設定した破線は保存することもできます。

もちろん、楕円やカスタムシェイプに対して破線を設定することも可能です。

シェイプレイヤーのエッジのぼけの防止。200%や300%に拡大した状態でシェイプレイヤーを選択し、Ctrl(command)+ T を押してレイヤーを移動しても、シェイプレイヤーのエッジがぼけなくなりました。

[追記] 移動ツールでシェイプをドラッグしている時に、XとY座標の移動値が表示されるようになりました。

ペンツール・フリーフォームペンツール

ストローク(線)および破線のサポート。

Webコーディングスクール 体験レッスン受付中

レイヤー関係

レイヤーパレット

レイヤーグループに対するレイヤースタイルのサポート。
レイヤー個別ではなく、レイヤーグループ全体に対してレイヤースタイルがかかります。

複数のレイヤーを選択し、Ctrl(command)+ J でまとめて複製のサポート。
(CS5ではショートカットキーによる複数レイヤーの複製ができず、新レイヤーアイコンにドロップする必要がありました。)

複数のシェイプレイヤーの統合をサポート。複数のシェイプレイヤーを選択し、Ctrl(command)+ E でシェイプを保ったまま、ラスタライズせず統合できるようになりました。

整列

パス

さらに、複数のシェイプレイヤーを1枚に統合した状態で、パスコンポーネント選択ツールを使って1つのレイヤー内にある複数のシェイプを選択し、整列・カンバスに揃えて整列・結合・前面シェイプを削除・重なる領域を中マドなどがサポートされました。

レイヤーパネル

レイヤーパネルによる、レイヤーの絞込みのサポート。
種類(調整レイヤー・テキストレイヤー等)、レイヤー名、効果(ドロップシャドウ・境界線等)、描画モード、属性(表示・非表示・空白・リンク・ロック等)、レイヤーカラー(レイヤーの瞳の部分をクリックしてレッド・ブルーなどが選択された状態になっているか)などあらゆる条件でレイヤーの絞込みが可能になりました。

余談ですが、私が作成した サイズと座標を指定してシェイプを作成するJSX を使用すると、レイヤー名が「W 320 H 200 R 4」のようになるため、シェイプサイズおよび角丸によるレイヤーの絞り込みも可能になります。

切り抜きツール

角度を補正しながら切り抜きのサポート(クラシックモードへの切り替えも可能)。

文字スタイル・段落スタイル

段落スタイル

InDesign のように、文字スタイルや段落スタイル、要するにフォントの種類やサイズなどがスタイルとして保存できるようになりました。
うまく使えば、デザインカンプ作成が捗りそうです。

段落スタイルオプション

段落スタイルオプション

段落スタイルオプション

段落スタイルオプション

しかも、今までは Illustrator からペーストしないと使えなかったような細かな文字設定が使えるようです。

テキスト[追記]

Lorem Ipsumをペースト

テキストツールでテキストエリアを作成し、メニューの「書式>Lorem Ipsumをペースト」を選択すると、ダミーテキスト(英文)が入力されるようになりました。

アピアランス

アピアランス

初期設定ではUIがブラックですが、「環境設定>インターフェイス」から濃いブラック〜薄いグレーまで4段階で設定可能です。

自動保存・復元

自動保存オプション

「環境設定>ファイル管理」から5分〜1時間の間隔で自動保存が可能です。

起動した時は、前回開いていたファイルが、たとえ保存していなかったとしても自動的に復元して表示されます。

何らかの理由により Photoshop が強制終了された際も、自動的に復元して表示されます。

カラーピッカー[追記あり]

カラーピッカー

カラーピッカーで、16進数カラーコード入力欄がこれまでの6桁から「8桁」入力できるようになっていました。

どうやら、カラーコードの前に # や 0x をつけても正常に認識されるようにこうなったみたいです。

パフォーマンス

全体的なパフォーマンスの向上。
起動速度はもちろん、新しい Adobe Mercury Graphics Engine という描画エンジンにより描画速度も向上しました。

Amazon に Adobe CS6 特設コーナーあります。

Amazon CS6ストア

最近の記事

Web制作関連動画

メルマガ会員向けの「コーダーにも役立つ補完AI『Codeium』の使い方」の動画を期間限定で公開しています。
CodeiumはGitHub Copilotと似ていますが、CSSなども補完できて、今登録すれば無料で使えます。

メルマガでは、Web制作者のためのAI活用やWordPress関連の動画など、さまざまな特典があります。ご興味ある方は、ぜひメルマガにご登録ください。
Index