MENU

初めてPhotoshopでWeb制作する前にやっておくといい設定8(CS6/CC含む)

Web
Photoshop
当ページのリンクには一部広告が含まれています。
Photoshopは初心者に不親切？Psで最初にやっておくべき設定8(CS6含む)
  • URLをコピーしました！
目次

はじめに

先日ちょうどAdobe Creative Cloudを申し込みました。
Photoshopをまっさらな環境にする必要があるため、今回はまさに新品状態のCS6/CCの画面で解説をします！

もくじ

  1. 定規などの単位はpxで統一
  2. 「自動選択」で図形からレイヤーを選択する
  3. 「バウンティングボックス」を表示して選択や変形をしやすくする
  4. 「ピクセルにスナップ（エッジを整列）」で端がぼやけるのを解消
  5. レイヤーコピー時に「〜のコピー」とつけないようにする
  6. スライス書き出し時に「images」フォルダを作成しないようにする
  7. 【CS6/CCの場合】カラーテーマをグレーにする
  8. 【CS6/CCの場合】切り抜きツールを「クラシックモード」にする

起動画面。か、かっこいい…！

起動画面

CS6/CCはUIが黒いのですね。ちょっと慣れない。
従来のグレーにする方法も後ほどお伝えしますので、どうぞおつきあいください！

黒いUI

1.定規などの単位はpxで統一

「Photoshopは単位が色々あって紛らわしい！」という意見を聞きました。

Photoshopは一応印刷物も作れるようにできているため、「mm」などの単位に対応しています。逆に、Webに特化しているFireworksは単位が「px」で統一されているのですね。確かにWeb制作の時は「mm」だと紛らわしいですよね…。

初期設定では単位がmm

あらー。しかもPhotoshopさん、初期状態の単位は「mm」となっています。
まずはこちらをpxで統一させましょう。

メニューバーから「環境設定」→「単位」を開きます。
ここで単位や文字サイズを「pixel」に変更です！

pixelで統一

これで、安心して「px」ベースで制作ができます。

2.「自動選択」で図形からレイヤーを選択する

「図形から直接レイヤーを選べない！」とのお話を聞きました。

確かに、Photoshopは初期状態だとこの設定がオフになっています。
自分的にはこの設定は必ずオンにしておきたいところです。

なんのことか言葉では説明しづらいので、下記の図をご覧ください。

「あお」を動かしたい

「あお」というレイヤー名の図形を動かしたい場合、普通に考えてカンバス上の青い長方形を移動ツールでクリックしたくなるのが人情というものです。

試しにクリックしてみましょう。

怒られた…

お、怒られた…。

初期設定ではレイヤーを選んでからでないとカンバス上の図形が動かせません。これじゃあ確かにイラッとされても仕方ありませんね。

移動ツールを選択すると画面上部に「自動選択」というチェックボックスが現れます。これをオンにしてください。

また、グループごとじゃなくてレイヤーごとに選択したい場合はプルダウンを「レイヤー」にしましょう。（初期設定は「グループ」になっている）

「自動選択」にチェック

う、動いたー！これでサクサク作業できますよー！

移動できた

3.「バウンティングボックス」を表示して選択や変形をしやすくする

「Photoshopってカンバス上で何が選択されてるのかわかりづらい！」というお話を聞きました。(なんとこの問題※CS6/CCで解決されていました！後ほどご紹介します！)

まずはCS5の画面を見てください。
今、画面上で三つの図形のうち、ひとつを選択しています。さてどれでしょう？

どれか選択しています

答え、「あお」。

答え「あお」

わかりづらっ！

確かに、レイヤーを見なくても何が選択されているか一目で知りたいですよね。
Fireworksはこのへん特に設定しなくてもわかりやすいです。

Fireworksの選択された状態

Fireworksの選択された状態

先ほどの「自動選択」設定の横に「バウンティングボックス」というチェックボックスがあります。これをオンにしてください。

バウンティングボックスを表示

わかりやすーい！

バウンティングボックス

何が選択されているか一目でわかるし、四辺のちっちゃい正方形をぐいーっとドラッグすると拡大・縮小が容易にできます。

バウンティングボックスで拡大・縮小

※ちなみに「CS6/CC」ではこの問題が解決されています。
バウンティングボックスを表示せずとも選択するとFireworksのように四隅に正方形が現れるようになりました。

CS6/CCの場合（バウンティングボックスなし）

追記

なんと、@Stocker_jpさんから「CS6/CCで四隅の正方形が現れなかった」との情報をいただきました。大変失礼しました！

下記のような方法で解決可能のようです。

なつきさんありがとうございました！

ちなみに黒矢印とは「パスコンポーネント選択ツール」のことです！

パスコンポーネント選択ツール

パスコンポーネント選択ツール

4.「ピクセルにスナップ（エッジを整列）」で端がぼやけるのを解消

この問題も※CS6/CCで解決されていましたが、書きます！！

先ほどバウンティングボックスを表示すれば拡大・縮小も楽チン！とお伝えしましたが、Photoshopは初期設定のまま図形を拡大・縮小をすると端がぼやけてしまうことがあります。

端がぼやけている

これ、パッと見わからないですが、なーんかデザインがぼんやりしてるなあという時は、これが原因だったりします。私はこれが原因で何度も注意されました…。

知ってみると方法はカンタン。
長方形ツールを選ぶと画面上部にオプションメニューが現れます。「ピクセルにスナップ」というチェックボックスをオンにしてください。

ピクセルにスナップ

何でこのチェックをつけないとぼやけるのかというと、1pxごとに変形していなかったからなんですね。「55.34px」とか中途半端な大きさで図形を描けてしまうのです。

このチェックをつけることによって「55px」「56px」とキリのいい大きさで図形を描くことができます。
これでデザイン提出時も安心ですw

端がクッキリ

※ちなみにこの問題もCS6/CCで解決されていました。
CS6/CCでは「ピクセルにスナップ」が無くなり、「エッジを整列」という項目が加わりました。これが上記でご紹介した設定です。

エッジを整列

このチェックはデフォルトでオンになっていますので、CS6/CCの場合は特に設定の必要はありません！

グリッドを使って1px単位でガイドを引く

こんな中途半端なとこに追記ごめんなさい！大事なことを忘れてました！
キッチリとデザインしたい方のために、「ピクセルにスナップ（エッジを整列）」ともう一つ、おすすめの設定があります！

大抵みなさんガイドを引いてからオブジェクトを描くと思うのですが、その際、ガイドもキッチリ1px単位で引きたいですよね。そんなときはグリッドの出番です。
（Shiftキー押しながらでもpx単位でガイドは引けますが…ちょっとめんどくさい時のために）

Photoshopでは初期設定だとこのグリッドの設定がなんだか中途半端な感じです。
なので、ガイドを引こうとすると「28.3px」などとなってしまい、うまく1px単位でガイドが引けません。

グリッド未設定

まず、「環境設定」から「ガイド・グリッド・スライス」を選びます。
そして、「グリッド」という項目の数値を下記のように設定します。

グリッド設定時

グリッドの分割設定ができたら、カラーやスタイルの設定です。お好みですが、私はあまりグリッドのカラーは目立ってほしくないので、「ライトグレー」を設定し、いつもはスタイルを「点線」にしています。点線だとちょっとわかりづらいので、今回は「破線」でいきましょう！

※別に10px/10pxである必要はありません。「5px/5px」や「30px/30px」など、
とにかく「1pxごとに」グリッドが分割されるよう設定してください。

CS5以下では「10px/10px」などとし、1pxごとにグリッドを分割したほうがベターでした。ですが、それ以降は5pxごとにスナップさせたほうが役立つことが多いそうです。Stocker.jpのなつきさんの記事では以下のように書かれています。

Photoshop の「環境設定＞ガイド・グリッド・スライス」で「スタイル」を「点線」にし、「グリッド線」を「100 pixel」、「分割数」をCS6以上の場合は「20」、CS5以下の場合は「100」にしておくことをおすすめします。

理由については記事に詳しく記載されていますので、ご参考までに！なつきさんありがとうございます〜！

「PhotoshopによるWebデザインカンプ制作はFireworksに比べて効率が悪い」という都市伝説について | Stocker.jp / diary

次に、グリッドと定規を表示します。

グリッドはメニューバーの「表示」→「表示・非表示」→「グリッド」、
定規はメニューバーの「表示」→「定規」です。

グリッド

定規とグリッドが現れました。

で、ガイドを引きます。
適当なとこで止めても、ピタっと1pxごとにガイドを引いてくれます。

グリッド設定時

「ピクセルにスナップ（エッジの整列）」だけじゃうまくいかない！という方は一度試してみてください！

5.レイヤーコピー時に「〜のコピー」とつけないようにする

別に、気にならなければなんてことはないのですが、レイヤー名がゴチャゴチャしてきますよね。これもFireworksなら初期設定で大丈夫ですが…Photoshopの場合は設定してあげる必要があります。

PhotoshopとFireworks

まず、レイヤーパネルの右上のちっちゃいアイコンをクリックします。

すると、リストの中に「パネルオプション」という項目がありますので、これを選択。

レイヤー

「レイヤーパネルオプション」が現れるので、一番下のチェックボックスをオフにしてください。

レイヤーパネルオプション

無事、Photoshopでもレイヤー名をスッキリさせることができました！

レイヤー名がスッキリ

6.スライス書き出し時に「images」フォルダを作成しないようにする

Web制作に欠かせない作業。「スライス」。
指定したフォルダにスライス書き出す時、Photoshopは初期設定だと「images」というフォルダを作り、その中に画像を保存します。

上書きを防止するためだとは思うのですが…わざわざ所定のフォルダに移すのが面倒…という時はこれです！

「Web用に保存（Webおよびデバイス用に保存）」画面で「保存」を押すと、保存先を聞かれます。

その他

ここで、「設定」のプルダウンを開き（デフォルトでは「初期設定」となっています）、「その他」を選びます。

出力設定画面が出てきますので、一番下の「最適化ファイル」項目の「画像をフォルダーに保存」チェックボックスをオフにします。

画像をフォルダーに保存」チェックボックスをオフ

これを外せば、指定したフォルダに一発でスライスを書き出せます！

7.【CS6/CCの場合】カラーテーマをグレーにする

7,8はCS6/CC限定の設定です。ここからは完璧に自分の好みとなってしまいますが、ご参考までに(>_<) さきほどからずっと黒のUIで説明してきましたが、実は私、グレーの方が断然好きです。（黒もかっこいいんですけどね）すっかりグレーのUIに慣れちゃったので、戻したいと思います。 環境設定から「インターフェイス」を選びます。 インターフェイス

「アピアランス」という項目がありますので、ここでカラーテーマをグレーにしてください。一番右か、右から2番目あたりが従来の色に近いです。

カラーテーマ

変わりました！

グレーのUI

8.【CS6/CCの場合】切り抜きツールを「クラシックモード」にする

CS6/CCを使ってみて一番ビックリしたのは切り抜きツールです。

従来の「切り抜きツール」は、カンバスは固定されていて、「切り抜きツール」自体を動かすという操作だったのですが、CS6/CCからは全く逆で、カンバス自体が回転するのです！

カンバスが回転

仕上がりイメージがつかみやすくなりましたよね。
ですが、私はこの操作にどうしても慣れることができません…＞＜　ゲームやってても自分がコントローラと一緒に動いちゃうような人なので、頭が混乱しちゃいます。

なので、これも以前の設定に戻したいと思います。

「切り抜きツール」を選択し、オプションメニューから歯車のアイコンをクリックします。すると、「クラシックモードを使用」というチェックボックスがありますので、これをオンにしてください。（「クラシックモード」って聞くと、時代と逆行しているようでちょっとショック…）

クラシックモード

これで「切り抜きツール」自体が回転する以前の操作に戻りましたー！よかったー！

切り抜きツールが回転

参考にさせていただいたPhotoshop関連記事をご紹介！

今回のように長い記事を書いたのは初めてでした。わかりやすい画像や文章を作るのって、つくづく難しいですね…痛感しました＞＜

ここでは画像や説明の仕方など、記事作成時に参考にさせていただいたPhotoshopに関する記事をご紹介します！こちらの記事もぜひぜひご参照ください！

どの記事も読みやすくてとても参考になりました。
「可読性」の部分、もっと勉強していかなければ…。

他にもまだまだ書ききれなかったぐらい、たくさんのわかりやすい記事がありました。本当にありがとうございました！

最後に

いかがでしたでしょうか？Photoshopは色々なことができて本当に大好きですが、初めて触る時は色々と設定の必要がある気がします。

しかも今まで説明したことはほぼ全部Fireworksでは設定いらずなのですから、Fwのわかりやすさには脱帽です。できれば両方のいいところを使いこなせるようになりたいです。

ご紹介したのはあくまでも「私にとって」作業しやすい設定なので、人それぞれ設定の好みはあると思いますが、最近Photoshopデビューされた方などのお役に立てればいいな、と思います。

自分にとって一番作業しやすい環境を作って、楽しく制作できたらいいですね！

以上、最近Macデビューをしていつもより倍以上の執筆時間がかかった彩がお送りしました！

Web
Photoshop
Photoshopは初心者に不親切？Psで最初にやっておくべき設定8(CS6含む)

この記事が気に入ったら
いいね または フォローしてね！

この記事をシェアする！
  • URLをコピーしました！

この記事を書いた人

彩のアバター 彩 UIデザイナー

自社メディアサイトのUIデザイナーを経てフリーランスとして活動しています。デザイン・コーディングからサイト運営・改善、バナー作成など色々やってました。

4歳の娘がいます。ゴッホとコーヒーとスナフキンが大好き。

関連記事

コメント

コメント一覧 （36件）

コメントする

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

目次