京都・滋賀を拠点にWEB制作とWEBデザインに関する情報発信を手掛ける STAND4U

STAND BLOG

HOME > PhotoshopでWEBデザインする方法 ~Fireworksから乗換え編~

PhotoshopでWEBデザインする方法 ~Fireworksから乗換え編~

2016年5月3日

photoshop-web

PhotoshopでWEBデザインする方法をお伝えする前に、私は長年FireworksでWEBデザインをしており、そのFirewokrsの直感的な操作感や圧倒的な作業スピードに惚れ込んでいた経緯をお伝えしておこう。しかしFireworksの終焉に伴い、FireworksからPhotoshopに乗り換えた当初、Photoshopの使いづらさに嘆いた。。。

しかーーし、PhotoshopでWEBデザインする方法を徹底的に調べ、その使いづらさはPhotoshopの進化に対する知識が足りなかっただけあり、以前のPhotoshopから推測する誤解である事に気づいた。
まだまだ部分的にはFireworksの方が使いやすい箇所があるのは確かだが、それを凌駕するえげつなく便利な機能がいくつもあるので、トータルでは最新のPhotoshopCCに乗り換える方が得策である事を断言しよう!

そこで今回は私と同じように感じているFireworksユーザーやPhotoshop初心者に向けて、PhotoshopでWEBデザインする方法を解説したいと思います。

まず第一弾として、Fireworksユーザーだった私が知らなかった、PhotoshopでWEBデザインするにあたりPhotoshopを誤解している点や、PhotoshopでのWEBデザインにおいて便利で基礎的な機能を解説したい。(Photoshop CC 2015で解説)

Photoshopはスライス不要で画像の書き出しは現時点で最強である。

私も以前はPhotoshopのスライスは不便で、Fireworksのスライスこそ最強だと思っていました。しかしPhotoshop CCを使いそれが大きな間違いである事に気づいた。実はPhotoshop CCではそのスライスそのものの作業が不要なのだ!
しかもFireworksではデザインカンプを作成したあと、前面にあるオブジェクトと背景オブジェクトを分けてから書き出す必要があったが、Photoshopの場合は背景画像はそのままでも前面のオブジェクトだけを綺麗に書き出してくれる!!

bg

今回はこのようなデザインで、「背景写真」と「ロゴ画像」「MENUボタン」の3つの画像を書き出す場合の、2種類の方法を解説しよう。

前述したように背景写真を非表示にしてから、ロゴ画像とMENUボタンを書き出す必要など全く無い!背景写真はそのままでいいんです!そう、スライスの必要など皆無なのである。

その1:単体の画像や選択した複数の画像をマッハで書き出す方法。

kakidashi

まずは書き出したい画像が複数のオブジェクトや文字を組みわせて作っている場合は、グループ化するか、スマートオブジェクト化してひとつのレイヤーにする。
そして書き出したいレイヤー(もしくはグループ)の名前を、書き出したい「ファイル名」にする(拡張子は不要)。そのレイヤーやグループを選択した状態(単体でも複数も可)でレイヤーパネル上で右クリックして「書き出し形式…」を選択します。つまりレイヤー毎にそれぞれのレイヤーに存在するオブジェクトのみを書き出すという事なのだ。マスクしている場合は、ちゃんとマスク部分だけを書き出してくれるし、透明部分もちゃんと認識してくれる。

すると次のような「書き出し形式」ウインドウが現れる。

keishiki

それぞれファイル形式を指定して「すべてを書き出し」ボタンを押すだけだ。慣れればマッハで書き出せるので手軽に書き出したい時はこちらをおすすめする!

さらにこの「書き出し形式」ではサイズ「2x」を選ぶ事で、レティーナディスプレイ用画像を2倍に書き出したり、両サイズ一気に書き出したりする事も可能なのだ!

bai

その2:「画像アセット」機能を使い、常に自動で一気に書き出す方法

もうひとつの方法として「画像アセット」という機能を使う方法がある。書き出したいレイヤーに名前をつけるという所までは(その1)と同じだが、ファイル名のつけ方としてファイルの「拡張子」まで記述する必要がある。つまりレイヤー名に書いた拡張子の種類のファイルで書き出してくれるという事だ。

その他基本的なルールとしてひとつのレイヤーに「カンマ(,)」で区切って複数記述すると、同一画像を複数書き出せるし、ファイル名の前に半角スペースで200%と記述すると2倍のサイズの画像が書き出せてしまうのだ!

これを応用するとレティーナディスプレイ用の2倍サイズの画像と通常ディスプレイ用の画像を一気に2つ同時に書き出せるという事になるのは想像がつくだろう。

name

つまり、書き出しが必要なレイヤー・グループ全てに「ファイル名と拡張子」を記載し、逆にレイヤー名に「拡張子」をつけていないレイヤーは、画像として書き出されないので、書き出し不要なレイヤーは特に気にせずそのままのレイヤー名で問題ないという事だ。

seisei

ファイル名と拡張子を付け終わったら次に「ファイル > 生成 > 画像アセット」にチェックを入れる。
すると、PSDのディレクトリと同階層に「PSD名-assets」というディレクトリが自動的に作られて、その中に名前をつけた画像が書き出されます。以降は、デザインを修正してPSDファイルを保存する度に、自動的に画像が書き出されるというなんともオートマチックな仕組みなのだ!

ファイル名はいつでも変更可能で、つねに現時点の最新のレイヤー名のファイルだけが自動的に書きだされているという事だ。逆に言うと、以前レイヤー名をつけて一度書き出されたファイルであっても、そのレイヤーを消したり、レイヤー名変えてたりすると以前書きだされたファイルは消えてしまい、常に最新のレイヤー名のファイルが残るという事である。

folda2

Photoshopで「オブジェクトを直感的に選択・移動・変形」できる!

これは基本!Photoshopだって簡単な設定で、カンバス上で直感的にオブジェクトを動かしたり変形したりする事ができる!

layer

「移動ツール」を選んだ状態で、左上の「自動選択」をONに。また選択する対象「レイヤー/グループ」のどちらかを設定する事ができる。

(Photoshopにおけるグループ[ cmd + G ]はレイヤーをフォルダに格納する作業であり、Fireworksのようにオブジェクトを合体する機能ではない。なのでグループを選択する場合は、ここでグループを選ぶ必要があるという事だ。)

するとアラ不思議、カンバス上に配置したオブジェクトや写真を移動ツールで選択したり移動したりする事ができるようになった!

ちなみに「自動選択」をOFFの状態の場合でも「command」を押しならが選択すると自動選択する事ができます。もちろん逆も可能で「自動選択」がONの状態で「command」を押しならがクリックすると、自動選択しない状態になるので使い分けよう!

自動選択ON・OFFのどちらにするかの正解は無く、はっきり言って好みだ!
つまりは自動選択されては困る場合もあるからだ。オブジェクトが密集している場所では、自動選択だと意図しないオブジェクトを選択してしまう場合があるので、その場合は自動選択OFF状態で、レイヤー上で選択したり、右クリックメニューから表示されるレイヤー名から選択してから、オブジェクトを移動したりすれば誤操作が無くなります。

right

移動ツールを選択した状態で、カンバス上で右クリックすると「現在のカーソル位置の真下にある」レイヤーと調整レイヤーの一覧がレイヤーの重なり順で表示され、レイヤー名を選択するとそのレイヤーを選択した状態になる。
これを応用すれば、カンバス上で特定のオブジェクトに影響している調整レイヤーを探したりする事ができる。つまり調べたいオブジェクトより上に表示されている調整レイヤーを探せば良いという事になる。

Photoshopで「選択中のオブジェクトを可視化」できる。

これも基本!選択中のオブジェクトをカンバス上で可視化する方法は2つのある!
「バウンディングボックス」を表示する方法と「レイヤーの境界線」を表示する方法だ。

「バウンディングボックス」を表示する方法

b-box

移動ツールを選択した状態で左上の「バウンディングボックスの表示」ボタンをONにするだけ。この状態でオブジェクトを選択するとオブエジェクトのまわりにバウンディングボックスが表示され、選択中である事が一目瞭然!

「レイヤーの境界線」を表示する方法

kyokaisen

「レイヤーの境界線」を表示する方法は、上部のメニューバーの「表示 > 表示・非表示 > レイヤーの境界線」をクリックするだけ。こちらは、デフォルトでは選択中のオブジェクトが青いラインで囲まれる事になり、これで選択している事がわかるようなる。

line

個人的には「レイヤーの境界線」を表示する方法をオススメする!

バウンディングボックスの方法だとカーソルをオブジェクトのコーナー付近に近づけた時に、オブジェクトが回転しようとしてしまうので、超絶イライラしてしまうからだ。なので、私はレイヤーの境界線を表示し、オブジェクトを変形する時は「command + T」で変形します。
これでとても快適にオブジェクトを扱う事ができます。

しかし「レイヤーの境界線の表示」も1点だけ不便な点がある。それは現時点のPhotoshop CCの仕様では、毎回この表示設定をしないといけないという点です。なので私の場合はレイヤーの境界線を表示の設定にショートカットを割り当る事でこれが気にならなくなりました。
(ちなみに私は「command + H」で割当ました。「command + H」はデフォルトでは別の操作が割り当ててありますが、特に使わない操作だったので変更しました。)

short
Photoshopでショートカットの割当する方法は、メニューバーの「編集 > キーボードショートカット」から変更する事ができます。

Photoshopで「テキストボックスの変形」ができる。

これも基本だが抑えておきたいテキストボックスの仕様。Fireworksではテキストボックスを作成した際、特に気にせずテキストボックスをリサイズする事ができた。しかしPhotoshopの場合、方法を知らずにそのままテキストボックスをリサイズすると、文字が歪んだリサイズになってしまう。もちろんこれも解決できる。

Photoshopには「段落テキスト」「ポイントテキスト」の2種類のテキストボックスが存在し、それぞれ切り替える事ができる。
Fireworksと同じだが、テキストツールを選択した状態で「カンバスをクリック」してテキストを入力すると「ポイントテキスト」になり、テキストツールで「ドラッグ」してテキストボックスを作ると「段落テキスト」になる。
テキストボックスがリサイズ可能なのは「段落テキスト」の方で、リサイズする際はテキストツールを選んだ状態で、テキスト入力アクティブ状態にした上で[ cmmand + T ]で変形する必要があります。
「段落テキスト」であっても、テキスト入力アクティブ状態にせずに[ cmmand + T ]で変形すると文字が歪んでしまうのでご注意を。

text

また「ポイントテキスト」で作ったテキストでも、レイヤー上で右クリックすると「段落テキストに変更」というメニューを選ぶ事で変更可能だ。逆の場合もレイヤー上を右クリックで「ポイントテキストに変更」というメニューから変更可能で、何度でも変更できる点をおえておこう。

「スマートオブジェクト化」する事で写真をリサイズしても劣化しない!

Photoshopの最も便利な機能のひとつとして「スマートオブジェクト」という機能がある。これは写真やシェイプなど全てのオブジェクトをスマートオブジェクトという形に変換する事で、いわゆる「インスタンス」のような形になる。

smart

スマートオブジェクト化する方法は簡単、変換したいレイヤーを選択しレイヤー上で右クリックして「スマートオブジェクトにヘ変換」を選ぶだけ。複数のレイヤーを同時に選択して一つのスマートオブジェクトにまとめるという方法も可能だ。

スマートオブジェクト化したものは、何度も縮小したり拡大しても元画像の画質以下に劣化する事は無い!また、複製していくつかコピー配置した場合でも、スマートオブジェクトマークをダブルクリックし、元のオブジェクトを編集・保存する事で、コピーした全てのスマートオブジェクトにその編集が反映される事になる。

smart2

スマートオブジェクトの使い所としては、複数のレイヤーをまとめて一つの画像として書き出したい時や、画像の劣化を気にせず拡大縮小したい時、同じ見た目のものを複数コピーして配置したい時、また後述する色調補正をかけたい要素など、あらゆる場面で活躍するので、ほとんどのレイヤーをスマートオブジェクト化しても良いかもしれないので、是非用途に応じて使いこなして頂きたい!

Photoshopにおける「色調補正」のベスト・プラクティス

色調補正の仕方には大きく3つあるのでおさえておこう!

●まず最もオーソドックスな方法として、レイヤーを選択した上で上部のメニューバーの「イメージ > 色調補正」から「レベル補正」や「トーンカーブ」を実行する方法がある。

hosei1

この方法は写真やラスタライズされた画像でしか実行できず、一度適用すると編集したり戻したりする事はできないので、最近では「そのままだと」あまり使えない機能となった。

●次に「調整レイヤー」を使う方法。

hosei
レイヤーパネルの下部にある「調整レイヤーを新規作成」ボタンを押す方法だ。

この方法のメリットは一度適用しても後から調整したり、削除したりする事ができるという点。しかし調整レイヤーの特徴として調整レイヤーより下にあるレイヤー全てにその色調補正効果が及んでしまうという特徴がある。

あえてレイヤー以下すべてのレイヤーに適用したい場合は以外で、ひとつのレイヤーだけに適用したい場合は、option(alt)を押しながら調整レイヤーと対象のレイヤーの「境界線上をクリック」する事で、調整レイヤーの真下の1レイヤーのみにその効果を適用させる事ができる。

しかし注意点として、上記の方法で任意のレイヤーに色調補正を適用した場合、カンバス上でその対象となるレイヤーだけを削除しても、レイヤーと調整レイヤーは完全に統合されているわけではないので、「調整レイヤーは削除されずに残る」という点だ。

その事に気づかずに残った調整レイヤーの色調補正が、以降のレイヤーにて適用されてしまうという落とし穴に気をつけなければならない!対象となるレイヤーを削除する場合は、そのレイヤーに対する調整レイヤーも合わせて選択して削除する必要があるので注意しよう!

しかし、この問題を解決する方法として「最も良い方法は次の3つ目の方法」だ!!

●補正対象のレイヤーを「スマートオブジェクト化」した上で、調整レイヤーではなく、最初にあげた通常の色調補正をする方法!!

smartF

レイヤーを一旦スマートオブジェクト化してから通常の色調補正を行う事で「スマートフィルター」という形式で色調補正が適用される事になり、これは後から調整・削除可能・非表示が可能でさらに、対象のレイヤーのみに補正が適用されるという事になる。
もちろん対象のレイヤーを削除すれば、スマートフィルターも削除され、残ったレイヤーに悪影響を及ぼす事はない!つまり調整レイヤーの欠点を一掃する事になるので、私はこの方法がベスト・プラクティスだと踏んでます!!

まとめ

以上がPhotoshopでWEBデザインする方法の「基本編」です。冒頭でも説明したようにFireworksからの乗換え組みが誤解しがちな点を、基本的な部分に絞って解説しました。

PhotoshopはWEBデザインツールとしてFireworksユーザーのにも問題なく使えるツールであり、少し慣れは必要ではあるがいくつかのポイントを抑えれば、あとはストロングポイントの方が多い事がわかってくる!また、Photoshop CCはどんどん進化しており、今後さらに使いやすくなる事は目に見えているので、いち早くPhotoshopをWEBデザインのツールとして乗り換える事を強くオススメする!

今回紹介した内容はほんの一部であり、その他のPhotoshopでWEBデザインする方法や、便利な機能については、続編でどんどん書きたいと思います!!

手始めにこちらの記事からどうぞ「


ABOUT

京都・滋賀・大阪を拠点にWEB制作とWEBに関する情報を中心に、その他ライフハックや思う事などを発信しています。
制作会社に所属しており、夜な夜な少しずづ書いております。その他、WEBデザイン、HTMLコーディング、jquery、wordpress、イラスト作成、写真撮影など。通勤時間を最大限に活かすのが目下の課題。

Twitter @stand_4u_

新着記事

カテゴリー