このブログはJINで作ってます
ブログデザイン

JINひつじ画像の背景色の変え方は?無料エディターを使う方法!

アイキャッチ

JINの紹介記事を書きたいあなた。

アイキャッチ画像にJINの公式サイトの物を使いたいけれど、できれば自分の好きな背景の色に変えたい、ってことありませんか?

 

こんにちは、すこみみ(@theratama01)です。

 

今回は、無料で、しかもオンラインツールで簡単にできちゃう、画像の背景色の変え方を、初心者ブロガーの方にもわかるようにわかりやすくご説明します。

 

もちろん「JIN」のアイキャッチ画像以外にも使える技なので、いろいろ試してみてくださいね!

すぐにでも作業開始!という方はここをクリック!

 

アイキャッチ画像の背景色って変えられるの?

アイキャッチjin

 

はい。結論から言えば、変えられます!

 

すこみみ
すこみみ
今回はそのやり方を説明しますね。

 

前回私は最近人気のワードプレス有料テーマ「JIN」についてご紹介しました。

アイキャッチ
ワードプレステーマ「JIN」レビュー!初心者におすすめな理由と注意点は?【WordPress】ワードプレスの有料テーマ「JIN」のレビュー!賢威7も使った私が使いやすさや気をつけたい点をご紹介!...

 

その時に、テーマの作者のおひとり、ひつじ♂(@hituji_1234)さんにお許しをいただき、「JIN」公式サイトのアイキャッチ画像を拝借したのですが、その時にこだわってしまったのが、背景の色!

 

私はアイキャッチの背景色をひとつの色に統一しています。トップページ(あんまり見る人いるかもしれませんが)がごちゃごちゃした感じにならないように、というのがその理由。

 

ところが、「JIN」公式サイトにあるアイキャッチの背景色は、上にあるように紺なんです。これは公式サイトのテーマカラーに一致していてとっても素敵なんですが…

 

すこみみ
すこみみ
私も「せらたま。」にぴったりの背景色に変えたい!

 

ということで、はじめてトライしてみました!背景色を透明にしちゃう技に!

すこみみ
すこみみ
やってみたら簡単!ただし、画像の引用には気をつけてね。

 

無料のオンラインエディター”Pixlr”を使ってみましょう

PCアイキャッチ

画像加工といえば、PhotoshopやIllustratorを使わないといけなさそうですよね。

でもここでは、無料、しかもダウンロードもしないで使えるオンラインエディター「Pixlr」を使います。

ブログカードを見ると英語だけなので心配になるかもしれませんが、ちゃんと日本語対応しているのでご安心を!

 

これを使えばいろいろな加工ができるので、画像に文字を重ねてアイキャッチ画像も作れますが、そちらはみんな大好きCanvaの方が私は好き。おしゃれで簡単だから。

 

すこみみ
すこみみ
今回は純粋に背景色の変え方だけお教えしますね。

 

”Pixlr”を使った背景色の変え方

前後アイキャッチ

 

背景の色を変えるというのは、この場合「画像の合成」をする、ということ。

これはPixlrエディターの「レイヤー」という項目を使ってやるんです。

 

すこみみ
すこみみ
この前、レイヤーって何?って同僚に聞いたら「まぁアニメのセル画みたいなもんですよ」といわれて納得!

 

つまり、レイヤーとは透明なシート=セルみたいなもので、そこに写真とを貼ったり、レイヤーをさらに重ねて文字をのせてみたりして、画像を1枚作りあげる、ということ。私は昭和世代でバリバリのセルアニメファンだったので、簡単にイメージできました。

 

すこみみ
すこみみ
詳しいことはこの記事を読んでみて!

 

専門用語ははっきりいって知る必要ないです。やり方どおりにやりましょう。

 

何にも考えず、この通りにやればできるって感じでいきますね(なぜなら私も詳しくは説明できないから…)。

 

本文読まなくても、画像だけでもだいたいいけちゃうとおもうので、サクッとやりたい方は画像だけ見てみてください!

 

(1)Pixlrに行く

エディター画像引用元:https://pixlr.com/editor/

 

Pixlrに行くと、トップページが上の画像のようになっています。

 

すこみみ
すこみみ
ここからスタートしますよ!

 

(2)元の画像を開く

(1)の画面から、使う画像を呼び出します

あ、もちろんその前に使う画像を保存しておいてください。

画像を見ればお分かりのように、直接画像を取得するURLから画像を取ることもできます。

 

エディター画像引用元:https://pixlr.com/editor/

 

ちなみに、右上にログインアイコンが出ていますが、登録しなくてもできます。

私は登録していません。

 

エディター画像引用元:https://pixlr.com/editor/

 

こんな感じに画像が呼び出せればOK。

 

(3)背景をコピーする

\クリックすると拡大します/

エディター画像引用元:https://pixlr.com/editor/

 

今出ている画像のコピーを作ります

 

画面の右の方に小さい画像が出ていて、その下に「レイヤー」という場所があります

 

そこには今表示されている画像が「レイヤー0」という表示で出ているはずです。

その「レイヤー0」をドラッグして、上の表示の場所にペーストしてください。

 

そうすると、

\クリックすると拡大します/

エディター画像引用元:https://pixlr.com/editor/

 

こんな風に「レイヤー0コピー」が出来上がります。

 

(4)透明なレイヤーを作る

次は、何にも貼ってない、いわば透明なレイヤーを作ります

 

\クリックすると拡大します/

エディター画像引用元:https://pixlr.com/editor/

 

上の画像の①のところをクリックすると、②のとおり、チェッカー柄のアイコンのついた「レイヤー2」ができます。

ここはこれだけです。

 

(5)4で作った透明な背景用レイヤーにつける色を決める

今作ったレイヤー2は色も画像も何もついてないまっさらな状態です。

今度はここに、あなたが最終的に背景にしたい色をつけます。

 

画面左下にある、おそらく今は真っ黒で表示されているボックス(①の部分)をクリックします。すると、②のように、カラーセレクターが出てきます。

 

エディター画像引用元:https://pixlr.com/editor/

 

このカラーセレクターで、あなたが使いたい色を設定します。

左側のチャートを使って色を指定してもいいですし、右側のコード入力欄でカラーコードを指定してもOKです。

 

私はいつもアイキャッチ画像の背景にしている色のコードを#のところに入力しました。

コードの隣の所に、指定した色が出てきています。これでよければ下の画像の②のとおり、OKをクリックします。

 

\クリックすると拡大します/

エディター画像引用元:https://pixlr.com/editor/

 

すこみみ
すこみみ
ここまでできていますか?

 

(6)5で決めた色で塗りつぶす

先ほど作ったなにも乗せていないレイヤー2を、今決めた色で塗りつぶします。

 

左下の、最初黒かったボックスが、自分で選んだ色に変わっているのを確かめたら(①)、

画面左のアイコンの列から、傾いているバケツのアイコンを選びます(②)。

 

\クリックすると拡大します/

エディター画像引用元:https://pixlr.com/editor/

 

バケツのアイコンを、色を変えたい背景に合わせたら、そこでクリック!

すると…

 

エディター画像引用元:https://pixlr.com/editor/

 

画面全体が選んだ色でベタ塗されたみたいな状態になります。

 

ひつじさんが消えてしまったけれど、これは、実は下から「原本」のレイヤー0、その上にそのコピーのレイヤー0コピー、一番上に今までは透明だったレイヤー2、という順番でレイヤーが重なっているから(いわばセルを上に重ねていった状態ですね)。

 

透明だったレイヤー2に色を付けたために、その下にあるレイヤーが隠れた状態になっているんです。下にほか2枚のレイヤーは残っていますから心配いりません。

 

(7)レイヤーの順番を入れ替える

次に、色をつけたレイヤー2を後ろに下げます。

画面右の、さっきレイヤーを作ったりコピーしたりしたところへ。

 

エディター画像引用元:https://pixlr.com/editor/

 

今、ここには上から「レイヤー2」「レイヤー0コピー」「レイヤー0」の順に長方形のカードのようなものが縦に並んでいますね?

 

それを確認したら、上の画像のように、「レイヤー2」を「レイヤー0コピー」と「レイヤー0」の間にドラッグさせてペーストします。

 

すると…

 

エディター画像引用元:https://pixlr.com/editor/

 

あれ??元に戻った?

という風に見えてOKです。さっきの、レイヤーの順番を確認してください。

 

\クリックすると拡大します/

エディター画像引用元:https://pixlr.com/editor/

 

すこみみ
すこみみ
この順番になっていればOK。うまくいってますよ!

 

(8)背景コピーのレイヤーから背景を消す

さあ、いよいよ大詰めです。

今一番上に来ているレイヤー0コピーの、背景色だけを消してしまいましょう。

 

\クリックすると拡大します/

エディター画像引用元:https://pixlr.com/editor/

 

上の図の①のアイコンを選び、画面上に現れている「公差」というところの数値を「100」にしたら、紺色の背景をクリックします。

 

\クリックすると拡大します/

エディター画像引用元:https://pixlr.com/editor/

 

さあ、どうですか?上の画像を拡大してみてください。

この画像のように、ひつじさんやロゴ周囲などが破線で囲まれてチラチラしていたら、そのまま「Delete」キーを押してください。

 

\クリックすると拡大します/

エディター画像引用元:https://pixlr.com/editor/

 

さあ!背景色が変わりました!

 

ちなみに、右のレイヤーの所を見ると下の図のようになっているはず。

 

エディター画像引用元:https://pixlr.com/editor/

 

このアイキャッチ画像の場合、あまり細かいところがないので、背景はすべて色が変わっているはずですから、これで保存したら終わりなのですが…

 

(9)もっと細かい画像でやるときは…

もっと細かいところのある画像でこれをやってみたいなら、(8)の段階ではまだ前の背景色が残っているかもしれません。

その場合は、下の図のとおりに画像を拡大して、色の残っているところをひとつずつ今の作業で消していきましょう。

 

エディター画像引用元:https://pixlr.com/editor/

 

保存して完成!

できあがったら、最後に保存します。

これは普通に「ファイル」→「保存」で、任意のフォルダに入れてください。

 

エディター画像引用元:https://pixlr.com/editor/

 

すこみみ
すこみみ
うまくいきましたか?

 

まとめ

アイキャッチ画像

画像の背景を、無料のオンライン画像加工ツール「Pixlr」を使って自分の好きな色に変える方法をまとめました。

 

JINのユーザーのあなた。

 

この方法で自分の思う通りのアイキャッチ画像を作ってみてくださいね。

画像の背景色の変えかた

  1. 有料ツールは不要!無料のオンライン画像加工ツール「Pixlr」でできます。
  2. レイヤーとは、アニメのセル画のようなもの。これを使って色を変えます。
  3. 元の画像の著作権には注意して、フリーでない場合は作者さんの了解を得ましょう。

COMMENT

メールアドレスが公開されることはありません。