Photoshopの基礎の基 -01-


ゆるふわ勉強会で発表した時の資料を詳しく載せます。
「photoshopで効率よくデザインしよう!」です。
これはCS6が出た頃に、「せっかくCS6入っているのだからPSとFWの対決をしてみたら面白いんじゃ?!」という流れで作成したものです。
実際、調べてみたらどっちの方が良いという結論は出ず、どちらにも長所短所があり便利でした。
私はPs側担当でそちらをメインに書いています。
以下、資料です。(自己紹介は省いています。)

Photoshop-fw02

まず、PsとFwについて簡単に比較をします。
大雑把に言うと、
Psは写真加工などの機能が豊富で印刷物などのデザインに適しています。
FwはWebコンテンツ作成が効率よく出来るツールです。

PhosohopのCS6へのバージョアップは新機能の追加は少しに抑えられて、現機能の改良に力が入っています。
この改良によってより効率的な作業が可能となりました。
今回の発表ではPsに焦点を当てて、ところどころFwについても簡単に説明しながらどうすれば「効率よくデザインできるかな?」に焦点を当て、設定方法から説明したいと思います。自分色にカスタマイズです♪

まず、PhosothopCS6。一番初めに目につくのはインターフェイスかと思います。
今までと違って黒いです。
黒い方が慣れれば見やすいのかもしれないのですが、慣れてる方がいい!という方もいるんじゃないでしょうか?
私もそのタイプです。
じゃ、戻しちゃいましょう!
ShiftとF2を同時に押すと明るくなります。
逆にShiftとF1を押すと暗くなります。

次に、自動保存について説明します。

場所は、環境設定→ファイル管理の中で、「復元情報を次の感覚で自動保存」というところがあるのでそこで設定します。

これは新機能ではないので、余談とつけています。(以下、新機能じゃないものには余談とつけています。)
Psはデフォルトだと単位がpxになっていません。
Web制作においてpxの方が作りやすいことも多いので必要に応じて設定を変えちゃいましょう。
環境設定の「単位・定規」で設定します。
ここ、fwでは初めから「px」単位になっています。

次に、バックグラウンド保存について説明します。
ファイルサイズが大きくて保存に時間がかかっても気にせず作業を行うことが出来ます。
処理を待つ時間って2〜3秒でも結構なタイムロスになりますからね。
私は今まで2〜3秒くらいのんびり待てばいいさと思っていましたが、この機能に慣れた後にバックグラウンド機能のないバージョンで保存した際、違和感を感じました。

次はレイヤー検索です。
Fwでは既に「検索と置換」の機能が備わっていますが、今回のバージョンアップでPsにもレイヤー検索機能が追加されました。
「名前・効果・モード・属性・カラー」のところを選択することで検索出来たり
「ピクセルレイヤー・調整レイヤー・シェイプレイヤー・スマートオブジェクト」などボタンをクリックすることで検索出来ます。
赤丸の方は2つ以上の条件で検索出来ます。例えば、テキストレイヤーとスマートオブジェクトのみを検索です。

でも・・・Fwの検索機能と置換機能はスゴいんです。
メニューバーから編集→「検索と置換」をクリックします。
テキストやフォント、カラーを検索したり置換したりすることが出来ます。
作成した後に、色々と微調整で変更することになった際に非常に便利で時間短縮になります。

今まではレイヤーごとにしかレイヤースタイルをつけられませんでしたが、グループにつけられるようになりました。
複数のレイヤーを選択して一括でそれぞれのレイヤーにスタイルをつけることは出来ましたが、後から調節する際にまた複数のレイヤーを選択して変更を適応させるという作業は意外とめんどくさいです。
グループに直接レイヤースタイルをつけるとグループ内の全てのレイヤーにかかるため、一つだけスタイルを適応
し忘れちゃったなどのうっかりミスも減るのではないでしょうか。

また、複数のレイヤーを選択して一気に「コピー・複製」をすることが出来るようになりました。

複製した時って「のコピー」という文字がレイヤーに入っちゃいます。
Fwですと、デフォルトでそのまま同じレイヤー名になります。
コピーと付くのが邪魔で嫌だという方もいるんじゃないでしょうか?
じゃあPhosothopもFwみたいに同じ名前のレイヤーが複製されるようにしましょう。
レイヤーのところの右上に↓があります。そこをクリックし「レイヤーパネルオプション」を開きます。
一番したの「コピーしたレイヤーをグループに「コピー」を追加」のチェックを外してOKを押します。
これで完了です。

次に、文字・段落スタイルについてです。
文字や段落などを保存出来るようになりました。
ページタイトルのスタイルが決まってたりする際、文字スタイルに保存しておくと簡単に同じスタイルをつけることが出来ます。保存したスタイルの設定を変更すると、そのスタイルが適応されているテキスト全てに反映されるので、
後から(サイズ変更や色など)変更がかかった際、まとめて変更することが出来て便利です。
文字スタイルはいくらでも登録出来るので活用していきたいです。

次は切り抜きツールです。
選択ツールで範囲を選択し、切り抜きツールをクリックすると、トリミングに切り替わります。

チェックを外すとトリミングした後でも何度でも範囲を選択し直せます。
後からトリミング範囲を修正する場合に変更しやすいです。
さらに、トリミング時にグリッド・対角比・黄金比なども表示可能です。

何も範囲を選択していない状態から、切り抜きツールをクリックすると、カンバスの外側四隅にTマーク(ハンドル)が表示します。
「上の一ピクセルが選択出来てなかった」などの失敗がグンと減ります。

今までは選択範囲が動いていたが、トリミング時に画像の方が動くようになりました。
直感的な操作が可能になりましたが、慣れている方がいいという方もいるかと思います。
そんな方には・・・

「クラシックモードを使用」にチェックを入れます。
これで従来と同様に選択範囲が動くようになりました。

次に、図形の作成と編集について説明します。
ツールを選択(ここでは長方形ツール)し、カンバスをクリックします。長方形を作成します。
CS6からは、作成した後からでも、「塗り・ストローク・幅・高さ」変更可能になりました。

ストロークオプションで点線にしたり、柄やグラデで塗りつぶしたりとカスタム自由です。
上の画像は全てPsの図形ツールの中の「長方形ツール」から「カスタムシェイプツール」まで利用して作成しました。

Fwはと言えば・・・
初期から搭載されている種類が豊富ですよね。
ハート柄とか可愛い系いいなー
じゃあその柄使う時だけFw使う?
Psじゃ出来ないの?
そんな疑問を持つそこの方!!
→出来ます(キリ

無料の商用利用可能なパターン、色々あります。

直接入れるという手もあります。
Win:[drive]/Documents and Settings/[user名]/Application Data/Adobe/Photoshop/Presets/Patterns/
Mac:Applications/Adobe Photoshop CS6/Presets/Patterns/

Psでは、角丸長方形を作成したら、作成後に角の値(角丸半径)を変更することは出来ません。
でも、Fwでなら簡単に出来ます。

「図形を拡大縮小すると端がぼける」という問題について

今までは、「ピクセルにスナップ」にチェックをつけることで対応していましたが、
Ps CS6からは、初期設定で「エッジを整列」にチェックがついているのでぼけません。

図形の拡大縮小でぼけない設定は前のスライドで説明しました「エッジを整列」にチェック(デフォルト)ですが、
写真の拡大縮小でぼけないようにするには「スマートオブジェクト」で対応します。
なぜ、荒くなるかと言うと、
画像を縮小すると画像の情報が減り、再び大きくすると情報が少なくなっているのに大きくしたため画像が荒くなります。

レイヤーを右クリックし、「スマートオブジェクトに変換」をクリックします。
Fwですと、「シンボルに変換」がこれに相当します。

スマートオブジェクトって何?
どういう場合に便利か?
・デザイン修正などで画像を後から拡大縮小など行う可能性がある場合
・同じパターンを複数作成した場合、全画像一括で編集が可能

一括編集?

→「レイヤーの複製」で複製した場合:
「右クリック→コンテンツの編集」で編集・保存すると、親画像と複製したレイヤー全てに反映されます。

→「スマートオブジェクトの複製」で複製した場合:
それぞれの編集が可能となります。

ポップアップ表示、便利です。

Fwでも編集出来て便利です。

ショートカットキーの追加
ショートカットキーの色々
ショートカットキーを使えばかなり効率が上がります!

画像では一部しか記載していません。ショートカットキー、全部覚えておいて損はありませんよー。
むしろ得です。
Shiftを押しながらそのツールのキーを押すと、種類を変えられます。
例えば、鉛筆ツールが選択されている時に、ブラシツールを選択する場合は
Shift+Bです。

ショートカットキーは自分で割り当てることも出来ます。
編集<キーボードショートカット
または、
Mac → Shift + Alt + command + k
Win → Alt + Shift + Ctrl + k

「スマートオブジェクトに変換」の右の部分をクリックし、割り当てたいショートカットキを押します。
Opt+Shift+F10とか。

拡張機能やスクリプトを入れると色んな機能を追加することが出来ます。
ググってみて下さい♪

Photoshop中心にご説明しましたが、
FireworksにはCSSサポートやAPIアクセスなどPhotoshopには無い機能が満載で、しかもデフォルトで使いやすいような設定がなされています。(px単位など)

どちらを選択するかは必要とする機能
どんな作業をすることが多いかと個人の好み次第

Ps & Fwを使い分けてもよし
拡張機能使ったりして片方のみで作成してもよし

そんな感じです。

ありがとうございました。

最後に、スライドです。