【非デザイナー向け】Photoshopで実務がこなせるtipsその1

ソフトなんだから誰でも使えると思ったら大間違い！
どうやって使えばいいか全然分からないPhotoshop！
※嘘

そんなPhotoshopを、ランチェスターのフォトショのペテン師が解説するシリーズです。

作業中にどうしても画像を作らなくちゃいけなくなったエンジニアさん、
試しに画像がほしくなっちゃったディレクターさん、
コーポレートサイトで使う画像を作らなくちゃいけない広報担当者さんなどなど、
とりあえずサクッとこんな画像を用意したい！という非デザイナーさん向けです。

つまり文言変えるだけ・大きさ変えるだけなどの「作業」としてのPhotoshopの使い方ですね。
ちゃんとデザインを作らなくちゃいけない場合はデザイナーさんに頼みましょう。

まずはワークスペース

パーツの切り出し・同型パーツ量産・画像のリサイズ・簡単な画像制作をおこなう私のワークスペースはこちらになります。
まあ好みの問題ですが、私が4年かけて行き着いた理想形ですので参考までに。
※これはPhotoshopをどう使うか（写真加工・イラストなど）でかなり変わってきます。

(1)
ツールたち。初期起動時から絶対に出てます。まあ説明は必要ないかと思われます。
ガチ勢は滅多にクリックしません。すべてショートカットキーで切り替えます。
ちなみにこれは「移動ツール」が選択されている状態。（ちょっと背景が濃い）

(2)
ここに現在選択されているツールのオプション的なのが出ます。
「移動ツール」は自動選択とバウンディングボックスを表示にチェックを入れることをお勧めします。
自動選択は「グループ」と「レイヤー」が選択できますが、基本的に「レイヤー」にしておいた方が感覚的に理解しやすいです。

(3)
常時出ている必要はないがよく使うもの。
私はヒストリー・文字・色調補正などを入れています。

(4)
頻繁に使用するもの。

「ナビゲーター」は必須です。
限界まで拡大してピクセル単位で細かく見る必要があります。見てください。
なんだか画像がボヤッとしてることってありますよね。
ピクセルにちゃんと合わせないとそうなります。
CCは自動的に合うみたいですが、CS5以下はそうではありません。ぼやけます。

「情報」もかなり使います。
選択しているオブジェクトの大きさなどが表示されるので、描画しながら大きさを調整できたりします。
※前述の通りCS5以下はピクセルに正確に沿わないので注意

そしてみんな大好き「レイヤー」
分からなくてもとりあえずパーツごとに分けときゃいいです。
迷ったら分けよう！そうすれば悪いことは起こらない！
デザイナーさんから頂いたpsdを見る機会があれば、どういう風にレイヤーが分かれているかを見てみるといいですね。

(3)と(4)は[ウインドウ]タブをクリックするといろいろ出てきます。

余談ですが[表示]タブ内にある「定規」も便利です。そこからドラッグすればガイドがひけます。

ようやく作業

それでは「こんなものCSSで描けよ」という感じのボタンを作りながら、
Photoshopの機能を見ていきましょう。

まずは新規作成

ドキュメントの種類は「Web」を選択してください。
Webはピクセル、US標準用紙はインチ、日本標準用紙はミリメートルという感じで単位が変わります。
他の設定はとりあえず良いです。とにかくWebはピクセルです。

アートボードができたら、角丸長方形ツールを使って図形を描きます。

ボタンの形を自由に決めるとしたら、とりあえず長方形か角丸長方形にしましょう。
楕円とか多角形とか、ちょっと変わった形にしてみよ☆はやめておいた方が無難です。
だから円形とかイガイガした吹き出しとかワー◯アートみたいなのはやめろ！絶対にやめろ！

ドラッグして図形を描くと、自動的に「属性」ウインドウが出ます。たぶん自動的に出たはず。

こいつで角丸のサイズなども変更できます。
ちなみに角丸の場合は、あまり値を大きくしすぎないことをお勧めします。
さりげないくらいがちょうどいい。やりすぎはダサい。

図形が描けたら、こいつを使っていろいろやってみましょう。
元の図形にあれこれやっていく訳ですが、根本を変えずにできるのがPhotoshopというか「レイヤー」の魅力です。

Webデザインには必要不可欠と言っても過言ではない「レイヤー効果」を使ってみましょう。
（紙媒体のことはよく分かりません）

効果をかけたいオブジェクトがあるレイヤーを選択して右クリック。
すると「レイヤー効果」という項目があります。

こいつを開くと

なんかいろいろあります。
暇なときにでも試してみると楽しいです。

今回はシンプルにフラットなボタンにしてみましょう。

まずはボタンの地の色を白にします。
「カラーオーバーレイ」でできます。

最初に角丸長方形作るときに白にしておいても良いのですが、色・影などはレイヤー効果にまとめておくことで利点があります。

レイヤー効果は、それ自体をコピー＆ペーストすることができるのです。
例えば、配色・フチの色・影は同じで大きさ・形が違うものを作りたい場合、装飾がすべてレイヤー効果でおこなわれている場合、そのレイヤー効果をコピー＆ペーストすることで簡単に同じ装飾のものが作れてしまいます。

デザイナーさんが作ってくれたボタンを違う大きさで作成する必要がある場合など、レイヤー効果だけで完結していると非常に助かります。

レイヤー効果は変更・量産に強いです。使い慣れておくといいことあります。

次はそんな素敵なレイヤー効果の中でもよく使われる(個人の感覚です)「境界線」を使って、
ボタンを縁取ってみます。

位置は「内側」をお勧めします。
内側にすることで大きさが分かりやすくなります。
横幅680pxの図形を作って、外側に5pxつけちゃうと690pxになっちゃう〜ってだけです。
「中央」はとりあえずやめておきましょう。奇数だと0.5pxとかになっちゃう。なんとなくボケボケした締まりのないものになってしまいます。

線の太さはあまり太すぎない方がいいです。
基本的にやりすぎは厳禁。
いろいろできるからって濃くて大きい影をつけたりレインボーの縁取りしたりそのワー◯アートみたいなのは（以下略）

ボタンの地ができました。
お次は文字を乗せます。さすがに文字ツールは見たら分かると思われるので割愛。

移動ツールでテキトーにボタンの上に文字を乗せます。
（Photoshopは素敵なので勝手にど真ん中にスナップしてくれるのですが、説明のためあえて変な位置に置きました）