Photoshopで効率よくデザインしよう！

MARIE SUENAGA

末永 まり絵（みま） !　 WEBデザイナー 　 コーダー 　 講習会「ワードプレスで作ったサイトをプラグインでカスタマイズ」 WordCrab東京2012　ライトニングトーク　とか

! 　ブログ　→ http://suema-r.com/blog 　twitter → @mima_v

写真加工などの機能が豊富で 印刷物などのデザインに適している。

Webコンテンツ作成が効率よく出来る。

Photoshop　と　Fireworks

画像編集

Photoshop CS6 新機能の追加

＋ ユーザーの声に基づいて現機能の改良

より効率的にパワーアップ

インターフェイスが黒い慣れてる色がいい！という方・・・

Shift　+　F２　明るく Shift　+　F１　　暗く

復元情報を自動保存急にPCが固まって強制終了

保存していない！！とパニくらなくてもOK !

一度も保存していないものでも再起動すると自動保存された状態の画像が表示されます。

※デフォルトでは10分置きの設定

自動保存の設定場所環境設定 → ファイル管理

定規などの単位をpxに変更

環境設定　→　単位・定規

Fireworksではデフォルトで「px」表示になっています。 Photoshopも変えちゃいましょう！

余談01

バックグラウンド保存ファイルサイズが大きくて保存に時間がかかっても バックグラウンドで実行され、気にせず作業続行が可能

地味にいい。

レイヤー検索名前・効果・モード・属性・カラー

ピクセルレイヤー用フィルタ 調整レイヤー用フィルタ シェイプレイヤー用フィルタ スマートオブジェクト用フィルタ

→これは、２つ以上の条件で検索可能

ex.）テキストレイヤーとスマートオブジェクト

Fireworksの検索機能や置換機能が便利編集 → 検索と置換

「あいうえお」テキストレイヤーを２つ準備 「あああ」へ置換

完了

フォントやカラーなどの検索/置換も

レイヤーグループに効果今まではレイヤーごとにしかレイヤースタイルをつけられなかったのが、グループにつけられるように。

ここ

複数レイヤーの複製

レイヤー、一枚ごとにしか複製出来なかった

複数選択してまとめて「複製」可能に

「～のコピー」をレイヤー名に入れない複製すると「～のコピー」と表示されるFwだと複製しても同じレイヤー名に＞＜

設定変えちゃいましょう

チェックを外す

余談02

文字／段落スタイル文字や段落などを保存出来るようになりました

ダブルクリック

切り抜きツール

!

２．切り抜きツールをクリック １．選択ツールで範囲を選択

３．トリミングに切り替わる

切り抜きツールチェックを外すとトリミングした後でも 何度でも範囲を選択し直せる

トリミング時に グリッド・対角比・黄金比など表示可能

※後からトリミング範囲を修正する場合に変更しやすい

切り抜きツール

１．何も範囲を選択していない状態 ２．切り抜きツールをクリック ３．カンバスの外側四隅にTマーク（ハンドル）が表示

コレ

便利！

切り抜きツール今までは選択範囲が動いていたが、 トリミング時に画像の方が動くように

直感的な操作が可能にでも慣れているやり方が・・・

切り抜きツール「クラシックモードを使用」にチェック

これで従来と同様に選択範囲が動くように。

図形作成＆編集サイズ指定で

１．ツールを選択（ここでは長方形ツール） ２．カンバスをクリック ３．長方形を作成

作成した後からでも、 「塗り・ストローク・幅・高さ」変更可能

図形作成＆編集ストロークオプションで点線にしたり 柄やグラデで塗りつぶしたりとカスタム自由

サイズ指定で

図形作成＆編集

Fwはと言えば・・・

初期から搭載されている種類が豊富

ハート柄とか可愛い系いいなー じゃあその柄使う時だけFw使う？ Psじゃ出来ないの？ →出来ます

サイズ指定で

図形作成＆編集

商用可能なパターン色々

1.検索

２.ダウンロード→解凍

３.歯車→パターンの読み込み

４.「～.pat」形式を選択

サイズ指定で

図形作成＆編集または、直接入れる

[drive]　Documents and Settings　 [user名] Application Data Adobe

Photoshop　Presets Patterns

Applications Adobe Photoshop CS6 Presets Patterns

¥C: とか

Win

Mac

サイズ指定で

図形作成＆編集

★ 角丸長方形作成後に角の値（角丸半径）を変更することは出来ない。

Fwでは簡単に！

サイズ指定で

図形作成＆編集

図形を拡大縮小すると端がぼける ! 今まで： 「ピクセルにスナップ」にチェックをつけることで対応 Ps CS6から： 初期設定で「エッジを整列」にチェックがついているのでぼけない

サイズ指定で

写真の拡大縮小には「スマートオブジェクト」で対応

スマートオブジェクト

図形の拡大縮小には「エッジを整列」にチェック（デフォルト）

※Fwでは「シンボルに変換」がこれに相当

画像を縮小すると情報が減り、再び大きくすると 情報が少なくなっているため画像が荒くなるため

1.レイヤーを右クリック 2.スマートオブジェクトに変換

余談03

スマートオブジェクト

●デザイン修正などで画像を後から拡大縮小など行う可能性がある場合

どういう場合に便利か？

●同じパターンを複数作成した場合、全画像一括で編集が可能

一括編集？

余談03

スマートオブジェクト

元画像

→「レイヤーの複製」で複製した場合： 「右クリック→コンテンツの編集」で編集・保存すると、親画像と複製した レイヤー全てに反映される !→「スマートオブジェクトの複製」で複製した場合： それぞれの編集が可能

余談03

自由変形で高さと幅のポップアップ表示

白四角（画像では左上）からの位置（X: Y:） 拡大縮小の%(W: H:)

自由変形で高さと幅のポップアップ表示

幅・高さ・左からの位置指定可能

ショートカットキーの追加ブラシツール

ブラシツール選択→Ctrl + Alt +右クリック長押し

直径/硬さ/不透明　値が表示

上下移動：硬さ変更 左右移動：サイズ変更

ショートカットキーを使えばかなり効率アップ！

ショートカットキーの色々【一部ご紹介】

V M L W C I J B S Y E G

O P T A U H Z

半角で「v」をクリックすると 移動ツールに。

D　黒文字/白背景 X　文字色背景色入れ替え

鉛筆ツールではなくブラシツールを選択したい場合 Shift + B

余談04

ショートカットキーの追加自分で割り当てることも可能編集＜キーボードショートカット

または、 Mac → Shift + Alt + command + k Win → Alt + Shift + Ctrl + k

説明文が下の方に表示されて分かりやすい

余談05

ショートカットキーの追加こんな感じで変更

余談05

拡張機能やスクリプトを入れてみる

Win 　→　C:\Program Files\Adobe \ Adobe Photoshop CS６ \ Presets \ Scripts Mac　→　Applications \ Photoshop CS６ \ Presets \ Scripts

・角丸変更 ・オブジェクトの等間隔分布 ・複数のオブジェクトのカラーをまとめて変更!

色々。

Photoshop中心にご説明しましたが、 FireworksにはCSSサポートやAPIアクセスなどPhotoshopには無い機能が満載で、しかもデフォルトで使いやすいような設定がなされています。（px単位など） !どちらを選択するかは必要とする機能 どんな作業をすることが多いかと個人の好み次第 !Ps & Fwを使い分けてもよし 拡張機能使ったりして片方のみで作成してもよし !そんな感じです。

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