*

技術

Photoshopでよく使われる基本操作方法

2016/08/25

こんにちは。EBAブログ、第4回目の執筆者はWEBデザイナーの武富です。

Photoshopで、簡単そうな作業をしようとしても、最初はすぐできなかったりするかと思います。

そこで今回は、WEB系未経験だった頃を振り返って、
これは最初に覚えておいた方がいいと思う内容を軽くまとめてみました。

今回はPhotoshop限定です。

Photoshopをインストールした時に、最初にしておくべき設定

  • 単位をpxにする
    編集 > 環境設定 > 単位・定規
    WEBブラウザで扱う画像の単位は『px』。まずはこれを設定。
  • 外枠に目盛りを表示する(これでガイド線を引けるようになる)
    表示 > 定規
    ガイド線の引き方についてはこちらを参照⇒ http://blogs.adobe.com/elementsjp/basic/10796
  • 移動ツールで、「自動選択」と「バウンディングボックスを表示」にチェック(✓)を入れる。
    ※自動選択の右側のプルダウンは「レイヤー」にしておく。

    この設定をしておく事で、
    「自動選択」⇒ カンバスエリアで図を直接ドラッグして操作できるようになる。
    「バウンディングボックス」⇒選択したレイヤーがどこにあるのか視覚的に分りやすくなる。

レイヤーの平行移動 (長い距離の移動の場合)

移動ツール選択

レイヤーを選択する

「自動選択」のチェックを外す

Shift + (カンバスエリア内のレイヤーを)マウスドラッグ で平行移動可能。


 

もう少し細かく移動する場合は、

Shift + 矢印キー …10pxごとに移動

矢印キー …1pxごとに移動。これは書くまでもないか...。

レイヤーの大きさを(マウスドラッグではなく)数値で指定して変える

移動ツール選択、レイヤーパネルで大きさを変えたいレイヤーを選択する

Ctrl + T (バウンディングボックスの角をクリックしても同じ)
これで数値を入力できるボックスが上段に出てくる。

基準点にする箇所を押す

(縦横比固定)ボタンを押す

W 100% ←右クリックしてpx単位に

数値を指定

Enter

レイヤーの表示/非表示をまとめて行う

レイヤーパネルの目のアイコンの上で、長押ししながら、縦に複数ドラッグ&ドロップすれば

まとめて表示/非表示にできる。

まとめて折りたたみ [グループレイヤー]

グループレイヤーの折りたたみの「▼」の部分にカーソルを合わせて

Alt + クリック

すると、まとめて子要素を折りたためる。


 

逆に、折りたたんだ状態から同操作をすると、すべての子要素を開いた状態にできる。

※すべての親要素としての「全体」グループレイヤーを作っておくと一括して閉じることが出来るので便利!

1px単位でピタッとあわせる [グリッド線の設定]

編集 > 環境設定 > ガイド・グリッド・スライス 

(ガイド線の上でダブルクリックしても同じ)

・「カラー」を見やすい色に、「グリッド線」を10px、「分割数」を10に。

OK を押す

※グリッドの表示/非表示のショートカットは、Ctrl + @  (いらないときは消しておく)

レイヤーに基づく新規スライス

スライス作成時、手動でスライスを作成するよりも、書き出しするレイヤーを基にスライスを作成した方が早い。

  • 書き出ししたいレイヤーを選択
  • レイヤー > レイヤーに基づく新規スライス でスライス作成完了。

ついでにスライス選択ツールで、作成したスライス上でダブルクリック > 画像名も設定しておく。

------------------------------------------------

ランダムでひととおり挙げてみましたが、今回はこんなところで。

お役に立てれば幸いです。

-技術