画像の一部を切り取る方法(トリミング)

画像の一部を切り取る方法(トリミング)
アイキャッチ画像は

Roberto RizzoによるPixabayからの画像

画像ファイルの一部を切り取りたい場面は多々あります。

切り取りたい形によってベストなオプションが変わります。

当記事では、以下3つのソフトを紹介します。

画像の切り取りにおススメ!
  •  四角 ➔ [WindowsPCのソフト] ペイント
  •  丸型いろんな形。➔ 無料オンラインソフト バナー工房最強。
  •  単純な形 ➔ [WindowsPCのソフト] パワーポイント
いくみ
いくみ

切り取ると、何でもできちゃう♪。

今回のデモで、こちらの2つのイラストを利用させていただきます。かわいすぎます♪。

画像の切り取りテストオリジナル画像
画像の切り取りテストオリジナル画像
冬の動物のイラストは
クリスマスグッズのイラストは
いくみ
いくみ

ありがとうございます。

著作権について、「イラストボックス」の利用規約には以下のようにあります。

ユーザーは、ユーザーサービスを利用して、本サイト上で公開された投稿物を、閲覧、印刷又はダウンロードし、印刷又はダウンロードした投稿物を著作権法の定める私的使用の範囲で複製し、また、自己の宣伝に係るホームページ、ハガキ、その他自己の宣伝に係る広告物に利用・改変することができますが、投稿物に関するそれ以外の何らの権利(投稿物そのもの、または投稿物を利用した商品・サービス等を、有償・無償を問わずに、第三者に譲渡・販売・貸与し、または本サービスと同種・類似したサービス上でアップロード等を行う権利を含み、かつこれに限られません。)も取得しないものとします。ただし、当社が個別に許諾した場合は、この限りではありません。

引用元:イラストボックスの利用規約 (太字と赤字は私がつけました。)

つまり・・・「著作権法の定める私的使用の範囲」での「利用・改変」は許可されています。

が、その結果を誰かにあげたり、売ったりすることは禁止されています。(個別の許諾が無い限り。)

改変して、オリジナルと雰囲気が違うものを作れる、というテクを紹介しているのですが、上記の禁止ポイントは守りましょう。

四角 ~ [Windows]のペイントで画像の切り取り

いくみ
いくみ

「四角」はペイントが1番!

1.切り取りたい部分がある画像ファイルを保存しているフォルダを開きます。

切り取りたい部分がある画像ファイル名を右クリックします。すると以下のようになが~いメニューが表示されますね。

ペイントで画像を開く

2.[プログラムを開く]から[ペイント]をクリック。

  画像ファイルが[ペイント]ソフトで開かれます。

3.[ホーム]タブにある[選択]をクリック。

ペイントで画像を切り取る方法、選択をクリック

4.欲しい部分をドラッグで選択します。以下の様に点線の四角で囲まれます。

ペイントで画像を切り取る方法、ドラッグで範囲を選ぶ、トリミングをクリック

5.[ホーム]タブの[トリミング]をクリック。こうなります↓。

ペイントで画像を切り取った例

  他の部分はすべて切り取られて無くなりました。

6.OKだったら、[ファイル]メニューから[名前をつけて保存]へ。

  イラストはPNG、写真がメインならJPEGがおススメです。お好みの場所に保存します。

ペイントで画像を保存

もし以下のように、少し消したい部分がある場合は、

ペイントで文字消し・物消し

以下の記事で、文字消し・物消しテクを紹介しているので、ご利用ください。

スポイト機能で消した結果がこちら。

ペイントで文字消し・物消しした例

これを、透過にしたい場合に便利なソフトについての記事がこちら。

このソフトで透過した結果がこちら。

画像を透過にした例

四角に切り取る使用例

空白を除きたい場合も便利です。

例えば、パワーポイントのスライドを画像ファイルとして保存すると、こうなります↓。

画像を四角に切り取る例

「パワーポイントスライドの大きさ」になっているからです。

先ほどと同じく。

  1. [選択]をクリック。
  2. 必要なところを囲む。
  3. [トリミング]をクリック。
  4. 名前をつけて保存、です。

丸 ~ バナー工房で画像の切り取り

いくみ
いくみ

パワーポイントでもにできるのですが、バナー工房のが使いやすく感じました。

まずは、バナー工房の以下のページにアクセスします。

0.黄緑のバナーの所に、[円形トリミング・画像を丸く切り取る加工]とあることを確認。(上のリンクからいくとそうなるはずです。)

1.[画像を選択する]をクリックして画像を選びます。そして、[画像を加工する]をクリック。

バナー工房で丸く切り取る例

トリミングの場合、[横幅設定]の値は、仕上がりの幅にはならず、あんまり意味がないので、0のままでOKです。

2.画像が取り込まれます(サイズや容量によっては、少し時間がかかることがあります)。

画像の一番左上に、うっすらと丸い円があります。画像の色によっては見にくいと思いますが、あります。

バナー工房で丸く切り取る方法、位置とサイズ調整

この円をドラッグで移動させて、切り取りたい部分にかぶせます。

この円のサイズは、右下にある矢印をドラッグして大きくしたり小さくしたりできます。

3.円のサイズと位置が定まったら、[現在の位置で円形に切り取る]ボタンを押します。

バナー工房で丸く切り取る方法、円マークのサイズと位置を決定

4.OKだったら、[保存]ボタンを押して、お好きな場所に保存します。

バナー工房で丸く切り取る方法、保存

上の画面で、うっすらと丸い円が見えています。これは仕上がり画像には含まれませんのでご安心を。

こちらが仕上がりです。

バナー工房で画像を丸く切り取った例

好きな形 ~ バナー工房で画像の切り取り

いくみ
いくみ

これが、感動でして・・・。どんな形にも切り取ってくれます!

どういうことかというと。

例えば、以下のような帽子があるとします。サンタ帽です。

バナー工房で画像を好きな形に切り取る方法

この「形」だけ欲しいこともあるかと思います。

この形で、真っ黒のシルエットにしたい、とか。

小人用に、柄を変えたい、とか。

素材違いや、色違いのアイテムを複数作りたいとか。

そんなときに、バナー工房の「好きな形に切り取る」機能を使うとできます!


使用例です。

バナー工房で画像を好きな形に切り取る機能使用前
バナー工房で画像を好きな形に切り取る機能使用後

サンタ帽が、ワンポイントでウサギがついている帽子になりました♪。

「反転機能」もあるので、対象物の向きも変えられます。

上の例では使わなかったのですが、「傾き」も変えられます。

まずは、バナー工房の以下のページにアクセスします。

0.黄緑のバナーの所に、[写真や画像を好きな形に切り取る加工]とあることを確認。(上のリンクからいくとそうなるはずです。)

1.[画像を選択する]をクリックして切り取りたい画像を選びます。(「形」ではなくて、「台紙」にする画像です。)必要であれば[横幅設定]をします。そして、[画像を加工する]をクリック。

バナー工房で画像を好きな形に切り取る機能使用手順、画像の選択

トリミングの場合、[横幅設定]の値は、仕上がりの幅にはならず、あんまり意味がないので、0のままでOKです。

2.画像が取り込まれます。(サイズや容量によっては、少し時間がかかることがあります)。

[切り取る形の画像を選択]をクリックして、「形」の画像を選択します。

バナー工房で画像を好きな形に切り取る機能使用手順、形画像の選択

ウサギマークの帽子にしたかったので、事前にウサギだけ選んで上のような画像に編集しました。

3.「形」の画像が左上に出てきます。

バナー工房で画像を好きな形に切り取る機能使用手順、形のサイズと位置を調整

この形をドラッグで移動させて、切り取りたい部分にかぶせます

この形のサイズは、右下にある矢印をドラッグして大きくしたり小さくしたりできます

3-A.もし、「傾き」をつけたかったり、「反転」させたい場合は、少しスクロールすると、[オプション設定]があります。

お好みで設定して、[設定する]ボタンを押すと、プレビューに反映されます。

バナー工房で画像を好きな形に切り取る機能、オプション設定

私は、今回[反転する]を使用しました。向きを変えたかったからです。

4.形のサイズと位置が定まったら、[現在の位置・形状で切り取る]ボタンを押します。

バナー工房で画像を好きな形に切り取る機能、サイズと位置の決定

5.OKだったら、[保存]ボタンを押して、お好きな場所に保存します。

バナー工房で画像を好きな形に切り取る機能、画像を保存

上の画像に、切り取り用の「形(サンタ帽)」が残っています。これは仕上がり画像には含まれませんのでご安心を。

こちらが、仕上がり、透過です♪。

バナー工房で画像を好きな形に切り取る機能、使用例

娘にかぶせてみました。

バナー工房で画像を好きな形に切り取る機能、アレンジ例

アレンジ案 (イラストではなく、「写真素材」でもできます。)

パンクなサンタを演出するなら、ジーンズ素材の画像

和風サンタにしたいなら、着物素材の画像

エコなサンタなら、緑の葉っぱの画像

サンタ帽ではなく、手編みのニット帽にしたければ、ニットの網目画像

などなど、何をバックに使うかで、全然違う雰囲気が出せます

つまり、求めるイラストが見つからないとき、「形」と「素材」を別々に見つけることで、思い通りの作品ができます!

補足 ~ パワーポイントで合成

いくみ
いくみ

更に、もう一つアレンジ案。

私は今回「ウサギマーク」を入れました。やってみて思ったのですが。

「ワンポイント」や「帽子の柄」をつけるなら、帽子は「無地」にしておくほうが便利だなと気が付きました。

あとで、パワーポイントや合成ソフトで、色んなアイテムを追加するのが簡単になります。


例として、帽子のポンポンと縁取りのフワフワをパワーポイントの「吹き出し」を使って追加してみました。(吹き出しの「・・・」の部分はペイントで消しました。)

バナー工房で画像を好きな形に切り取る機能、アレンジ例2

ワンポイントは、ハートなり、イニシャルなり、なんなり付け足せます。もちろん、先ほどのうさちゃんでも。

バナー工房で画像を好きな形に切り取る機能、アレンジ例3

パワーポイントにも「反転機能」があるので、向きを変え忘れても大丈夫です。

いろんな素材の画像(Karen ArnoldによるPixabayからの画像)をダウンロードして、何種類か帽子を作ってみました。

一年中あの帽子ではね!





バナー工房で画像を好きな形に切り取る機能、アレンジ例4

文字の形 ~ バナー工房の「好きな形に切り取る」機能の使用例

以下のように、「透過」の素材を用意します。

バナー工房で画像を文字の形に切り取る例、形画像

台紙画像にクローバーの葉っぱ(damesophieによるPixabayからの画像)を使って、文字の形に切り取った例:

バナー工房で画像を文字の形に切り取る例、仕上がり

さわやかです♪。「海」と「桜」も試しましたが、イメージ通りにするのはけっこう難しかったです。画像に「白っぽさ」があると、背景をつけないと分かりづらくなるみたいです。

ロゴのフォントを更に太いのにすると、もう少しハッキリと雰囲気が出るかなと思います。

マテリアルデザインに適するアイコン作り ~ バナー工房の「好きな形に切り取る」機能の使用例

今をときめく「マテリアルデザイン」。

記事内容に合うアイコンが見つからないときもあると思います。

「形」さえあれば、素材は、ベタの色だけでOKなので、作りたい放題。

色も選びたい放題。

オリジナル画像がこちら。

バナー工房で画像を文字の形に切り取る機能でマテリアルデザインアイコンを作る

もちろん、このままで断然かわいいので、変えなくていいのですが。

サイトのカラーや雰囲気に合わせたい場合もあります。

その場合、これを「形素材」にするために透過にします

切り取った例です。サンタグッズが一気に、マテリアルデザインに合いそうな感じに!

バナー工房で画像を文字の形に切り取る機能でマテリアルデザインアイコンを作る例1
バナー工房で画像を文字の形に切り取る機能でマテリアルデザインアイコンを作る例2
いくみ
いくみ

「ブーツ」の仕上がりは改善の余地ありですネ。透過処理のときに、白く見えている部分が透過になってしまったせいで、線ができてしまいました。

でもこのくらいなら、「文字消し・物消し」テクで修正できます。

「透過にするの、めんどくさいなぁ」と感じられる場合は、元々透過になっている素材がたくさんありますので、そちらを利用しましょう。その方が、ワンステップ省けますし、キレイにいきます。

例えば「シルエット素材」などは大抵透過になっていると思いますし、なっていなかったとしても、簡単にできるタイプです。

輪郭がハッキリしている画像を選ぶほうが、透過は簡単です。

難易度が特に高いのは「水彩系」です。

単純な形 ~ [Windows] パワーポイントで画像の切り取り

いくみ
いくみ

シンプルな基本形がそろっています。

パワーポイントを開きます。

0.開くと大抵、テキストボックスがあると思います。すべて消去して、まっさらの状態にしてください。

1.切り取りたい部分がある画像ファイルを、パワーポイント画面にドラッグ。

他のコピー方法:画像ファイルを選択した状態でCtrl + Cでコピーしてパワーポイント画面上でCtrl + VしてもOKです。または、画像ファイルの右クリックメニューで[コピー]をクリックして、パワーポイント画面の右クリックメニューで[貼り付け]でもできます。)

2.スライド上で画面いっぱいに、サイズを大きくします。(縦横比を保つために、Shiftキーを押しながら、右下の矢印をドラッグします。大きい方が作業しやすいからです。切り取ってから、必要であれば小さく戻します。)

3.画像をダブルクリックで選択します。すると、画像周りに白い丸が出ます。更に、[書式]タブが有効になっていると思います。(ならなかったら、そのまま[書式]タブをクリック。)

パワーポイントの切り取り機能

3.[トリミング]>[図形に合わせてトリミング]をクリック。下のように、本当に様々な形が出るので、好きな形を選びます。例として、ハートを選んでみます(基本図形の中に入っています)。

パワーポイントの切り取り機能、図形に合わせてトリミング

4.形を選ぶと以下のようになります。サイズ調整するために、更に、[トリミング] > [縦横比]から、好きな比率を選びます。どれを選んでも、手動で比率は変えられますので、まぁどれでも。

パワーポイントの切り取り機能、図形に合わせてトリミング、縦横比

「正円」を作りたい場合、最初に楕円形を選んで、比率で「1:1」を選びます。

大きさを変えるときは、Shiftキーを押しながら右下の角を引っ張ったり縮めたりします。

5.ここからは、マウス操作でドラッグしながら、自分が切り取りたいサイズと位置を決定します。

台紙になっている画像も、上にある枠も両方動かせます。

サイズも、ドラッグでどちらも調整できます。

パワーポイントの切り取り機能、図形に合わせてトリミング、サイズ調整

元の画像のバランスと「切り取りたい形」の相性によっては「どうしても無理」という場合もあります。

例えば、今回の「丸い枠のデザイン」を全部ハート枠におさめようとしても無理です。

どこかが切れたり、ハート枠に空白ができてしまったりします。

そういう場合は、元画像の周りに余白を増やすなどの編集が必要になります。

6.調整し終わったら、[トリミング]をクリック。もしくは、スライドの空白部分をクリックしても完成します。

パワーポイントの切り取り機能、図形に合わせてトリミング、位置とサイズの決定
パワーポイントの切り取り機能、図形に合わせてトリミング、仕上がり例
仕上がり例

パワーポイントは、「基本図形がそろっている」という強みがありますが、位置とサイズの調整は、慣れるまではイラっとくるかもしれません。笑。

おわりに

切り取りの機能は、Canvaにも入っています。ただ、私は、どうもCanvaの動作がゆっくりなのが気になって、切り取りを紹介するのは辞めました。動作スピードが気にならない方はそれもチェックしてみると良いです。Canvaには「アルファベット型」があるので、それは可愛くて便利だなと思います。

実は、この記事を書いている最中に、バナー工房の「ハート型に切り取る機能」が無くなってしまいました。ショック・・・。ものすごくたくさんのハート型があったので、ハート型でバナー工房の右にでるものはいない、と思っていたのですが★。復活するといいなぁと思っています。

それにしても、すべて無料!

いくみ
いくみ

ありがとうございます。

いろんな素材の画像(Karen ArnoldによるPixabayからの画像)をダウンロードして作った帽子をみんなにかぶせてみました。

切り取り機能有効利用例

コメント

タイトルとURLをコピーしました