Photoshopで画像の切り取り・大きさを測る方法

photoshop フロントエンド デザイン

こんにちは、なっちる先生(@nacchi_jagariko)です。

現在フリーランスエンジニアとして活動しています。

フロントエンドに関しては、コーディングもシステム制作もディレクションもデザインも、一通り経験しています。

今回は、フロントエンドのPhotoshopシリーズとして、選択ツールを使った切り取りや、大きさの測り方などを説明していきます〜。

この記事は以下のような人向けです。

フロントエンドが選択ツールで使うことを知りたい。。。

では、参りましょう〜。

※フロントエンドのPhotoshop総まとめはこちらから↓

Photoshopの知っておくべきショートカット24選!
こんにちは、なっちる先生(@nacchi_jagariko)です。 現在フリーランスエンジニアとして活動しています。 フロントエンドに関しては、コーディングもシステム制作もディレクションもデザインも、一通り経験しています。 ...
スポンサーリンク

選択ツールを使おう!

選択ツールの出し方

まず、選択ツールモードにする方法について話していきます〜。

方法としてはとても簡単で、「M」を押すだけです。

左側のツールの点線の四角形をクリックすることでも、選択ツールモードにすることができます。

選択ツールで主に使うこと

フロントエンド業務等で、選択ツールを使ってよく使う用途としては、以下の2つがあります。

  • 切り取り・貼り付け
  • 大きさを計測

この2つの使い方を以下で詳しく説明していきます〜。

画像の切り取り・貼り付けをする!

選択ツールを使えば、簡単にデザインを切り取ることができます。

例として、以下の女の人の画像のレイヤーの女の人の画像を切り取る・切り取り部分を貼り付けることとします。

まず、切り取りたいレイヤーを選択します。

そして、選択ツールモードにして、ドラッグしながら切り取りたい部分の範囲を選択します。

選択した範囲を切り取りたい場合は、そのまま「deleteキー」を押せば完了です。

切り取り部分を貼り付けたい場合は、範囲を選択した後、「Command + C」でコピーし、「Command + V」で貼り付ければ完了です。

どちらかと言うと、切り取って貼り付ける作業の方が多いですよ!

注意!

ひとつ注意しておくことがあって、「切り取れる部分は選択したレイヤーの部分だけ」ということです。

例えば、以下のように女の人の画像のレイヤーを選択した状態で、「CIBO」も含めた部分を切り取って貼り付けたとします。

結果、以下のように「CIBO」は含まれません。

「CIBO」も含めた部分を切り取りたい場合は、女の人の画像と「CIBO」のテキストレイヤーも選択しておく必要があります。

画像の大きさを測る方法

選択ツールを使って、切り取りだけでなく、レイヤー間の大きさを測ることもできます。

PSDデータからHTML・CSSでサイトを作るというときに、大きさ等をデザインデータ通りにするために、よく使う手法なので紹介しておきます。

例として、以下のレイヤー間の幅を測ろうとしているとします。

以下の動画で見るとわかりやすいと思いますが、

選択ツールモードにて、ドラッグしている間に「W:〇〇px、H:〇〇px」と出てきます。

この場合だと、W(Width:幅)の値を参照することで、レイヤー間の幅がわかります。

大まかに大きさを捉えたいときに便利だよ!

また、以下の記事で言及した、

Photoshopのレイヤーを移動・拡大・縮小する方法
こんにちは、なっちる先生(@nacchi_jagariko)です。 現在フリーランスエンジニアとして活動しています。 フロントエンドに関しては、コーディングもシステム制作もディレクションもデザインも、一通り経験しています。 ...

カーソルキーを押すだけだと、レイヤーは1pxずつ動きます。

Shiftを押しながらカーソルキー(↑→↓←)を押すと、10pxずつ動かすことができます。

一気に動かしたいときに便利だね!

この1pxと10pxを駆使して、レイヤーとレイヤーの間が何px離れているかを計算できたりもするので、覚えおくと便利です!

という寸法方法もあるので、選択ツールと併用してみてください。

まとめ

以上、選択ツールを使った「切り取り・貼り付け・寸法」方法について話しました〜。

PSDデータがなくて、この画像を手直しして欲しいという要求がきたときにも、よく使うツールになります。

他のフロントエンドのPhotoshopシリーズも参考にしてみてください〜。

以上で、なっちる先生の授業を終わります。

素敵なPhotshopライフを〜!

スポンサーリンク
デザイン
スポンサーリンク
なっちる先生をフォローする
なっちる先生
タイトルとURLをコピーしました