アメブロdeアクセスアップ

アメブロヘッダー画像に必要なパーツの背景を透明にする方法 | アメブロのテンプレートやツールを使って、アクセスアップする方法やアメブロカスタマイズの方法をご紹介します。


テーマ:画像加工基本スキル

 

アメブロでも、サイトでもそうですが、ヘッダー画像を作成するとき、
ヘッダー画像の背景はあるけれども、パーツを揃えるのが
どうもめんどう!!

それに、パーツの背景に色がついていたり、
本当は、バックを透明にしたいのに!!

という方、こちらで学んでくださいね。

 

 

 

 

ヘッダー画像を作成するためには、ヘッダー画像の背景とする画像と、
パーツ画像(ワンポイント画像・ロゴなど)を作らないといけませんよね。

 

 

 

私もまず、パーツの画像を揃えて、
それから、ヘッダー画像のレイアウトを整えます。

 

 

だいたいこの順番でOK!!

 

パーツ画像を作成するのも、結構大変。
これも、大丈夫ですよ。
以前の記事でも書きましたが、無料の素材サイトから、
いただいて、加工してしまいましょう。
【フリー素材サイト一覧】

 

ただ、無料の素材をいただいても、
その背景自体に背景色がついている場合もありますよね。

 

これ、困るんです!!

 

画像加工ソフトで、背景を透明にする方法はありますが、
画像加工ソフトもうまく使えない場合、どうします?

 

そうなんですよ、強い味方!!

Word2010(ワード)で、背景を透明にしてしまいましょう。

 

これが、一番簡単だと私は思います。
※他の画像加工ソフトが使える方は、そちらでやってね。

 

ワード2010は、なかなか優秀です。
以前にはなかった機能もたくさん追加されたので、
写真加工なら、これでいいかもって思えます。

 

では、さっそくやってみましょう。

 

 

今回は、イラストの背景を消して、
ヘッダー画像へ貼りつけるということをしています。
(例として、アメブロビズ2(AmebloBiz2)のヘッダー画像を使っています。)

 

 

hana2 作業手順

Word(ワード)を、立ち上げます。

背景を透明にしたい画像を【挿入】 ⇒ 【図】から挿入します。

こんな感じね。

図の挿入

 

そして、図が挿入されたところはこんな感じ。

 

図を挿入したところ

 

今回は、背景の黄色い部分を削除して透明にしていきます。

 

リボン部分(メニューがたくさん出ている、上の部分ね)の
【図のツール】より【図の書式】から【背景の削除】を選びます。

 

そうすると、挿入した図が、ピンクになり、囲みが表示されます。
この囲みを使って、残す画像の部分を決めていきます。

こんな感じね。

残す画像の範囲を決める

 

 

 

画像の種類によりますが、背景が薄い色の場合は、
その部分も消えてしまったりするんですね。

 

 

そういう時は、【保持する領域としてマーク】をクリックします。
鉛筆みたいなツールが表示されますので、
画像を残す範囲を、クリックしていきます。(プラスのマークがでてきますよ
そうすると、ピンクの部分から、残したい画像が見えてきます。
その部分は残りますよーっていうことです。

 

逆に細かい部分も消したい場合【削除する領域としてマーク】をクリック。
マイナスのマークがでてきて、削除しますよーということになります。
こんな感じね。

背景を透明にする作業

 

(マイナスやら、プラスやら入り混じっているでしょう。)

残したい画像が見えてきて、いい感じだわーと思ったら、
【return】キーか【Enter】キーを押します。

 

どうでしょう。

周りの背景色が消え、画像のみが残りました。

イメージ

 

 

図を指定して右クリック。

 

メニューの部分から【図として保存】を選びます。
ファイル名と保存場所は、解りやすい場所に保存するといいですね。

ポイント

ファイルを保存する時は、
ファイル形式を必ず【PNG】に変更してください。

【.png】の拡張子は、透明pngといって、背景を透明で保存してくれる拡張子です。

 

 

これで、パーツ画像の背景を透明にすることができました。

 

 

では、次に用意していたヘッダー画像にこのパーツを貼りつけていきましょう。

 

 

以前も記事で紹介した、
初心者さんでも簡単に扱える画像ソフト【Inkscape】で処理していきますね。
使い方は、こちらを参考にしてくださいね。
【ヘッダー画像に素敵なロゴを追加してみましょう。】

 

【Inkscape】を立ち上げます。

ヘッダー画像と、今作成したパーツ画像を、ドラック&ドロップで挿入していきます。
順番は、ヘッダー画像から挿入してくださいね。
(挿入した順番が、画像の表示の順番だと、考えてくださいね。)

 

 

ヘッダー画像はそのまま変更せず、パーツ画像を動かします。
パーツ画像が大きい場合は、パーツ画像を縮小してレイアウトしていってくださいね。
ついでに、ロゴも作成してみました。

 

どうですか?こんな感じに出来上がり!!

 

ヘッダー画像完成

 

 

 

美しいでしょう?

 

 

背景のあるヘッダー画像にパーツ画像を載せる場合は、
必ず、このパーツ画像の背景を透明にするという作業は、
しなければなりません。(背景が透明な画像ならしなくていいですが)

好きな画像を貼るなら、やっぱりここは、
自分で出来たほうがいいですものね。

 

 

ワードだったら、本当に簡単にできますので、
ぜひやってみてくださいね。

 

 

初心者さんでもできますので、チャレンジしてみて!!

 

 

 

このヘッダーがついているテンプレートは、

アメブロビズ2(AmebloBiz2)で作成したものです。

 

 

テンプレートデザイン・カスタマイズのこと、アクセスアップのこと、
アメブロのことならお任せあれ!

Copyright © アメブロdeアクセスアップ All Rights Reserved.