透過したプロフィールアイコン画像に背景をつける方法【Canvaを利用】

透過した画像

プロフィールアイコンを設置したら、

あれ?背景が真っ黒になっちゃった!!

と、お困りではありませんか。

プロフィールアイコン画像の背景が透過していると、サイトによっては真っ黒に表示されます。

背景は白くしたい、もしくはカラフルにしたい場合には、デザインツールが便利です。

そこで、この記事ではCanva(キャンバ)を使って、背景に色をつけたり、写真や模様を入れたりする方法をご紹介します。

せっかくのプロフィールアイコン画像を活かすためにも、背景をつけて楽しんでみましょう!

Canvaでなら簡単にできますよ。

Canvaへはこちらからどうぞ

背景が透過しているとは透明フィルムに絵が描いてあるようなイメージ

透過
「背景が透過している」とは、透明フィルムに絵が描いてあるイメージです。つまり背景が無いので、好きに背景がつけられるともいえます。

透過された部分は、上記の画像のように、グレーのチェックで表示されることがあります。

ファイル形式は「PNG」です。同じ絵をJPEG形式に変換すると、透過されず白い背景がついて保存されます。

とにかく大急ぎで背景をつけたいのであれば、ファイル形式をPNGからJPEGに変換してやればできます。下記のサイトで実行できますよ。

背景に色をつけたり、写真や模様を入れたりするなら、ぜひCanvaを利用してみてください。

Canvaへはこちらからどうぞ

Canvaはデザインツールです

1

Canva(キャンバ)は、Web上でデザインが作成できるツールです。アカウント登録が必要ですが無料で利用できます

デザイン経験者でなくても、操作がしやすく短時間で画像が完成します。

プロフィールアイコン画像の背景だけでなく、ブログのアイキャッチや、Instagramのための画像が作成できます。

たくさんのテンプレートや素材があり、文字やイラストなどを入れ替えるだけで、オリジナルの画像が作れますよ。

登録方法も簡単ですので、こちらの記事を参考にアカウント登録してみてください。

それでは、次からプルフィールアイコンに背景をつけていきましょう。

Canvaへはこちらからどうぞ

プロフィールアイコン画像に背景をつける方法

それでは、Canvaでプロフィールアイコン画像に背景をつけていきたいと思います。

まずは、あなたがプロフィールアイコン画像を設置したいサイトで、サイズを確認してください。

多くのサイトは800×800pxで大丈夫です。もしわからなければ、このサイズで作成してみましょう。

この記事では、

の3つの方法をご紹介します。

それではCanvaを開いて、作成していきましょう。

1.プロフィールアイコン画像の背景に色をつける方法

プロフィールアイコン画像の背景に色をつける方法を説明していきます。

  • step1
    出来上がり画像サイズを設定する

    画面の右側のアイコン横にある「デザインを作成」→「+カスタムサイズ」をクリック

    もしくは、その下にある「カスタムサイズ」をクリックします。

    1

    出来上がりサイズの数値か「800×800」のサイズを入力し、単位を「px(ピクセル)」にして、「新しいデザインを作成」をクリックします。

    2

    これで、画像を貼り付けるためのキャンバスが作成されました。

  • step2
    プロフィールアイコン画像を配置する

    開いたキャンバスに、プロフィールアイコン画像をドロップ&ドラッグして配置します。

    3

    もしくは、左のメニューの「アップロード」→「画像または動画をアップロード」をクリック

    4

    「フォルダ」のアイコンをクリックして、パソコンに保存されているプロフィールアイコン画像を選択するとアップロードされます。

    1-9

    アプロードされたプロフィールアイコン画像をクリックすると、同じように配置されます。

    5

  • step3
    背景に色をつける

    それでは、プロフィールアイコン画像の背景に色をつけていきましょう。

    まずは背景を選択し、虹色のアイコンをクリックします。

    するとカラーパレットが出てきますので、「写真の色(画像から抽出)」か「デフォルトカラー」にある好きな色をクリックしましょう。

    8

    これで背景に色がつきました。
    (「写真の色」の左端をクリックしました)

    7

  • step4
    プロフィールアイコン画像の大きさを調整する

    次に、プロフィールアイコン画像をほどよい大きさに調整しましょう。

    このとき注意して欲しいのが、画像の四隅のをドラッグ&ドロップすること。タテにひっぱったり、ヨコにひっぱったりすると、画像が切れてしまうことがあります。

    9

    ちなみにCanvaでは、画像がゆがんでしまうことはないので安心です。

  • step5
    出来上がった画像をダウンロードする

    それでは、出来上がった画像をダウンロードしましょう

    右上の「ダウンロード」をクリック

    ファイル形式は「PNG」か「JPEG」でOKです。

    下の「ダウンロード」をクリックすると、出来上がった画像がダウンロードされます。

    10

お疲れ様でした。以上で透過したプロフィールアイコン画像に背景がつきました。

2.プロフィールアイコン画像の背景に写真を貼る方法

プロフィールアイコン画像の背景に写真を貼る方法を説明していきます。

画像の背景に色をつける方法のstep2までできたら、step3から以下のように進めます。

  • step3
    背景に写真を貼る

    背景を選択し、虹色のアイコンをクリック。

    左のメニューから「写真」をクリックし、検索スペースに写真のテーマを入力します。

    すると、その写真が表示されるので、気に入ったものをクリックして配置します。

    2-1

    (今回は「空」を選んでみました)

    プロフィールアイコン画像の上に写真が配置されるので、写真を選択した状態で、右上の「配置」→「背面に」をクリックします。

    2-2

    背面に配置されたら、写真をほどよい大きさにドロップ&ドラッグで調整します。

    2-3

あとは、「画像の背景に色をつける」のstep4からのように、画像を調整してダウンロードしてください。

step4へはこちらから

3.プロフィールアイコン画像の背景に模様を入れる方法

プロフィールアイコン画像の背景に模様を入れる方法を説明していきます。

画像の背景に色をつける方法のstep2までできたら、step3から以下のように進めます。

  • step3
    背景に模様を入れる

    背景を選択し、虹色のアイコンをクリック

    左のメニューから「素材」をクリックし、検索スペースに「模様」と入力します。

    すると、その画像が表示されるので、気に入ったものをクリックして配置します。

    3-1

    (今回は花柄を選んでみました)

    プロフィールアイコン画像の上に絵が配置されるので、模様を選択した状態で、右上の「配置」→「背面に」をクリックします。

    3-1

    背面に配置されたら、ほどよい大きさにドロップ&ドラッグで調整します。

    3-3

あとは、「画像の背景に色をつける」のstep4からのように、画像を調整してダウンロードしてください。

「画像の背景に色をつける」のstep4へはこちらから

まとめ:透過したプロフィールアイコン画像に背景をつけるにはCanvaが便利!

透過したプロフィールアイコン画像に背景をつける方法を、Canvaを利用して説明してきました。

具体的には

  1. プロフィールアイコン画像の背景に色をつける方法
  2. プロフィールアイコン画像の背景に模様や写真を入れる方法
  3. プロフィールアイコン画像の背景に模様をつける方法

の3つの方法です.

ぜひ、透過された部分にいろいろ試してみてくださいね。

無事に背景がついたら、さっそくサイトに設置して楽しんでください。

Canvaへはこちらからどうぞ

Canvaへの新規アカウント登録方法はこちらからどうぞ。

ちなみに、わたしもプロフィールアイコン作成のご依頼を、お引き受けしております。下記の記事に詳細を書いてありますので、ぜひご覧ください!