icon
icon

Photoshopで自由変形を使う方法【初心者向け】現役Webデザイナーが解説

Photoshop(フォトショップ)で【自由変形を使う方法】を初心者向けに解説した記事です。基本的な使い方から、よく使う文字の加工の応用まで紹介しています。画像を16枚使って丁寧に解説しているので、初めての人でも安心です。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日  調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,000名  調査手法:インターネット調査

Photoshopを使っていて、画像の大きさや角度を簡単に編集できればいいのにと思ったことはないでしょうか?

今回はそんな時に便利な、Photoshopの自由変形を使う方法を初心者向けに解説します。

 

目次

※今回の作業はすべてAdobe Photoshop CCのバージョンで行っています。

 

大石ゆかり

田島メンター!!画像の形を変えるとき、拡大縮小だけじゃなくてもっといろいろな変形をしてみたいんですが……

田島悠介

そういうときは「自由変形」を使ってみよう。

大石ゆかり

自由変形っていうのはどういう機能ですか~?

田島悠介

その名の通り、選択した対象に関するあらゆる変形を適用させることができる機能だよ。実際に触ってみよう。

 

自由変形の使い方

Photoshopの自由変形を使うことで、全体の仕上がりを見ながら画像の大きさや角度などを編集することができます。

まずは基本的な使い方を覚えておきましょう。

 

 

今回はこの画像を使用します。

psfs_1

 

青で塗りつぶしたレイヤー1の上に、切手の画像の入ったレイヤー2を作成します。

psfs_1_2

 

このレイヤー2は、切手の部分以外が透過の状態(キャンバスに何も描画されていない状態)になっています。

このレイヤー2を使って自由変形をしてみたいと思います。

psfs_3

 

上のメニューから「編集」→「自由変形」をクリックします。

psfs_8

 

すると、このようにポイントの付いた枠が表示されます。

psfs_9

 

左右のこのポイントを移動させると、水平方向に拡大・縮小します。

psfs_10

 

同じ要領で上下のこのポイントを移動させると、垂直方向に拡大・縮小します。

psfs_11

 

さらに角のこのポイントを移動させると、全体を拡大・縮小します。

psfs_12

 

また、このときCtrlキーを押すとカーソルの形が変化します。

この状態(Ctrlキーを押したままの状態)で右上の角のポイントを移動させてみます。

psfs_13

 

すると、他の3点はそのままで、動かしたポイントだけに沿って画像が変形しました。

psfs_14

 

この方法を使うと、平面の画像でも立体感・奥行きのあるような画像に編集することが可能です。

psfs_15

 

また、画像は回転することもできます。

ポイント以外の場所にカーソルを持っていくと図のような状態(両端に矢印のついた形)になります。

この状態でマウスを押したままにし、動かしてみましょう。

psfs_16

 

カーソルの動いた方向に向かって画像が回りました。

360°好きな方向に回転することができます。

psfs_17

自由変形の基本的な使い方は以上です。

 

田島悠介

自由変形からは、拡大縮小・回転というような普段よく使う機能もまとめて行えるよ。

大石ゆかり

画像変形に関する、ひととおりの動作が入ってるんですね。

田島悠介

特定のキーを押しながら操作したり、カーソルの形と機能が場所によって変わったりと少し操作が独特だけど、使いこなせればこれひとつで全部できるから便利だね。

大石ゆかり

ちょっと練習してみたいです!

田島悠介

それでは実際にどういうときに使えるか見てみよう。例えば画像同士や画像と文字を自然に合成したいとき、この自由変形が役に立つんだ。

 

[PR] Webデザインで副業する方法とは

自由変形の応用方法

この自由変形はどんな時に使えるのかを応用として最後に紹介します。

 

自由変形は、画像に文字を加工するときにも役に立ちます。

例えば、この画像の封筒の部分に文字を入れたいとします。

このままでは角度が合わなかったりはみ出したりします。

psfs_18

 

そこで、画像を見ながら文字列を自由変形します。

psfs_19

 

自由変形を使って加工した写真です。

このような編集は文字だけでなく、画像と画像を合成する際にももちろん有効です。

psfs_20

 

執筆してくれたメンター

メンターOM

Webデザインの勉強のためロサンゼルスに留学。

その後、現地のWeb制作会社に就職し、Webデザイナーとしてのキャリアをスタート。

現在もロサンゼルスで働く傍ら、フリーランスのWebデザイナーとして、

アメリカだけでなく日本からのWeb制作も請け負う。

また、画像のリタッチが得意なので、しばしばリタッチの依頼も請け負う。

 

田島悠介

文字を背景の要素に合わせて自由変形するんだ。拡大や縮小だけだとうまくいかないようなところでは必須になるね。

大石ゆかり

自然に文字が下の画像の中に入りましたね!

田島悠介

画像を変形する前はできればレイヤーをコピーしておくなどして、失敗したときのために残しておこう。

大石ゆかり

なるほど、気をつけます。ありがとうございました!

 

さらにPhotoshopで画像を加工したい場合は、Photoshopで画像を合成する方法も合わせてご覧ください。

[お知らせ]テックアカデミーでは初心者でもフォトレタッチをマスターできるオンラインPhotoshop講座を開催しています。現役デザイナーに毎日チャットで質問することができます。